@charset "utf-8";
    :root {
    --main-font-family: 'ABeeZee', sans-serif;
    --main-page-font-family: 'Signika', sans-serif;
    --color-primary: #007BFF;
    --color-success: #5cb85c;
    --color-danger: #d9534f;
    --color-info: #5bc0de;
    --color-warning: #ffcc99;
    --color-secondary: #ffcc99;
}


.bg-primary, .btn-primary, .alert-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.bg-success, .btn-success, .alert-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}
.bg-danger, .btn-danger, .alert-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}

.bg-info, .btn-info, .alert-info {
    background-color: var(--color-info) !important;
    border-color: var(--color-info) !important;
}
.bg-warning, .btn-warning, .alert-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
}


@media print {
    .d-print-none {
    display: none!important;
}
}html {
    position: relative;
    min-height: 100%}
body {
    font-family: var(--main-font-family);
    margin-bottom: 40px;
    /* background: url(https://subtlepatterns.com/patterns/symphony.png); */
}
td, th {
    text-align: left;
}
.table {
    background-color: #fff;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}


.modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    // overflow: false;
}


@media(max-width:768px) {
    .modal-dialog {
        min-height: calc(100vh - 20px);
    }
}
body>.container-fluid {
    padding: 60px 15px 0;
}

.footer>.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}
.footer a {
    color: #ff0;
    font-weight: 700;
}
.footer a:hover {
    color: #990;
    text-decoration: none;
}

table.result {
    background-color: #fff;
    width: 100%;
    border-collapse: collapse;
}
#pn {
    float: right;
}
.err {
    color: #f90;
}
#member {
    width: 1024px;
    margin: 0 auto;
}
#result {
    width: 700px;
}
#upperhead {
    float: none;
    height: 120px;
    text-align: center;
    background: #fff;
    padding: 0;
    margin: 0;
}
#logo {
    width: 11%;
    float: left;
    margin: -7px auto 0 auto;
}
#masthead {
    float: inherit;
    margin: 5px auto 0 auto;
}
#masthead h1 {
    font: 25px;
    font-weight: 700;
    line-height: 28px;
    color: #000;
    margin: 8px 0 6px 0;
    padding: 0;
}
#masthead h2 {
    font: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 22px;
    color: #000;
}
#userpanel {
    background-color: #000;
    float: none;
    height: 30px;
    margin: 0 5px 10px 5px;
    padding: 0 15px 5px 15px;
}
#userpanel p {
    padding: 4px 0 0 0;
    font-weight: 700;
    text-align: right;
    color: #666;
}
#userpanel a {
    text-align: right;
    text-decoration: none;
    color: #ff0;
}
#userpanel a:hover {
    text-decoration: none;
}
#userpanel .memberclass {
    float: left;
    color: #fff;
    font-weight: 700;
}
#leftpanel {
    background-color: #000;
    padding: 0 0 5px 0;
    margin: 0 0 -25px 0;
    width: 180px;
    float: none;
}
#hidden_data {
    display: none;
}
.hide_data {
    display: none;
}
#leftpanel h1 {
    display: block;
    font: 18px;
    font-weight: 700;
    padding: 3px 0 5px 10px;
    border: 1px solid #000;
    color: #fff;
    margin: 0 5px 0 5px;
    text-align: left;
}
#leftpanel ul {
    list-style: none;
    margin: 0 5px 0 5px;
    padding: 0;
    border: none;
}
#leftpanel ul li {
    margin: 0;
    padding: 0;
}
#leftpanel ul li a {
    display: block;
    color: #000;
    background: #fff url(../images/glossyback.gif) repeat-x bottom left;
    padding: 5px 0 5px 10px;
    text-decoration: none;
    width: 160px;
}
#leftpanel ul li a:focus, #leftpanel ul li a:hover {
    color: #fff;
    background: #fff url(../images/glossyback2.gif) repeat-x bottom left;
}
#mainpage_text {
    border: #fc0 dotted 1px;
    background-color: #fff;
    padding: 5px 5px 5px 5px;
    margin: 0;
}
#printarea {
    width: 100%;
    margin: 10px 0 0 0;
}
#bottom {
    width: 100%;
    float: none;
    padding: 0;
    margin: 0;
    color: #fff;
}
#bottom a {
    color: #fff;
}
#bottom_ruller {
    margin: 10px 0 0 0;
    float: none;
    background: url(../images/bot01.jpg) repeat-x;
}
#copyright {
    float: left;
    text-align: left;
}
#designedby {
    text-align: right;
    margin: 0 0 10px 0;
}
.rightside {
    float: none;
}

.printable {
    border: 1px dotted #333;
    margin: 3px 0 0 0;
    padding: 5px 5px 5px 5px;
    background-color: white;
}
#bottom a {
    font: 11px;
    color: #000;
    font-weight: 700;
}
#bottom a:hover {
    font: 11px;
    color: red;
    font-weight: 700;
    text-decoration: none;
}
.right1 {
    float: none;
    text-align: left;
    padding: 0 20px 0 0;
    font-weight: 700;
}
.right1 a {
    background: url(../images/h_top_wr_menu.jpg) repeat-x;
    background: #f60;
    padding: 2px 5px 4px 5px;
    color: #000;
    color: #fff;
}
.right1 a:hover {
    color: #000;
    text-decoration: none;
}
ul.paging {
    font: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.paging li {
    margin: 0;
    padding: 0;
    float: left;
}
ul.paging li a {
    float: left;
    text-decoration: none;
    background: #fff;
    color: #009;
}
ul.paging li a:hover, ul.paging li.paging-active a {
    background: #009;
}
ul.paging li.paging-disabled a, ul.paging li.paging-disabled a:hover {
    cursor: default;
}
ul.paging li.paging-current {
    padding: 5px;
    margin-right: 5px;
    background: #fff;
    color: #009;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.clear {
    font-size: 1px;
    height: 0;
    width: 0;
    clear: left;
    line-height: 0;
    display: block;
    float: none;
}
#attendance_letter {
    width: 630px;
    padding: 0 0 30px 0;
    color: #000;
}
#attendance_letter masthead {
    padding: 10px 10px 10px 10px;
}
#attendance_letter .paragraph {
    padding: 20px 0 0 0;
}
#attendance_letter p {
    padding: 0 25px 0 10px;
    font: 14px justify;
    line-height: 18px;
}
.break {
    page-break-after: always;
}
.break-before {
    page-break-before: always;
}
.shade {
    background-color: #ccc;
    font-weight: 700;
}
.shade-light-green {
    background-color: #9c0;
}
.shade-light-red {
    background-color: #f99;
}
.shade-red {
    background-color: red;
}
.rules1 {
    color: #c00;
    font: 10px;
}
.small_font1 {
    font-size: 10px;
}
.comment_red {
    font-size: 10px;
    color: red;
}
.table_head {
    padding: 0 auto 0 auto;
    font: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #000;
}
.table_shade1 {
    background-color: #ff9;
    border: none;
}
.table_shade2 {
    background-color: #fff;
    border: none;
}
.no_tableline {
    border: none;
}
.non-print {
    visibility: visible;
    display: inline;
}
#student_list {
    width: 650px;
    padding: 0 0 30px 0;
    color: #000;
}
a.button {
    float: left;
    font-size: 110%;
    font-weight: 700;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    color: #333;
    width: auto;
}
a.button:hover {
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    color: #333;
}
a.button span {
    background: #d4d0c8 url(../images/bg_btn.gif) repeat-x;
    float: left;
    line-height: 24px;
    height: 24px;
    padding: 0 10px;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
}
a.button:hover span {
    border: none;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    background: #d4d0c8 url(../images/bg_btnOver.gif) repeat-x;
    cursor: pointer;
}
.artop {
    width: 548px;
    height: 42px;
    margin: 20px 0 10px auto;
    background: #434343 url(../images/articleoptions.gif) no-repeat;
}
.artop p {
    line-height: 42px;
    color: #8b8b8b;
    text-indent: 10px;
}
.artop a {
    color: #8b8b8b;
}
.artop a:hover {
    color: #ccc;
    border-bottom: 1px dotted #666;
}
#boxes {
    float: right;
    width: 145px;
    margin: 10px;
}
#box1, #box2, #box3 {
    margin-bottom: 20px;
    background-image: url(../images/bottom.gif);
    background-position: left bottom;
    background-repeat: no-repeat;
}
#box1 h2, #box2 h2, #box3 h2 {
    text-align: right;
    padding: 23px 30px 9px 0;
    margin: 0 0 0 -1px;
    background: url(../images/boxtop.gif) top no-repeat #ececec;
    font-weight: 600;
}
#box1 p, #box2 p, #box3 p {
    padding: 9px 19px 24px 12px;
    margin: 0;
}
#newspaper-a {
    margin: 0 auto 0 auto;
    font-size: 11px;
    margin: 10px auto 10px auto;
    padding: 0 auto 0 auto;
    border-collapse: collapse;
    border: 2px solid #97a4f9;
    background: #ffc;
}
#newspaper-a th {
    padding: 3px 3px 3px 3px;
    font-weight: 700;
    font-size: 11px;
    color: #000;
    text-align: center;
    background: #97a4f9;
    border: 1px solid #3f21cb;
    color: #000;
}
#newspaper-a td {
    padding: 3px 3px 3px 3px;
    color: #000;
    border: none;
    border-left: 1px solid #333;
    border-bottom: 1px solid #333;
}
#newspaper-a .even {
    background-color: #ccc;
}

.newspaper-a {
    margin: 0 auto 0 auto;
    font-size: 11px;
    margin: 10px auto 10px auto;
    padding: 0 auto 0 auto;
    border-collapse: collapse;
    border: 2px solid #97a4f9;
    background: #ffc;
}
.newspaper-a th {
    padding: 3px 3px 3px 3px;
    font-weight: 700;
    font-size: 11px;
    color: #000;
    text-align: center;
    background: #97a4f9;
    border: 1px solid #3f21cb;
    color: #000;
}
.newspaper-a td {
    padding: 3px 3px 3px 3px;
    color: #000;
    border: none;
    border-left: 1px solid #333;
    border-bottom: 1px solid #333;
}
.newspaper-a .even {
    background-color: #ccc;
}



.not_bold {
    font-weight: 400;
    color: #000;
}
#narration {
    width: 150px;
    padding: 0 0 0 10px;
    font-size: 10px;
    color: #000;
}
.commenthidden {
    display: none;
}
.commentshown {
    display: inline;
}
.XulMenu {
    font-size: 11px;
    -moz-user-select: none;
    margin: 5px 5px 5px 5px;
}
.XulMenu .button, .XulMenu .button-active, .XulMenu .button-active:hover, .XulMenu .button:hover {
    font-size: 11px;
    line-height: normal;
    background: #9a9494;
    padding: 5px 6px 4px 6px;
    border: 1px solid #ece9d8;
    color: #000;
    text-decoration: none;
    cursor: default;
    white-space: nowrap;
    display: block;
    position: relative;
}
.XulMenu .button:hover {
    border-color: #fff #aca899 #aca899 #fff;
    background-color: #316ac5;
    color: #fff;
}
.XulMenu .button-active, .XulMenu .button-active:hover {
    border-color: #aca899 #fff #fff #aca899;
    background-color: #316ac5;
    color: #fff;
}
.XulMenu .item, .XulMenu .item-active, .XulMenu .item-active:hover, .XulMenu .item:hover {
    background: #9a9494;
    line-height: normal;
    border-bottom: 1px solid #ece9d8;
    padding: 5px 30px 5px 20px;
    color: #000;
    text-decoration: none;
    cursor: default;
    white-space: nowrap;
    display: block;
    position: relative;
}
.XulMenu .item-active, .XulMenu .item-active:hover, .XulMenu .item:hover {
    background: #316ac5;
    color: #fff;
}
.XulMenu .section {
    background: #fff;
    border: 1px solid;
    border-color: #f1efe2 #716f64 #716f64 #f1efe2;
    padding: 2px 1px 1px 2px;
    position: absolute;
    visibility: hidden;
    z-index: -1;
}
.XulMenu .arrow {
    position: absolute;
    top: 7px;
    right: 8px;
    border: 0;
}
* html .XulMenu {
    position: relative;
}
#bar {
    background: #b1a8a8;
    border: 1px solid;
    border-color: #fff #aca899 #aca899 #fff;
    padding: 0 5px 0 5px;
    cursor: default;
    margin: 2px 8px 0 8px;
    height: 38px;
}
#bar p {
    padding: 2px 10px 0 0;
    font-weight: 700;
    text-align: right;
    color: #666;
}
#bar .memberclass {
    float: right;
    color: #fff;
    font-weight: 700;
}
.virtual_div {
    display: none;
    float: left;
    margin: 2px 2px 2px 2px;
    padding: 3px 3px 3px 3px;
    border: 1px dotted #333;
    background: #9f9;
}
.button_icon {
    background: #d4d0c8 url(../images/bg_btn.gif) repeat-x;
    font-size: 90%;
    font-weight: 700;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 5px 5px 5px 5px;
    margin: 0 2px 0 0;
    color: #333;
    text-decoration: none;
}
.button_icon:hover {
    background: #d4d0c8 url(../images/bg_btnOver.gif) repeat-x;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    color: #333;
    text-decoration: none;
}
.clear_all {
    font-size: 1px;
    height: 10px;
    width: 0;
    clear: right;
    line-height: 0;
    display: block;
    float: none;
}
.link_icon {
    background: #d4d0c8 url(../images/bg_btn.gif) repeat-x;
    font-size: 90%;
    font-weight: 700;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 2px 2px 2px 2px;
    margin: 0 2px 0 0;
    color: #333;
    text-decoration: none;
}
.link_icon:hover {
    background: #d4d0c8 url(../images/bg_btnOver.gif) repeat-x;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    color: #333;
    text-decoration: none;
}
#round_block1 {
    font-size: 90%;
    width: 60px;
    margin: 2px 5px 2px 5px;
    padding: 3px 0 3px 0;
    display: block;
    background: #cfc;
    text-decoration: none;
}
.form_block {
    border: 1px dotted #999;
    padding: 5px 5px 5px 5px;
    margin: 0;
    display: none;
}
.slidingDiv {
    background: #ccc;
    border: 1px dotted #999;
    border-bottom: 3px solid #999;
    padding: 5px 15px 5px 15px;
    margin: 0;
    display: none;
}
.show_hide {
    display: none;
}
.form_field {
    background-color: #ff0;
    font-weight: 700;
}
#user {
    margin: 0;
    padding: 2px 2px 2px 2px;
}
#user:hover {
    cursor: pointer;
    background-color: #ccc;
}
#user .photo {
    margin: 0 0 0 2px;
    padding: 0;
    display: block;
    float: left;
}
#user .userdetail {
    float: inherit;
    margin: -2px 0 0 0;
    padding: 3px 0 0 30px;
}
#green {
    display: block;
    border: 1px solid #000;
    background-color: #0c0;
    width: 60px;
    height: 12px;
}
#green:hover {
    cursor: pointer;
    border-color: #ccc;
}
#red {
    display: block;
    border: 1px solid #000;
    background-color: red;
    width: 60px;
    height: 12px;
}
#red:hover {
    cursor: pointer;
    border-color: #ccc;
}
#button_fancy.add {
    margin: 1px 5px 1px 0;
    float: left;
    width: 75px;
    height: 25px;
    background: url(../images/icons/icon-add.png) no-repeat;
}
#button_fancy.add:hover {
    cursor: pointer;
    background: url(../images/icons/icon-add-hover.png) no-repeat;
}
#button_fancy.edit {
    margin: 1px 5px 1px 0;
    float: left;
    width: 75px;
    height: 25px;
    background: url(../images/icons/icon-edit.png) no-repeat;
}
#button_fancy.edit:hover {
    cursor: pointer;
    background: url(../images/icons/icon-edit-hover.png) no-repeat;
}
#button_fancy.print {
    margin: 1px 5px 1px 0;
    float: left;
    width: 75px;
    height: 25px;
    background: url(../images/icons/icon-print.png) no-repeat;
}
#button_fancy.print:hover {
    cursor: pointer;
    background: url(../images/icons/icon-print-hover.png) no-repeat;
}
#button_fancy.delete {
    margin: 1px 5px 1px 0;
    float: left;
    width: 75px;
    height: 25px;
    background: url(../images/icons/icon-delete.png) no-repeat;
}
#button_fancy.delete:hover {
    cursor: pointer;
    background: url(../images/icons/icon-delete-hover.png) no-repeat;
}
#button_fancy.save {
    margin: 1px 5px 1px 0;
    float: left;
    width: 75px;
    height: 25px;
    background: url(../images/icons/icon-save.png) no-repeat;
}
#button_fancy.save:hover {
    cursor: pointer;
    background: url(../images/icons/icon-save-hover.png) no-repeat;
}
#button_fancy.upload {
    margin: 1px 5px 1px 0;
    float: left;
    width: 75px;
    height: 25px;
    background: url(../images/icons/icon-upload.png) no-repeat;
}
#button_fancy.upload:hover {
    cursor: pointer;
    background: url(../images/icons/icon-upload-hover.png) no-repeat;
}
#button_fancy.download {
    margin: 1px 5px 1px 0;
    float: left;
    width: 75px;
    height: 25px;
    background: url(../images/icons/icon-delete.png) no-repeat;
}
#button_fancy.download:hover {
    cursor: pointer;
    background: url(../images/icons/icon-delete-hover.png) no-repeat;
}
#myform {
    font-size: 14px;
    margin: 10px auto 10px auto;
    padding: 10px 10px 10px 10px;
    width: auto;
}
#myform table {
    box-shadow: 2px 2px 4px var(--color-warning);
}
#myform .panel {
    margin: 5px 5px 5px 5px;
    padding: 10px 10px 10px 10px;
    width: 100%;
    border: #30c 2px groove;
}

#myform td {
    border: none;
}

#myform tr:first-child td  {
    background: var(--color-warning);
    border: none;
}

#myform h1 {
    font-weight: 2.5em;
    //font-weight: 700;
    background: var(--color-warning);
    color: #ff0;
    text-align: center;
    margin: -5px -3px -4px -5px;
    padding: 10px 5px 10px 5px;
    
}
#myform h2 {
    font-size: 2em;
    //font-weight: 700;
    font-weight: bold;
    text-transform: uppercase;
    background: var(--color-warning);
    text-align: center;
    //margin: -5px -3px -4px -5px;
    padding: 5px 10px 0px 10px;
}
#myform .desc {
    font-weight: 400;
    font-size: 10px;
    text-align: left;
    color: #999;
    margin: 0;
    padding: 0;
}
#myform table {
    font-size: 14px;
    border-collapse: collapse;
    border: 2px solid var(--color-warning);
}
#myform td.field_label {
    //font-size: 14px;
    font-weight: 700;
    background: var(--color-warning);
    border: none;
    border-bottom: 1px var(--color-success) dotted;
    min-width: 150px;
}
#myform .star {
    background: url(../images/mandatory.png) no-repeat center right;
    float: right;
    width: 10px;
}
#myform td.field {
    background: #fff;
    border: none;
    border-bottom: 1px var(--color-warning) solid;
    min-width: 200px;
}
#print_true_label {
    background-color: #090;
    color: #fff;
    min-width: 20px;
    height: 15px;
    padding: 1px 5px 1px 5px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 0 2px rgba(153, 153, 153);
}
#print_true_label a {
    color: #fff;
}
#print_false_label {
    background-color: red;
    color: #fff;
    min-width: 60px;
    height: 15px;
    padding: 1px 5px 1px 5px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 0 2px #999;
}
#print_false_label a {
    color: #fff;
}
#progressbox {
    border: 1px solid #09c;
    padding: 1px;
    position: relative;
    width: 400px;
    border-radius: 3px;
    margin: 10px;
    display: none;
    text-align: left;
}
#progressbar {
    height: 20px;
    border-radius: 3px;
    background-color: #033;
    width: 1%;
}
#statustxt {
    top: 3px;
    left: 50%;
    position: absolute;
    display: inline-block;
    color: #000;
}
#web_camera {
    width: 240px;
    height: 250px;
    margin: 0 auto 10px auto;
    padding: 10px 0 0 0;
    background: #ccc;
    line-height: 360px;
    text-align: center;
    color: #666;
}
.width_auto {
    min-width: auto;
}
#custom-search-input {
    margin: 0;
    margin-top: 10px;
    padding: 0;
}
#custom-search-input .search-query {
    padding-right: 3px;
    padding-left: 3px;
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#custom-search-input button {
    border: 0;
    background: 0 0;
    padding: 2px 5px;
    margin-top: 2px;
    position: relative;
    left: -28px;
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #d9230f;
}
.search-query:focus+button {
    z-index: 3;
}
.multiselect-container>li>a>label {
    padding:  1px 3px 1px 3px;
}

.loadingajx00{
    padding:  10px 30px 10px 30px;
    min-width: 620px;
    min-height: 400px;
    background: url(../images/progress-01.gif) center no-repeat;
}

.custom-control-input:focus~.custom-control-label::before {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 47, 69, 0.25) !important;
}

.custom-control-input:checked~.custom-control-label::before {
  border-color: var(--color-success) !important;
  background-color: var(--color-success) !important;
}

.custom-control-input:active~.custom-control-label::before {
  background-color: red !important;
  border-color: var(--color-success) !important;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: var(--color-success) !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: .9rem;
}
#mainpage {
    margin: 5px 10px 0px 3px;
    font-family: var(--main-page-font-family);
    height:  82vh;
    font-size: .9rem;
    overflow-x: auto;
    overflow-y: auto;
    padding: 0.5rem;
    
}

/* width: 100%;
    
    white-space: nowrap;
*/

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

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--color-warning); 
    border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-warning);
    height: 50px;
    border-radius: 15px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary); 
}
*/