@font-face {
        font-family:'DARKLINOS';
        src: url('/fonts/DARKLINOS.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
    }

    @font-face {
        font-family:'Poppins';
        src: url('/fonts/Poppins-Regular.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
    }
    
    /*datepicker design*/
    .ui-datepicker {
        width: 280px;
        padding: 10px;
        background-color: var(--third-color);
        border: 4px solid var(--sec-color) !important; /* Added !important to ensure it takes effect */
        box-shadow: -7px 4px 0px var(--sec-color) !important;
        color: var(--third-color);
    }

    .ui-datepicker-header {
        background-color: var(--sec-color) !important;
        color: var(--sec-color) !important;
        padding: 5px 0;
        text-align: center;
        border: none;
    }

    .ui-datepicker-prev,
    .ui-datepicker-next {
        cursor: pointer;
        position: absolute;
        top: 5px;
        width: 20px;
        height: 20px;
        text-indent: 9999px;
        overflow: hidden;
    }

    span.ui-icon.ui-icon-circle-triangle-e, span.ui-icon.ui-icon-circle-triangle-w {
      filter: invert(100%) hue-rotate(180deg); /* Example: Inverted and hue-rotated color */
    }

    .ui-datepicker-title {
        font-size: 16px;
        font-weight: bold;
        line-height: 30px;
    }

    .ui-datepicker-calendar {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    .ui-datepicker-calendar th {
        font-weight: bold !important;
        padding: 5px !important;
        padding-top: 10px !important;
        text-align: right !important;
        background-color: var(--third-color) !important;
        border-bottom: 3px solid var(--sec-color) !important;
        color: var(--sec-color) !important;
    }

    .ui-datepicker-calendar td {
        padding: 0;
    }

    .ui-datepicker-calendar a {
        display: block;
        padding: 5px;
        text-align: center;
        text-decoration: none;
        color: var(--third-color);
        border: 1px solid transparent;
    }
    .ui-datepicker-year, .ui-datepicker-month{
        background-color: var(--sec-color);
        color: var(--third-color);    
        border: none;
        font-weight: 600;
    }
    select.ui-datepicker-month option:checked,select.ui-datepicker-year option:checked {
      background-color: var(--main-color) !important;
      color: var(--third-color) !important;
    }

    select.ui-datepicker-month option:hover,select.ui-datepicker-year option:hover {
      background-color: var(--main-color) !important;
      color: var(--third-color) !important;
    }

    select.ui-datepicker-month:focus {
      outline: none !important;
    }
    .ui-datepicker-calendar a.ui-state-default {
        background-color: var(--third-color);
        color: var(--sec-color);
        border: 3px solid var(--third-color);
    }

    .ui-datepicker-calendar a.ui-state-hover {
        background-color: var(--main-color2);
        color: var(--third-color);
        border: 2px solid var(--main-color2);
    }

    .ui-datepicker-calendar a.ui-state-active {
        background-color: var(--third-color);
        color: var(--main-color);
        font-weight: 800 !important;
        border: 3px solid var(--main-color);
        border-radius: 50px;
    }

    .ui-datepicker-calendar td.ui-state-disabled span {
        background-color: var(--third-color);
        color: var(--text-color2);
        border: 2px solid var(--third-color);
    }

    .ui-datepicker-calendar .ui-datepicker-today a {
        font-weight: bold;
    }
    .ui-datepicker-calendar {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    .ui-datepicker-calendar th,
    .ui-datepicker-calendar td {
        width: 14.2857%; /* 100% / 7 columns */
        padding: 5px;
        text-align: center;
    }

    .navbar-toggler collapsed,.navbar-light .navbar-toggler {
        border-color: var(--third-color) !important;
    }

    .main-table {
        width: 100%;
        overflow-x: auto;
    }
    .main-table table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        min-width: 600px;
        margin-bottom: 10px;
    }

    .main-table th, .main-table td {
        padding: 10px 15px;
        text-align: left;
        /*white-space: nowrap;*/
    }

    .main-table th {
        font-weight: 800;
        border-bottom: 3px solid var(--sec-color);
    }

    /*.main-table tr:nth-child(even) {
        /*background-color: #f9f9f9; 
        border-bottom: 3px solid var(--sec-color);
    }*/

    .main-table tr:hover {
        background-color: var(--main-color2);
        color: var(--third-color);
    }

    .main-table td {
        border-bottom: 1px solid #ddd;
    }

    .main-table th:first-child, 
    .main-table td:first-child {
        border-right: 3px solid var(--sec-color);
    }
    .main-table .amount-cell {
        text-align: right !important;
    }

    @media screen and (max-width: 990px) {
        .main-table {
            display: block;
            overflow-x: auto;
            white-space: nowrap;
        }

        .main-table table {
            min-width: 600px;
            display: block;
            margin-bottom: 10px;
        }

        .main-table th, .main-table td {
            padding: 8px 10px;
            font-size: 14px;
        }
    }

    /* For WebKit browsers like Chrome, Safari */
    ::-webkit-scrollbar {
        height: 8px; /* Scrollbar thickness */
    }

    ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1); /* Track background */
        /*border-radius: 10px;*/
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--sec-color); /* Thumb color */
        /*border-radius: 10px; /* Rounded corners */*/
        border: 2px solid rgba(0, 0, 0, 0.5); /* Border around the thumb */
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #222222; /* Color when hovered */
    }

    #content-table {
/*        padding: 20px 30px;
        margin-top: 50px; 
        margin-bottom: 50px;
        position: relative;
        background-color: var(--third-color);
        color: var(--sec-color);
        border: 5px solid var(--sec-color) !important;
        box-shadow: -12px 11px 0px var(--sec-color) !important;*/
    }

    .promo-box,.content-table {
        position: relative;
        background: var(--main-color2);
        padding: 10px;
        margin-bottom: 10vh;
        border: 3px solid var(--sec-color);
        border-radius: 20px;
        /*box-shadow: -14px 12px 0px var(--sec-color);
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;*/
    }

    .event-details{
        padding-bottom: 5px;
    }

    :root {
        --main-color: #000000 /*#17a2b8*/ ;
        --main-color2: #222222 /*darker than main*/;
        --sec-color: #131316;
        --third-color: #222222 /*#F5F5F7*/;
        --text-color: #ffffff;
        --text-color2: #9396a1;
        --text-color3: #d5d5d5;
        --accent-color: #ddd;
    }