body {
    font-family: "Poppins", sans-serif;
   /* font-family: 'Roboto', sans-serif;*/
}

.file-caption-name {
    display: inline-block;
    overflow: hidden;
    height: 20px;
    word-break: break-all;
}

.input-group-lg .file-caption-name {
    height: 25px;
}


.borderred {
    border-color: red !important;
}


.btn {
    padding: 6px 7px;
    border-radius: 0;
    font-size: 12px !important;
}

.h3, h3 {
    font-size: 1.4rem;
}

.btn-primary {
    background-color: #3498DB;
    border-color: #3498DB;
    color: #fff;
}

ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

a:hover {
    text-decoration: none;
}

.form-control:focus {
    border-color: #3498DB !important;
    -webkit-box-shadow: 0 0 0 0.01rem #3498DB !important;
    box-shadow: 0 0 0 0.01rem #3498DB !important;
}

/*::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track-piece {
    background-color: transparent;
}*/
::-webkit-scrollbar {
    width: 0.6em;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
    background-color: lightgray;
    outline: 1px solid slategrey;
    border-radius: 10px;
}

.pure-material-checkbox {
    z-index: 0;
    position: relative;
    display: inline-block;
    color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    font-size: 16px;
    line-height: 1.5;
}

    /* Input */
    .pure-material-checkbox > input {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        z-index: -1;
        position: absolute;
        left: -10px;
        top: -8px;
        display: block;
        margin: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
        box-shadow: none;
        outline: none;
        opacity: 0;
        transform: scale(1);
        pointer-events: none;
        transition: opacity 0.3s, transform 0.2s;
    }

    /* Span */
    .pure-material-checkbox > span {
        display: inline-block;
        width: 100%;
        cursor: pointer;
    }

        /* Box */
        .pure-material-checkbox > span::before {
            content: "";
            display: inline-block;
            box-sizing: border-box;
            margin: 3px 11px 3px 1px;
            border: solid 2px; /* Safari */
            border-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
            border-radius: 2px;
            width: 18px;
            height: 18px;
            vertical-align: top;
            transition: border-color 0.2s, background-color 0.2s;
        }

        /* Checkmark */
        .pure-material-checkbox > span::after {
            content: "";
            display: block;
            position: absolute;
            top: 4px;
            left: 2px;
            width: 10px;
            height: 5px;
            border: solid 2px transparent;
            border-right: none;
            border-top: none;
            transform: translate(3px, 4px) rotate(-45deg);
        }

    /* Checked, Indeterminate */
    .pure-material-checkbox > input:checked,
    .pure-material-checkbox > input:indeterminate {
        background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
    }

        .pure-material-checkbox > input:checked + span::before,
        .pure-material-checkbox > input:indeterminate + span::before {
            border-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
            background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
        }

        .pure-material-checkbox > input:checked + span::after,
        .pure-material-checkbox > input:indeterminate + span::after {
            border-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
        }

        .pure-material-checkbox > input:indeterminate + span::after {
            border-left: none;
            transform: translate(4px, 3px);
        }

    /* Hover, Focus */
    .pure-material-checkbox:hover > input {
        opacity: 0.04;
    }

    .pure-material-checkbox > input:focus {
        opacity: 0.12;
    }

    .pure-material-checkbox:hover > input:focus {
        opacity: 0.16;
    }

    /* Active */
    .pure-material-checkbox > input:active {
        opacity: 1;
        transform: scale(0);
        transition: transform 0s, opacity 0s;
    }

        .pure-material-checkbox > input:active + span::before {
            border-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
        }

    .pure-material-checkbox > input:checked:active + span::before {
        border-color: transparent;
        background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
    }

    /* Disabled */
    .pure-material-checkbox > input:disabled {
        opacity: 0;
    }

        .pure-material-checkbox > input:disabled + span {
            color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
            cursor: initial;
        }

            .pure-material-checkbox > input:disabled + span::before {
                border-color: currentColor;
            }

    .pure-material-checkbox > input:checked:disabled + span::before,
    .pure-material-checkbox > input:indeterminate:disabled + span::before {
        border-color: transparent;
        background-color: currentColor;
    }

.login-form form fieldset {
    position: relative;
    border: none;
}

.login-form form label {
    position: absolute;
    top: 18px;
    color: rgba(0, 0, 0, 0.3);
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.login-form form input:focus ~ label {
    color: #3498DB;
}

.login-form form input:focus ~ label,
.login-form form input:valid ~ label {
    top: 0;
    -webkit-transform: scale(0.6, 0.6);
    transform: scale(0.6, 0.6);
}

.login-form form input {
    font-size: 20px;
    width: 100%;
    border: none;
    margin-top: 10px;
}

    .login-form form input:focus {
        outline: none;
    }

.login-form form .after {
    width: 100%;
    height: 1px;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #3498DB), color-stop(50%, transparent));
    background: linear-gradient(to right, #3498DB 50%, transparent 50%);
    background-color: rgba(0, 0, 0, 0.3);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

.login-form form input:focus ~ .after {
    background-position: 0 0;
}

.login-form form .select {
    position: relative;
    width: 100%;
}

.login-form form .select-text {
    position: relative;
    font-family: inherit;
    background-color: transparent;
    width: 100%;
    padding: 10px 10px 10px 0;
    font-size: 14px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

    .login-form form .select-text:focus {
        outline: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0);
    }

.login-form form .select .select-text {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
}

.login-form form .select:after {
    position: absolute;
    top: 18px;
    right: 10px;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.login-form form .select-label {
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 10px;
    -webkit-transition: 0.2s ease all;
    transition: 0.2s ease all;
}

.login-form form .select-text:focus ~ .select-label, form .select-text:valid ~ .select-label {
    top: 0;
    -webkit-transition: 0.2s ease all;
    transition: 0.2s ease all;
    font-size: 10px;
}

.login-form form .select-bar {
    position: relative;
    display: block;
}

    .login-form form .select-bar:before, form .select-bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #3498DB;
        -webkit-transition: 0.2s ease all;
        transition: 0.2s ease all;
    }

    .login-form form .select-bar:before {
        left: 50%;
    }

    .login-form form .select-bar:after {
        right: 50%;
    }

.login-form form .select-text:focus ~ .select-bar:before, form .select-text:focus ~ .select-bar:after {
    width: 50%;
}

.login-form form .select-highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

/**********************************
            Login Page
*********************************/
section.login {
    height: 100vh;
}

select#ddlSchools {
    border-radius: 0;
}

section.login .bordered {
    border: 10px solid #3498DB;
    width: 65%;
    height: 100vh;
}

section.login .login-form {
    padding-top: 50px;
    padding-left: 50px;
}

    section.login .login-form .logo-container img {
        height: 65px;
    }

    section.login .login-form .form-container {
        padding-top: 100px;
        width: 40%;
    }

        section.login .login-form .form-container form fieldset {
            margin-bottom: 15px;
        }

        section.login .login-form .form-container h3 {
            text-align: center;
            font-size: 35px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        section.login .login-form .form-container .login-links {
            padding-top: 20px;
        }

            section.login .login-form .form-container .login-links a {
                color: #333;
                font-size: 14px;
            }

section.login .login-img {
    position: absolute;
    top: 0;
    right: 0;
}

    section.login .login-img img {
        height: 100vh;
    }

section.login .cis-img {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

    section.login .cis-img img {
        height: 60px;
    }

section.login .new-account {
    color: #fff;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
}

section.login .version-text {
    position: absolute;
    bottom: 0px;
    font-size: 14px;
    color: #333;
}

.modal-content {
    border-radius: 0;
}

.multi-collapse {
    padding-top: 15px !important;
}

.nav-link {
    padding: 5px !important;
}
/**********************************
            Dashboard
*********************************/
.contentCorrect, .wrapper, .campus-wrapper, .campus-admission {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}


.sidebar {
    background-color: #fff;
    bottom: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    width: 280px;
    z-index: 1000;
    overflow-y: scroll;
    height: 100vh;
}

    .sidebar .sidebar-inner {
        position: relative;
        height: 100%;
    }

        .sidebar .sidebar-inner .sidebar-logo {
            transition: all .5s ease;
            -webkit-transition: all .5s ease;
            -o-transition: all .5s ease;
        }

            .sidebar .sidebar-inner .sidebar-logo .sidebar-logo-mobile {
                display: none;
            }

            .sidebar .sidebar-inner .sidebar-logo .sidebar-logo-desktop {
                padding: 2px 20px;
            }

                .sidebar .sidebar-inner .sidebar-logo .sidebar-logo-desktop img {
                    height: 60px;
                }

        .sidebar .sidebar-inner .sidebar-menu li {
            background-color: #fff;
            font-size: 1rem;
            padding: 15px 0px 15px 20px;
            transition: all .5s ease;
            -webkit-transition: all .5s ease;
            -o-transition: all .5s ease;
        }

            .sidebar .sidebar-inner .sidebar-menu li a {
                color: #707070;
                letter-spacing: 1px;
                text-decoration: none;
                cursor: pointer;
            }

                .sidebar .sidebar-inner .sidebar-menu li a:hover {
                    cursor: pointer;
                }

                .sidebar .sidebar-inner .sidebar-menu li a span.dash-icon {
                    padding-right: 10px;
                }

                .sidebar .sidebar-inner .sidebar-menu li a span.dash-text {
                    font-size: 13px;
                }

            .sidebar .sidebar-inner .sidebar-menu li:hover {
                transition: all .5s ease;
                -webkit-transition: all .5s ease;
                -o-transition: all .5s ease;
            }

            .sidebar .sidebar-inner .sidebar-menu li ul li:hover a {
                color: #3498DB;
            }

            .sidebar .sidebar-inner .sidebar-menu li.active {
                transition: all .5s ease;
                -webkit-transition: all .5s ease;
                -o-transition: all .5s ease;
                background-image: none;
            }

                .sidebar .sidebar-inner .sidebar-menu li.active a {
                    color: #3498DB;
                }

    .sidebar.collapsed {
        width: 70px;
    }

        .sidebar.collapsed .sidebar-menu li {
            text-align: center;
            padding: 15px 0;
        }

            .sidebar.collapsed .sidebar-menu li a span.dash-text {
                display: none;
            }

            .sidebar.collapsed .sidebar-menu li a span.dash-icon {
                padding-right: 0px;
            }

        .sidebar.collapsed .sidebar-inner .sidebar-logo .sidebar-logo-desktop {
            display: none;
        }

        .sidebar.collapsed .sidebar-inner .sidebar-logo .sidebar-logo-mobile {
            display: block;
            padding: 25px 10px;
        }

            .sidebar.collapsed .sidebar-inner .sidebar-logo .sidebar-logo-mobile img {
                height: 20px;
            }

span.cam-remove {
    padding-left: 2px;
    font-size: 12px;
}

.multi-collapse {
    padding-top: 15px;
}

ul.collapse.multi-collapse li {
    padding: 4px 0px 4px 7px !important;
}

.sidebar .sidebar-inner .sidebar-menu li.active .collapse li a {
    color: #707070;
}

    .sidebar .sidebar-inner .sidebar-menu li.active .collapse li a:hover {
        color: #3498DB;
    }

.sidebar.collapsed .multi-collapse span.cam-remove {
    display: none;
}

.sidebar.collapsed .multi-collapse li a.nav-link {
    padding: 5px 0;
}

.page-container {
    min-height: 100vh;
    padding-left: 280px;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    background-color: #F0F0F7;
}

    .page-container .topbar {
        padding: 10px 15px;
        background-color: #fff;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        position: sticky;
        top: 0;
        z-index: 4;
    }

        .page-container .topbar .left-topbar li {
            padding: 0 10px;
            display: inline-block;
        }

            .page-container .topbar .left-topbar li a img {
                height: 15px;
            }

            .page-container .topbar .left-topbar li .input-group .input-group-prepend span {
                background-color: #fff;
                border-right: none;
                border-color: #bcbccb24;
            }

                .page-container .topbar .left-topbar li .input-group .input-group-prepend span i {
                    color: #BCBCCB;
                }

            .page-container .topbar .left-topbar li .input-group input {
                border-radius: 0;
                color: #4D4F5C;
                border-color: #bcbccb24;
            }

            .page-container .topbar .left-topbar li:last-child {
                width: 70%;
            }

                .page-container .topbar .left-topbar li:last-child .input-group input {
                    font-size: 14px;
                }

        .page-container .topbar .right-topbar {
            text-align: right;
        }

            .page-container .topbar .right-topbar li {
                padding: 0 10px;
                display: inline-block;
            }

                .page-container .topbar .right-topbar li a {
                    color: #BCBCCB;
                }

                .page-container .topbar .right-topbar li:nth-child(2) {
                    border-right: 1px solid #EBEBF2;
                }

li.notific-trigg i {
    display: none;
}

.page-container .topbar .right-topbar li.msg-trigg,
.page-container .topbar .right-topbar li.notific-trigg,
.page-container .topbar .right-topbar .profile-trigg {
    position: relative;
}

    .page-container .topbar .right-topbar li.msg-trigg span.newInc,
    .page-container .topbar .right-topbar li.notific-trigg span.newInc,
    .page-container .topbar .right-topbar .profile-trigg span.newInc {
        width: 7px;
        height: 7px;
        background-color: red;
        position: absolute;
        border-radius: 50%;
        top: 0px;
        right: 15px;
    }

    .page-container .topbar .right-topbar li.msg-trigg ul.detail,
    .page-container .topbar .right-topbar li.notific-trigg ul.detail,
    .page-container .topbar .right-topbar .profile-trigg ul.detail {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        right: 0;
        text-align: left;
        background-color: #fff;
        top: 50px;
        z-index: 999;
        border: 1px solid #EBEBF2;
        min-width: 300px;
        border-radius: 3px;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

        .page-container .topbar .right-topbar li.msg-trigg ul.detail li,
        .page-container .topbar .right-topbar li.notific-trigg ul.detail li,
        .page-container .topbar .right-topbar .profile-trigg ul.detail li {
            border-bottom: 1px solid #EBEBF2;
            width: 100%;
            font-size: 14px;
            padding: 15px;
        }

            .page-container .topbar .right-topbar li.msg-trigg ul.detail li:first-child,
            .page-container .topbar .right-topbar li.notific-trigg ul.detail li:first-child,
            .page-container .topbar .right-topbar .profile-trigg ul.detail li:first-child {
                border-bottom: 1px solid #EBEBF2;
            }

            .page-container .topbar .right-topbar li.msg-trigg ul.detail li:nth-child(2),
            .page-container .topbar .right-topbar li.notific-trigg ul.detail li:nth-child(2),
            .page-container .topbar .right-topbar .profile-trigg ul.detail li:nth-child(2) {
                border-right: none;
            }

            .page-container .topbar .right-topbar li.msg-trigg ul.detail li img,
            .page-container .topbar .right-topbar li.notific-trigg ul.detail li img,
            .page-container .topbar .right-topbar .profile-trigg ul.detail li img {
                padding-right: 10px;
            }

        .page-container .topbar .right-topbar li.msg-trigg ul.detail.msg-detail,
        .page-container .topbar .right-topbar li.notific-trigg ul.detail.msg-detail,
        .page-container .topbar .right-topbar .profile-trigg ul.detail.msg-detail {
            opacity: 0;
            visibility: hidden;
        }

        .page-container .topbar .right-topbar li.msg-trigg ul.detail.profile-detail,
        .page-container .topbar .right-topbar li.notific-trigg ul.detail.profile-detail,
        .page-container .topbar .right-topbar .profile-trigg ul.detail.profile-detail {
            min-width: 200px;
        }

    .page-container .topbar .right-topbar li.msg-trigg ul.msg-detail.show,
    .page-container .topbar .right-topbar li.notific-trigg ul.msg-detail.show,
    .page-container .topbar .right-topbar .profile-trigg ul.msg-detail.show {
        opacity: 1;
        visibility: visible;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

    .page-container .topbar .right-topbar li.msg-trigg ul.notific-detail.show,
    .page-container .topbar .right-topbar li.notific-trigg ul.notific-detail.show,
    .page-container .topbar .right-topbar .profile-trigg ul.notific-detail.show {
        opacity: 1;
        visibility: visible;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

    .page-container .topbar .right-topbar li.msg-trigg ul.profile-detail.show,
    .page-container .topbar .right-topbar li.notific-trigg ul.profile-detail.show,
    .page-container .topbar .right-topbar .profile-trigg ul.profile-detail.show {
        opacity: 1;
        visibility: visible;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -o-transition: all .5s ease;
    }

        .page-container .topbar .right-topbar li.msg-trigg ul.profile-detail.show li a,
        .page-container .topbar .right-topbar li.notific-trigg ul.profile-detail.show li a,
        .page-container .topbar .right-topbar .profile-trigg ul.profile-detail.show li a {
            color: #333;
        }

.page-container.collapsed {
    padding-left: 70px;
}

.wrapper .grid {
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    padding: 30px 20px;
    margin: 15px 0;
    cursor: pointer;
}

    .wrapper .grid .icon {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        margin: 0 auto;
        padding: 20px;
    }

    .wrapper .grid img {
        height: 50px;
    }

    .wrapper .grid:hover .icon {
        -webkit-box-shadow: 0 0 0 0 #333;
        box-shadow: 0 0 0 0 #333;
        -webkit-animation: pulse 2s infinite;
        animation: pulse 2s infinite;
    }

    .wrapper .grid .icon.g1 {
        background-color: #E7EFFB;
    }

    .wrapper .grid .icon.g2 {
        background-color: #EFEEFD;
    }

    .wrapper .grid .icon.g3 {
        background-color: #FCECEA;
    }

    .wrapper .grid .icon.g4 {
        background-color: #EBF7EC;
    }

    .wrapper .grid .icon.g5 {
        background-color: #FEF6EA;
    }

    .wrapper .grid .icon.g6 {
        background-color: #F5F5F6;
    }

    .wrapper .grid .icon.g7 {
        background-color: #E7EFFB;
    }

    .wrapper .grid .detail a {
        color: #707070;
        font-size: 1.1rem;
    }

/**********************************
        Campus Management
*********************************/

.campus-wrapper .campus-numbers {
    padding-top: 15px;
}

.camnew-mid-content {
    padding-top: 30px;
}

.campus-wrapper .campus-numbers .grid {
    padding: 15px;
    margin-bottom: 15px;
}

    .campus-wrapper .campus-numbers .grid h5 {
        color: #fff;
        font-weight: 500;
        font-size: 18px;
    }

    .campus-wrapper .campus-numbers .grid ul.ratingTop li {
        display: inline-block;
        color: #fff;
    }

    .campus-wrapper .campus-numbers .grid ul.ratingBot li {
        display: inline-block;
        color: #fff;
    }

    .campus-wrapper .campus-numbers .grid li {
        font-size: 14px;
    }

    .campus-wrapper .campus-numbers .grid.Camp1 {
        background-color: #1ABC9C;
    }

    .campus-wrapper .campus-numbers .grid.Camp2 {
        background-color: #3498DB;
    }

    .campus-wrapper .campus-numbers .grid.Camp3 {
        background-color: #8E44AD;
    }

    .campus-wrapper .campus-numbers .grid.Camp4 {
        background-color: #F39C12;
    }

    .campus-wrapper .campus-numbers .grid.Camp5 {
        background-color: #7593B2;
    }

    .campus-wrapper .campus-numbers .grid.Camp6 {
        background-color: #35A575;
    }

.campus-wrapper .campus-charts {
    margin-top: 5px;
}

    .campus-wrapper .campus-charts .grid {
        background-color: #fff;
        padding: 15px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }

        .campus-wrapper .campus-charts .grid #chartContainer {
            height: 350px;
            width: 100%;
        }

        .campus-wrapper .campus-charts .grid #chartContainer2 {
            height: 350px;
            width: 100%;
        }

/**********************************
        Campus Admission
*********************************/
.campus-admission {
    margin-top: 15px;
}

    .campus-admission .grid h3 {
        line-height: 1;
    }

    .campus-admission .grid ul.nav {
        background-color: #fff;
        border: 1px solid #F0F0F7;
    }

        .campus-admission .grid ul.nav li.nav-item a {
            border-radius: 0;
            padding: 8px 20px;
            color: #333;
            border: 1px solid #F0F0F7;
            background-color: #fff;
        }

            .campus-admission .grid ul.nav li.nav-item a.nav-link.active {
                background-color: #3498DB;
                color: #fff;
            }

    .campus-admission .grid .tab-content {
        background-color: #fff;
        padding: 15px;
    }

        .campus-admission .grid .tab-content form fieldset {
            margin-bottom: 15px;
        }

            .campus-admission .grid .tab-content form fieldset input[type="file"] {
                font-size: 12px;
                height: 32px;
                position: relative;
                left: 171px;
                top: 4px;
            }

        .campus-admission .grid .tab-content form .button-group {
            text-align: center;
            margin: 40px 0;
        }

            .campus-admission .grid .tab-content form .button-group .btn-danger {
                margin-right: 10px;
            }

.textboxctrl, .textareactrl {
    padding: 4px;
    box-shadow: none;
    border-radius: 0;
}

.labelctrl {
    font-size: 14px !important;
}

.lblchkboxctrl {
    font-size: 14px !important;
}

.lblradiobtnctrl {
    font-size: 14px !important;
}

.control-label {
    font-size: 14px !important;
}

label[for="exampleFormControlInput1"] {
    font-size: 14px !important;
}

input::-webkit-input-placeholder {
    font-size: 12px;
}

div h3 {
    font-size: 1.1rem;
}

div h5 {
    font-size: 1rem;
}

.validateStudentBasicInfo .form-group a.chosen-single {
    height: 30px !important;
    line-height: 30px !important;
    border-radius: 0 !important;
    background-color: #fff;
}

.file-input.file-input-new .btn {
    padding: 10px;
    font-size: 14px;
}

strong#classFee {
    font-size: 25px;
    font-weight: 500;
    padding-left: 0 !important;
}

div#nav-tab {
    background-color: #fff;
}

    div#nav-tab a {
        border: none;
        padding: 5px 10px;
    }

    div#nav-tab a {
        padding: 10px 20px !important;
        border: none;
        border-bottom: 1px solid #dee2e6;
        border-right: 1px solid #dee2e6;
        border-radius: 0;
    }

        div#nav-tab a.active {
            background-color: #3498DB;
            color: #fff;
        }

div#nav-tabContent {
    padding: 0 15px;
    background-color: #fff;
}

div#example_wrapper {
    margin-bottom: 15px;
}

.validateAdmissionByDate {
    margin: 10px 0;
    padding: 15px 15px;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

table.dataTable {
    border: 1px solid #ddd;
    background-color: transparent;
    border-spacing: 0;
    clear: both;
    max-width: none !important;
    border-collapse: separate !important;
}

    table.dataTable thead {
        color: #333;
        background-color: #fff;
    }

        table.dataTable thead th.ui-state-default {
            color: #333 !important;
            background: #fff !important;
            border: 1px solid #ddd !important;
        }

    table.dataTable tbody tr.odd {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }

    table.dataTable tbody tr.even {
        background-color: #fff !important;
    }

    table.dataTable tfoot th.ui-state-default {
        color: #333 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
    }

.cursor {
    background-color: #3498DB;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px;
    border: none;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
}

    .cursor:hover {
        background-color: #3498DB;
        opacity: 0.9;
    }

span#example_next, span#example_last, span#example_first, span#example_previous {
    background-color: #3498DB !important;
    color: #ffffff !important;
}

table.dataTable tbody tr td:first-child::before {
    top: 14px !important;
    left: 7px !important;
    border: none !important;
    box-shadow: none !important;
}

.esm-bg {
    background-color: #fff;
    padding: 20px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.form-check.form-check-inline.checkbox-animated-inline.checkbox-animated-inline + .checkbox-animated-inline {
    margin-left: 0 !important;
}

.chosen-container-single .chosen-single {
    height: 30px !important;
    border-radius: 0 !important;
    line-height: 30px !important;
}

button.multiselect.dropdown-toggle.btn.btn-default {
    background-color: #cfd2d40a;
    border-color: #cec1c1;
}

.cam-header-area {
    padding: 4px 5px;
    background-color: #3498DB !important;
}

a.cam-minus:before {
    content: "" !important;
}

.esm-reportBtn {
    text-align: left;
    background-color: #7f8fff;
    color: #fff;
    display: block;
    width: 100%;
    border-radius: 50px;
}

    .esm-reportBtn:hover {
        text-decoration: none;
        background-color: #6274f5;
        color: #fff;
    }

.card.mb-3.cal-top.cursor {
    border: 1px solid #3498DB;
    background-color: #fff;
    color: #333;
}

    .card.mb-3.cal-top.cursor .card-header {
        background-image: linear-gradient(to right, #254fc5 0%, #2363c3 51%, #4078f7 100%);
        color: #fff;
    }

.cal-area span i {
    font-size: 25px;
    color: #3498DB;
}

.hr-gender i.fa-male {
    font-size: 150px;
    color: #3498db;
}

.hr-gender i.fa-female {
    font-size: 150px;
    color: #e67e22;
}

.hr-gender {
    padding-top: 18px;
}

.dataTables_length label {
    margin: 5px;
}

.dataTables_wrapper .dataTables_info {
    padding: 7px;
}

.dataTables_wrapper .dataTables_paginate {
    padding: 0.25em;
}

table#detailsListTable thead tr th {
    padding: 10px 3px;
    font-size: 14px;
}

table#assetIssuanceListTable thead tr th {
    padding: 10px 3px;
    font-size: 14px;
}

.lineHeightClass {
    line-height: 1.0rem;
    font-size: small;
}

span.dx-header-filter.dx-header-filter-empty {
    color: white;
}

tr.dx-row.dx-column-lines.dx-header-row {
    background: #3498db;
    color: white;
}

.dx-datagrid-rowsview .dx-select-checkboxes-hidden > tbody > tr > td > .dx-select-checkbox {
    display: unset !important;
}

.dx-checkbox-icon {
    border: 1px solid #736f6fba !important;
}

button.multiselect.dropdown-toggle.btn.btn-default {
    line-height: 10px;
}

tfoot#tfoot tr th.ui-state-default input {
    font-size: 12px;
    padding: 0px 5px;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info {
    font-weight: 400;
    font-size: 14px;
    color: #fff;
}

div#vendorTable_length select {
    border: none;
}

.ui-widget-header {
    background: #3498DB;
    border: none;
}

td a.btn {
    padding: 2px 10px;
}

select#ddlIncreament {
    border-radius: 0;
    height: 42px;
}

.btn-group button.multiselect.dropdown-toggle.btn.btn-default {
    line-height: 16px;
}

label.checkbox {
    font-size: 12px;
}

.btn-group button.btn.btn-primary.modelsavebtnctrl, .btn-group button.btn.btn-danger.modelsavebtnctrl, button.btn.btn-primary.modelsavebtnctrl, button.btn.btn-info.modelsavebtnctrl {
    margin: 5px 0;
}

a#esm-userImage i {
    font-size: 25px;
    position: relative;
    top: 5px;
}

.esm-MobileUserCorrect {
    display: none;
}

.esm-MobileUserCorrect {
    position: relative;
    text-align: right;
}

    .esm-MobileUserCorrect a#esm-userImage {
        padding-left: 10px;
    }

    .esm-MobileUserCorrect a {
        color: #333;
    }

ul.mobileCorrection-detail {
    position: absolute;
    background-color: #fff;
    z-index: 99;
    padding: 12px 10px !important;
    right: 0;
    top: 50px;
    text-align: left;
    display: none;
}

    ul.mobileCorrection-detail li {
        padding: 5px 10px;
    }

.dx-scrollbar-horizontal.dx-scrollbar-hoverable {
    height: 15px !important;
}

.dx-scrollbar-horizontal .dx-scrollable-scroll {
    height: 17px !important;
}

.chosen-container-single .chosen-single div b {
    background-position: 0 10px;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: -18px 10px;
}

button#btnAction, button.btn-success.cursor.pr-2.csStudentAdmissionPrevillage {
    padding: 10px 12px;
    border-radius: 0;
    font-size: 14px;
}

.misc-btn {
    margin-right: 15px !important;
}

input#btnDayBook {
    white-space: normal;
}

.esm-main-wrapper {
    padding-top: 10px !important;
    z-index: -1;
}

.maindasboardwrpnew {
    padding-top: 2%;
}




@media(min-width:320px) and (max-width:575px) {
    .page-container .topbar {
        position: unset;
        z-index: unset;
    }
}




.entitybgnew {
    pointer-events: none;
    opacity: 0.4;
}


.load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*change these sizes to fit into your project*/
    width: 100px;
    height: 100px;
}

    .load hr {
        border: 0;
        margin: 0;
        width: 40%;
        height: 40%;
        position: absolute;
        border-radius: 50%;
        animation: spin 2s ease infinite;
    }

    .load :first-child {
        background: #19a68c;
        animation-delay: -1.5s;
    }

    .load :nth-child(2) {
        background: #f63d3a;
        animation-delay: -1s;
    }

    .load :nth-child(3) {
        background: #fda543;
        animation-delay: -0.5s;
    }

    .load :last-child {
        background: #193b48;
    }

@keyframes spin {
    0%, 100% {
        transform: translate(0);
    }

    25% {
        transform: translate(160%);
    }

    50% {
        transform: translate(160%, 160%);
    }

    75% {
        transform: translate(0, 160%);
    }
}



#loading-bar-spinner {
    display: none;
}

.dx-header-row {

}