/* GENERAL SITE SPECS ================================================================ */
* {
    margin: 0px;
    padding: 0px;
    font-family: Veranda, Geneva, sans-serif !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
}

html {
   width:100%;
    height:100%;
    margin: 0;
    padding: 0;
}

body {
    width:100%;
    height: 100%;
    padding:0;
    margin-top:1.5em;
    background: #cccccc;
    background-image: url("p_backg.png");
}

/* LESSON PAGE ================================================================ */
.login_page_container {
    width: 50%;
    margin: auto;
    border: 1px solid #b2b2b2;
/*    height: 75%;*/
    padding-bottom: 8em;
    background: #fff;
    background-image: url("VVR_back.png");
    background-repeat: no-repeat;
/*    background-position: center;
    background-attachment: fixed;*/
    background-position: right bottom;
}

.main_page_container {
    width: 70%;
    margin: auto;
    padding-bottom: 2em;
    border: 1px solid #b2b2b2;
    background: #fff;
    background-image: url("VVR_back.png");
    background-repeat: no-repeat;
    background-position: right bottom;
/*    background-attachment: fixed;*/
}


/* GRID HEADER ============================================================== */
.grid {

}

[class*='col-'] {
  float: left;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  padding-right: 15px;
}

/*[class*='col-']:last-of-type {
  padding-right: 0;
}*/

.grid-pad {
/*  padding: 20px 0 20px 20px;*/
/*  padding: 20px;
  width: 80%;*/
}

/*.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
}*/

/*.col-2-3 {
  width: 33.33%;
}

.col-1-3 {
  width: 66.66%;
}*/

.col-6-0 {
  width: 60%;
}

.col-4-0 {
  width: 40%;
}

.col-1-5 {
  width: 15%;
}

.col-5-5 {
  width: 55%;
}

.col-3-0 {
  width: 30%;
}

.login_header_logo_img {
    width:100%;
    height: auto;
    display: block;
}

.login_header_msg {
    background-color: #1a82f7;
    background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#0f63c3));
    background: -webkit-linear-gradient(left, #ffffff, #0f63c3);
    background: -moz-linear-gradient(left, #ffffff, #0f63c3);
    background: -ms-linear-gradient(left, #ffffff, #0f63c3);
    background: -o-linear-gradient(left, #ffffff, #0f63c3); /*#1a82f7*/
}

.main_header_msg {
    background-color: #1a82f7;
    background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#0f63c3));
    background: -webkit-linear-gradient(left, #ffffff, #0f63c3);
    background: -moz-linear-gradient(left, #ffffff, #0f63c3);
    background: -ms-linear-gradient(left, #ffffff, #0f63c3);
    background: -o-linear-gradient(left, #ffffff, #0f63c3);
}

.login_header_topic p {
    font-size: 2.5em;
    font-weight: bold;
    color:#0f63c3;
    text-shadow:  1px 1px 1px #ACB4B8;
    padding-left: 1em;
    padding-top: 0.6em;
}

.main_header_topic p {
    font-size: 2.25em;
    font-weight: bold;
    color:#0f63c3; /*#0f63c3*/
    text-shadow:  1px 1px 1px #ACB4B8;
    padding-left: 0.6em;
    padding-top: 0.2em;
}

.login_header_msg p {
    font-size: 1em;
    color: #fff;
    padding: 0.3em;
    text-align: right;
}

.main_header_msg p {
    font-size: 1em;
    color: #000;
    padding: 0.9em 0.2em;
    text-align: right;
}

.main_header_msg a {
   font-size: 0.95em;
   text-decoration: none;
   padding: 0.4em 0.6em;
   border-radius: 3px;
   color: #fff;
   box-shadow: inset 0 0 3px #174f8e;
   -moz-box-shadow: inset 0 0 3px #174f8e;
   -webkit-box-shadow: inset 0 0 3px #174f8e;
   border: .1em solid #1a589e !important;
}

.main_header_msg a:focus,
.main_header_msg a:hover,
.main_header_msg a:active {
    background: #6fa1db;
    outline: none !important;
}

/* FORM LAYOUT *******************************************************************/
.login_form_container {
    margin-left:auto;
    margin-right:auto;
    padding-top: 3em;
    width: 60%;
}

.main_form_container {
    margin-left:auto;
    margin-right:auto;
    padding-top: 2em;
    width: 90%;
}

.blue_theme {
    margin-left:auto;
    margin-right:auto;
    background: #fff;
    border:1px solid #b7cde6;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

.login_specs {
   opacity: 0.9;
   padding: 2.5em 2.5em;
}

.main_specs {
    padding: 1.8em 2em 2.2em 2em;
}

.blue_theme label {
    display: block;
    color: #123d6e;
    margin-bottom: 0.5em;
    font-size: 1em;
}

.blue_theme input[type="text"],
.blue_theme input[type="password"],
.company_search {
    border: 1px solid #bacce1;
    background: #e8f2fe;
    color: #081d46 !important;
    height: 2em!important;
    margin-bottom: 1em;
    outline: 0 none;
    padding: 0 0.4em 0 0.4em !important;
    width: 100%;
    font-size: 0.9em !important;
    box-shadow: inset 1px 1px 2px 0 #94a3b4 !important;
    -moz-box-shadow: inset 1px 1px 2px 0 #94a3b4 !important;
    -webkit-box-shadow: inset 1px 1px 2px 0 #94a3b4 !important;
}

.company_search_label {
    font-size: 1em !important;
    font-style: normal !important;
    color: #123d6e !important;
    margin-bottom: 0.5em !important;
    display: block !important;
}

.blue_theme input[type="text"]:focus,
.blue_theme input[type="password"]:focus,
.company_search:focus {
   background: #fff;
   box-shadow: inset 1px 1px 2px 0 #bacce1 !important;
   -moz-box-shadow: inset 1px 1px 2px 0 #bacce1 !important;
   -webkit-box-shadow: inset 1px 1px 2px 0 #bacce1 !important;
}

.blue_theme select {
    border: 1px solid #bacce1;
    background: #e8f2fe;
    color: #081d46;
    font-size: 1em !important;
    padding: 0.3em;
    box-shadow: inset 1px 1px 2px 0 #95a195 !important;
    -moz-box-shadow: inset 1px 1px 2px 0 #95a195 !important;
    -webkit-box-shadow: inset 1px 1px 2px 0 #95a195 !important;
    margin-bottom: 1em;

}

.blue_theme option {
    font-size: 1em !important;
}

.blue_theme select:focus {
    background: #fff !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: inset 1px 1px 2px 0 #bacce1 !important;
   -moz-box-shadow: inset 1px 1px 2px 0 #bacce1 !important;
   -webkit-box-shadow: inset 1px 1px 2px 0 #bacce1 !important;
}

.blue_theme option:not(:checked),
.blue_theme select:focus,
.blue_theme select:hover,
.blue_theme select:active {
    background: #fff !important;
    outline: none !important;
}

.main_time_info {
    padding: 0 0 1em 0;
    font-size: 1em;
    font-weight: bold;
    color: #ffa500;
}

.blue_theme button {
    text-decoration: none;
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #5791d5, #0c4f9c);
    background-image: -moz-linear-gradient(top, #5791d5, #0c4f9c);
    background-image: -ms-linear-gradient(top, #5791d5, #0c4f9c);
    background-image: -o-linear-gradient(top, #5791d5, #0c4f9c);
    background-image: -webkit-gradient(to bottom, #5791d5, #0c4f9c);
    border: .1em solid #1468c5;
    color: #fff;
    font-size: 1em;
    padding: 1em 2em;
    text-align: center;
    text-shadow:  1px 1px 2px rgba(25,25,25, 0.5);
    border-radius: 5%;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    -moz-box-shadow: inset 0 0 3px #f1fcfe;
    -webkit-box-shadow: inset 0 0 3px #f1fcfe;
    box-shadow: inset 0 0 3px #f1fcfe;
    display: block;
}

.blue_theme button:focus,
.blue_theme button:hover,
.blue_theme button:active {
    outline: none !important;
    text-decoration: none;
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #b7d0ed, #6fa1db);
    background-image: -moz-linear-gradient(top, #b7d0ed, #6fa1db);
    background-image: -ms-linear-gradient(top, #b7d0ed, #6fa1db);
    background-image: -o-linear-gradient(top, #b7d0ed, #6fa1db);
    background-image: -webkit-gradient(to bottom, #b7d0ed, #6fa1db);
    text-shadow: none !important;
}

.login_button {
    margin: 0.5em 0 1em 0;
}

#id_start_button {
    margin-top: 0.8em;
}

#id_stop_button {
    margin-top: 0.7em;
    border: .1em solid #DD2C00;
    background: #E65100;
    background-image: -webkit-linear-gradient(top, #FFAB40, #FF5722);
    background-image: -moz-linear-gradient(top, #FFAB40, #FF5722);
    background-image: -ms-linear-gradient(top, #FFAB40, #FF5722);
    background-image: -o-linear-gradient(top, #FFAB40, #FF5722);
    background-image: -webkit-gradient(to bottom, #FFAB40, #FF5722);
}

#id_stop_button:focus,
#id_stop_button:hover,
#id_stop_button:active {
    outline: none !important;
    text-decoration: none;
    background: #FFB300;
    background-image: -webkit-linear-gradient(top, #FFD54F, #FFA000);
    background-image: -moz-linear-gradient(top, #b7d0ed, #6fa1db);
    background-image: -ms-linear-gradient(top, #b7d0ed, #6fa1db);
    background-image: -o-linear-gradient(top, #b7d0ed, #6fa1db);
    background-image: -webkit-gradient(to bottom, #b7d0ed, #6fa1db);
    text-shadow: none !important;
}

#id_msg {
    color: #FF0000;
    font-size: 0.8em;
    font-style: italic;
}

hr {
    color: #c1d4ef;
    background-color: #c1d4ef;
    height: 0.15em;
    margin: 1.5em 0 1em 0;
    border: none;
    outline: none;
}

/*::-webkit-input-placeholder {color: #809380; font-style: italic; font-size: 0.9em;}
::-moz-placeholder {color: #809380; font-style: italic; font-size: 0.9em;}
:-ms-input-placeholder {color: #809380; font-style: italic; font-size: 0.9em;}
input:-moz-placeholder {color: #809380; font-style: italic; font-size: 0.9em;}*/

/* MEDIA QUERIES ===================================================================== */
@media all and (max-width: 319px) {
    * {font-size: 13px !important;}
    body {margin-top:0;}
    .login_page_container {width: 100%; height: 100%; margin-top:0;}
    .login_form_container {width: 94%; padding-top: 1.5em;}
    .login_specs {padding: 1.5em 1.4em;}
    .login_header_topic p {font-size: 1.4em !important; padding-left: 0.1em;}
    .login_header_msg p {font-size: 0.8em !important; padding: 0.3em 0.1em 0.3em 0.2em;}

    .main_page_container {width: 100%;}
    .main_form_container {width: 100%;}
    .main_specs {padding: 0.4em;}
    .blue_theme {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none;}
    .main_header_topic p {font-size: 1.5em !important; padding-left: 0.2em;}
    .main_header_msg p {font-size: 0.78em !important; padding: 0.3em 0;}
    .main_header_msg a {display: inline-block; font-size: 1em !important; padding: 0.3em 0.5em; margin: 0.2em 0;}
    

    
/*    .login_header_topic p, .main_header_topic p {color: salmon;}*/
}

@media all and (min-width: 320px) and (max-width: 420px) {
    * {font-size: 14px !important;}
    body {margin-top:0;}
    .login_page_container {width: 100%; height: 100%;}
    .login_form_container {width: 86%; padding-top: 1.9em;}
    .login_specs {padding: 1.8em 1.5em;}
    .login_header_topic p {font-size: 1.4em !important; padding-left: 0;}
    .login_header_msg p {font-size: 0.8em !important; padding: 0.3em 0.1em 0.3em 0.2em;}

    .main_page_container {width: 100%;}
    .main_form_container {width: 100%;}
    .main_specs {padding: 0.8em;}
    .blue_theme {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none;}
    .main_header_topic p {font-size: 1.8em !important; padding-left: 0.4em;}
    .main_header_msg p {font-size: 0.85em !important; padding: 0.3em 0.1em;}
    .main_header_msg a {display: inline-block; font-size: 1em !important; padding: 0.3em 0.5em; margin: 0.2em 0;}
    

    
/*    .login_header_topic p, .main_header_topic p {color: green;}*/
}

@media all and (min-width: 421px) and (max-width: 500px) {
    * {font-size: 15px !important;}
    body {margin-top:0;}
    .login_page_container {width: 100%; height: 100%;}
    .login_form_container {width: 76%; padding-top: 1.5em;}
    .login_specs {padding: 1.3em 1.4em;}
    .login_header_topic p {font-size: 1.5em !important; padding-left: 0.2em;}
    .login_header_msg p {font-size: 1em !important}

    .main_page_container {width: 100%;}
    .main_form_container {width: 100%;}
    .main_specs {padding: 0.8em;}
    .blue_theme {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none;}
    .main_header_topic p {font-size: 1.8em !important; padding-left: 0.4em;}
    .main_header_msg p {font-size: 0.85em !important; padding: 0.3em 0.1em;}
    .main_header_msg a {display: inline-block; font-size: 1em !important; padding: 0.3em 0.5em; margin: 0.2em 0;}
    

    
/*    .login_header_topic p, .main_header_topic p {color: yellow;}*/
}

@media all and (min-width: 501px) and (max-width:519px) {
    * {font-size: 15px !important;}
    body {margin-top:0;}
    .login_page_container {width: 100%; height: 100%;}
    .login_form_container {width: 72%; padding-top: 1.5em;}
    .login_specs {padding: 1.3em 1.4em;}
    .login_header_topic p {font-size: 1.5em !important; padding-left: 0.2em;}
    .login_header_msg p {font-size: 1em !important}

    .main_page_container {width: 100%;}
    .main_form_container {width: 100%;}
    .main_specs {padding: 1em;}
    .blue_theme {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none;}
    .main_header_topic p {font-size: 1.8em !important; padding-left: 0.4em;}
    .main_header_msg p {font-size: 0.85em !important; padding: 0.3em 0.1em;}
    .main_header_msg a {display: inline-block; font-size: 1em !important; padding: 0.3em 0.5em; margin: 0.2em 0;}
  

    
/*    .login_header_topic p, .main_header_topic p {color: orange;}*/
}

@media all and (min-width: 520px) and (max-width:619px) {
     body {margin-top: 1.2em;}
    * {font-size: 15px !important;}
    .login_page_container {width: 86%; padding-bottom: 5em;}
    .login_form_container {padding-top: 2em; width: 68%;}
    .login_specs {padding: 1.3em 1.4em;}
    .login_header_topic p {font-size: 1.9em !important; padding-left: 0.8em;}
    .login_header_msg p {font-size: 0.9em;}

    .main_page_container {width: 100%;}
    .main_form_container {width: 100%;}
    .main_specs {padding: 1em;}
    .blue_theme {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none;}
    .main_header_topic p {font-size: 1.8em !important; padding-left: 0.4em;}
    .main_header_msg p {font-size: 0.85em !important; padding: 0.3em 0.1em;}
    .main_header_msg a {display: inline-block; font-size: 1em !important; padding: 0.3em 0.5em; margin: 0.2em 0;}
    

    
/*    .login_header_topic p, .main_header_topic p {color: orchid;}*/
}

@media all and (min-width: 620px) and (max-width:820px) {
     body {margin-top: 1.2em;}
    * {font-size: 15px !important;}
    .login_page_container {width: 80%; padding-bottom: 5.5em;}
    .login_form_container {padding-top: 2em; width: 68%;}
    .login_specs {}
    .login_header_topic p {font-size: 1.9em !important; padding-left: 0.8em;}
    .login_header_msg p {font-size: 0.9em;}

    .main_page_container {width: 96%;}
    .main_form_container {width: 100%;}
    .main_specs {padding: 1em;}
    .blue_theme {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none;}
    .main_header_topic p {font-size: 2em !important; padding-left: 0.4em; padding-top: 0.2em;}

/*    .login_header_topic p, .main_header_topic p {color: gray;}*/
}

@media all and (min-width: 821px) and (max-width:1024px) {
     body {margin-top: 1.2em;}
    * {font-size: 15px !important;}
    .login_page_container {width: 70%; padding-bottom: 5em;}
    .login_form_container {padding-top: 2em; width: 60%;}
    .login_specs {}
    .login_header_topic p {font-size: 2em !important;}
    .login_header_msg p {font-size: 0.9em;}

    .main_page_container {width: 80%;}
    .main_header_topic p {font-size: 2em !important; padding-left: 0.6em; padding-top: 0.2em;}


/*    .login_header_topic p, .main_header_topic p {color: powderblue;}*/
}

@media all and (min-width: 1025px) and (max-width:1580px) {
    .main_page_container {width: 60%;}
    .main_header_topic p {font-size: 2em !important; padding-left: 0.6em; padding-top: 0.2em;}

/*    .login_header_topic p, .main_header_topic p {color: mediumslateblue;}*/
}

@media all and (min-width: 1581px) and (max-width:1800px) {
    .main_page_container {width: 55%;}
    .main_header_topic p {font-size: 2em !important; padding-left: 0.6em; padding-top: 0.2em;}

/*    .login_header_topic p, .main_header_topic p {color: maroon;}*/
}

@media only screen and (min-width : 2001px)  {
  * {font-size: 17px;}
  .login_page_container {width: 45%;}

/*  .login_header_topic p, .main_header_topic p {color: palegoldenrod;}*/
}