.scroll-y {overflow-y:auto}



#body .dt-container {
    display: flex;
    font-size: 14px;
    align-items: center;
    flex-wrap: wrap;
}

#body .dt-container input[type="text"], #body .dt-container input[type="serch"] {
    height: 40px;
    border-radius: 10px;
    padding: 0 10px;
    border: none;
}
#body .dt-container select {
    height: 40px;
    background-color: #fff !important;
    margin: 0px 0 0 0;
}

#body .dt-container > * {}
#body .dt-container .dt-layout-row {flex: 0 1 100%;display: flex;width: 100%;align-items: center;}
#body .dt-container .dt-layout-row.dt-layout-table {display: block;}
#body .dt-container .dt-layout-row .dt-layout-cell {}
#body .dt-container .dt-layout-row .dt-layout-cell.dt-start {}
#body .dt-container .dt-layout-row .dt-layout-cell.dt-end {margin: 0 0 0 auto;}
#body .dt-container .dt-layout-row .dt-layout-cell .dt-length {}
#body .dt-container .dt-layout-row .dt-layout-cell .dt-length select {margin:0 10px 0 0;min-width: 70px;border: none;height: 40px;padding: 0 15px;border-radius: 5px;}

#body .dt-container .dt-layout-row .dt-layout-cell .dt-search {}
#body .dt-container .dt-layout-row .dt-layout-cell .dt-search input {background: var(--c-gray-lighter) !important;border: none;height: 40px;border-radius: 10px;margin: 0 0 0 10px;}


#body .dt-paging {
}

#body .dt-paging .dt-paging-button { width: 40px; height: 40px; display: inline-block; text-decoration: none; line-height: 40px; text-align: center; color: #000; cursor: pointer; border: none; background: none; padding: 0; box-shadow: none;}
#body .dt-paging .dt-paging-button:hover {color:#000 !important; font-weight: 600;}
#body .dt-paging .dt-paging-button.last, #body .dt-paging .dt-paging-button.first {display:none}
#body .dt-paging .dt-paging-button.previous { font-size: 0; }
#body .dt-paging .dt-paging-button.previous::before { content: "\e912"; font-family: icomoon; font-size: 16px; }
#body .dt-paging .dt-paging-button.next { font-size: 0; margin: 0; }
#body .dt-paging .dt-paging-button.next::before { content: "\e911"; font-family: icomoon; font-size: 16px; }

#body .dt-paging .dt-paging-button.current { background: var(--c-main); color: #fff !important; border-radius: 50%; padding: 0; border: none; font-weight: 600;}
#body .dt-paging > span { display: inline-block; vertical-align: top; }






#body .dt-container .dataTables_length {}
#body .dt-container .dataTables_length label {}
#body .dt-container .dataTables_length label select {display: inline-block;width: auto;height: 50px;width: 70px;margin: 0 10px;border: none;border-radius: 10px;padding: 0 10px;}


#body .dt-container .dataTables_filter {
    grid-column: span 1;
    text-align: right;
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
    max-width: 930px;
    justify-content: flex-end;
    margin: 0;
}

#body .dt-container .dataTables_filter label {
    white-space: nowrap;
    order: 6;
    margin: 0 0 0 20px;
}

#body .dt-container .dataTables_filter select {
    /* box-shadow:0 0 20px -16px var(--c-main); */
}

#body .dt-container .dataTables_filter input {
    height: 50px;
    width: auto;
    margin: 0 0 0 10px;
    border: none !important;
    /* box-shadow: 0 0 20px -16px var(--c-main); */
    border-radius: 10px;
    padding: 0 10px;
    background: var(--c-white);
}

#body .dt-container #filters {
    display: flex;
    grid-column: span 1;
    grid-gap: 10px;
    flex: 1;
    margin: 0 0 0 80px;
}

#body .dt-container #filters > span {
    flex: 1;
    max-width: 33.33%;
}

#body .dt-container .dataTables_info {
    grid-column: span 1;
    font-weight: 400;
    font-size: 12px;
    flex: 0 1 50%;
    align-self: center;
    text-align: left;
}

#body .dt-container .dataTables_paginate {
    flex: 0 1 50%;
    text-align: right;
    justify-content: flex-end;
}

#body .dt-container .dataTable {
    font-size: 13px;
    margin: 20px 0 40px 0;
    width: 100% !important;
    border: none;
    flex: 0 1 100%;
}

#body .dt-container .dataTable thead {
}

#body .dt-container .dataTable thead tr {
}

#body .dt-container .dataTable thead tr th {
    padding: 10px 27px 10px 10px;
    background: var(--c-main);
    color: #fff;
    cursor: pointer;
    position: relative;
    border: none;
}

#body .dt-container .dataTable thead tr th.text-right {
    text-align: right
}

#body .dt-container .dataTable tbody {
}

#body .dt-container .dataTable tbody tr {
}

#body .dt-container .dataTable tbody tr td { padding: 10px; box-shadow: none; border: none; }

#body .dt-container .dataTable tbody tr td.text-right { text-align: right }
#body .dt-container .dataTable tbody tr td.actions { }
#body .dt-container .dataTable tbody tr td.actions a { margin: 0 0 0 18px; }

#body .dt-container .dataTable tbody tr td.actions a i { }

#body .dt-container .dataTable tbody tr.odd { }
#body .dt-container .dataTable tbody tr.even { background: var(--c-gray-lighter); }
#body .dt-container .dataTable tbody tr.even { background: var(--c-gray-lighter); }
#body .dt-container .dataTable tbody tr.disabled td:not(.actions) { text-decoration: line-through; }

#body .dataTables_paginate { }
#body .dataTables_paginate .paginate_button { width: 40px; height: 40px; display: inline-block; text-decoration: none; line-height: 40px; text-align: center; color: #000; cursor: pointer; }
#body .dataTables_paginate .paginate_button.previous {font-size: 0;}
#body .dataTables_paginate .paginate_button.previous::before {content: "\e912";font-family: icomoon;font-size: 16px;}
#body .dataTables_paginate .paginate_button.next {font-size: 0;margin: 0;}

#body .dataTables_paginate .paginate_button.next::before {content: "\e911";font-family: icomoon;font-size: 16px;}
#body .dataTables_paginate .paginate_button.current {background: var(--c-main);color: #fff !important;border-radius: 50%;padding: 0;border: none;}
#body .dataTables_paginate > span {display: inline-block;vertical-align: top;}

#body .dt-container {align-items: flex-start;}
#body .dt-container .dataTables_length {margin: 0 auto 0 0;}

#body .dt-container .dataTables_length label {}
#body .dt-container .dataTables_length label select {}
#body .dt-container .dataTable {}
#body .dt-container .dataTable thead {}
#body .dt-container .dataTable thead tr {}
#body .dt-container .dataTable thead tr th {}
#body .dt-container .dataTable thead tr:nth-child(2) th[data-filter] { padding-top: 0; }
#body .dt-container .dataTable thead tr th[data-actions] {text-align:right}

#body .dt-container .dataTable thead tr.filters {background: #d9d6ea;}
#body .dt-container .dataTable thead tr.filters th {background: none;}
#body .dt-container .dataTable thead tr.filters th:first-child {}
#body .dt-container .dataTable thead tr.filters th:last-child {}
#body .dt-container .dataTable thead tr.filters th input {height: 40px;}

#body .dt-container .dataTable tbody {
}

#body .dt-container .dataTable tbody tr.dtr-expanded { background: var(--c-gray-light) !important; border-radius: 0 !important; }
#body .dt-container .dataTable tbody tr.dtr-expanded td {border-radius: 0 !important;}
#body .dt-container .dataTable tbody tr.dtr-expanded + tr.child { background: var(--c-gray-light); }
#body .dt-container .dataTable tbody tr.dtr-expanded + tr.child {border-radius:0 !important}
#body .dt-container .dataTable tbody tr.dtr-expanded + tr.child td {border-radius:0 !important}

#body .dt-container .dataTable tbody tr:hover { background: var(--c-gray-light); }

/* Row actions — the toggle in the first column and the panel it opens in a
   DataTables child row underneath. The buttons used to be three bare icons in
   the cell; there was never room for more than that, which is exactly why
   nobody could tell them apart. */
#body .dt-container .dataTable tbody tr td .btn-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: solid 1px var(--c-gray);
    border-radius: 20px;
    background: var(--c-white);
    color: var(--c-gray-dark);
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
#body .dt-container .dataTable tbody tr td .btn-row-actions:hover,
#body .dt-container .dataTable tbody tr.dt-hasChild td .btn-row-actions {
    border-color: var(--c-main);
    color: var(--c-main);
}
#body .dt-container .dataTable tbody tr td .btn-row-actions i { font-size: 11px; width: 8px; }

#body .dt-container .dataTable tbody tr.dt-hasChild { background: var(--c-gray-light); }
#body .dt-container .dataTable tbody tr.row-actions-child > td { padding: 0; background: var(--c-gray-light); }

/* The child row's cell spans every column, so on a table this wide its content
   would sit off to the left of wherever the admin has scrolled to. Sticky pins
   the panel to the left edge of the visible area instead. */
#body .dt-container .dataTable tbody tr.row-actions-child .row-actions-panel {
    position: sticky;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    padding: 10px;
    white-space: normal;
}
#body .dt-container .dataTable tbody tr.row-actions-child .row-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: var(--c-white);
    box-shadow: 0 0 10px rgb(0 0 0 / 8%);
    color: var(--c-gray-dark);
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}
#body .dt-container .dataTable tbody tr.row-actions-child .row-action:hover { color: var(--c-main); }
#body .dt-container .dataTable tbody tr.row-actions-child .row-action i { font-size: 17px; width: 20px; text-align: center; }
#body .dt-container .dataTable tbody tr.row-actions-child .row-action.btn-complete i,
#body .dt-container .dataTable tbody tr.row-actions-child .row-action.btn-live i { color: var(--c-main); }
#body .dt-container .dataTable tbody tr.row-actions-child .row-action.btn-complete i.fa-solid,
#body .dt-container .dataTable tbody tr.row-actions-child .row-action.btn-live i.fa-solid { color: var(--c-orange); }
#body .dt-container .dataTable tbody tr.row-actions-child .row-action.btn-delete i { color: #d50000; }
#body .dt-container .dataTable tbody tr.row-actions-child .row-action.btn-delete:hover { color: #d50000; }
#body .dt-container .dataTable tbody tr td { } 
#body .dt-container .dataTable tbody tr td[data-active] {font-size:18px;}
#body .dt-container .dataTable tbody tr td[data-actions] {
    text-align: right;
    white-space: nowrap;
}
#body .dt-container .dataTable tbody tr [data-actions] button {
    border: none;
    background: none;
    font-size: 16px;
    color: var(--c-gray-dark);
    width: 30px;
    height: 30px;
}
#body .dt-container .dataTable tbody tr [data-actions] .btn {}
#body .dt-container .dataTable tbody tr [data-actions] .btn i {
    font-size: 120%;
    margin: 0 7px 0 0;
}
#body .dt-container .dataTable tbody tr [data-actions] button:hover {color:var(--c-main);background: var(--c-white);border-radius: 50%;box-shadow: 0 0 10px rgb(0 0 0 / 5%);}
#body .dt-container .dataTable tbody tr [data-actions] button i {}
#body .dt-container .dataTable tbody tr td .user-pic {
    max-width: 45px;
    width: 45px;
    border-radius: 50%;
    border: solid 2px var(--c-white);
    box-shadow: 0 0 0 1px var(
    --c-gray);
    display: inline-block;
}
#body .dt-container #exam-table {
}

#body .dt-container #exam-table thead {
}

#body .dt-container #exam-table thead tr th:last-child {
    text-align: right;
}

#body .dt-container #exam-table tbody tr {
}

#body .dt-container #exam-table tbody tr td:last-child {
    text-align: right;
    vertical-align: middle;
}

#body .dt-container #exam-table tbody tr td:last-child .chart-wrap {
    margin: 0 15px 0 0;
}

#page .dt-container .select2-container .select2-selection {
    box-shadow: 0 0 20px -16px var(--c-main);
    border-radius: 10px !important;
    padding: 0 10px;
    overflow-y: auto;
    white-space: nowrap;
    overflow: hidden;
}

#page .dt-container .select2-container .select2-selection .select2-selection__rendered {
    padding: 0;
}

#page .dt-container .select2-container .select2-selection > .select2-search.select2-search--inline {
    margin: 10px 0;
}

#page .dt-container .select2-container .select2-selection > .select2-search.select2-search--inline textarea {
    font-family: Roboto;
    font-size: 15px;
    padding: 4px 0 0 0;
}

table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after {
    position: absolute;
    display: block;
    opacity: 0.125;
    right: 10px;
    line-height: 9px;
    font-size: 0.9em;
}

table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:before {bottom: 50%;content: "â–´";}
table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:after {top: 50%;content: "â–¾";}
table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after,table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:after {opacity: 0.6;}
table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting_asc_disabled:before {display: none;}
table.dataTable thead > tr > th:active, table.dataTable thead > tr > td:active {outline: none;}

div.dataTables_scrollBody table.dataTable thead > tr > th:before, div.dataTables_scrollBody table.dataTable thead > tr > th:after, div.dataTables_scrollBody table.dataTable thead > tr > td:before, div.dataTables_scrollBody table.dataTable thead > tr > td:after {display: none;}

#body .dt-container .dataTable tbody tr td.dtr-control {
    padding: 10px 10px 10px 10px;
    white-space: normal;
    position: relative;
    text-align: left;
}

@media (max-width: 1015px) {
    #body .dt-container .dataTable tbody tr:hover {background:none}
    #body .dt-container .dataTable tbody tr td.dtr-control {padding: 10px 10px 10px 40px;}
    #body .dt-container .dataTable tbody tr td.dtr-control::before {left: 6px;content: "\e910";font-family: 'icomoon';color: #fff;border: none;position: absolute;top: 50%;transform: translateY(-50%);background: #ccc;font-size: 10px;width: 20px;height: 20px;text-align: center;line-height: 20px;padding: 0;border-radius: 50%;margin: 0;}

    #body .dt-container .dataTable {margin-bottom: 20px;}
    #body .dt-container #exam-table tbody tr td:last-child {text-align: left;}
    #body .dt-container .dataTables_filter {width: 100%;flex: 0 1 100%;}
    #body .dt-container .dataTables_filter label {margin: 10px 0 0 0;width: 100%;}

    #body .dt-container .dataTables_filter label input {width: 100%;margin: 0;}
    #body .dt-container .dataTables_length {width: 100%;}

    #body .dt-container .dataTables_length label {display: flex;align-items: center;}
    #body .dt-container .dataTables_length label select {flex: 1}
    #body .dt-container .dataTables_info {flex: 0 1 100%;text-align: center;padding: 0 0 10px 0;}
    #body .dt-container .dataTables_paginate {flex: 0 1 100%;text-align: center;}
    #body .dt-container .dataTable  tbody tr.dtr-expanded td.dtr-control::before {content: "\e90f";}
    #body table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, #body table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {content: "\e90f";}

    table.dataTable>tbody>tr.child ul.dtr-details {width: 100%;}
    table.dataTable>tbody>tr.child ul.dtr-details>li {padding: 3px 0 !important;}
    table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-title {display: inline;}
    table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-title::after {content:": "}

    table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data {display: inline-block;vertical-align: middle;}
}

@media (max-width:767px) {
    #body .dt-container .dt-layout-row {flex-wrap:wrap}
    #body .dt-container .dt-layout-row .dt-layout-cell {flex: 0 1 100%;}
    #body .dt-container .dt-layout-row .dt-layout-cell .dt-length {display: flex;align-items: center;}
    #body .dt-container .dt-layout-row .dt-layout-cell .dt-length select {flex:1;order: 2;margin: 0 0 0 10px;}
    #body .dt-container .dt-layout-row .dt-layout-cell .dt-length label {}
    #body .dt-container .dt-layout-row .dt-layout-cell .dt-search {display: flex;align-items: center;}
    #body .dt-container .dt-layout-row .dt-layout-cell .dt-search input {flex:1}
}