@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.eot');
    src: url('fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Light.woff2') format('woff2'),
        url('fonts/Roboto-Light.woff') format('woff'),
        url('fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BoldItalic.eot');
    src: url('fonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-BoldItalic.woff2') format('woff2'),
        url('fonts/Roboto-BoldItalic.woff') format('woff'),
        url('fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold.eot');
    src: url('fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Bold.woff2') format('woff2'),
        url('fonts/Roboto-Bold.woff') format('woff'),
        url('fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium.eot');
    src: url('fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Medium.woff2') format('woff2'),
        url('fonts/Roboto-Medium.woff') format('woff'),
        url('fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-LightItalic.eot');
    src: url('fonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-LightItalic.woff2') format('woff2'),
        url('fonts/Roboto-LightItalic.woff') format('woff'),
        url('fonts/Roboto-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.eot');
    src: url('fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.woff') format('woff'),
        url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic.eot');
    src: url('fonts/Roboto-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-Italic.woff2') format('woff2'),
        url('fonts/Roboto-Italic.woff') format('woff'),
        url('fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-MediumItalic.eot');
    src: url('fonts/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Roboto-MediumItalic.woff2') format('woff2'),
        url('fonts/Roboto-MediumItalic.woff') format('woff'),
        url('fonts/Roboto-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}


* {
    font-family: 'Roboto', sans-serif;
}

html,body {
    height: 100%;
    min-height: 100%;
    font-size: 14px;
}
body {
    background: #fff;
}

body.outer-body {
    background: #51afc9 url(../images/login_bg.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

.valign-top {
    vertical-align: top !important;
}

.text-black {
    color: #333;
}
.text-italic {
    font-style: italic;
}

.m-auto { margin: 0px auto !important; }
.m-0 { margin: 0px !important; }
.m-1 { margin: 1px !important; }
.m-2 { margin: 2px !important; }
.m-3 { margin: 3px !important; }
.m-4 { margin: 4px !important; }
.m-5 { margin: 5px !important; }
.m-10 { margin: 10px !important; }
.m-15 { margin: 15px !important; }
.m-20 { margin: 20px !important; }
.m-25 { margin: 25px !important; }
.m-30 { margin: 30px !important; }
.m-35 { margin: 35px !important; }
.m-40 { margin: 40px !important; }

.m-t-0 { margin-top: 0px !important; }
.m-t-1 { margin-top: 1px !important; }
.m-t-2 { margin-top: 2px !important; }
.m-t-3 { margin-top: 3px !important; }
.m-t-4 { margin-top: 4px !important; }
.m-t-5 { margin-top: 5px !important; }
.m-t-8 { margin-top: 8px !important; }
.m-t-10 { margin-top: 10px !important; }
.m-t-15 { margin-top: 15px !important; }
.m-t-20 { margin-top: 20px !important; }
.m-t-25 { margin-top: 25px !important; }
.m-t-30 { margin-top: 30px !important; }
.m-t-35 { margin-top: 35px !important; }
.m-t-40 { margin-top: 40px !important; }

.m-r-0 { margin-right: 0px !important; }
.m-r-1 { margin-right: 1px !important; }
.m-r-2 { margin-right: 2px !important; }
.m-r-3 { margin-right: 3px !important; }
.m-r-4 { margin-right: 4px !important; }
.m-r-5 { margin-right: 5px !important; }
.m-r-10 { margin-right: 10px !important; }
.m-r-15 { margin-right: 15px !important; }
.m-r-20 { margin-right: 20px !important; }
.m-r-25 { margin-right: 25px !important; }
.m-r-30 { margin-right: 30px !important; }
.m-r-35 { margin-right: 35px !important; }
.m-r-40 { margin-right: 40px !important; }

.m-b-0 { margin-bottom: 0px !important; }
.m-b-1 { margin-bottom: 1px !important; }
.m-b-2 { margin-bottom: 2px !important; }
.m-b-3 { margin-bottom: 3px !important; }
.m-b-4 { margin-bottom: 4px !important; }
.m-b-5 { margin-bottom: 5px !important; }
.m-b-10 { margin-bottom: 10px !important; }
.m-b-15 { margin-bottom: 15px !important; }
.m-b-20 { margin-bottom: 20px !important; }
.m-b-25 { margin-bottom: 25px !important; }
.m-b-30 { margin-bottom: 30px !important; }
.m-b-35 { margin-bottom: 35px !important; }
.m-b-40 { margin-bottom: 40px !important; }

.m-l-0 { margin-left: 0px !important; }
.m-l-1 { margin-left: 1px !important; }
.m-l-2 { margin-left: 2px !important; }
.m-l-3 { margin-left: 3px !important; }
.m-l-4 { margin-left: 4px !important; }
.m-l-5 { margin-left: 5px !important; }
.m-l-10 { margin-left: 10px !important; }
.m-l-15 { margin-left: 15px !important; }
.m-l-20 { margin-left: 20px !important; }
.m-l-25 { margin-left: 25px !important; }
.m-l-30 { margin-left: 30px !important; }
.m-l-35 { margin-left: 35px !important; }
.m-l-40 { margin-left: 40px !important; }

.p-0 { padding: 0px !important; }
.p-1 { padding: 1px !important; }
.p-2 { padding: 2px !important; }
.p-3 { padding: 3px !important; }
.p-4 { padding: 4px !important; }
.p-5 { padding: 5px !important; }
.p-10 { padding: 10px !important; }
.p-15 { padding: 15px !important; }
.p-20 { padding: 20px !important; }
.p-25 { padding: 25px !important; }
.p-30 { padding: 30px !important; }
.p-35 { padding: 35px !important; }
.p-40 { padding: 40px !important; }

.p-t-0 { padding-top: 0px !important; }
.p-t-1 { padding-top: 1px !important; }
.p-t-2 { padding-top: 2px !important; }
.p-t-3 { padding-top: 3px !important; }
.p-t-4 { padding-top: 4px !important; }
.p-t-5 { padding-top: 5px !important; }
.p-t-10 { padding-top: 10px !important; }
.p-t-15 { padding-top: 15px !important; }
.p-t-20 { padding-top: 20px !important; }
.p-t-25 { padding-top: 25px !important; }
.p-t-30 { padding-top: 30px !important; }
.p-t-35 { padding-top: 35px !important; }
.p-t-40 { padding-top: 40px !important; }

.p-r-0 { padding-right: 0px !important; }
.p-r-1 { padding-right: 1px !important; }
.p-r-2 { padding-right: 2px !important; }
.p-r-3 { padding-right: 3px !important; }
.p-r-4 { padding-right: 4px !important; }
.p-r-5 { padding-right: 5px !important; }
.p-r-10 { padding-right: 10px !important; }
.p-r-15 { padding-right: 15px !important; }
.p-r-20 { padding-right: 20px !important; }
.p-r-25 { padding-right: 25px !important; }
.p-r-30 { padding-right: 30px !important; }
.p-r-35 { padding-right: 35px !important; }
.p-r-40 { padding-right: 40px !important; }

.p-b-0 { padding-bottom: 0px !important; }
.p-b-1 { padding-bottom: 1px !important; }
.p-b-2 { padding-bottom: 2px !important; }
.p-b-3 { padding-bottom: 3px !important; }
.p-b-4 { padding-bottom: 4px !important; }
.p-b-5 { padding-bottom: 5px !important; }
.p-b-10 { padding-bottom: 10px !important; }
.p-b-15 { padding-bottom: 15px !important; }
.p-b-20 { padding-bottom: 20px !important; }
.p-b-25 { padding-bottom: 25px !important; }
.p-b-30 { padding-bottom: 30px !important; }
.p-b-35 { padding-bottom: 35px !important; }
.p-b-40 { padding-bottom: 40px !important; }

.p-l-0 { padding-left: 0px !important; }
.p-l-1 { padding-left: 1px !important; }
.p-l-2 { padding-left: 2px !important; }
.p-l-3 { padding-left: 3px !important; }
.p-l-4 { padding-left: 4px !important; }
.p-l-5 { padding-left: 5px !important; }
.p-l-10 { padding-left: 10px !important; }
.p-l-15 { padding-left: 15px !important; }
.p-l-20 { padding-left: 20px !important; }
.p-l-25 { padding-left: 25px !important; }
.p-l-30 { padding-left: 30px !important; }
.p-l-35 { padding-left: 35px !important; }
.p-l-40 { padding-left: 40px !important; }



.btn.btn-success {
    background-color: #54be2a;
    border-color: #4db425;
}

.btn.btn-login {
    background-color: #54be2a;
    text-transform: uppercase;
    border-color: #4db425;
    font-weight: 700;
    font-size: 16px;
    padding: 8px;
}

.btn-rounded {
    border-radius: 40px;
    text-transform: uppercase;
    padding: 8px;
    font-weight: 700;
    font-size: 16px;
}
.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.open>.dropdown-toggle.btn-success.focus,
.open>.dropdown-toggle.btn-success:focus,
.open>.dropdown-toggle.btn-success:hover {
    background-color: #49af21;
    border-color: #49af21;
}
.no-margin {
    margin: 0;
}
.padding-20 {
    padding: 20px;
}
.form-group {
    position: relative;
}
.form-control:before { 
    content: attr(data-placeholder);
    position: absolute;
    width: 100%;
    background: #fff;
    padding: 4px 12px;
    color: #999;
    font-weight: normal;
    font-size: 16px;
    left: 0;
}

.input-group .input-group-addon {
    background: none;
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 6;
    display: none;
}
.loading > div {
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translate(-50%);
    background: #eee;
    border: 1px solid #d7d7d7;
    padding: 15px;
    top: 45%;
}

.form-control:focus:before,
.form-control:valid:before { display: none }

.login {
    display: table;
    width: 100%;
    height: 100%;
}
.login .login-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow:auto;
}

.panel {
    background: #fff;
    width: 75%;
    margin: 0 auto;
    border-radius: 4px;
    margin-top: 5vh;
    box-shadow: 0 0 40px rgba(0,0,0,0.3);
    border: 0;
}

.panel .panel-heading {
    background: #fff;
    padding: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
    z-index: 3;
    text-align: left;
    border-bottom: 1px solid #b4b4b4;
    height: 95px;
}
.panel .panel-heading h3 {
    color: #0b47a2;
    font-size: 25px;
    text-align: center;
    padding: 28px 20px;
    margin-bottom: 0;
    display: inline-block;
    margin: 0;
    vertical-align: top;
}
.panel .panel-heading .logo {
    box-sizing: border-box;
    padding: 14px 20px;
    display: inline-block;
    vertical-align: top;
    float: right;
}
.panel .panel-heading .logo img {
    height: 67px;
}

.panel .panel-body {
    padding: 0;
    text-align: left;
    min-height: 250px;
}

.panel .panel-body .form-group {
    margin-bottom: 20px;
}
.panel .panel-body .form-control {
    /*border: 0;
    border-bottom: 2px solid #e4e4e4;
    box-shadow: none;
    border-radius: 0;*/
    font-size: 16px;
    line-height: 30px;
    height: 40px;
}
.panel .panel-body .form-control.username {
    background: url(../images/user.svg) no-repeat 10px center;
    padding-left: 50px;
    background-size: 20px;
}
.panel .panel-body .form-control.password {
    background: url(../images/lock.svg) no-repeat 10px center;
    padding-left: 50px;
    background-size: 18px;
}

.installation-steps-wrapper {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}
.installation-steps-wrapper .installation-steps {
    display: table-cell;
    width: 75%;
    vertical-align: middle;
    padding: 15px 30px;
    height: 350px;
}
.installation-steps-wrapper .installation-instructions {
    display: table-cell;
    vertical-align: top;
    background-image: url(../images/gradient-border.jpg), url(../images/gradient-background.jpg);
    background-position: right top, 0 top;
    background-repeat: no-repeat, repeat-x;
    padding: 0;
}
.installation-steps-wrapper .installation-instructions h4 {
    font-weight: bold;
    color: #2185c2;
    margin: 0 0 10px;
    font-size: 16px;
}

.installation-instructions ol,
.installation-instructions ul {
    padding: 0 0 0 15px;
    margin: 10px 0;
}

.installation-instructions ol li,
.installation-instructions ul li {
    padding-bottom: 6px;
    font-size: 13px;
    line-height: 17px;
}

.installation-instructions ul.installation-steps-label {
    list-style: none;
    padding: 0;
}
.installation-instructions ul.installation-steps-label li {
    display: block;
    text-align: right;
    padding: 10px 15px;
    font-size: 14px;
    color: #525252;
    font-weight: bold;
}
.installation-instructions ul.installation-steps-label li.active {
    color: #2e9500;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

}

.school-logo {
    padding-top: 20px;
}

.forgot-password {
    text-align: right;
}

.forgot-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: 30px 0 0;
    text-align: left;
    border-bottom: 0;
}
.forgot-tabs li {
    float: left;
    width: 50%;
    box-sizing: border-box;
    margin: 0;
}
/*.forgot-tabs li:first-child {
    margin-right: 20px;    
}*/
.forgot-tabs li a {
    display: block;
    border-bottom: 2px solid transparent;
    color: #cecece;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 0;
    text-decoration: none;
}
.forgot-tabs li.active a {
    border: 0;
    border-bottom: 2px solid #2789c8;
    color: #2789c8;
}

.panel-footer {
    background: #ededed;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 12px;
    line-height: 15px;
    color: #636363;
    padding: 15px 45px;
    text-align: left;
}

.info-text {
    font-size: 12px;
}

footer {
    text-align: center;
    color: #fff;
    font-size: 12px;
    padding: 10px 0 25px;
}
footer a {
    text-decoration: none;
    color: #fff;
}
footer a:hove {
    text-decoration: underline;
}

.loader-container {
    position: relative;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    z-index: 2;
}


/* Loader */
.loader{
    height: 4px;
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translate(-50%);
}

.loader1{
    width: 100%;
    background: #34a853;
    z-index: 1;
    animation: one 2s ease-out infinite;
}

.loader2{
    width: 0%;
    background: #4285f4;
    z-index: 2;
    animation: two 2s ease-out infinite;
}

.loader3{
    width: 0%;
    z-index: 3;
    background: #fbbc05;
    animation: three 2s ease-out infinite;
}

.loader4{
    width: 0%;
    z-index: 4;
    background: #ea4335;
    animation: four 2s ease-out infinite;
}

/* -----------------------styled-radio -----------------------*/
.styled-radio input[type=radio] {
    display: none;
}
.styled-radio label{
    padding-left: 30px;
    position: relative;
    margin-right: 22px;
}
.styled-radio input[type=radio] + span {
    display: block;
    padding-left: 35px;
    line-height: 24px;
    position: absolute;
    left: 0;
}
.styled-radio input[type=radio] + span:before {
    content: " ";
    position: absolute;
    display: inline-block;
    width: 22px;
    height: 22px;
    background: #fff url('../images/icon_check_white.svg') no-repeat center;
    background-size: 20px;
    margin-left: -35px;
    border: 2px solid #dadfe6;
    transition: all 0.5s ease;
    border-radius: 50%;
}
.styled-radio input[type=radio]:checked + span:before {
    background: #49af21 url('../images/icon_check_white.svg') no-repeat center;
    background-size: 12px;
    border-color: #49af21;
}


/* -----------------------styled-checkbox -----------------------*/
.styled-checkbox input[type=checkbox] {
    display: none;
}
.styled-checkbox.checkbox-inline {
    padding-left: 30px;
}
.styled-checkbox label{
    padding-left: 30px;
    position: relative;
    margin-right: 22px;
}
.styled-checkbox input[type=checkbox] + span {
    display: block;
    padding-left: 35px;
    line-height: 24px;
    position: absolute;
    left: 0;
}
.styled-checkbox input[type=checkbox] + span:before {
    content: " ";
    position: absolute;
    display: inline-block;
    width: 22px;
    height: 22px;
    background: #fff url('../images/icon_check_white.svg') no-repeat center;
    background-size: 20px;
    margin-left: -35px;
    border: 2px solid #dadfe6;
    transition: all 0.5s ease;
}
.styled-checkbox input[type=checkbox]:checked + span:before {
    background: #1E88E5 url('../images/icon_check_white.svg') no-repeat center;
    background-size: 12px;
    border-color: #1E88E5;
}

@keyframes two{
    0%,75%,100%{
        width: 0%;
    }
    25%,50%{
        width: 100%;
    }
}

@keyframes three{
    0%,25%,100%{
        width: 0%;
    }
    50%,75%{
        width: 100%
    }
}

@keyframes four{
    0%,50%{
        width: 0%;
    }
    75%,100%{
        width: 100%;
    }
}

@keyframes one{
    0%,25%{
        z-index: 1;
        width: 100%;
    }
    50%,74%{
        z-index: 1;
        width: 0%;
    }
    75%{
        z-index: 100;
    }
    100%{
        width: 100%;
        z-index: 100;
    }
}

.checkbox.checkbox-switch {
    display: inline-block;
    margin: 0;
}

.checkbox.checkbox-switch label span::before,
.checkbox-inline.checkbox-switch span::before {
    position: absolute;
    top: 5px;
    left: 0;
}
.checkbox.checkbox-switch label > input:checked + span::before,
.checkbox-inline.checkbox-switch > input:checked + span::before {
    left: 16px;
}

/* Clock */
.clock {
    position: fixed;
    bottom: 25px;
    left: 25px;
}
.clock ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.clock ul li {
    display: inline-block;
    color: #718694;
    font-size: 60px;
    font-weight: 300;
}
.clock #Date {
    font-size: 18px;
    color: #718694;
    font-weight: 300;
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (max-width:1136px){
    .panel {
        width: 90%;
    }
}

@media screen and (max-width:1024px){
    .school-logo {
        padding-top: 0;
        padding-bottom: 20px;
    }
    .school-logo img {
        max-height: 120px;
        width: auto;
    }
}

@media screen and (max-width:900px){
    .clock {
        display: none;
    }
    .panel .panel-heading {
        height: auto;
    }

    .panel .panel-heading h3 { font-size: 18px; }
}
@media screen and (max-width:768px){
    .panel .panel-heading .logo {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .panel .panel-heading h3 {
        display: block;
        text-align: center;
        padding-top: 10px;
        font-size: 18px;
        padding-bottom: 10px;
    }
    .installation-steps-wrapper .installation-instructions {
        display: none;
    }
    .installation-steps-wrapper .installation-steps {
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width:500px){
    .login {
        display: block;
    }
    .login .login-wrapper {
        display: block;
    }

    .panel {
        width: 90%;
    }


}