/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/
input {
    font-family: "Arial";
    font-size: 0.9rem;
}

input:focus, textarea:focus, select:focus{
    outline-color: blue;
}
body {
    margin: 0rem;
}
body, header, menu {
    font-family: "Arial";
}
#page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}
header {
    margin: 0rem;
    background: url('../images/gc-blue.jpg');
    height: 4.7rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
header img {
    padding: 0.75rem 0.4rem 0.75rem 1.9rem;
    height: 67%;
}
footer {
    position: fixed;
    bottom: 0;
    background-color: rgb(223, 235, 255);
    height: 1.7rem;
    width: 100%;
    font-size: 0.8rem;
    color: #777777;
    margin-bottom: 0rem;
    padding-top: 0.4rem;
    text-align: center;
}
footer img {
    width: 4.375rem;
    margin: 0.1rem 0rem -0.22rem;
}
main {
    padding-bottom: 3rem;
    height: auto;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-right: 1rem;
}
object {
    width: auto;
    height: 3rem;
    -ms-overflow-style: none;
}
menu::-webkit-scrollbar {
    display: none;
}
menu {
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    flex-wrap: nowrap;
    scrollbar-width: none;
    background-color: #323E4F;
    height: 1.3rem;
    padding: 0rem 0rem 0rem 1.3rem;
    margin-bottom: 2rem;
    -webkit-margin-before: 0;
    margin-block-start: 0;
}
menu space {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
drop, drop2 {
    display: inline-block;
    position: relative;
}
dropContent, dropContent2 {
    display: none;
    position: absolute;
    padding: 0.6rem 1rem 0.6rem 0.3rem;
    background-color: #323E4F;
    min-width: 10rem;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
dropContent2 {
    margin-top: -1.8rem;
    margin-left: 5rem;
}
dropContent a, dropContent2 a {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    display: block !important;
}
drop:hover dropContent {
    display: block;
}
drop2:hover dropContent2 {
    display: block;
}
#login {
    background-color: #16f !important;
    color: white !important;
}
menu a {
    display: inline-block;
    font-size: 0.95rem;
    color: #EEEEEE;
    text-align: left;
    padding: 0.1rem 0.9rem 0rem 0.9rem;
    text-decoration: none;
}
menu a:invalid {
    color: red;
}
menu a:hover {
    color: yellow;
    background-color: black;
    font-weight: bold;
}
menu .active {
    color: white;
    background-color: rgb(100, 100, 100);
}
#introduction {
    display: flex;
    max-width: 100%;
    flex: 1 1 60%;
    margin-right: 3%;
}
#introText {
    max-width: 100%;
    order: 1;
}
.token-autocomplete-container {
    width: 100%;
} 
#applyCamSearch {
    width: 100%; 
    margin-top: 0.1rem; 
    padding-bottom: 0.13rem; 
    padding-top: 0.22rem    
}
.messageBox {
    max-width: 90%;
    font-size: 1rem;
    background-color: rgb(3, 80, 152);
    margin: 2.5rem 5% 2rem 2rem;
    padding: 0.6rem 5% 0.6rem 5%;
    border: 0.1rem solid blue;
    color: white;
    text-align: center;
}
#introImage {
    display: block;
    order: 2;
    max-width: 40%;
    max-height: 90%;
    margin: 0rem auto;
    float: right;
    object-fit: cover;
}
h1 {
    margin: 0rem 1rem 0.3rem 1.55rem;
    font-size: 1.3rem;
}
h2 {
    margin: 0rem 0rem 0.3rem 1.75rem;
    font-size: 1.1rem;
}
p {
    margin: 0rem 2rem 0.3rem 2rem;
    font-size: 1rem;
}
ps {
    margin: 0rem 2rem 0.3rem 2rem;
    font-size: 0.8rem;
}
.kwTable  {
    margin: 0rem 2rem 0.3rem 2rem;
    font-size: 0.9rem;
}
.kwTable * {
    text-align: center;
    padding: 0rem 0.3rem;
}
.kwAttribute {
    text-align: center;   
}

label #userName #userEmail #userAccount {
    font-size: 0.9rem;
}
.level1 {
    padding: 0.3rem 1% 0rem 1rem;
    text-indent: -1rem;
}
.level1t {
    padding: 0rem 1% 0rem 1rem;
}
.level2 {
    padding: 0 1% 0 2rem;
    text-indent: -1rem;
}
.level2t {
    padding: 0rem 1% 0rem 2rem;
}
.level3 {
    padding: 0 1% 0 3rem;
    text-indent: -1rem;
}
.level3t {
    padding: 0rem 1% 0rem 3rem;
}
half {
    line-height: 0.5rem;
}
ul {
    list-style-type: disc;
    font-size: 1rem;
    margin: 0;
    padding: 0rem 3rem 0.3rem 3rem;
    overflow: hidden;
}
#addDevice {
    margin-left: 2rem;
}
#userParameters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: flex-start, space-between;
    margin: 0;
    padding: 0;
}
.acctData {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 50%;
}
#acctDataLeft {
    width: 36%;
}
#acctDataRight {
    width: 64%;
}
#devices,
#userAcctInfo {
    overflow-x: auto;
    margin-left: 2rem;
    border: 1px solid lightgray;
}
#devices {
    margin-right: 3%;
}
table {
    width:100%;
}
.nickname {
    font-size: 1rem;
    min-width: 20rem;
    border: 0.5px solid #DDDDDD;
}
#userAcctInfo tr td {
    font-size: 1rem;
    padding: 0.3rem 0.67rem;
}
#devices tr td {
    font-size: 1rem;
    padding: 0.3rem 3rem 0.3rem 0.67rem;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0;
    padding: 0;
}
.flexDescr {
    max-width: 25%;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.flexCams {
    width: 75%;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    -webkit-box-flex: 4;
    -ms-flex: 4 0 auto;
    flex: 4 0 auto;
}
#cameras {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.tile {
    display: inline-block;
    vertical-align: top;
    font-size: 0.8rem;
    text-align: left;
    padding: 0.1rem;
    margin: 0.25rem 0.1rem;
    width: 14.8rem;
}
img.mini {
    width: 14.22rem;
    height: 9rem;
    -o-object-fit: cover;
    object-fit: cover;
    cursor: pointer;
}
imgTitle {
    height: fit-content;
    padding-right: 0.2rem;
    overflow: hidden;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
   -webkit-box-orient: vertical;
}
buttons, #ibuttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    justify-content: space-around;
    width: 97%;
}
buttons space {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
label {
    display: inline-block;
    width: 5rem;
    text-align: left;
}
warning {
    display: none;
}
#outerLightBox {
    background-color: #00000070;
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}
#innerLightBox {
    display: flex;
    flex-wrap: wrap;
    background-color: #f0f0f8;
    flex: 1 0 70%;
    width: 70%;
    max-height: 90%;
    position: static;
    margin: 2% auto;
    padding: 1.25rem;
    top: 4rem;
    overflow: auto;
    z-index: 1001;
    text-align: left;
    box-shadow: 0.5rem 0.5rem 0.5rem rgba(34, 25, 25, 0.4);
}
#webcamSettings {
    width: 100%;
}
fieldset {
    border: 0.12rem solid #999999;
    font-family: inherit;
    font-size: 0.9rem;
}
fieldset legend {
    color: white;
    background-color: rgb(3, 80, 152);
    padding: 0.2rem 0.8rem;
}
fieldset label {
    width: 9rem;
}
fieldset .token-autocomplete-container {
    min-height: 1rem;
    width: 80%;
}
fieldset input, textarea, select {
    border: 1px solid #cccccc;
    background-color: aliceblue;
    font-family: monospace;
    vertical-align: middle;
    margin: 0.1rem 0rem;
    padding: 1px 2px;
    color: black;
    width: 79.5%;
}
fieldset textarea[id=camDescription] {
    height: 2rem;
    color: black;
}
fieldset input:disabled, textarea:disabled {
    color: #666666;
}fieldset #camKeywords {
    font-family: monospace;
    width: 78%;
}
fieldset select, input[id=camLatLong] {
    width: 50%;
}
select[disabled] > option {
    color: #666666;
}
#signinBox {
    width:21rem; 
    margin:3rem auto; 
    background-color:white; 
    box-shadow:5px 5px 5px #444444;
}
#signinHeader {
    width:21rem; 
    background-color:black; 
    border:none;
}
#signinImg {
    width:14rem; 
    padding:0.85rem 4rem;
}
input.signinField {
    font-size:1rem; 
    color:black;
    background-color:#fafafa; 
    height:2rem; 
    width:19rem; 
    margin:0.2rem 0.2rem; 
}
.signinFieldset {
    background-color:white; 
    border:none;
}
.signinLabel, .signinText {
    margin:0rem 0.2rem; 
}
#forgotPassword {
    font-size:0.9rem;  
    margin:0rem 0.2rem; 
    text-decoration:none;
}
#forgotPassword:hover {
    color:darkblue;  
    text-decoration:underline;
}
#signinButton {
    height:2.5rem; 
    font-size: 1rem;
    text-align:center; 
    width:19rem; 
    margin:0.3rem 0.2rem; 
    border:none;
    padding:0; 
    color:white; 
    background-color:#337ab7;
}
#signinButton:hover {
    background-color:#286090;
}
#whyTZ, #whyTB, #howLatLong {
    float: right;
    padding: 0.2rem 4% 0rem 0rem;       
}
::placeholder, :default {
    color: blue;
}
#webcamDisplay {
    display: flex;
    flex: 0 1 100%;
    flex-wrap: wrap;
    height: 50%;
}
#imageContainer {
    display: flex;
    flex-direction: row;
    order: 1;
    width: 45%;
    margin: 0.7rem 0.15rem;
}
#imageDisplay {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
#imageOverlay {
    position: relative;
    top: 2%;
    left: -20%;
    height: 1.3rem;
    width:auto;
    font-size: 0.9rem;
    white-space: nowrap;
}
select[id=camImageOverlayTextType] {
    appearance: none;
    font-family:"Arial";
    text-align: center;
    width:fit-content;
    background-color: #000000c0;
    color: white;
    padding: 0.2rem 0.2rem;
    border: none;
}
#imageText {
    align-self: center;
    flex: 0 1 45%;
    max-width: 50%;
    order: 2;
    font-size: 0.9rem;
}
.imageTextButtons {
    display: inline-block;
    flex: 1 0 45%;
    width: 50%;
    order: 4;
    font-size: 0.9rem;
    box-align: center;
    padding: 0.2rem 0.2rem 0.3rem;
    color: rgb(3, 20, 230);
    border-width: 1px;
    border-radius: 0.25rem;
    background-color: aliceblue;
}
#selectionItems {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 100%;
}
#specialOffer {
    display: flex;
    order: 6;
    max-width: 46%;
    float: left;
    clear: none;
    background-color: rgb(3, 80, 152);
    border: 0.1rem solid blue;
    font-size: 0.9rem;
    color: white;
    margin: 0.5rem 0rem 0rem 0.2rem;
}
#specialOfferText {
    display: flex;
    order: 7;
    max-width: 90%;
    text-align: left;
    padding: 1.1rem 2%;
}
#ynButtons {
    order: 8;
    max-width: 30%;
    padding: 0.5rem;
    margin: 0.5rem 1rem 0rem auto;
    list-style: none;
    display: flex;
}
#ynButtons input[type=radio] {
    margin: 0.2rem 0.4rem 0.2rem 1rem;
    padding: 0.5rem;
    color: red;
}
#ynButtons input[type=radio]:checked {
    color: magenta;
}
#ynButtons input[type=radio]:disabled {
    color: green;
}
#exitButtons {
    display: flex;
    max-width: 100%;
    order: 9;
    align-items: stretch;
    justify-content: space-around;
    margin: 0.25rem auto 0rem;
}
#save, #close, #unhide, #duplicate, #delete, #stash {
    font-size: 1rem;
    color: rgb(3, 20, 230);
    background-color: aliceblue;
    border-width: 1px;
    border-radius: 0.25rem;
    margin-top: 0.3rem;
    margin-left: 1rem;
    padding: 0.8rem 0.8rem;
}
#faqs, 
#tips {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
}
#faqsImageContainer,
#tipsImageContainer {
    display: flex;
    flex: 1 1 25%;
    order: 2;
    max-width: 30%;
    max-height: 25%;
    margin: 1.5rem 3% auto auto;
    float: right;
}
#faqsImage,
#tipsImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#faqsText, 
#tipsText {
    flex: 1 1 70%;
    order: 1;
    max-width: 70%;
}
.question .faq, 
.question .tip {
    font-size: 1rem;
    font-weight: bold;
}
.question label {
    width: auto;
    padding: 0.5rem 1% 0.2rem 1rem;
    cursor: pointer;
}
.question label:hover,
.question label:focus {
    font-style: italic;
    color: #0044ee;
}
.question .answer {
    width: 85%;
    font-size: 0.9rem;
    line-height: 1.2;
    background: #1166ff22;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s;
    margin: -0.5rem 2rem 0rem 4rem;
    padding: 0.1rem 2rem 0rem 2rem;
}
.question>input[name="collapse"] {
    display: none;
}
.question>input[name="collapse"]:checked~.answer {
    max-height: 30rem;
    transition: max-height 0.4s;
}
.question .faq label:before , 
.question .tip label:before {
    content: url(../images/chevron.png);
    display: inline-block;
    margin-right: 0.7rem;
    vertical-align: middle;
    transition: 0.2s;
}
.question>input[name="collapse"]:checked~.faq label:before {
    transform: rotate(90deg);
    transform-origin: center;
    transition: 0.2s;
}
.question>input[name="collapse"]:checked~.tip label:before {
    transform: rotate(90deg);
    transform-origin: center;
    transition: 0.2s;
}
@media only screen and (max-width: 1100px) {
    body {
        font-size: 0.9rem;
    }
    #main {
        margin-right: 0%; 
    }
    .flexDescr {
        max-width: 100%;
        margin-bottom: -2rem;
    }
    .flexCams {
        max-width: 100%;
        margin-left: 1.75rem;
    }
    #introduction, #userParameters{
        flex-wrap: wrap;
        max-width: 100%;
        margin-right: 0%;
    }
    #innerLightBox, #acctDataLeft, #acctDataRight, #introText, #introImage {
        width: 100%;
    }
    fieldset select {
        width: 40%;
    }
    #acctDataLeft, #acctDataRight {
        margin: 1rem 1%;
    }
    #introImage {
        max-width: 90%;
    }        
    #userAcctInfo, #devices {
        font-size: 0.9rem;
        margin: 0.2rem 4%;
    }
    #introText {
        margin: 0%;
    }
    #webcamDisplay {
        flex-wrap: wrap;
        max-width: 100%;
        width:100%;
    }
    #imageContainer, #imageText, #exitButtons {
        max-width: 100%;
        width:100%;
    }
    #whyTZ, #whyTB, #howLatLong {
        padding: 0.2rem 2% 0rem 0rem;       
    }
    #save, #close, #unhide, #duplicate, #delete, #stash {
        margin-left: 0.2rem;
        padding: 0.8rem 0.2rem;
    }
    #ynButtons input[type=radio] {
        margin: 0.2rem 0.2rem 0.2rem 0.3rem;
        padding: 0.5rem;
    }
}