/* body{
    overflow: hidden;
} */

/* #scroller {
    overflow: scroll;
    padding: 10px;
    background-color: red;
    height: 100%;
  } */



  html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    font-family: 'Nunito', sans-serif;
}

/* Login page */

.lbody {
    overflow: hidden;
    background-color: #f7f7f7;
    background-image: url(../img/lbkc.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-position-x: -2%;
    background-size: 70%;
}

.fcol {
    padding: 4%;
}

.fmcard {
    width: auto;
    max-width: 31%;
    background-color: rgba(245, 245, 245, 0.5);
    border-radius: 1%;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
}

.fmcard h2 {
    font-size: 174%;
}

.fmcard .ln {
    padding: 0 17% 0 17%;
}

.finput {
    background-color: rgba(245, 245, 245, 0.5);
    border-width: 0 0 1px;
    border-radius: 0%;
    border-color: #C1C1C1;
}

input[type=email]:focus {
    background-color: rgba(245, 245, 245, 0.5);
    border-width: 0 0 1px;
    border-radius: 0%;
    border-color: #C1C1C1;
}

input[type=password]:focus {
    background-color: rgba(245, 245, 245, 0.5);
    border-width: 0 0 1px;
    border-radius: 0%;
    border-color: #C1C1C1;
}

.finput input: {
    background-color: rgba(245, 245, 245, 0.5);
    border-width: 0 0 2px;
    border-color: #C1C1C1;
}

.lgbtn {
    border: 0;
    height: 7%;
    background-color: #FDAF01 !important;
    color: #fff !important;
    font-size: 170% !important;
    font-weight: 500 !important;
}

.sbcol {
    width: auto;
    max-width: 31%;
}

.spbtn {
    width: 25%;
    border: 0;
    color: #101010;
}

.lgftr {
    width: auto;
    max-width: 31%;
    padding-top: 2.4rem;
}

/* //Login page */


/* Dashboard */

/* ------- Added later ------- */
.dbody {
    background-color: #f7f7f7;
}

.sdbar {
    width: 23%; 
}

.mobmenu {
    
    /* width: 20vw; */
    height: 110vh;
    overflow: hidden;
}

.sbbdy {
    position: fixed;
    /* width: 100%; */
    width: 22vw;
    height: 100vh;
    /* height: inherit; */
    overflow-x: hidden;
    overflow-y: scroll;
}

.imgt {
    padding-left: 14%;
}

.lotb {
    width: 50%;
}




/* ------Temp code */
/* .whdv {
    position: absolute;
} */

/* .mainb {
    display: block;
    height: inherit;
} */
/* ------//Temp code */

.mainb {
    display: flex;
    height: inherit;
}

.sgrstat {
    width: 68%;
}

.srbar {

    width: 50%;
    margin-top: 0.5%;



    /* height: auto;
    min-height: 55px;
    max-height: 75px; */
}

.stbox {
    height: auto;
    width: 15%;
    margin: 2%;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

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

img {
    /* max-width: 100%; */
    height: auto;
    vertical-align: baseline;
}

a {
    text-decoration: none;
}

.calendar-wrapper {
    /* width: 360px; */
    /* margin: 3em auto; */
    /* padding-left: 1.5em; */
    /* border: 1px solid #dcdcff;
    border-radius: 5px; */
    background: #fff;
}

table {
    clear: both;
    /* width: 100%; */
    /* border: 1px solid #dcdcff;
    border-radius: 3px;
    border-collapse: collapse; */
    color: #444;
}

td {
    height: 88%;
    text-align: center;
    vertical-align: middle;
    font-size: .8em;
    /* border-right: 1px solid #dcdcff;
    border-top: 1px solid #dcdcff; */
    width: 14.28571429%;
}

td.not-current {
    color: #c0c0c0;
}

td.today {
    font-weight: 700;
    color: #28283b;
    font-size: 1.5em;
}

thead td {
    border: none;
    color: #28283b;
    text-transform: uppercase;
    font-size: 1.5em;
}

#btnPrev {
    float: left;
    margin-bottom: 4px;
}

#btnPrev:before {
    content: '\f104';
    font-family: FontAwesome;
    padding-right: 4px;
}

#btnNext {
    float: right;
    margin-bottom: 4px;
}

#btnNext:after {
    content: '\f105';
    font-family: FontAwesome;
    padding-left: 4px;
}

#btnPrev,
#btnNext {
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #c0c0c0;
    cursor: pointer;
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#btnPrev:hover,
#btnNext:hover {
    color: #28283b;
    font-weight: bold;
}


/* STYLE 3 scroll bar */

#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
}

#style-3::-webkit-scrollbar {
    width: 6px;
    background-color: #F7F7F7;
}

#style-3::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
}

/* //STYLE 3 scroll bar */


#circle {
    width: 134px;
    height: 134px;
    margin: 4%;
    background: #ffffff;
    border-radius: 50%;
    border: 8px solid rgba(248, 248, 248, 1);
}

#circle h5 {
    font-size: 1rem;
}

footer p {
    color: #c1c1c1;
}

/* ------- //Added later ------- */


.accobyli {
    background-color: #f8f9fa;
    transition: 0.7s;
}

.accobyli:hover {
    background-color: #C0C0C0;
}

.accordion-button:not(.collapsed),
.accordion-button:focus {
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px;
    border-color: rgba(0, 0, 0, .125);
}


.form-control:focus {
    box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px;
    border-color: rgba(0, 0, 0, .125);
}




/* //Dashboard */



/* List page */
/* .tabcrd {
    min-height: 75%;
} */
/* //List page */

/* List page */
.adnwb {
    width: 9em;
}

/* //List page */






/* Form page */
.psel {
    width: 50%;
}

/* //Form page */














/* @media (max-width:3840px) {
    .lbody {
        overflow: hidden;
        background-color: #f7f7f7;
        background-image: url(../img/lbkc.png);
        background-repeat: no-repeat;
        background-position: bottom left;
        background-position-x: -1%;
        background-size: 70%;
    }

    .fmcard {
        width: auto;
        max-width: 31%;
        height: 175%;
        margin-top: 1%;
        background-color: rgba(245, 245, 245, 0.5);
        border-radius: 1%;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
    }
} */




@media screen and (min-width:1024px) {

    /* Dashboard */
    #circle h1 {
        font-size: 1.9rem;
    }

    /*.srbar {
        height: auto;
        min-height: 55px;
        max-height: 75px;
        width: 60%; 
    }*/

    .srbtn {
        width: 14%;
    }

    /* //Dashboard */

}

@media (max-width:1366px) {
    .imgt {
        padding-left: 0%;
    }
}






@media screen and (min-width: 1024px) {
    .fotr {
        width: 75%;
        position: absolute;
        bottom: 0%;
    }
}


/* @media screen and (min-width: 320px) and (max-width: 912px) and (orientation: landscape) {
    html {
      transform: rotate(-90deg);
      transform-origin: left top;
      width: 100vh;
      overflow-x: hidden;
      position: absolute;
      top: 100%;
      left: 0;
    }
  } */


@media (max-width:912px) {

    /* html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
      } */


    /* Login page */

    .lbody {
        background-position: center bottom;
        background-position-y: 107%;
    }

    .fcol {
        padding: 7% 6% 7% 7%;
    }

    .fmcard {
        width: auto;
        max-width: 100%;
        background-color: rgba(245, 245, 245, 0.5);
        border-radius: 1%;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
    }

    .sbcol {
        width: auto;
        max-width: 100%;
    }

    .spbtn {
        width: 34%;
        height: 6%;
    }

    .lgftr {
        max-width: 100%;
        padding-top: 14%;
        /* background-color: white; */
    }

    .lgftr p {
        font-size: 128%;
    }

    /* //Login page */


    /* Dashboard */

    /* body.collapse-open {
                overflow: hidden;
            } */

    #sidbtn {
        margin-top: 14%;
    }

    .sdbar {
        width: 100%;
        position: fixed;
        z-index: 10;
        padding-left: 0%;
        padding-right: 0%;
        padding-top: 0%;
        padding-bottom: 0%;
    }

    .mobmenu {
        width: 100vw;
        height: 100vh;
        /* margin-right: 17%;
                margin-left: 0%; */
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .sbbdy {
        width: 100vw;
        position: relative;
    }


    /*.srbar {
                width: 57%;
            } */

    .srbtn {
        width: 14%;
    }

    .dmain {
        display: block;
    }

    .sdbar {
        width: 100%;
        position: fixed;
        z-index: 10;
    }

    .usimg {
        padding-left: 10%;
    }


    .imgt {
        height: 100%;
        padding-left: 0%;
    }

    .whdv {
        position: absolute;
        overflow-x: hidden;
    }

    .nvbr {
        margin-left: 3%;
    }

    .mainb {
        display: block;
        height: inherit;
    }

    .gprw {
        padding: 2%;
        margin-left: 1.5%;
    }

    .cstat {
        padding-left: 3%;
    }

    .sgrstat {
        width: 100%;
    }

    .nboard {
        width: 104.5% !important;
        margin-right: 0% !important;
        margin-left: 0% !important;
        padding-right: 4% !important;
        padding-left: 4.4% !important;
    }

    /* .stbox {
                width: 50%;
            } */

    .lotb {
        width: 100%;
        margin-left: 1%;
    }

    .calrem {
        width: 100% !important;
        display: block;
    }

    .calr {
        margin-top: 2%;
        margin-left: 3.1%;
    }

    .remr {
        margin-left: 3.1%;
    }

    footer {
        padding-top: 4%;
    }

    /* .calr {
                width: 47%;
                margin: 7%;
            }

            .remr {
                width: 47%;
            } */

    /* //Dashboard */


    /* List page */
    .adnwb {
        width: 17%;
    }

    /* //List page */

}

@media (max-width:820px) {

    /* Login page */

    .lbody {
        background-position: center bottom;
        background-position-y: 107%;
    }

    .fcol {
        padding: 7% 6% 7% 7%;
    }

    .fmcard {
        width: auto;
        max-width: 100%;
        background-color: rgba(245, 245, 245, 0.5);
        border-radius: 1%;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
    }

    .sbcol {
        width: auto;
        max-width: 100%;
    }

    .spbtn {
        width: 34%;
        height: 6%;
    }

    .lgftr {
        max-width: 100%;
        padding-top: 14%;
        /* background-color: white; */
    }

    .lgftr p {
        font-size: 128%;
    }

    /* //Login page */

}

@media (max-width:768px) {

    /* Login page */

    .lbody {
        background-position-y: 108%;
    }

    .spbtn {
        width: 34%;
        height: 5%;
    }

    .lgftr {
        max-width: 100%;
        padding-top: 4%;
        /* background-color: white; */
    }

    .lgftr p {
        font-size: 111%;
    }

    /* //Login page */

}

@media (max-width:540px) {

    /* Login page */

    .lbody {
        background-image: url(../img/wbg.jpg);
        /* background-image: linear-gradient(to bottom #f7f7f7 50%, #ffffff 50%);;
        background-position-x: 75%;*/
        background-position: center;
        background-size: 110%;
        background-position-y: -159%;

    }

    .lgftr p {
        font-size: 100%;
    }

    /* //Login page */

    /* Dashboard */

    .imgt {
        width: 50%;
        height: auto;
    }

    .usimg {
        padding-left: 0%;
    }

    .nvbr {
        margin-left: 0.4%
    }

    .srbar {
        /* width: 40%; */
        /*margin-left: 5%; */
    }

    .srbtn {
        width: 40%;
    }

    .gprw {
        margin-left: 2%;
    }

    .nvic {
        width: 10%;
    }

    .cstat {
        padding-left: 4.1%;
    }

    .nboard {
        width: 106.7% !important;
    }

    #circle {
        width: 104px;
        height: 104px;
        padding-top: 5%;
    }

    #circle h1 {
        font-size: 1.4rem;
    }

    #circle h5 {
        font-size: .7rem;
    }

    .calr {
        margin-left: 4%;
    }

    .remr {
        margin-left: 4%;
    }

    /* //Dashboard */


    /* List page */
    /* .tabcrd{
        margin-left: 2%;
    } */

    .adnwb {
        width: 25%;
    }


    /* //List page */



    /* Form page */
    .psel {
        width: 100%;
    }

    /* //Form page */


}

@media (max-width:414px) {

    /* Login page */

    .lbody {
        background-image: url(../img/wbg.jpg);
        /* background-image: linear-gradient(to bottom #f7f7f7 50%, #ffffff 50%);;
        background-position-x: 75%;*/
        background-position: center;
        background-size: 110%;
        background-position-y: 561%;

    }

    .fcol {
        padding: 24% 4% 7% 7%;
    }

    .fmcard {
        width: auto;
        max-width: 100%;
        background-color: rgba(245, 245, 245, 0.5);
        border-radius: 1%;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
    }

    .fmcard h2 {
        font-size: 144%;
    }

    .fmcard .ln {
        padding: 0 7% 0 7%;
    }

    .sbcol {
        width: auto;
        max-width: 100%;
    }

    .spbtn {
        width: 40%;
    }

    .lgftr {
        max-width: 100%;
        padding-top: 14%;
        /* background-color: white; */
    }

    .lgftr p {
        font-size: 97%;
    }

    /* //Login page */


    /* Dashboard */

    .imgt {
        width: 50%;
        /* height: 50%; */
    }


    .nvbr {
        padding-right: 5%;
        margin-left: 2%;
    }

    .sdbtn {
        margin-top: 1%;
    }

    .srbar {
        margin-right: -6%;
        margin-left: 3%;
        margin-top: 1%;
    }

    .gprw {
        margin-left: 3.5%;
    }

    .cstat {
        padding-left: 6.4%;
    }

    .nboard {
        width: 103.5vw !important;
    }

    .stbox {
        width: 55%;
    }

    .lotb {
        margin-left: 2%;
    }

    .calr {
        padding: 0% !important;
        margin-left: 6.1%;
    }

    .remr {
        padding: 0% !important;
        margin-left: 6.1%;
    }

    footer {
        margin-left: 2% !important;
    }


    /* //Dashboard */

    /* List page */
    .adnwb {
        width: 34%;
    }

    /* //List page */


}

@media (max-width:412px) {

    /* Login page */

    .lbody {
        background-position-y: 444%;
    }

    /* //Login page */

}

@media (max-width:393px) {

    /* Login page */

    .lbody {
        background-position-y: 580%;
    }

    .lgftr p {
        font-size: 94%;
        /* background-color: white; */
    }

    /* //Login page */

    /* List page */
    .adnwb {
        width: 37%;
    }

    /* //List page */

}

@media (max-width:390px) {

    /* Login page */

    .lbody {
        background-position-y: 585%;
    }

    /* //Login page */

}

@media (max-width:375px) {
    .lbody {
        background-position-y: 1560%;
    }

    .fcol {
        padding-top: 7%;
    }

    .fmcard {
        height: 60%;
    }

    /* .fmcard {
        width: auto;
        max-width: 31%;
        background-color: rgba(245, 245, 245, 0.5);
        border-radius: 1%;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
    } */

    .lgbtn {
        height: 10%;
    }

    /* Dashboard */

    .calr {
        margin-left: 6.7%;
    }

    .remr {
        margin-left: 6.7%;
    }

    /* //Dashboard */

    /* List page */
    .adnwb {
        width: 40%;
    }

    /* //List page */

}

@media (max-width:360px) {
    .lbody {
        background-position-y: 557%;
    }

    .lgftr p {
        font-size: 90%;
        /* background-color: white; */
    }

    .fmcard {
        padding-bottom: 7%;
    }

}

@media (max-width:280px) {
    .lbody {
        background-position-y: 169%;
    }

    .fcol {
        padding-top: 5%;
    }

    .fmcard {
        padding-bottom: 20%;
    }

    .lgftr {
        padding-top: 4%;
    }



}