/* Colors */

body {
    color: rgb(52, 71, 103) !important;
    font-size: 0.875rem;
}

.danger {
    color: var(--danger)
}

.text-danger {
    color: var(--danger)
}

.warning {
    color: var(--warning)
}

.info {
    color: var(--info)
}

.bg-light {
    color: var(--bg-light)
}


.fc-white {
    color: #fff;
}

.fc-primary {
    color:var(--primary);
}

.fc-secondary {
    color: var(--secondary);
}


.background-warning, .modal-edit, .btn-warning, .btn-outline-warning:hover, .btn-edit {
    background-color: var(--warning);
    color: #000;
}

.btn-outline-warning {
    color: var(--warning);
    border-radius: 5px;
    border-color: var(--warning);
}

.background-success, .modal-add, .btn-success, .btn-outline-success:hover, .btn-add, .rz-success {
    background-color: var(--success);
    color: #fff;
}

.btn-outline-success {
    color: var(--success);
    border-radius: 5px;
    border-color: var(--success);
}


.background-primary, .modal-primary, .rz-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

 .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    color: var(--primary) !important;
    border-color: var(--primary);
    background-color:#fff !important;
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #000;
}

.background-danger, .modal-danger, .btn-danger, .btn-outline-danger:hover, .rz-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}


h2 {
    color: #3F464D;
}

.page-header {
    border-radius:1rem;
    padding-top:15px;
    margin-left:-20px;
    margin-right:-20px;
    background-color: var(--header);
}

.page-header-text {
    color: white;
    font-size: 20px;
}




    .student-name {
        padding-top: 5px;
    }

    .modal-header {
        border-radius: 1rem;
    }

    .page-tools {
        padding-top: 5px;
    }

    .table {
        margin-bottom: 0px;
    }

    img.milvet-logo {
        height: 37px;
        padding-right: 5px;
    }

    img.header-logo {
        height: 40px;
    }


    img .school-logo {
        height: 40px;
        padding-right: 5px;
    }


    /* Card */

    .card {
        background-color: rgb(255 255 255 / 37%);
        border-radius: 1rem;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.6875rem 0rem;
        border-bottom: #6c757d85 3px solid;
    }

    .header-card {
        background-color: rgb(255 255 255);
        border-radius: 1rem;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.6875rem 0rem;
        border-bottom: #6c757d85 3px solid;
    }

    .card-student-pop {
        border-left: 3px var(--primary) solid
    }

    .card-header {
        background-color: transparent;
        border-bottom: none;
    }

        .card-header > h2 {
            margin-bottom: 0px;
        }


    .bg-primary {
        background-color: var(--header) !important;
    }

    .bg-primary-light {
        background-color: var(--rz-primary-light) !important;
    }

    .btn-success {
        color: var(--rz-white);
        background-color: var(--success);
        border-color: var(--success);
    }

    .btn-success:hover {
        color: var(--rz-white);
        background-color: var(--success);
        border-color: var(--success);
    }

    .btn-warning {
        color: #000;
        background-color: var(--warning) !important;
        border-color: var(--warning) !important;
    }

    .btn-danger {
        color: #fff;
        background-color: var(--danger) !important;
        border-color: var(--danger) !important;
    }
    .bg-danger {
        background-color: var(--danger) !important;
    }

    .bg-secondary {
        background-color: var(--secondary) !important;
    }

    .bg-success {
        background-color: var(--success) !important;
    }

    .bg-info {
        background-color: var(--tertiary) !important;
    }

    .text-primary {
        color: var(--primary) !important;
    }

    .text-bg-primary {
        color: var(--rz-white) !important;
    }

    .text-secondary {
        color: var(--secondary) !important;
    }

    .text-bg-secondary {
        color: var(--rz-white) !important;
    }

    .bg-warning-schedule {
        background-color: var(--warning) !important;
    }



    .chart-buttons {
        margin-top: -100px;
        z-index: 100;
        position: relative;
    }

    /* Widgets */

    .widget-heading {
        font-size: 1.2rem;
        margin: -0.5rem 0 0;
        display: block;
        opacity: .6;
    }

    .widget-subheading {
        font-size: 1rem;
        margin: -0.5rem 0 0;
        display: block;
        opacity: .6;
    }

    .widget-numbers-main {
        font-weight: bold;
        font-size: 1.5rem;
        display: block;
        line-height: 1;
        margin: .5rem auto;
    }

    .widget-numbers {
        /* font-weight: bold; */
        font-size: 1.25rem;
        display: block;
        line-height: 1;
        margin: .5rem auto;
        color: #6c757d;
    }

    .widget-student-pop {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .milvet-logo-login {
        padding-right: 5rem;
        padding-left: 5rem;
        margin-bottom: 2rem;
    }


    /* Radzen Colors */
    :root {
        --header: #304269;
        --primary: #304269; /* Customized */
        --secondary: #525B60; /* Customized */
        --tertiary: #7497AA; /* Customized */
        --Dark-Cyan: #578E8E; /* Customized */
        --success: #457346; /* Customized */
        --danger: #b71b1b; /* Customized */
        --warning: #FF9A03; /* Customized */
        --info: #7497aa; /* Customized */
        --bg-light: #ececec;
        --rz-white: #ffffff;
        --rz-black: #000000;
        --rz-base-50: #fafafa;
        --rz-base-100: #f5f5f5;
        --rz-base-200: #eeeeee;
        --rz-base-300: #e0e0e0;
        --rz-base-400: #bdbdbd;
        --rz-base-500: #9e9e9e;
        --rz-base-600: #757575;
        --rz-base-700: #616161;
        --rz-base-800: #424242;
        --rz-base-900: #212121;
        --rz-primary: #304269; /* Customized */
        --rz-primary-light: #304269bf; /* Customized */
        --rz-primary-lighter: rgba(67, 64, 210, 0.12);
        --rz-primary-dark: #3633a8;
        --rz-primary-darker: #2e2c8f;
        --rz-secondary: #e91e63;
        --rz-secondary-light: #ed4b82;
        --rz-secondary-lighter: rgba(233, 30, 99, 0.12);
        --rz-secondary-dark: #ba184f;
        --rz-secondary-darker: #9e1443;
        --rz-info: #2196f3;
        --rz-info-light: #4dabf5;
        --rz-info-lighter: rgba(33, 150, 243, 0.2);
        --rz-info-dark: #1a78c2;
        --rz-info-darker: #1666a5;
        --rz-success: #457346; /* Customized */
        --rz-success-light: #70bf73;
        --rz-success-lighter: rgba(76, 175, 80, 0.16);
        --rz-success-dark: #3d8c40;
        --rz-success-darker: #347736;
        --rz-warning: #FF9A03; /* Customized */
        --rz-warning-light: #ffad33;
        --rz-warning-lighter: rgba(255, 152, 0, 0.2);
        --rz-warning-dark: #cc7a00;
        --rz-warning-darker: #ad6700;
        --rz-danger: #f44336;
        --rz-danger-light: #f6695e;
        --rz-danger-lighter: rgba(244, 67, 54, 0.2);
        --rz-danger-dark: #c3362b;
        --rz-danger-darker: #a62e25;
        --rz-on-primary: #ffffff;
        --rz-on-primary-light: #ffffff;
        --rz-on-primary-lighter: #4340D2;
        --rz-on-primary-dark: #ffffff;
        --rz-on-primary-darker: #ffffff;
        --rz-on-secondary: #ffffff;
        --rz-on-secondary-light: #ffffff;
        --rz-on-secondary-lighter: #e91e63;
        --rz-on-secondary-dark: #ffffff;
        --rz-on-secondary-darker: #ffffff;
        --rz-on-info: #ffffff;
        --rz-on-info-light: #ffffff;
        --rz-on-info-lighter: #2196f3;
        --rz-on-info-dark: #ffffff;
        --rz-on-info-darker: #ffffff;
        --rz-on-success: #ffffff;
        --rz-on-success-light: #ffffff;
        --rz-on-success-lighter: #4caf50;
        --rz-on-success-dark: #ffffff;
        --rz-on-success-darker: #ffffff;
        --rz-on-warning: #ffffff;
        --rz-on-warning-light: #ffffff;
        --rz-on-warning-lighter: #ff9800;
        --rz-on-warning-dark: #ffffff;
        --rz-on-warning-darker: #ffffff;
        --rz-on-danger: #ffffff;
        --rz-on-danger-light: #ffffff;
        --rz-on-danger-lighter: #f44336;
        --rz-on-danger-dark: #ffffff;
        --rz-on-danger-darker: #ffffff;
        --rz-series-0: #A6333D !important; /* Customized */
        --rz-series-1: #d92748 !important; /* Customized */
        --rz-series-2: #FF9A03 !important; /* Customized */
        --rz-series-3: #22802C !important; /* Customized */
        --rz-series-4: #ff8a65;
        --rz-series-5: #ffee58;
        --rz-series-6: #9ccc65;
        --rz-series-7: #26a69a;
        --rz-series-8: #4fc3f7;
        --rz-series-9: #7f5cce;
        --rz-series-10: #ce93d8;
        --rz-series-11: #f48fb1;
        --rz-series-12: #ffab91;
        --rz-series-13: #fff176;
        --rz-series-14: #aed581;
        --rz-series-15: #4db6ac;
        --rz-series-16: #81d4fa;
        --rz-series-17: #a58cdd;
        --rz-series-18: #e1bee7;
        --rz-series-19: #f8bbd0;
        --rz-series-20: #ffccbc;
        --rz-series-21: #fff59d;
        --rz-series-22: #c5e1a5;
        --rz-series-23: #80cbc4;
        --rz-series-24: #b3e5fc;
        --rz-icon-size: 2.2rem; /*custom*/
    }
    --danger: #c22d36; /* Customized */

    /* Radzen Overwrites */

    .rz-data-grid {
        border-radius: 10px;
    }

    .rz-dialog {
        border-radius: 10px;
    }

    .rz-layout .rz-body {
        background-color: rgb(248, 249, 250) !important;
    }

    .rz-footer {
        background-color: var(--rz-base-200)
    }

    .rz-body {
        background-color: var(--rz-white);
    }

    .rz-header {
        background-color: var(--header);
        height: 56px;
    }

    ul.rz-profile-menu {
        list-style: none;
        margin-bottom: 0;
        padding: var(--rz-profile-menu-padding);
        display: inline-block;
        background-color: var(--header);
        border-left: var(--rz-profile-menu-border);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
    }

    .rz-panel-menu .rz-navigation-menu .rz-navigation-item-icon {
        font-size: 1.5rem;
    }

    .rz-panel-menu .rz-navigation-item-icon {
        font-size: 1.5rem;
    }

    .rz-scheme-pastel .rz-series-item-0 {
        fill: var(--danger);
        stroke: var(--danger);
    }

    .rz-scheme-pastel .rz-series-item-1 {
        fill: var(--warning);
        stroke: var(--warning);
    }

    .rz-scheme-pastel .rz-series-item-2 {
        fill: var(--rz-success);
        stroke: var(--rz-success);
    }

    .rz-panel-titlebar-toggler {
        color: var(--primary);
        border: 2px solid var(--primary);
        border-radius: 4px;
    }

        .rz-panel-titlebar-toggler:hover {
            color: var(--primary);
            border: 2px solid var(--primary);
            border-radius: 4px;
        }

    .rz-progressbar-label {
        color: black;
        font-weight: 600;
    }

    .announcement {
        border-left: 6px solid var(--primary);
        padding-left: 10px;
    }


.row-question {
    border-bottom:1px solid gray;
}
/* VIEWPORT OVERWRITES*/
/*Small devices (landscape phones, 576px and up)*/
@media only screen and (min-width:576PX) {
    img.header-logo {
        height: 70px;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media only screen and (min-width:768px) {
    img.header-logo {
        height: 70px;
    }
}

/* Large devices (desktops, 992px and up)*/
@media only screen and (min-width: 992px) {
    .page-header {
        margin-bottom: -50px;
        min-height: 175px;
    }

    .page-header-text {
        font-size: 30px;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media only screen and (min-width: 1200px) {
}