/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     display: block;
}
 body {
     line-height: 1;
}
 ol, ul {
     list-style: none;
}
 blockquote, q {
     quotes: none;
}
 blockquote:before, blockquote:after, q:before, q:after {
     content: '';
     content: none;
}
 table {
     border-collapse: collapse;
     border-spacing: 0;
}

 *, *:after, *:before {
     box-sizing: border-box;
}    
 
 
 body{ 
    font: 1.5rem; 
    font-family: roboto, sans-serif;
    background:#f8f9f9;
}
 input[type=text], input[type=button] {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius:0;
    -moz-appearance: none;
    appearance: none;
    opacity: 1;
}    
 
 
 
 
#droplistContainer{
    width:90%;
    max-width:450px;
    margin:auto;
    margin-top:5rem;
}  
.custom-select-wrapper {
     position: relative;
     user-select: none;
     height:4rem;
     width: 100%;
     margin:auto;
     margin-bottom:2rem;
     box-sizing: border-box;

}
 /*.custom-select {
     position: relative;
     display: flex;
     flex-direction: column;
    // border-width: 12px 12px 0 2px;
     border-style: solid;
     border-color: red; //#394a6d;
     border-radius:5px;
}*/

/*main dropbox*/
 .custom-select__trigger {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-left:10px;
     padding-right:10px;
     font-size: 2rem;
     height:4rem;
     /*font-weight: 300;*/
     color: grey;
     /*line-height: 60px;*/
     background: #ffffff;
     cursor: pointer;
     border-width: 1px;
     border-style: solid;
     border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2);
     border-radius:5px;
}
 .custom-options {
     position: absolute;
     display: block;
     top: 102%;
     left: 0;
     right: 0;
     border: 12px solid #394a6d;
     border-radius:5px;
     border-top: 0;
     background: #fff;
     transition: all 0.5s;
     opacity: 0;
     visibility: hidden;
     display:none;
     pointer-events: none;
     z-index: 2;
}
 .custom-select.open .custom-options {
     opacity: 1;
     visibility: visible;
     display:block;
     pointer-events: all;
}
 .custom-option {
     position: relative;
     display: block;
     padding: 0 22px 0 22px;
     font-size: 22px;
     font-weight: 300;
     color: grey;
     line-height: 60px;
     cursor: pointer;
     transition: all 0.3s;
     border-width:1px;
     border-style: solid;
     border-color:rgba(0, 0, 0, 0.0) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
}
 .custom-option:hover {
     cursor: pointer;
     background-color: #b2b2b2;
}
 .custom-option.selected {
     color: #ffffff;
     background-color: #9BB7D4;
}     
.arrow {
     position: relative;
     height: 15px;
     width: 15px;
}
 .arrow::before, .arrow::after {
     content: "";
     position: absolute;
     bottom: 0px;
     width: 0.15rem;
     height: 100%;
     transition: all 0.5s;
}
 .arrow::before {
     left: 5px;
     transform: rotate(45deg);
     background-color: #394a6d;
}
 .arrow::after {
     left: -5px;
     transform: rotate(-45deg);
     background-color: #394a6d;
}
 .open .arrow::before {
     left: 5px;
     transform: rotate(-45deg);
}
 .open .arrow::after {
     left: -5px;
     transform: rotate(45deg);
}   


#title{
    color:red;
    font-size:3rem;
    font-weight:bold;
    margin-top:8rem;
}
#subtitle{
    font-size:2rem;
    font-weight:bold;
    margin-top:2rem;
}
#instruction{
    font-size:1rem;
    margin-top:3rem;
    margin-bottom:4rem;
}
#container{
    margin:auto;
    width:90%;
    text-align:center;
    max-width:800px;
}
/*#title{
    margin-top:200px;
    color:#ed341d;
    font-weight:bold;
}*/
        
#password{
    width:100%;
    font-size:2rem;
    height:4rem;
    margin-top:0px;
    padding-left:10px;
    border-radius:5px;
    border:solid 1px grey;
    border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
} 
        
.submitButton{
    width:100%;
    max-width:450px;
    height:4rem;
    background-color:DodgerBlue;
    margin-top:20px;
    border-radius:5px;
    border-width:0;
    color:white;
    font-size:2rem;
}

.submitButton:hover{
    font-size:2.2rem;
}
        
.boxBorder{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:4rem;
    border:solid 1px red;
    border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    border-radius:5px;
    pointer-events: none;
}
        

        
.invalid{                   /*invalid inputBox*/
    border-color:red;
}
        
.error{                     /*inputBox error message*/
    color:red;
    text-align:left;
}

.warning{                   /*invalid credentials warning message*/
    color:red;
}
.label{
    text-align:left;
    color:grey;
} 
    
@media screen and (max-width: 800px) { 
        
/*.boxBorder{
    height:4rem;
}*/
#title{
    font-size:2rem;
    margin-top:2rem;
}
#password{
    width:100%;
    font-size:2rem;
    height:4rem;
}

.submitButton{
    width:80%;
    font-size:2rem;
    height:4rem;
}

/*.select-items div,.select-selected {
    height:4rem;
}*/


body{ 
    font-size: 1rem;
}
        
}