/*
Banner-Blue: #00CAE3
Light Blue: #DBE6F4
Tan: #C19081
Med-blue: #4192A7
Light-blue: #93B7FC
Ocean-green: #39B1AA
Main-Blue: #94B8FF
Mellow-Green: #86DDD7
Poolbar-peach: #FFB47E
*/

.form-enclosure {
    background-color: #DBE6F4;
    font-size: 1.5vw;
    color: #333333;
    text-align: center;
    width: 100%;
    display: inline-block;

    margin: auto;
    padding: 0px;
  }

.html-window {
    font-size: 1.2vw; 
    width: 90%; 
    height: 100%;
}

.form-title {
    background-color: #00CAE3;
    font-size: 1.5vw;
    color: #333333;
    text-align: center;
    width: 100%;
    display: inline-block;

    margin: auto;
    padding: 0px;
  }

  .form-header-row {
    width: 100%;
    text-align: left;
  }

.form-row {
    /*background-color: #eeeeee;*/
    font-size: 1.5vw;
    color: #333333;
    text-align: left;
    width: 100%;
    display: inline-block;

    margin: auto;
    padding: 3px;
  }

  .form-row-100 {
    /*background-color: #eeeeee;*/
    font-size: 11px;
    color: #333333;
    text-align: left;
    width: 100%;
    display: inline-block;
    margin: auto;
/*    padding: 2px;*/
    /*border: solid 1px #ff4433;*/
  }

  .form-row-50 {
    /*background-color: #eeeeee;*/
    font-size: 11px;
    color: #333333;
    text-align: left;
    width: 48.5%;
    display: inline-block;
    margin: auto;
/*    padding: 2px;*/
    /*border: solid 1px #ff6644;*/
  }

  .form-row-25 {
    /*background-color: #eeeeee;*/
    font-size: 11px;
    color: #333333;
    text-align: left;
    width: 24%;
    display: inline-block;
    margin: auto;
/*    padding: 2px;*/
    /*border: solid 1px #ff5533;*/
  }

  .form-row-2 {
    /*background-color: #eeeeee;*/
    font-size: 1.5vw;
    color: #333333;
    text-align: left;
    width: 30%;
    /*display: inline-block;*/

    margin: auto;
    padding: 3px;
    /*border: solid #eeeeee; 1px;*/
  }

.form-row-header {
    text-align: left;
    width: 100%;
    display: inline-block;
    margin: auto;
    padding: 10px;
    border-bottom: solid 1px;
  }

.form-row-lined {
    /*background-color: #DBE6F4;*/
    /*opacity: 0.2;*/
    /*font-size: 14px;*/
    /*color: #333333;*/
    text-align: left;
    width: 100%;
    display: inline-block;

    margin: auto;
    padding: 10px;
    border-bottom: solid 1px;
    /*max-height: 32px;*/
  }

.form-col-header {
    /*background-color: #444444;*/
    opacity: 0.8;
    font-size: 12px;
    text-decoration: underline;
    color: #ccdddd;
    text-align: left;
    width: 66%;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
  }
  .form-col-header-2 {
    /*background-color: #444444;*/
    opacity: 0.8;
    font-size: 12px;
    text-decoration: underline;
    color: #ccddd;
    text-align: left;
    width: 39%;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
  }

  .form-col-header-3 {
    /*background-color: #444444;*/
    opacity: 0.8;
    font-size: 12px;
    text-decoration: underline;
    color: #ccdddd;
    text-align: left;
    width: 29%;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
  }

  .form-col-header-4 {
    /*background-color: #444444;*/
    opacity: 0.8;
    font-size: 12px;
    text-decoration: underline;
    color: #ccdddd;
    text-align: left;
    width: 12%;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
  }

    .form-col-header-5 {
    /*background-color: #444444;*/
    opacity: 0.8;
    font-size: 1vw;
    text-decoration: underline;
    color: #ccdddd;
    text-align: left;
    width: 14%;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
  }

  .form-col-header-6 {
    /*background-color: #444444;*/
    opacity: 0.8;
    font-size: 1vw;
    text-decoration: underline;
    color: #ccdddd;
    text-align: left;
    width: 4%;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
  }

.form-col-data {
    width: 66%;
    opacity: 1;
    font-family: sans-serif;
    font-size: 24px;
    color: #00aaee;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
    vertical-align: top;
    cursor: pointer;
  }

.form-col-data:hover {
    color: #ccdddd;
}

.form-col-data-2 {
    /*background-color: #444444;*/
    opacity: 0.8;
    font-size: 14px;
    font-weight: bold;
    color: #222222;
    text-align: left;
    width: 39%;
    min-height: 16px;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
    vertical-align: top;
  }

.form-col-data-3 {
    opacity: 0.8;
    font-size: 18px; 
    color: #ddddcc; 
    font-family: monospace;
    font-weight: bold;
    text-align: left;
    width: 29%;
    min-height: 16px;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
    vertical-align: top;
}

.form-col-data-4 {
    opacity: 0.8;
    font-size: 12px; 
    color: #ddddcc; 
    font-family: monospace;
    font-weight: bold;
    text-align: left;
    width: 12%;
    min-height: 16px;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
    vertical-align: top;
}

.form-col-data-5 {
    opacity: 0.8;
    font-size: 1.2vw; 
    color: #ddddcc; 
    font-family: monospace;
    font-weight: bold;
    text-align: left;
    width: 14%;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
    vertical-align: top;
}

.form-col-data-6 {
    opacity: 0.8;
    font-size: 1.4vw; 
    color: #ddccdd; 
    font-family: monospace;
    font-weight: bold;
    text-align: left;
    width: 4%;
    display: inline-block;
    margin: auto;
    padding: 0.5%;
    vertical-align: top;
}

.form-label {
    /*background-color: #444444;*/
    /*opacity: 0.8;*/
    font-size: 12px;
    min-height: 18px;
    color: #ccddee;
    text-align: right;
    width: 20%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    vertical-align: top;
  }

  .form-label-2 {
    /*background-color: #444444;*/
    /*opacity: 0.8;*/
    font-size: 12px;
    min-height: 18px;
    color: #ccddee;
    text-align: right;
    width: 40%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    vertical-align: top;
  }

.form-label-3 {
    /*background-color: #444444;*/
    /*opacity: 0.8;*/
    font-size: 12px;
    min-height: 18px;
    color: #222222;
    text-align: right;
    float: right;
    /*width: 20%;*/
    display: inline-block;
    margin: 3px;
    padding: 3px;
    vertical-align: top;
}

.form-label-4 {
    /*background-color: #444444;*/
    /*opacity: 0.8;*/
    font-size: 12px;
    min-height: 18px;
    color: #ccddee;
    text-align: right;
    width: 11%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    vertical-align: top;
  }

  .form-label-5 {
    /*background-color: #444444;*/
    /*opacity: 0.8;*/
    font-size: 12px;
    font-style: italic;
    min-height: 18px;
    color: #ccddee;
    text-align: right;
    width: 19.5%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    vertical-align: top;
  }

  .form-label-6 {
    /*background-color: #444444;*/
    /*opacity: 0.8;*/
    font-size: 12px;
    min-height: 18px;
    color: #222222;
    text-align: right;
    width: 20%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    vertical-align: top;
  }

.form-data {
    opacity: 0.8;
    font-size: 24px;
    font-weight: bold;
    color: #222222;
    text-align: left;
    min-height: 16px;
    width: 70%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
}

.form-data-2 {
    opacity: 0.8;
    font-size: 16px;
    font-weight: bold;
    color: #222222;
    text-align: left;
    min-height: 16px;
    width: 70%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
}

.form-data-3 {
    width: 70%;
    display: inline-block;
    margin-top: 32px;
}

.form-data-4 {
    font-size: 16px;
    font-weight: bold;
    color: #94B8FF;
    text-align: left;
    min-height: 16px;
    width: 40%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
}

.form-data-5 {
    opacity: 0.8;
    font-size: 24px;
    font-weight: bold;
    color: #eeeeee;
    text-align: left;
    min-height: 16px;
    width: 70%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
}

.form-varchar-in {
    background-color: #ccdddd;
    font-size: 24px;
    color: #333333;
    text-align: left;
    width: 70%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

.form-varchar-in-2 {
    background-color: #ccdddd;
    font-size: 24px;
    color: #333333;
    text-align: left;
    width: 36%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

.form-varchar-in-3 {
    background-color: #ccdddd;
    font-size: 16px;
    color: #333333;
    text-align: left;
    width: 24%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

.form-varchar-in-4 {
    background-color: #ccdddd;
    text-align: left;
    font-size: 18px;
    width: 60%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

  .form-varchar-in-5 {
    background-color: #ccdddd;
    text-align: left;
    font-size: 18px;
    width: 77%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

.form-varchar-in-6 {
    background-color: #ccdddd;
    text-align: left;
    font-size: 18px;
    width: 38%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

  .form-varchar-in-7 {
    background-color: #ccdddd;
    text-align: left;
    font-size: 18px;
    width: 8%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

.form-varchar-in-8 {
    background-color: #ccdddd;
    text-align: left;
    font-size: 18px;
    width: 12%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

.form-varchar-in-9 {
    background-color: #ccdddd;
    font-size: 14px; 
    line-height:1.5;
    text-align: left;
    width: 77%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }



.form-text-in {
    background-color: #ccdddd;
    font-family: monospace;
    font-size: 14px;
    color: #333333;
    text-align: left;
    width: 70%;
    display: inline-block;
    min-height: 48px;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

  .form-text-in-2 {
    background-color: #ccdddd;
    font-family: monospace;
    font-size: 14px;
    color: #333333;
    text-align: left;
    width: 70%;
    display: inline-block;
    min-height: 240px;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

  .form-text-in-3 {
    background-color: #ccdddd;
    font-family: monospace;
    font-size: 14px;
    color: #333333;
    text-align: left;
    width: 70%;
    display: inline-block;
    min-height: 640px;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

.form-dialog {
    font-size: 18px;
    min-height: 18px;
    font-style: italic;
    color: #882222;
    text-align: left;
    width: 100%;
    margin: 3px;
    padding: 3px;
  }

  .form-verbiage {
    font-size: 12px;
  }

.form-hint {
    background-color: #1a16c1;
    font-size: 12px;
    font-style: italic;
    color: #333333;
    text-align: center;
    width: 100%;
    display: inline-block;
    margin: auto;
    padding: 0px;
  }

  .form-row-hint {
    /*background-color: #1a16c1;*/
    font-size: 14px;
    font-style: italic;
    color: #ccdddd;
    text-align: left;
    width: 45.5%;
    display: inline-block;
    margin: auto;
    padding: 0px;
  }

  .notification {
    font-size: 2vw;
    font-style: italic;
    color: #bbbb99;
    text-align: center;
  }

.form-button {
    padding: 5px;
    font-size: 2vw;
    font-weight: bold;
    text-decoration: none;
    background-color: #00CAE3;
    border: 3px solid #333333;
    border-radius: 8px;
    color: #222222;
    width: 160px;
    display: block;
    margin: 12px;
    text-align: center;
    margin: 2px;
    margin-right: 4vw;
    float: right;
}

.form-button:hover {
    background-color: #00B3AC;
    color: #cccccc;
    border: 3px solid #666666;
}

.form-button-1 {
    padding: 5px;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    background-color: #00CAE3;
    border: 2px solid #222222;
    border-radius: 5px;
    color: #222222;
    width: 120px;
    display: block;
    margin: 5px;
    text-align: center;
    margin: 2px;
    margin-left: 24px;
    float: left;
}

.form-button-1:hover {
    background-color: #FFB47E;
    color: #222222;
    border: 2px solid #222222;
}

.form-button-2 {
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background-color: #445555;
    border: 2px solid #222222;
    border-radius: 5px;
    color: #00cae3;
    width: 33%; 
    display: block;
    margin: 5px;
    margin-top: 18px;
    text-align: center;
    margin: 2px;
    margin-right: 24px;
    float: right;
}

.form-button-2:hover {
    background-color: #86DDD7;
    color: #666666;
    border: 5px solid #666666;
    margin-bottom: -4px;
}

.form-button-3 {
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background-color: #445555;
    border: 2px solid #222222;
    border-radius: 5px;
    color: #00cae3;
    width: 120px;
    display: block;
    margin: 5px;
    text-align: center;
    margin: 2px;
    margin-right: 24px;
    float: right;
}

.form-button-3:hover {
    background-color: #86DDD7;
    color: #666666;
    border: 5px solid #666666;
    margin-bottom: -4px;
}

.form-add-button {
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
    background-color: #00CAE3;
    color: #444444;
    border: 2px solid #222222;
    border-radius: 8px;
    box-shadow: 5px 5px 5px -4px #222222;
    -webkit-box-shadow: 5px 5px 5px -4px #222222;
    -moz-box-shadow: 5px 5px 5px -4px #222222;
    text-align: center;
    width: 60px;
    display: inline-block;
    margin: 5px;
    margin-right: 5px;
    float: left;
}

.form-add-button:hover {
    background-color: #333333;
    color: #999999;
    border: 2px solid #333333;
}

.form-del-button {
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    background-color: #884444;
    color: #999999;
    border: 2px solid #444444;
    border-radius: 4px;
    width: 80px;
    display: block;
    margin: 12px;
    text-align: center;
    margin-left: 180px;
    margin-right: auto;
    float: left;
  }
.form-del-button:hover {
    background-color: #cc5555;
    color: #dddd44;
    border: 2px solid #dddd44;
}

.form-search-in {
    background-color: #ccdddd;
    font-size: 14px;
    color: #333333;
    text-align: left;
    width: 18%;
    display: inline-block;

    margin: 5px;
    margin-left: 58%;
    padding: 3px;
    border-radius: 4px;
}

/*Med-blue: #4192A7
Light-blue: #93B7FC
Ocean-green: #39B1AA
Teal: #4192A7;
Main-Blue: #94B8FF
Mellow-Green: #86DDD7*/


.form-search-button {
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
    background-color: #39B1AA;
    border: 2px solid #86DDD7;
    color: #222222;
    border-radius: 4px;
    text-align: center;
    width: 80px;
    display: inline-block;
    margin: 5px;
    margin-right: 2%;
    float: right;
}

.form-search-button:hover {
    background-color: #C19081;
    border: 2px solid #4192A7;
    color: #44dd44;
}

.admin-home {
    padding: 1vw;
}
.admin-home {

}

.login-wrapper {
    width: 80%;
}

.login-row {
    width: 100%;
    float: left;
}

.logout-button {
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background-color: #FFB47E;
    border: 3px solid #333333;
    border-radius: 8px;
    color: #222222;
    width: 120px;
    display: block;
    margin: 12px;
    text-align: center;
    margin: 2px;
    margin-right: 2vw;
    float: right;
}

.login-label {
    color: #C19081;
    font-size: 2vw;
    width: 32%;
    display: inline-block;
    text-align: right;
}
.login-input {
    background-color: #ccdddd;
    font-size: 24px;
    color: #333333;
    text-align: left;
    width: 24%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
}
.login-button {
    padding: 5px;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    background-color: #94B8FF;
    border: 3px solid #333333;
    border-radius: 8px;
    color: #222222;
    width: 160px;
    display: block;
    margin: 12px;
    text-align: center;
    margin: 2px;
    margin-right: 4vw;
    float: right;
}
.login-button:hover {
    background-color: #00CAE3;
    border: 3px solid #222222;
}

.ch-passwd-row {
    width: 80%;
    text-align: right;
    float: right;
    margin-top:1%;
}
.change-pw-button {
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background-color: #C19081;
    border: 3px solid #333333;
    border-radius: 8px;
    color: #222222;
    width: 120px;
    display: block;
    margin: 12px;
    text-align: center;
    margin: 2px;
    margin-right: 4vw;
    float: right;
}
.err-msg {
    color: #C19081;
    font-size: 2vw;
    font-style: italic;
}

.edit-menu-title {
    color: #00CAE3;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    float: left;
}

.edit-menu-label {
    font-size: 16px;
    color: #eeeeee;
    text-align: left;
    display: inline-block;
}

.edit-menu-list {
    color: #C19081;
    font-size: 24px;
    font-weight: bold;
}

.spacer-01 {
    display: inline-block;
    width: 70%;
}

.edit-msg {
    color: #ee22cc;
    font-size: 18px;
    float: left;
    margin-left: 10%;
}

.admin-link {
    font-size: 1vw;
    color: #ddddcc;
    padding-left: 10px;
}

/*Start media queries*/
/*Small*/
@media (max-width: 480px) {
  /*Small styles here*/

  .form-varchar-in-7 {
    background-color: #ccdddd;
    text-align: left;
    font-size: 18px;
    width: 32%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

.form-button-2 {
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background-color: #445555;
    border: 2px solid #222222;
    border-radius: 5px;
    color: #00cae3;
    width: 66%; 
    display: block;
    margin: 5px;
    margin-top: 18px;
    text-align: center;
    margin: 2px;
    margin-right: 24px;
    float: right;
}

.form-button-2:hover {
    background-color: #86DDD7;
    color: #666666;
    border: 5px solid #666666;
    margin-bottom: -4px;
}

}

/*Medium*/
@media (min-width: 481px) and (max-width: 768px) {
  /*medium styles here*/

  .form-varchar-in-7 {
    background-color: #ccdddd;
    text-align: left;
    font-size: 18px;
    width: 32%;
    display: inline-block;
    margin: 3px;
    padding: 3px;
    border-radius: 4px;
  }

.form-button-2 {
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    background-color: #445555;
    border: 2px solid #222222;
    border-radius: 5px;
    color: #00cae3;
    width: 66%; 
    display: block;
    margin: 5px;
    margin-top: 18px;
    text-align: center;
    margin: 2px;
    margin-right: 24px;
    float: right;
}

.form-button-2:hover {
    background-color: #86DDD7;
    color: #666666;
    border: 5px solid #666666;
    margin-bottom: -4px;
}

}

/*Large*/
@media (min-width: 769px)  {
  /*Large styles here*/

}