body{
    padding:0px;
    margin:0px;
    font-family:Arial;
    height:100%;
    background-image: linear-gradient(to bottom left, rgba(13, 130, 233, 0.75), rgba(0, 0, 0, .93)), url("sample.png");
}


.success{
    background-color:#b6f4c1;
    border:1px solid #91f6a3;
    padding:8px;
    position:relative;
    width:200px;
    margin:5px;
    font-size:.8em;
    border-radius:5px;
    display:none;
    text-align: center;
    margin: auto;
    margin-top: 15px;
}
.error{
    background-color:#fbe3e4;
    border:1px solid #fbc2c4;
    padding:8px;
    position:relative;
    color:#8a1f11;
    width:200px;
    margin:5px;
    font-size:.8em;
    border-radius:5px;
    display:none;
    text-align: center;
    margin: auto;
    margin-top: 15px;
}

#top{
    height:10%;
}

.credential_container{
    margin:auto;
    width: 1090px;
}
.vid_container{
    /*height:395px;*/
    height:455px;
    /*width:665px;*/
    width:766px;
    background-color:white;
    border: 1px solid black;
    box-shadow: 2px 2px #444;
    float: left;
    margin-left: 20px;
    box-sizing: border-box;
    background-image: linear-gradient(to bottom left, rgba(255, 255, 255, 1), rgba(235, 235, 235, 1));
}
.vid{
    /* height:355px; symmetrical value*/
    /*
    height:351px;
    width:625;
    */
    height:404px;
    width:720px;
    top:25px;
    left:23px;
    position: relative;
    border:1px solid black;
    background-color: black;
}
#banner{
    background-image: linear-gradient(to top right, rgba(255, 255, 255, 1), rgba(235, 235, 235, 1));
    border-bottom:1px solid black;
    box-shadow:1px 1px #444;
}
a.landing_page_section {
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */
}
.landing_page_section{
    padding:20px;
    padding-top:10px;
    padding-bottom:10px;
    cursor:pointer;
    display: inline-block;
}
.landing_page_section:hover{
    background-image: linear-gradient(to right, rgba(235, 235, 235, 1), rgba(215, 215, 215, 1));
}

.center_banner{
    margin:auto;
    width:795px;
    display:flex;
    align-items: center;
    justify-content: center;
    height:40px
}
.main{
    /*margin:auto;*/
    float: left;
    display:none;
    width:300px;
    font-size:.85em;
    
    background-color: white;
    background-image: linear-gradient(to bottom left, rgba(255, 255, 255, 1), rgba(235, 235, 235, 1));
    padding-top: 20px;
    border: 1px solid black;
    box-shadow: 2px 2px #444;
}

.form{
    margin:8px;
    padding:20px;
    height:360px;
}
.prompt{
    font-weight:700;
    height:20px;
    width:240px;
    margin:-1px;
    margin-left:26px;
    cursor:default;
    color:#0d82df;
}

input{
    padding:1px;
    margin-bottom:5px;
    width:242px;
    border-left:0;
    border-right:0;
    border-top:0;
    font-size: .85em;
}
select{
    font-size: .85em;
}
input[type="submit"]{
    width:242px;
    padding:2px;
    padding-top:4px;
    padding-bottom:4px;
    background-color:#0d82df;
    margin-top:10px;
    margin-bottom:30px;
    border-left:0;
    border-right:0;
    border-top:0;
    cursor:pointer;
    color:white;
    font-family:Verdana;
}
input[type='checkbox']{
    width:auto;
}
input[type='radio']{
    width:auto;
}
input:-webkit-autofill{
    padding: 1px;
    margin-bottom: 5px;
    width: 242px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    font-size: .85em !important;
}
button, input:focus{
    outline: none;
}

input::placeholder{
    font-family:Verdana;
}

.hidden{
    display:none;
}

.change_mode{
    text-align:center;
    color:#4169E1;
    font-size:.7em;
    cursor:pointer;
    margin-bottom:2px;
    opacity:.5;
}
.change_mode:hover{
    text-decoration:underline;
    opacity:.8;
}

.label{
    font-size:.7em;
    color:#AAA;
    cursor:default;
    font-family:Verdana;
    float:left;
    margin-left:-2px;
}
.pad{
    white-space:pre-wrap;
    cursor:default;
    font-size:1.1em;
    color:red;
    text-align:center;
}

.spec{
    font-size: .7em;
    margin-bottom:2px;
    float:right;
    color:#666;
    padding:2px;
}
.title{
    width:200px;
    float:right;
    margin:20px;
}
.contact{
    text-align:center;
    bottom:20px;
    position:absolute;
    width:100%;
    white-space:pre;
    font-size:.8em;
}
.UserManual{
    text-align: center;
    bottom: 80px;
    position: absolute;
    width: 100%;
    white-space: pre;
    font-size: .8em;
}

.hidden_input{
    display:none;
}

@media (max-width: 1100px) {
    .vid_container{
        display:none;
    }
    .credential_container{
        width:285px;
    }
}

@media (max-width: 1100px) {
    
    
}

@media (max-width: 850px) {
    .center_banner{
        width:640px;
        
    }
    .landing_page_section_issues{
        display:none;
    }
}
@media (max-width: 720px) {
    .center_banner{
        width:510px;
        
    }
    .landing_page_section_patch{
        display:none;
    }
}
@media (max-width: 560px) {
    .center_banner{
        width:425px;
        
    }
    .landing_page_section_feedback{
        display:none;
    }
}
@media (max-width: 459px) {
    .center_banner{
        width:315px;
        
    }
    .landing_page_section_forum{
        display:none;
    }
}

@media (max-width: 459px) {
    .center_banner{
        width:315px;
        
    }
    .landing_page_section_forum{
        display:none;
    }
}

@media (max-height:600px){
    #top{
        height:15%;
    }
}
@media (max-height:400px){
    #top{
        height:20%;
    }
}