@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* Common styles */
    * {
        font-family: 'Rubik', sans-serif;
        letter-spacing: 0.5px;
    }
    :root {
        --white: #ffffff;
        --black: #000000;
        --light_black: #505051;
        --dark_red: #9A1B1E;
        --gray: #6c757d;
    }
    h1, h2, h3, h4, h5, h6, p {
        margin-bottom: 0;
    }
    a {
        text-decoration: none;
    }
    a:hover {
        text-decoration: none;
    }
    .wrapper {
        display: flex;
        position: relative;
    }
    .wrapper .content {
        width: 100%;
    }
    .asterisk {
        color: red;
        margin-left: 5px;
    }
    .notification-box {
        width: 40%;
        margin: auto;
        margin-bottom: 2%;
    }
    .notification-box .alert {
        border-radius: 0;
        margin-bottom: 0;
    }
    .modal .form-label {
        font-size: 15px;
        margin-bottom: 3px;
    }
    .modal .form-control {
        border: 1px solid #ced4da!important;
        border-radius: 0!important;
        font-size: 14px!important;
        height: 45px;
    }
    .modal .form-control:focus {
        box-shadow: none!important;
    }
    .modal .btn-close:focus {
        box-shadow: none!important;
    }
    .modal .download {
        background-color: var(--dark_red);
        color: var(--white);
        transition: all 0.3s;
    }
    .modal .download:hover {
        background-color: var(--black);
        transition: all 0.3s;
    }
/* Common styles */



/* Navbar styles */
    .navbar {
        background-color: var(--black);
    }
    .navbar .main-logo {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navbar .main-logo .logo {
        margin-right: 13px;
        height: 50px;
    }
    .navbar .dropdown .nav-link {
        font-size: 14px;
        color: var(--white);
    }
    .navbar .dropdown .dropdown-menu[data-bs-popper] {
        left: initial!important;
        right: 0;
        font-size: 13px;
        padding: 10%;
        border-radius: 0;
    }
    .navbar .dropdown .dropdown-menu li {
        margin-bottom: 8px;
    }
    .navbar .dropdown .dropdown-menu li:last-child {
        margin-bottom: 0px;
    }
    .navbar .dropdown .dropdown-menu a {
        color: var(--dark_red);
        font-weight: 600;
    }
    .navbar .dropdown .dropdown-menu a:hover {
        color: var(--black);
        text-decoration: underline;
    }
/* Navbar styles */



/* Footer styles */
    .footer{
        background-color: var(--black);
        padding: 18px;
    }
    .footer .copyright {
        color: var(--white);
        font-size: 14px;
        font-weight: 500px;
    }
/* Footer styles */



/* Table styles */
    .table-container {
        padding: 1% 3%;
    }
    .table-container .card {
        border-radius: 0;
    }
    .table-container .table-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--dark_red);
    }
    .table-container .table-title i {
        padding-right: 5px;
    }
    .table-container .table tr th {
        font-size: 14px;
        color: var(--light_black);
        text-align: center;
        font-weight: 700;
    }
    .table-container .table tr th:last-child {
        width: 13%;
    }
    .table-container .table tr td {
        font-size: 12px;
        color: var(--light_black);
        vertical-align: middle;
        text-align: center;
    }
    .table-container .table tr td:last-child {
        text-align: center;
    }
    .table-container div.dataTables_wrapper div.dataTables_info {
        font-size: 13px;
        padding-top: 0;
        color: var(--gray);
    }
    .table-container .dataTables_wrapper .row:nth-child(1) {
        margin-bottom: 10px;
    }
    .table-container .dataTables_length label, .table-container .dataTables_filter label {
        font-size: 13px;
        color: var(--gray);
    }
    .table-container .dataTables_wrapper .row:nth-child(3) {
        margin-top: 10px;
        align-items: center;
    }
    .table-container .dataTables_wrapper .paginate_button a {
        font-size: 11px;
        color: var(--gray);
    }
    .table-container .dataTables_wrapper .paginate_button.active a {
        background-color: var(--dark_red);
        border-color: var(--dark_red);
        color: var(--white);
    }
    .table-container div.dataTables_wrapper div.dataTables_length select {
        width: 60px;
        padding: 5px 10px;background-position: right .5rem center;
        background-position-y: 10px;
    }
    .table-container .view {
        font-size: 15px;
    }
/* Table styles */



/* Edit styles */
    .edit-container {
        padding: 1% 20%;
        background-color: #dfdfdf;
    }
    .edit-container .card {
        border-radius: 0;
    }
    .edit-container .card-body {
        padding: 5%;
    }
    .edit-container .card .single-form-input {
        margin-bottom: 15px;
    }
    .edit-container .form-label {
        font-size: 14px;
        color: var(--gray);
        margin-bottom: 3px;
    }
    .edit-container .form-control {
        border: 1px solid #ced4da!important;
        border-radius: 0px;
        font-size: 14px!important;
        padding: .5rem .75rem;
    }
    .edit-container .buttons {
        display: flex;
        justify-content: center;
        margin-top: 5%;
    }
    .edit-container .form-btn {
        font-size: 15px;
        margin: 0 15px;
        width: 150px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0;
        background-color: var(--dark_red);
        color: var(--white);
        transition: all 0.3s;
    }
    .edit-container .form-back-btn {
        font-size: 15px;
        margin: 0 15px;
        width: 150px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0;
        background-color: var(--black);
        color: var(--white);
        transition: all 0.5s;
    }
    .edit-container .form-btn:hover, .edit-container .form-back-btn:hover {
        background-color: var(--light_black);
        transition: all 0.3s;
    }
    .edit-container .decorate-image {
        margin-top: 5%;
    }
    .edit-container .decorate-image .image {
        margin: auto;
        width: 100%;
    }
    .edit-container .error-message {
        font-size: 14px;
        color: var(--red);
        margin-top: 3px;
    }
/* Edit styles */



/* Responsive */
    @media screen and (max-width: 1920px) {
    }

    @media screen and (max-width: 1900px) {
    }

    @media screen and (max-width: 1850px) {
    }

    @media screen and (max-width: 1800px) {
    }

    @media screen and (max-width: 1750px) {
    }

    @media screen and (max-width: 1680px) {
    }

    @media screen and (max-width: 1600px) {
    }

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

    @media screen and (max-width: 1440px) {
    }

    @media screen and (max-width: 1366px) {
    }

    @media screen and (max-width: 1360px) {
    }

    @media screen and (max-width: 1280px) {
    }

    @media screen and (max-width: 1024px) {
    }

    @media screen and (max-width: 992px) {
        .table-container {
            padding: 1% 1%;
        }
    }

    @media screen and (max-width: 991px) {
        .navbar-toggler i {
            color: white;
            font-size: 25px;
        }
        .navbar .dropdown .nav-link {
            text-align: end;
        }
        .navbar .dropdown .dropdown-menu {
            text-align: end;
            padding: 1%!important;
            width: 20%;
            margin-left: auto;
        }
    }

    @media screen and (max-width: 844px) {
    }

    @media screen and (max-width: 768px) {
    }

    @media screen and (max-width: 650px) {
    }

    @media screen and (max-width: 478px) {
        .edit-container {
            padding: 1%;
        }
    }

    @media screen and (max-width: 428px) {
    }

    @media screen and (max-width: 395px) {
    }

    @media screen and (max-width: 376px) {
    }

    @media screen and (max-width: 360px) {
    }

    @media screen and (max-width: 320px) {
    }
/* Responsive */