/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/*--reset--*/
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, dl, dt, dd, ol, nav ul, nav 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%;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*--start editing from here--*/
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}
/* text align right */
.txt-lt {
    text-align: left;
}
/* text align left */
.txt-center {
    text-align: center;
}
/* text align center */
.float-rt {
    float: right;
}
/* float right */
.float-lt {
    float: left;
}
/* float left */
.clear {
    clear: both;
}
/* clear float */
.pos-relative {
    position: relative;
}
/* Position Relative */
.pos-absolute {
    position: absolute;
}
/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}
/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}
/* vertical align top */
nav.vertical ul li {
    display: block;
}
/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}
/* horizontal menu */
img {
    max-width: 100%;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*--end reset--*/
body {
    font-family: 'Athiti', sans-serif;
    background: url(../images/login-bg.png) #276b72 repeat 0px 0px;
    background-attachment: fixed;
}

h1 {
    font-size: 3em;
    text-align: center;
    color: #fff;
    font-weight: 100;
}

h2 {
    font-size: 2em;
    text-align: center;
    color: #fff;
    font-weight: 100;
    margin: 10px 0;
}

h3 {
    font-size: 26px;
    text-align: center;
    color: #fff;
    font-weight: 100;
    margin: 10px 0;
}
/*-- main --*/
.main-agile {
    padding: 0px 0 0;
}
/*-- Styling the forms --*/
.w3ls_form {
    z-index: 1;
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
}

.signin-form {
    width: 80%;
    /* min-height:590px;*/
    margin: 0em auto 0;
    position: relative;
}

.w3ls_form .form1 {
    width: 100%;
    height: auto;
    margin: auto;
    /* position: absolute;*/
    top: 0;
    left: 0;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transition: 0.8s;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    background: #006060;
    /* padding: 2em;*/
    padding: 2em 2em 1px;
    -webkit-box-shadow: 9px 9px 10px 1px rgba(12, 46, 49, 0.76);
    -moz-box-shadow: 9px 9px 10px 1px rgba(12, 46, 49, 0.76);
    -o-box-shadow: 9px 9px 10px 1px rgba(12, 46, 49, 0.76);
    -ms-box-shadow: 9px 9px 10px 1px rgba(12, 46, 49, 0.76);
    box-shadow: 9px 9px 10px 1px rgba(12, 46, 49, 0.76);
}

.bg-primary {
    background: #006060;
}

#signin {
    z-index: 100;
}

#signup {
    z-index: 1;
    opacity: 0;
    /* Rotating the sign up password form by default */
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.w3ls_form.flipped #signin {
    opacity: 0;
    /**
	 * Rotating the sign in form when the
	 * flipped class is added to the container
	 */
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.w3ls_form.flipped #signup {
    opacity: 1;
    /* Rotating the sign up div into view */
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
/*-- //Styling the forms --*/
/*-- sign in-form --*/
.signin-form h2, .signin-form h3 {
    font-size: 1.5em;
    color: #e89406;
    text-align: center;
    margin: 0 0 1em;
    text-transform: capitalize;
}

.signin-form input[type="text"], .signin-form input[type="password"] /*, .signin-form input[type="date"]*/ {
    outline: none;
    font-size: 1em;
    color: #444;
    padding: .8em 1em;
    margin: 0;
    width: 100%;
    border: none;
    -webkit-appearance: none;
    border-bottom: 1px solid #ddd;
    display: block;
    /* background: #256a71;*/
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    font-family: 'Athiti', sans-serif;
    height: auto;
}

.signin-form p {
    font-size: 1em;
    color: #fff;
    margin: 1em 0 .5em;
}
/*-- checkbox --*/
.signin-form input[type="checkbox"] {
    display: none;
}

    .signin-form input[type="checkbox"] + label {
        position: relative;
        padding-left: 1.8em;
        border: none;
        outline: none;
        font-size: 1em;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        margin: 1.5em 0;
    }

        .signin-form input[type="checkbox"] + label span:first-child {
            width: 14px;
            height: 14px;
            border: 2px solid #C8C8C8;
            position: absolute;
            left: 0;
            top: 3px;
        }

    .signin-form input[type="checkbox"]:checked + label span:first-child:before {
        content: "";
        background: url(../images/tick.png)no-repeat;
        position: absolute;
        left: 0px;
        top: 0px;
        font-size: 10px;
        width: 10px;
        height: 10px;
    }
/*-- //checkbox --*/
.signin-form input[type="submit"] {
    font-size: 1em;
    color: #fff;
    background: #e89406;
    border: 3px solid #e89406;
    outline: none;
    cursor: pointer;
    padding: .6em 1em;
    -webkit-appearance: none;
    /*width: 100%;*/
    width: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    margin: 20px auto;
}

    .signin-form input[type="submit"]:hover {
        background: transparent;
        color: #e89406;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
    }
/*-- //sign in-form --*/
/*-- Buttons & Links --*/
#signin .flipLink,
#signup .flipLink {
    display: block;
}

.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

    .ribbon a {
        font-size: 12px;
        color: #b91212;
        text-align: center;
        line-height: 20px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 100px;
        display: block;
        background: #e89406;
        -webkit-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        -moz-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        -o-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        -ms-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        position: absolute;
        top: 19px;
        right: -21px;
        font-weight: bold;
    }

        .ribbon a::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid #8F5408;
            border-right: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #8F5408;
        }

        .ribbon a::after {
            content: "";
            position: absolute;
            right: 0px;
            top: 100%;
            z-index: -1;
            border-left: 3px solid transparent;
            border-right: 3px solid #8F5408;
            border-bottom: 3px solid transparent;
            border-top: 3px solid #8F5408;
        }

#signup .ribbon {
    right: inherit;
    left: -5px;
}

    #signup .ribbon a {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        right: inherit;
        left: -21px;
    }
/*-- //Buttons & Links --*/
/*-- sign in-bottom --*/
.signin-agileits-bottom p {
    text-align: center;
    margin: 1.5em 0;
}

    .signin-agileits-bottom p a {
        color: #fff;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
        transition: 0.5s all;
    }

        .signin-agileits-bottom p a:hover {
            color: #e89406;
        }

.social-icons ul li {
    background-color: #3b5998;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    transition: .5s all;
    display: inline-block;
    width: 48%;
    float: left;
}

    .social-icons ul li a {
        display: block;
    }

        .social-icons ul li a span {
            vertical-align: middle;
            color: #fff;
            float: left;
            font-size: .9em;
        }

            .social-icons ul li a span.text {
                padding: .6em 0;
                text-align: center;
                width: 78%;
            }

    .social-icons ul li span.icons {
        background: url(../images/i1.png)no-repeat #2E4A84 center;
        width: 40px;
        height: 40px;
        display: inline-block;
        border-right: 1px solid #3b5998;
    }

    .social-icons ul li.twt {
        background-color: #55acee;
        float: right;
    }

        .social-icons ul li.twt span.icons {
            background: url(../images/i2.png)no-repeat #4D9CD8 center;
            border-color: #67b0e8;
        }

    .social-icons ul li:hover {
        background: #2E4A84;
    }

    .social-icons ul li.twt:hover {
        background: #4D9CD8;
    }
/*-- //sign in-bottom --*/
/*-- copyright --*/
.copyright {
    text-align: center;
    margin: 1em 0 0;
}

    .copyright p {
        font-size: 1em;
        color: #fff;
        line-height: 1.8em;
    }

        .copyright p a {
            color: #ffa308;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
            -ms-transition: 0.5s all;
            transition: 0.5s all;
        }

            .copyright p a:hover {
                color: #fff;
            }
/*-- //copyright --*/

.checkbox label, .radio label {
    position: relative;
    padding-left: 1.8em;
    border: none;
    outline: none;
    font-size: 1em;
    color: #fff;
    cursor: pointer;
    display: inline-block;
}
/*-- responsive-design --*/
@media(max-width:1440px) {
    .signin-form {
        width: 80%;
        /*min-height: 605px; */
    }

    .copyright {
        margin: 2em 0;
    }
}

@media(max-width:1366px) {
    .signin-form {
        width: 80%;
        /* min-height: 605px;*/
    }
}

@media(max-width:1080px) {

}

@media(max-width:1024px) {
    .signin-form {
        width: 80%;
    }
}

@media(max-width:800px) {
    h1 {
        font-size: 2.5em;
    }

    .main-agile {
        padding: 1em 0 0;
    }

    .signin-form {
        width: 80%;
        margin: 1em auto;
    }
}

@media(max-width:736px) {
   

    .w3ls_form .form1 {
        padding: 1.5em 2em;
        height: auto;
    }

    .signin-form input[type="text"], .signin-form input[type="password"] /*, .signin-form input[type="date"]*/ {
        padding: .6em 1em;
    }
}

@media(max-width:667px) {
   

    .social-icons ul li span.icons {
        height: 41px;
    }
}

@media(max-width:640px) {
    .signin-form {
        width: 72%;
    }
}

@media(max-width:600px) {
    h1 {
        font-size: 2.2em;
    }

    .signin-form {
        width: 80%;
    }
}

@media(max-width:568px) {
    .w3ls_form .form1 {
        padding: 1.5em;
        width: auto;
    }



        .signin-form h2, .signin-form h3 {
            margin: 0;
        }
}

@media(max-width:480px) {
    .signin-form input[type="text"], .signin-form input[type="password"] /*, .signin-form input[type="date"]*/ {
        padding: .4em 1em;
        width: 90.5%;
        font-size: 0.9em;
    }

    .social-icons ul li {
        width: 65%;
        float: none;
        margin: 0 auto;
        text-align: center;
    }

        .social-icons ul li.twt {
            float: none;
        }

    .social-icons {
        text-align: center;
    }

    .w3ls_form .form1 {
        padding: 1em 1.5em;
        height: auto;
    }

    .signin-form h2, .signin-form h3 {
        font-size: 1.8em;
    }

    .signin-form p {
        font-size: 0.9em;
    }

    .signin-form input[type="checkbox"] + label {
        font-size: 0.9em;
    }

    .signin-form input[type="submit"] {
        font-size: 0.9em;
    }

    .signin-agileits-bottom p {
        margin: 1em 0;
    }

    

    .copyright p {
        font-size: 0.9em;
        padding: 0 1em;
    }
}

@media(max-width:414px) {
    h1 {
        font-size: 1.8em;
    }

    .signin-form h2, .signin-form h3 {
        font-size: 1.6em;
    }

    .w3ls_form .form1 {
        width: 83%;
    }

    .social-icons ul li {
        width: 80%;
    }

        .social-icons ul li span.icons {
            height: 35px;
        }

        .social-icons ul li a span.text {
            padding: .4em 0;
        }

  
}

@media(max-width:320px) {
    h1 {
        font-size: 1.6em;
    }

    .signin-form h2, .signin-form h3 {
        font-size: 1.4em;
    }

    .w3ls_form .form1 {
        width: 79%;
        padding: 0.7em 1.5em;
        height: auto;
    }


        .signin-form input[type="text"], .signin-form input[type="password"] /*, .signin-form input[type="date"]*/ {
            font-size: 0.85em;
            width: 86.5%;
        }

        .signin-form input[type="submit"] {
            padding: .4em 1em;
        }

    .social-icons ul li {
        width: 97%;
    }

    .copyright {
        margin: 0 0 2em;
    }
}
/*-- //responsive-design --*/

html, body {
    height: 100%;
}

@media (min-width:768px) {
    .h_100 {
        min-height: 92vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.notes {
    background: #ffe8a1;
    background: rgba(255, 232, 161, 0.4);
    color: black;
    font-size: 16px;
    padding: 20px;
    /*margin-top: 16px;*/
    border-radius: 16px;
    box-shadow: 0 0 10px #d7d7d7;
    line-height: 28px;
}

    .notes ul li {
        background-color: transparent;
        padding: 2px;
    }

.bg2 {
    background-color: #ffe8a1;
    background-image: linear-gradient(330deg,#ffffff,#ffe8a1);
}

.rounded {
    border-radius: 1.25rem !important;
}

/*.form-control:focus {
    box-shadow: 0 0 20px #9a9898;
    border-radius: 50rem !important;
    border-bottom: solid #807e7e !important;
}*/

.rounded {
    border-radius: 1.25rem !important;
}

.p-1 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.w-100 {
    width: 100% !important;
}


.mt-3, .my-3 {
    margin-top: 1rem !important;
}

.mb-0, .my-0 {
    margin-bottom: 0 !important;
}

.notification {
    border: solid 1px #ccc;
    border-radius: 1.25rem !important;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%);
    overflow: hidden;
}

    .notification a {
        margin-bottom: 10px;
        display: flex;
        font-weight: bold;
    }