:root {
    /* Main */
    --primary-color: #6348E6;
    --primary-text-color: #fff;
    --secondary-color: #00E3C4;
    --secondary-text-color: #fff;
    /* Text */
    --text-dark-color: #636363;
    --text-light-color: #fff;
    /* Button */
    --primary-btn-color: #00E3C4;
    --primary-btn-hover-color: #00C8AB;
}

body {
    font-family: 'Nunito';
}

#divErrorMessage{
    font-size: 14px;
}

.form-control,
.form-select {
    font-size: 13px;
    border-radius: 10px;
    border: 1px solid #E7E6E6;
}
button {
    border-radius: 10px !important;
}

a {
    text-decoration: none;
}

    a:link {
        color: #0067b8;
    }

    a:hover {
        color: #666;
        text-decoration: underline;
    }


.btn-login, .btn-next-question {
    color: var(--text-light-color);
    background-color: #00e3c4;
    border: none;
}

    .btn-login:hover, .btn-next-question:hover {
        color: var(--text-light-color);
        background-color: #00C8AB;
        border: none;
    }



.bg-login-image {
    background: url(../images/login-graphic.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 91%;
    margin: 15px 12px;
}

.header{
    color:yellow;
}


.btn-datatable {
    padding: 2px 8px;
    background: #0d6efd;
    color: white;
    font-size: 13px;
}

    .btn-datatable:hover {
        color: white;
    }



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

.form-input-error {
    border-color: #dc3545 !important;
}
    .form-input-error:focus {
        box-shadow: 0 0 0 0.25rem rgb(253 13 35 / 25%) !important;
    }

.form-error-text {
    font-size: .875em;
    color:red;
}

.btn-edit,
.btn-view-class-student {
    color: #666;
    cursor: pointer;
}

.btn-active, .btn-suspend {
    cursor: pointer;
}

.btn-active {
    color: darkgreen;
}

.btn-suspend {
    color: darkred;
}

    .btn-add, .btn-save, .btn-import {
        background-color: #00E3C4;
        color: white;
        padding: 2px 9px;
    }

.btn-reset {
    background-color: #c80042;
    color: white;
    padding: 2px 9px;
}
    .btn-reset:hover {
        background-color: #c80000;
        color: white;
    }


.btn-add:hover, .btn-save:hover, .btn-import:hover {
    color: white;
    background-color: #00C8AB;
}

.btn-delete {
    color: #666;
    cursor: pointer;
}




table.dataTable thead th,
table.dataTable tbody th, 
table.dataTable tbody td {
    padding: 0.625rem 1.25rem;
}


.dataTables_wrapper .dataTables_filter {
    font-size:13px;
}

    .dataTables_wrapper .dataTables_filter input{

    }

table.dataTable thead th {
    color: #566a7f;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: 1px;
}

table.dataTable thead td {
    color: #566a7f;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: 1px;
}
table.dataTable tbody td {
    color: #697a8d;
    font-size: 13px;
}
table.dataTable tbody td:first-child{
    font-weight: bold;
}

.dataTables_info {
    font-size: 14px;
}
.dataTables_paginate.paging_simple_numbers {
    font-size: 14px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 3px 10px;
    border: 0px;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button:active {
        background: rgb(0 0 0 / 8%);
        border: 0px;
        color: black !important;
        box-shadow: none;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:active {
        background: #00E3C4;
        border: 0px;
        box-shadow: none;
        color: white !important;
    }

::placeholder,
::-webkit-input-placeholder {
    color: #c0c0c0 !important;
}

.form-switch .form-check-input:checked{
    background-color: #00e3c4;
    border:none;
}


.ui-autocomplete {
    position: absolute;
    z-index: 99999;
    top: 0;
    left: 0;
    background-color: #ffffff;
    border: 1px solid #ccc;
    list-style: none;
    padding: 4px 0;
}

    .ui-autocomplete .ui-menu-item-wrapper {
        padding: 3px 15px;
        cursor: pointer;
    }


.ui-state-hover, .ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none;
}

.remove-assign-student {
    cursor: pointer;
}

#draggableCardList .card .fa-trash {
    cursor: pointer;
    color: #dc3545;
}

#draggableCardList .card .card-header {
    cursor: move;
}

#draggableCardList .card + .card {
    margin-top: 10px;
}

.btn-approved .fa-circle-check {
    color: #00e3c4;
    font-size: 20px;
    cursor: pointer;
}

.btn-declined .fa-circle-xmark {
    color: #EF476F;
    font-size: 20px;
    cursor: pointer;
}

.btn-more {
    text-align: center;
    width: 22px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
    color: #666 !important;
}





#studentCollectionModal .collectionTab {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(0,0,0,.125);
    font-size: 15px;
}

#studentCollectionModal .card-body {
    font-size: 14px;
}


#studentCollectionModal ul {
    margin-bottom: 0px;
}

.btn-danger {
    background-color: #EF476F;
}
.btn-cancel {
    background-color: #c0c0c0;
}
.btn-filter {
    background-color: #6348E6;
    color: white;
}
    .btn-filter:hover {
        background-color: #5035d2;
        color: #fff;
    }


.modal-body{
    font-size: 14px;
}

.student-autocomplete{
    font-size: 12px;
    background: white;
   
}

    .student-autocomplete .ui-menu-item-wrapper {
        border: 0px;
        font-weight: normal;
    }

.student-autocomplete .ui-state-active {
    border: 0px;
    box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 4%);
    background: none;
    font-weight: normal;
    color: black;
}

/* Begin Admin Custom Header */
.header-top-right-menu .dropdown-item {
    font-size: 12px;
    padding: 5px 10px;
    color: #212529;
}
    .header-top-right-menu .dropdown-item:hover,
    .header-top-right-menu .dropdown-item:active {
        text-decoration: none;
        background-color: #e9ecef;
    }

#logout{
    cursor: pointer;
}

/* End Admin Custom Header */