/* @import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"); */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:hover {
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'%3e%3cg       transform='rotate(0 256 256)'%3e%3crect id='r' x='31' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

/* || HYPERLINK STYLE */
.drivehyperlink {
    color: black;
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'%3e%3cg%3e%3crect y='323.6' width='512' height='30' /%3e%3cpolygon points='491.7,87.9 256,323.6 256,281.1 470.5,66.7' /%3e%3cpolygon points='20.3,87.9 256,323.6 256,281.1 41.5,66.7 '/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

.hyperlinkvalue {
    color: grey !important;
    text-decoration: none !important;
    cursor: not-allowed !important;
}


.monoskop {
    font-family: 'GFS Neohellenic', sans-serif;
    color: black;
    font-size: 120%
}

.monoskop:hover {
    font-family: 'GFS Neohellenic', sans-serif;
    color: red;
    font-size: 120%;
    text-decoration: underline;
    transition: 0.1s;
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg       transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

.tantam:hover {
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg       transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

.nhinguyen {
    font-family: serif;
    color: black;
}

.nhinguyen:hover {
    color: red;
    text-decoration: underline;
    transition: 0.1s;
}

.siclib {
    font-family: serif;
    color: black;
}

.siclib:hover {
    color: red;
    text-decoration: underline;
    transition: 0.1s;
}

.grid {
    display: grid;
    grid-gap: 5px;
    grid-row-gap: 20px;
    grid-template-columns: repeat(auto-fit, 140px);
}


.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    text-align: start;
    width: 10%;
    margin: 2%;
}

.main-title {
    display: inline-block;
    transition: 0.1s;
}

.main-title:hover {
    color: red;
    transition: 0.1s;
}

.custom-cursor {
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'%3e%3cg       transform='rotate(0 256 256)'%3e%3crect id='r' x='31' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
.zoom:hover {
    z-index: 999;

}

.zoom:hover>img {
    transform: scale(1.85);
    border: solid 1px;
    pointer-events: none;
}

.pushme {
    background-color: transparent;
    border: solid 0;
    transition: 0.2s;
}

.pushme:hover {
    background-color: red !important;
    color: white;
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg       transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

/* || TABLE */
.table-hover tbody tr:hover>td {
    color: white !important;
    background-color: red !important;
}

.table-hover tbody tr:hover>td>a {
    color: white !important;
}


.dataTable tbody tr:hover>.sorting_1 {
    background-color: red !important;
}

div.dataTables_wrapper div.dataTables_length select {
    border-radius: 0;
    border-bottom: solid 1px;
    border-top: hidden;
    border-right: hidden;
    border-left: hidden;
}

div.dataTables_wrapper div.dataTables_length select:hover {
    border-bottom: solid red 1.5px;
}

div.dataTables_wrapper div.dataTables_length select:focus {
    border-bottom: solid red 1.5px;
}

div.dataTables_wrapper div.dataTables_filter label {
    font-weight: normal;
    white-space: nowrap;
    text-align: right;
}

div.dataTables_wrapper div.dataTables_filter label {
    width: 100%;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    border-radius: 0;
    border-bottom: solid 1px;
    border-top: hidden;
    border-right: hidden;
    border-left: hidden;
    width: auto;
}

div.dataTables_wrapper div.dataTables_filter input:hover {
    border-bottom: solid red 1.5px;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    border-bottom: solid red 1.5px;
    width: 80%;
}




/* *:focus {
    box-shadow: 0 0 1px black !important;
} */

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
    justify-content: flex-end;
}

.page-item:first-child .page-link {
    border-top-left-radius: 0.0rem;
    border-bottom-left-radius: 0.0rem;
}

.page-item:last-child .page-link {
    border-top-right-radius: 0.0rem;
    border-bottom-right-radius: 0.0rem;
}

/* .pagination>li>a {
    background-color: white;
    color: black;
    border: transparent;
    transition: 0.1s;
}

.pagination>li>a:focus {
    color: white;
    background-color: black;
}

.pagination>li>span {
    transition: 0.1s;
}

.pagination>li>a:hover,
.pagination>li>span:focus {
    color: white;
    background-color: red;
    border: transparent;
}

.pagination>li>span:hover,

.pagination>.active>a {
    color: white;
    background-color: black !important;
}

.pagination>.active>a:hover {
    background-color: red !important;
    border: transparent;
} */


/* || DATATABLE  STYLING */
.custom-search-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: solid 1px;
    margin-bottom: 13px;
}

.copy-icon {
    color: grey;
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg       transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
    margin-left: -15px;
}

.copy-icon:hover {
    color: black;
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg       transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

.copy-link {
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg       transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

.copy-link:hover {
    text-decoration: underline;
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 512 512'%3e%3cg%3e%3crect x='106' y='323.6' width='300' height='30' /%3e%3crect x='243' y='60' width='30' height='220' /%3e%3cpolygon points='256,79.2 470.5,293.6 491.7,272.4 256,36.7' /%3e%3cpolygon points='256,79.2 41.5,293.6 20.3,272.4 256,36.7' /%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}


/* Search box */
.dt-search>label {
    display: none !important;
}

.search-input {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0px !important;
    padding: 3px;
}

.search-input:focus {
    outline-offset: 0px !important;
    outline: none !important;
}

.clear-btn {
    color: grey;
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
    border: none;
    background-color: transparent;
    margin: 0px 7px 0px 10px;
}

.clear-btn:hover {
    color: white;
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
    background-color: red;
}

.clear-btn:focus {
    outline: none !important;
}

/* dt-length */
#dt-length-0 {
    margin-right: 5px;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-radius: 0px !important;
    background-color: transparent !important;
    color: inherit !important;
}

#dt-length-0:hover {
    outline: none !important;
}

/* Style for the active page button */
div.dt-paging.paging_simple_numbers button.dt-paging-button.current {
    background-color: black !important;
    color: white !important;
    border: none !important;
    border-radius: 0px !important;
}

/* Ensure that active button stays black even on hover */
div.dt-paging.paging_simple_numbers button.dt-paging-button.current:hover {
    background-color: black !important;
    color: white !important;
    border: none !important;
    border-radius: 0px !important;
}

/* Title of each column */
/* 1. All DataTables header cells, no matter how Bootstrap labels them */
table.dataTable thead th,
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc,
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc,
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-title {
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

/* ASC/DESC ARROWS */
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before {
    position: absolute;
    display: block;
    bottom: 50%;
    content: "˄";
    content: "˄" /"";
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    position: absolute;
    display: block;
    top: 50%;
    content: "˅";
    content: "˅" /"";
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    left: 0;
    opacity: .3;
    line-height: 9px;
    font-size: .8em
}

table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    opacity: 1;
}


/* Shadow ở Header mỗi ô */
table.dataTable thead>tr>th.dt-orderable-asc:hover,
table.dataTable thead>tr>th.dt-orderable-desc:hover,
table.dataTable thead>tr>td.dt-orderable-asc:hover,
table.dataTable thead>tr>td.dt-orderable-desc:hover {
    outline: 0px solid rgba(0, 0, 0, 0.05);
    outline-offset: -2px
}



/* Custom Pagination */
.custom-pagination-control {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
}

.custom-pagination-control .page-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background-color: transparent;
    border-radius: 0 !important;

}

.custom-pagination-control .page-btn:hover {
    cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 1024 1024'%3e%3cg transform='rotate(0 256 256)'%3e%3crect id='r' x='180' y='240' width='450' height='30'/%3e%3cuse href='%23r' transform='rotate(90 256 256)'/%3e%3c/g%3e%3c/svg%3e") 16 16, pointer !important;
    color: white;
    background-color: red;
    outline: none !important;
}

.custom-pagination-control .page-btn:focus {
    border-radius: 0 !important;
    outline: none !important;
}

.custom-pagination-control .current-page {
    background-color: black;
    color: white;
    border-radius: 0 !important;
}


/* Hidden Credit */
.hidden-credit {
    color: transparent;
    user-select: text;
}

.hidden-credit::selection {
    color: white;
}

@media (prefers-color-scheme: dark) {
    .hidden-credit::selection {
        color: black    ;
    }
}