/* I want to use this font in my footer to add some icons. */
    @font-face {
        font-family: 'Rajdhani';
        src: url('/fonts/Rajdhani/Rajdhani-Regular.ttf');
        font-weight: normal;
        font-style: normal
    }

    @font-face {
        font-family: 'Rajdhani-Bold';
        src: url('/fonts/Rajdhani/Rajdhani-Bold.ttf');
        font-weight: normal;
        font-style: normal
    }

    @font-face {
        font-family: 'Rajdhani-SemiBold';
        src: url('/fonts/Rajdhani/Rajdhani-SemiBold.ttf');
        font-weight: normal;
        font-style: normal
    }

    @font-face {
        font-family: 'Rajdhani-Medium';
        src: url('/fonts/Rajdhani/Rajdhani-Medium.ttf');
        font-weight: normal;
        font-style: normal
    }

    @font-face {
        font-family: 'Rajdhani-Light';
        src: url('/fonts/Rajdhani/Rajdhani-Light.ttf');
        font-weight: normal;
        font-style: normal
    }

    #tokenform {

        font-family: Rajdhani;
    }

    .modal-title.mTitle {
        font-family: Rajdhani-Bold;
        font-weight: bold;
    }

    .modal-vikinger a.closee {

        background: #0076d1;
        color: #fff;
        opacity: 1;
        position: absolute;
        padding: 5px 10px 10px 10px;
        right: -15px;
        border-radius: 6px;
        top: -15px;
        cursor: pointer;
        z-index: 1;

    }

    .modal-vikinger h1 {
        color: #000;
        font-size: 32px;
        font-weight: 600;
    }

    .modal-vikinger .blueline {
        background-color: #027AF8;
        width: 100%;
        height: 5px;
        margin-bottom: 5px;
    }

    .modal-vikinger .logoBuho {
        width: 75px;
    }

    .modal-vikinger {
        background: rgba(0, 0, 0, 0.90);
        font-family: Rajdhani;
    }

    .modal-vikinger .modal-title {
        color: #027AF8;
        font-weight: bold;
        padding: 15px;
    }

    .modal-vikinger #tapPS {
        border-radius: 10px;
    }

    .modal-vikinger .modal-content {
        border-radius: 20px;
    }

    .modal-vikinger #tapPS {
        background-color: #f6f9fa;
        padding: 0;
        margin-bottom: 15px !important;
    }

    .modal-vikinger #tapPS.nav li a {
        color: #525252 !important;
    }

    .modal-vikinger .nav-pills>li.active>a,
    .nav-pills>li.active>a:hover,
    .nav-pills>li.active>a:focus {
        background-color: #047bf8;
        border-radius: 10px;
    }

    .form-select-vikinger {
        width: 100%;
        height: 48px;
        position: relative;
        font-family: Rajdhani, sans-serif;
    }

    .form-drowdown-vikinger {
        position: relative;
    }

    .form-drowdown-vikinger .dropdown-toggle {
        position: relative;
        border: 1px solid #ccc;
        border-radius: 12px;
        height: 45px;
        font-family: Rajdhani, sans-serif;
        background-color: #fff;
    }

    .form-drowdown-vikinger label {
        padding: 0 6px;
        background-color: #fff;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        position: absolute;
        top: 4px;
        left: 12px;
        pointer-events: none;
        z-index: 1;
    }

    .form-drowdown-vikinger button {
        margin-top: 15px;
        width: 100%;
        text-align: left;
    }

    .form-select-vikinger label {
        padding: 0 6px;
        background-color: #fff;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        position: absolute;
        top: -8px;
        left: 12px;
        pointer-events: none;
    }

    .form-select2-vikinger {
        position: relative;
    }

    .form-select2-vikinger .select2-selection__rendered {
        padding-top: 5px !important;
        max-height: 45px;
    }

    .form-select2-vikinger .select2-selection__arrow {
        top: 12px !important;
    }

    .form-select2-vikinger label {
        padding: 0 6px;
        background-color: #fff;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        position: absolute;
        top: 4px;
        left: 12px;
        pointer-events: none;
        z-index: 10051;
        /* fix problems in modals */
        z-index: 1;
    }

    .form-select-vikinger select {

        height: 48px !important;
        border-radius: 11px !important;
        border: 0.5px solid #ccc !important;
        font-size: 14px;
        font-family: Rajdhani, sans-serif;
        font-weight: bold;
        margin-top: 15px;
    }

    .form-select-vikinger select:focus,
    .form-select-vikinger select:active {
        border: 1px solid #0076d1 !important;
        background-color: #fff !important;
    }


    .form-select2-vikinger span.select2-selection {
        height: 48px !important;
        border-radius: 11px !important;
        border: 0.5px solid #ccc !important;
        font-size: 14px;
        font-family: Rajdhani, sans-serif;
        font-weight: bold;
        margin-top: 15px;

    }

    .form-input-vikinger {
        position: relative;
    }

    .form-input-vikinger label {
        padding: 0 6px;
        background-color: #fff;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        position: absolute;
        top: -8px !important;
        left: 12px !important;
        pointer-events: none;
        font-family: Rajdhani, sans-serif;

    }

    .form-textarea-vikinger label {
        padding: 0 6px;
        background-color: #fff;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        position: absolute;
        pointer-events: none;
        font-family: Rajdhani, sans-serif;
        top: -10px !important;
        left: 18px !important;
    }

    .form-input-vikinger input {
        height: 48px !important;
        border-radius: 11px !important;
        border: 0.5px solid #ccc !important;
        font-size: 14px;
        padding: 0 18px;
        font-weight: bold;
        font-family: Rajdhani, sans-serif;
        margin-top: 15px;
    }

    .form-input-vikinger select:focus,
    .form-input-vikinger input:focus {

        border-color: #047bf8 !important;

    }

    .font-vikinger {
        font-family: Rajdhani, sans-serif !important;
    }

    .container-vikinger {
        position: relative;
    }

    .container-vikinger .label {

        padding: 0 6px;
        background-color: #fff;
        color: #000;
        font-size: 14px;
        font-weight: 600;
        position: absolute;
        top: -8px !important;
        left: 12px !important;
        pointer-events: none;
        font-family: Rajdhani, sans-serif;

    }

    .container-vikinger .input-false {
        border-radius: 10px;
        border: 1px solid #ccc;
        width: 100%;
        height: 48px;
        padding: 16px;
        font-weight: bold;
    }

    .modal-vikinger a.close {
        background: #027AF8;
        color: #fff;
        opacity: 1;
        position: absolute;
        padding: 7px 10px 8px 10px;
        right: -15px;
        border-radius: 6px;
        top: -15px;
        cursor: pointer;
        z-index: 1;
        margin: 0 !important;
        width: auto;
        height: auto;
        text-indent: inherit;
        background-image: none !important;
    }

    .modal-vikinger .modal-contente p {
        font-size: 16px;
    }

    .modal-vikinger .modal-contente {
        max-height: 300px;
        overflow: auto;
        padding: 20px;
    }

    .popup-modal-feature-content {
        border-radius: 16px;
        padding-top: 10px;
    }

    .popup-modal-feature-icon-wrap {
        margin: 10px 0 18px;
    }

    .popup-modal-feature-icon {
        width: 72px;
        height: 72px;
        margin: 0 auto;
        border-radius: 50%;
        background: rgba(2, 122, 248, 0.12);
        color: #027AF8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
    }

    .popup-modal-feature-image-wrap {
        margin: 10px 0 18px;
    }

    .popup-modal-feature-image {
        max-width: 100%;
        max-height: 220px;
        border-radius: 12px;
    }

    .popup-modal-feature-actions {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        margin: 10px 20px 20px;
    }

    .popup-modal-feature-actions-single {
        justify-content: center;
    }

    .popup-modal-feature-button {
        min-width: 150px;
        padding: 12px 20px;
        border-radius: 10px;
        font-weight: 600;
        text-decoration: none !important;
        display: inline-block;
    }

    .btn-popup-primary {
        background: #027AF8;
        color: #fff !important;
    }

    .btn-popup-secondary {
        background: #fff;
        color: #027AF8 !important;
        border: 2px solid #027AF8;
    }

    #showModalFeactures.modal-vikinger.in {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
    }

    #showModalFeactures.modal-vikinger .modal-dialog {
        margin: 0;
        top: auto;
        transform: none;
        position: relative;
    }

    #showModalFeactures.modal-vikinger .modal-content {
        overflow: visible;
    }

    #showModalFeactures.modal-vikinger .inYoutube iframe {
        max-width: 100%;
    }

    /* width */
    .modal-vikinger ::-webkit-scrollbar {
        width: 8px;

    }

    /* Track */
    .modal-vikinger ::-webkit-scrollbar-track {
        /*box-shadow: inset 0 0 5px grey;*/
        /* border-radius: 1px;*/
    }

    /* Handle */
    .modal-vikinger ::-webkit-scrollbar-thumb {
        /*background: #027AF8; */
        background: rgba(0, 0, 0, 0.20);
        height: 150px;
        border-radius: 5px;

    }

    /* Handle on hover */
    .modal-vikinger ::-webkit-scrollbar-thumb:hover {
        /* background: #027A0; */

    }

    .inYoutube {

        margin-top: 20PX;
    }

    .checkbox-vikinger {

        cursor: pointer;
    }

    .checkbox-vikinger input[type=checkbox] {
        -moz-appearance: none;
        -webkit-appearance: none;
        -o-appearance: none;
        opacity: 0.1;

    }

    .checkbox-vikinger label {

        border: 8px solid #047bf8;
        border-radius: 100%;
        width: 30px;
        height: 30px;
        cursor: pointer;
    }

    .checkbox-vikinger span {
        opacity: 0.2;
        left: 18px;
        position: absolute;
        font-size: 25px;
        top: -6px;
    }

    .checkbox-vikinger input[type=checkbox]:checked+span {
        opacity: 1;
        color: green;
    }

    .close-error-recurring,
    .close-error-cp {
        border-radius: 100%;
        border: 2px solid #ccc;
        display: inline-block;
        padding: 2px;
        float: right;
        /* color: blue; */
        width: 25px;
        height: 25px;
        text-align: center;
        cursor: pointer;
        font-weight: bold;
        color: #887e7e;
        background-color: white;
    }

    .error-accept-recurring,
    .error-accept-cp {
        border: 2px solid red;
        border-radius: 15px;
        padding: 10px;
        display: inline-block;
        background: rgb(226, 23, 23, 0.5);
        color: #fff !important;
    }

    /*
DROPDOWN NAVIGATION
*/
    .dropdown-navigation {
        width: 220px;
        padding: 20px 28px;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 3px 5px 40px 0 rgba(94, 92, 154, .06);
    }

    .dropdown-navigation .dropdown-navigation-link {
        display: block;
        padding: 4px 0;
        font-size: 14px;
        font-weight: 600;
        transition: padding .2s ease-in-out, color .2s ease-in-out;
        color: gray;
    }

    .dropdown-navigation .dropdown-navigation-button {
        width: 100%;
        margin-top: 20px;
        border-radius: 10px;
        font-weight: 500;
    }

    .dropdown-navigation .dropdown-navigation-link:hover {
        color: #007bff !important;
        padding-left: 4px;
    }

    .dropdown-navigation.header-settings-dropdown {

        position: absolute;
        z-index: 9999;
        top: 66px;
        right: -33px;
        opacity: 0;
        visibility: hidden;
        transform: translate(0px, 0px);
        transition: transform 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s, visibility 0.4s ease-in-out 0s;
    }

    .dropdown-header-vikinger {
        cursor: pointer;
    }

    .dropdown-notification:hover .hide1 {
        visibility: visible;
        opacity: 1;
    }

    .router-link-exact-active {
        margin-top: 10px;
    }

    .help_center {
        line-height: 1;
        border: 1px solid;
        padding: 5px;
    }

    .hide1 {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        z-index: 9999;
        top: 55px;
        right: -30px;
        transform: translate(0px, 0px);
        transition: transform 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s, visibility 0.4s ease-in-out 0s;
    }

    /*.header-settings-dropdown-trigger:hover + .hide1 {
  visibility: visible;
    opacity: 1;
}*/

    .parent-menu-top-bar:hover .hide1 {
        visibility: visible;
        opacity: 1;
    }

    /*
DROPDOWN NAVIGATION
*/

    #payment_wizard .form-select2-vikinger .select2-selection__rendered {
        font-size: 18px;
    }

    #payment_wizard #cvv,
    #payment_wizard #amount {
        font-size: 18px;
        font-weight: bold;
    }

    .btn-vikinger,
    .btn-vikinger2 {
        font-family: Rajdhani !important;
        padding: 15px 30px;
        font-weight: bold;
        border-radius: 20px;
    }

    .btn-vikinger-lg1 {
        font-family: Rajdhani !important;
        padding: 8px 120px;
        font-weight: bold;
        display: inline-block;
        font-size: 21px;
        border-radius: 12px;
        background-color: #027af8;
    }

    .btn-vikinger-lg1-out {
        font-family: Rajdhani !important;
        padding: 8px 120px;
        font-weight: bold;
        display: inline-block;
        font-size: 21px;
        border-radius: 12px;
        background-color: transparent;
        color: #90c6fe;
        border: 1px solid #90c6fe;
    }

    .btn-vikinger-lg1-out:hover {
        background-color: #0B2947;
        color: #fff;
    }

    a.btn-vikinger2 {
        padding: .5rem .5rem;
    }

    .checkbox-vikinger {
        cursor: pointer;
        position: relative;
        display: inline-block;
    }

    .checkbox-vikinger span {
        left: 9px;
    }

    .form-select2-vikinger .select2.select2-container {
        width: 100% !important;
    }

    #mSelectPaymentMethod .form-select2-vikinger .select2-selection__rendered {
        padding-top: 10px !important;
        color: #000;
    }

    #mSelectPaymentMethod .form-select2-vikinger .select2-selection__arrow {
        padding-top: 52px !important;
    }

    .btn-vikinger-s {
        font-family: Rajdhani !important;
        padding: 15px 20px;
        font-weight: bold;
        border-radius: 15px;
    }

    .dashboard-stat2.bordered {
        border-radius: 20px;
    }

    .btn-add-blue,
    a.btn-add-blue {
        cursor: pointer;
        background: #047bf8;
        color: #fff;
        border-radius: 100%;
        width: 20px;
        text-align: center;
        height: 20px;
        padding-top: 3px;
        margin-top: 29px;
        display: inline-block;

    }

    .btn-add-blue-li i {
        position: relative;
        top: 3px;
    }

    .btn-add-blue-li {
        cursor: pointer;
        background: #047bf8;
        color: #fff !important;
        border-radius: 100%;
        width: 20px;
        text-align: center;
        height: 20px;
        padding-top: 3px;
        margin-top: 29px;
        display: inline-block;
        padding: 0 !important;
    }

    .btn-add-blue-li:hover {
        background-color: #047bf8 !important;
    }

    .btn-add-red,
    a.btn-add-red {
        cursor: pointer;
        background: #ff0000;
        color: #fff;
        border-radius: 100%;
        width: 20px;
        text-align: center;
        height: 20px;
        padding-top: 3px;
        margin-top: 29px;
        display: inline-block;

    }

    a.btn-add-blue .fa.fa-plus {
        top: -2px;
        position: relative;
    }

    a.btn-add-blue:hover {
        color: #fff;
    }

    .modal-blur {
        backdrop-filter: blur(2px);
    }

    .modal-blur .modal-content {
        border-radius: 16px;
    }

    .modal-blur .close {

        text-indent: 0px !important;
        background: #fff;
        border-radius: 14px;
        padding: 8px 12px;
        width: auto;
        height: auto;
        background-image: none !important;
        position: absolute;
        right: -15px;
        top: -7px;
        text-align: center;
        opacity: 1;
        box-shadow: 0px 0px 3px 0px #333;
        color: #999;
    }

    .modal-blur .close span {
        position: relative;
        top: -2px;
    }

    .modal.modal-blur .modal-header {
        border-bottom: 0px;
    }

    .modal.modal-blur .modal-footer {
        border-top: 0px;
    }

    .modal-blur .modal-title {
        color: #000;
    }

    .modal-title.blue {
        color: #047bf8 !important;
        font-size: 21px;
        font-weight: bold;
        font-family: 'Rajdhani-Bold';
    }

    .user-avatar.small {
        width: 50px;
        height: 56px;
        top: 50%;
        left: 50%;
        transform: translate(-76%, 0%);
        z-index: 1;
        /* background-color: #ffff; */
    }

    .user-avatar {
        display: block;
        position: relative;
    }

    .user-avatar {
        display: block;
        width: 100px;
        height: 110px;
        position: relative;
    }

    .user-avatar.small .user-avatar-content {
        top: 12px;
        left: 10px;
        /* margin-left: 100%; */
    }

    .user-avatar .user-avatar-content {
        position: absolute;
        top: 18px;
        left: 16px;
        z-index: 3;
    }

    .user-avatar.small .user-avatar-progress,
    .user-avatar.small .user-avatar-progress-border {
        top: 6px;
        left: 5px;
        /* margin-left: 100%; */
    }

    .user-avatar .user-avatar-progress {
        z-index: 3;
    }

    .user-avatar .user-avatar-progress,
    .user-avatar .user-avatar-progress-border {
        position: absolute;
        top: 9px;
        left: 8px;
    }

    .user-avatar .user-avatar-progress-border {
        z-index: 2;
    }

    .input-money {
        padding: 8px;
        font-family: 'Rajdhani';
        position: relative;
        margin-bottom: 15px;
        border-radius: 15px;
        box-shadow: 4px 3px 18px 4px #ccc
    }

    .input-money input {
        border: none !important;
        padding-left: 15px;
        font-size: 25px;
        color: #000;
        font-weight: bold;
    }

    .input-money span {
        position: absolute;
        bottom: 7px;
        left: 5px;
        font-size: 25px;
        color: #ccc;
        font-weight: bold;
    }

    #students_for_attendance input {
        width: auto;
        display: inline-block;
    }

    #students_for_attendance .user-avatar.small {
        width: 50px;
        height: 56px;
        transform: none;
        z-index: 1;
        display: inline-block;
        position: relative;
        left: 0;
        top: 20px;
    }

    #students_for_attendance li {
        list-style: none;
    }

    #students_for_attendance ul {
        padding-left: 5px;
    }

    #students_for_attendance {
        max-height: 350px;
        overflow: auto;
        /* border: 1px solid #dedeea; */
        border-radius: 11px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        margin-top: 2%;
        padding: 10px;
    }

    /* width */
    #students_for_attendance::-webkit-scrollbar {
        width: 8px;
    }

    /* Track */
    #students_for_attendance::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    /* Handle */
    #students_for_attendance::-webkit-scrollbar-thumb {
        background: #1e90ff;
        border-radius: 10px;
    }

    /* Handle on hover */
    #students_for_attendance::-webkit-scrollbar-thumb:hover {
        background: #1e90ff;
    }

    #studentAttendance .select-all-button {
        background: transparent !important;
        color: #43b0fb !important;
        border-color: transparent !important;
        border-color: #43b0fb !important;
        border-radius: 12px;
    }

    lg1 {
        font-family: Rajdhani !important;
        padding: 10px 55px;
        border-radius: 20px;
        font-weight: bold;
    }

    .loader-vikinger {
        border: 10px solid #f3f3f3;
        /* Light grey */
        border-top: 10px solid #3498db;
        /* Blue */
        border-radius: 50%;
        width: 5px;
        height: 5px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .green-confirm {
        color: green;
        font-size: 12px;
    }


    #wallet_act .form-select2-vikinger .select2-selection__arrow {
        top: 21px !important;
    }

    #wallet_act .form-select2-vikinger .select2-selection__rendered {

        /*     position: relative;
    top: 5px; */
        padding-top: 10px !important;
    }

    .icon-plus {
        color: #047bf8;
        display: inline-block;
        cursor: pointer;
    }

    #caseStudent .icon-plus {
        margin-top: 32px;
    }

    #caseStudent .form-input-vikinger input {
        margin-top: 7px !important;
    }

    .title-sendings {
        color: #0271dc !important;
    }

    .circle-btn {
        border-radius: 50%;
        font-size: 30px;
        background-color: #0271dc !important;
        color: #fff;
        width: 25px;
        height: 25px;
        text-align: center;
        position: relative;
    }

    .circle-btn span {
        position: absolute;
        top: -9px;
        left: 4px;
    }

    .circle-btn:hover {
        color: #fff !important;
    }

    .modal {
        text-align: center;
        padding: 0 !important;
    }

    .modal:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

    .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }

    .modal-back-white {
        padding-top: 10%;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .modal-back-white .closew {
        float: right;
        position: absolute;
        right: 0;
        top: 0;
        padding: 8px;
        width: 40px;
        height: 40px;
    }

    .modal-back-white .closew:hover {
        background-color: #039be5;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
    }

    .modal-back-white .closew:hover path {
        color: white !important;
        fill: white !important;
    }

    .modal-back-white .modal-content {
        border: none;
    }

    .modal-back-white .table-container {

        height: 500px;
        overflow: auto;
    }

    .modal-back-white table thead th {
        text-align: center;
    }

    .regular_invoices .dtTable .tr-active td {
        background-color: #047bf8;
        color: #fff;
    }

    .regular_invoices .dtTable .tr-active td:first-child {
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .regular_invoices .dtTable .tr-active td:last-child {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .regular_invoices .user-avatar.small {
        margin-left: 5px;
    }

    .open-invoice table td {
        background-color: #027AF8;
    }

    .regular_invoices .table-hover>tbody>tr:hover:not(.info-table),
    .regular_invoices .table-hover>tbody>tr:hover:not(.info-table)>td {
        background-color: #027AF8 !important;
        color: #fff !important;
        cursor: pointer;
    }

    .regular_invoices .table-hover>tbody>tr:hover:not(.info-table) td:first-child {
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .regular_invoices .table-hover>tbody>tr:hover:not(.info-table) td:last-child {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .regular_invoices .table-hover>tbody>tr.info-table:hover,
    .regular_invoices .table-hover>tbody>tr.info-table:hover>td {
        background-color: #fff !important;
    }

    .info-table td {
        background-color: #fff !important;
        color: #000 !important;
    }

    .info-table td .item-name,
    .info-table td .item-notes {
        color: #999db0 !important;
    }

    .regular_invoices .container-gray {
        background-color: #F3F6F4;
        border-radius: 30px;
        padding: 15px;
        text-align: left;
        display: inline-block;
    }

    .regular_invoices .btn-add-blue,
    .regular_invoices .btn-add-red {
        vertical-align: top;
        margin-top: 0;
    }

    .regular_invoices .container-gray {
        width: 90%;
    }

    .regular_invoices .container-gray tr,
    .regular_invoices .container-gray tr td {
        background-color: #F3F6F4 !important;
    }

    .info-table .title {
        color: #000 !important;
        font-weight: bold;
    }

    .info-table .border-r {
        border-right: 1px solid #ccc !important;
    }

    .info-table .text-blue {

        color: #047bf8 !important;
        font-size: 24px;
        font-weight: bold;
    }
    
    .info-table .text-red {

        color: #f36a5a !important;
        font-size: 24px;
        font-weight: bold;
    }

    .container-gray p {
        margin-top: 0;
    }

    .container-gray textarea.form-control[readonly] {
        border: none !important;
        background-color: transparent !important;
        height: 100px;
        font-size: 12px;
    }

    #grade .select2-selection.select2-selection--multiple {
        height: 108px !important;
    }

    #grade .select2-container .select2-selection--multiple .select2-selection__rendered {

        height: 87px !important;
        overflow-y: auto;
        max-height: inherit;
    }

    .container-gray textarea {

        height: 150px;
    }

    /* HTML: <div class="loader"></div> */
    .loader-css {
        width: 30px;
        aspect-ratio: 1;
        border-radius: 50%;
        background:
            radial-gradient(farthest-side, #047bf8 94%, #0000) top/8px 8px no-repeat,
            conic-gradient(#0000 30%, #047bf8);
        -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
        animation: l13 1s infinite linear;
        display: inline-block;
    }

    @keyframes l13 {
        100% {
            transform: rotate(1turn)
        }
    }

    /* DOTS LOADER */
    /* HTML: <div class="loader"></div> */
    .loader-dots {
        width: 60px;
        aspect-ratio: 4;
        background: radial-gradient(circle closest-side, #047bf8 90%, #047bf8) 0/calc(100%/3) 100% space;
        clip-path: inset(0 100% 0 0);
        animation: l1 1s steps(4) infinite;
    }

    @keyframes l1 {
        to {
            clip-path: inset(0 -34% 0 0)
        }
    }

    /* DOTS LOADER */

    .regular_invoices .badge {
        width: 128px;
        font-weight: bold !important;
        font-size: 14px !important;
        padding: 4px 20px !important;
        height: auto !important;

    }

    .btn-transparent {
        background: transparent !important;
        color: #000 !important;
        border: none !important;

    }

    .container-gray.students {
        height: 250px;
        overflow: auto;
    }

    /* width */
    .regular_invoices ::-webkit-scrollbar,
    .scroll-blue ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    .regular_invoices ::-webkit-scrollbar-track,
    .scroll-blue ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px #027af8;
        border-radius: 10px;

    }

    /* Handle */
    .regular_invoices::-webkit-scrollbar-thumb,
    .scroll-blue ::-webkit-scrollbar-thumb {
        background: #027af8;
        border-radius: 10px;
        cursor: pointer;
    }

    /* Handle on hover */
    .regular_invoices ::-webkit-scrollbar-thumb:hover,
    .scroll-blue ::-webkit-scrollbar-thumb:hover {
        background: #027af8;
    }


    .regular_invoices .badge-paid {
        background-color: #7FFF00 !important;
    }

    .regular_invoices .badge-canceled {
        background-color: #FF0000 !important;
    }

    .regular_invoices .badge-partyally-paid {
        background-color: #FFD700 !important;
    }

    .regular_invoices .badge-pending {
        background-color: #00BFFF !important;
    }

    .regular_invoices .badge-past-due {
        background-color: #FF0000 !important;
    }

    tr.tr-active .open-invoice {
        background-color: #fff;
        color: #000;
    }

    #modal-reply .form-select2-vikinger label {
        z-index: 99999999;
    }

    #modal-reply .form-select2-vikinger span.select2-selection {
        height: 38px !important;
    }

    /******** FOR PAYABLI **********/
    #payabliComponentsIframeContainerMethodEmbedded iframe {
        border: none;
        font-family: Rajdhani;
    }

    .payabliPaymentForm,
    .payabliPaymentForm label,
    .payabliPaymentForm input {

        font-family: Rajdhani, sans-serif !important;
    }

    /********END FOR PAYABLI **********/

    .rajdhani-bold {
        font-family: Rajdhani-Bold !important;
        font-weight: bold;
    }

    /* width */
    .vikinger-scrollbar::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    .vikinger-scrollbar::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    /* Handle */
    .vikinger-scrollbar::-webkit-scrollbar-thumb {
        background: #1e90ff;
        border-radius: 5px;
    }

    /* Handle on hover */
    .vikinger-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #1e90ff;
    }

    /* TABS LINEA AZUL solo agregar clase line-blue */
    .nav-tabs>li {
        min-width: 150px;
        text-align: center;
    }

    .nav-tabs.line-blue>li.active>a,
    .nav-tabs>li.active>a:hover,
    .nav-tabs>li.active>a:focus {
        border: none;
        border-bottom: 5px solid #027AF8;
        font-weight: bold;
    }

    .nav-tabs.line-blue {
        border: none;
    }

    /* .tab-content.line-blue{
    padding: 15px;
    height: 400px;
    overflow: auto;
} */

    .tab-content.line-blue #all-contact,
    .tab-content.line-blue #teachers-contact,
    .tab-content.line-blue #parents-contact,
    .tab-content.line-blue #students-contact,
    .tab-content.line-blue #staff-contact {
        padding: 15px;
        height: 600px;
        overflow: auto;
    }

    .checkbox-blue {
        /* Add if not using autoprefixer */
        -webkit-appearance: none;
        appearance: none;
        /* For iOS < 15 to remove gradient background */
        background-color: #fff;
        /* Not removed via appearance */
        margin: 0;
        font: inherit;
        color: #027AF8;
        width: 20px;
        height: 20px;
        border: 2px solid #027AF8;
        border-radius: 6px;
        transform: translateY(-0.075em);

        display: inline-grid !important;
        place-content: center;
        cursor: pointer;
    }

    .checkbox-blue::before {
        content: "";
        width: 12px;
        height: 12px;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--form-control-color);
        background-color: #027AF8;
        border-radius: 3px;
    }

    .checkbox-blue:checked::before {
        transform: scale(1);
    }

    .input-search-icon {
        padding: 8px;
        height: 40px;
        border-radius: 10px;
    }

    .input-search-icon::-webkit-input-placeholder {
        /* WebKit browsers */
        text-align: right;
        font-size: 22px;
        padding-top: 3px;
    }

    .input-search-icon:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        text-align: right;
        font-size: 22px;
        padding-top: 3px;
    }

    .input-search-icon::-moz-placeholder {
        /* Mozilla Firefox 19+ but I'm not sure about working */
        text-align: right;
        font-size: 22px;
        padding-top: 3px;
    }

    .input-search-icon:-ms-input-placeholder {
        /* Internet Explorer 10 */
        text-align: right;
        font-size: 22px;
        padding-top: 3px;
    }

    .input-search-icon::placeholder {
        text-align: right;
        font-size: 22px;
        padding-top: 3px;
    }

    .form-textarea-vikinger label {
        z-index: 1;
        position: relative;
        top: 15px;
        left: 15px;
        background: #fff;
        padding: 2px;
    }

    .form-textarea-vikinger .note-editor,
    .form-textarea-vikinger .note-toolbar {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .form-textarea-vikinger .note-toolbar {
        padding-top: 15px;
    }

    .form-textarea-vikinger .note-editor {
        margin: 0 10px;
    }

    .hexagon-image img {
        width: 65px;
        position: absolute;
    }

    .contain-hexagon-image {
        position: relative;
        margin: 5px;
    }

    .hexagon-image {
        top: -11px;
        position: absolute;
        left: -13px;
    }

    .contain-hexagon-image span {
        position: relative;
        left: 10px;
    }

    .modal-back-white *:not(.fa,.glyphicon) {
        font-family: Rajdhani;
    }

    .form-input-search-vikinger {
        position: relative;
        margin-top: 15px;
    }

    .form-input-search-vikinger svg {
        width: 30px;
        display: inline-block;
    }

    .form-input-search-vikinger .icon-glass {
        text-align: right;
        position: absolute;
        top: 5px;
        right: 4px;
        display: inline-block;
        background: #fff;
        padding: 3px 5px;
    }

    .form-input-search-vikinger input {
        height: 48px !important;
        font-size: 16px;
        font-family: 'Rajdhani';
        padding: 8px;
        border-radius: 10px;
    }

    .form-input-search-vikinger input:focus .form-input-search-vikinger .icon-glass {
        display: none;
    }

    .form-select2-vikinger .select2.select2-container:second {
        display: none !important;
    }

    .form-select2-vikinger.list-profile .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        position: absolute;
        right: 0;
        font-size: 20px;
        /* display: none; */
        top: -4px;
    }

    .form-select2-vikinger.list-profile li.select2-selection__choice {
        position: relative;
        background-color: #fff;
    }

    .form-select2-vikinger.list-profile .profile-in-search {
        width: 25px;
        height: 25px;
    }

    .form-select2-vikinger.list-profile .hexagon-image img {
        width: 45px;
        left: 3px;
        top: 2px;
    }

    .form-select2-vikinger.list-profile .select2-selection__rendered {
        overflow-y: auto;
    }

    #modal-reply .form-select2-vikinger.list-profile .select2-selection {
        height: 55px !important;
    }

    .dropdown-wheel button {
        border-radius: 50%;
        width: 35px;
        height: 35px;

    }

    .dropdown-wheel {
        top: 20px;
    }

    .dropdown-wheel ul {
        border-radius: 12px;
    }

    .dropdown-wheel li {
        background-color: #f9f9f9;
        border-radius: 12px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
        padding: 5px;
    }

    .modal-footer {
        text-align: center;
    }


    .dropdown-wheel .btn-primary:active,
    .dropdown-wheel .btn-primary.active,
    .dropdown-wheel .open>.dropdown-toggle.btn-primary {
        background-color: transparent !important;
    }

    .no-border {
        border: none !important;
    }

    #VueApp_messagesMailbox .form-select2-vikinger label {
        z-index: 10000000;
    }


.add-checkbox .select2-results__option:before {
  content: "";
  display: inline-block;
  position: relative;
  height: 20px;
  width: 20px;
  border: 2px solid #e9e9e9;
  border-radius: 4px;
  background-color: #fff;
  margin-right: 20px;
  vertical-align: middle;
}
.add-checkbox .select2-results__option[aria-selected=true]:before {
  font-family:fontAwesome;
  content: "\f00c";
  color: #fff;
  background-color: #027AF8;
  border: 0;
  display: inline-block;
  padding-left: 3px;
}
/* width */
.vikinger-scrollbar::-webkit-scrollbar {
    width: 5px;
  }
/* Track */
.vikinger-scrollbar::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey; 
border-radius: 10px;
}
/* Handle */
.vikinger-scrollbar::-webkit-scrollbar-thumb {
background: #1e90ff; 
border-radius: 5px;
}
/* Handle on hover */
.vikinger-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #1e90ff; 
}

    .add-checkbox .select2-results__option:empty {
        display: none;
    }

    .add-checkbox .select2-selection__choice:empty {
        display: none;
    }

    .card-autopay .badge,
    #r_dataTable .badge {
        width: 128px;
        font-weight: bold !important;
        font-size: 14px !important;
        padding: 4px 20px !important;
        height: auto !important;

    }

    .common.badge a,
    .card-autopay .badge a,
    #r_dataTable .badge a {
        color: #fff;
    }

    .common.badge-active,
    .card-autopay .badge-active,
    #r_dataTable .badge-active {
        background-color: #7FFF00 !important;
    }

    .common.badge-terminated,
    .card-autopay .badge-terminated,
    #r_dataTable .badge-terminated {
        background-color: #FF0000 !important;
    }

    .common.badge-not-enrolled,
    .card-autopay .badge-not-enrolled,
    #r_dataTable .badge-not-enrolled {
        background-color: #00BFFF !important;
    }

    .modal-back-white .modal-title {
        font-size: 24px;
        font-weight: bold;
    }

    .rounded-close {
        border-radius: 100%;
        border: 2px solid #ccc;
        display: inline-block;
        padding: 2px;
        width: 25px;
        height: 25px;
        text-align: center;
        cursor: pointer;
        font-weight: bold;
        color: #e65252;
        background-color: white;
    }

    .form-textarea-vikinger textarea {
        border-radius: 11px !important;
        border: 0.5px solid #ccc !important;
        font-size: 14px;
        padding: 8px 20px;
        font-weight: bold;
        font-family: Rajdhani, sans-serif;
        /* margin-top: 15px; */
    }

    .add-checkbox #select2-student_id-results .select2-results__option:before {
        content: "";
        display: inline-block;
        position: relative;
        height: 20px;
        width: 20px;
        border: 2px solid #e9e9e9;
        border-radius: 4px;
        background-color: #fff;
        margin-right: 20px;
        vertical-align: middle;
    }

    .add-checkbox #select2-student_id-results .select2-results__option[aria-selected=true]:before {
        font-family: fontAwesome;
        content: "\f00c";
        color: #fff;
        background-color: #027AF8;
        border: 0;
        display: inline-block;
        padding-left: 3px;
    }

    .form-select2-vikinger .select2-container--default .select2-search--inline .select2-search__field {
        font-family: Rajdhani, sans-serif;
        margin-left: 15px;
        margin-top: 7px;
    }

    .form-select2-vikinger a.btn-right {
        position: absolute;
        right: 15px;
        z-index: 1;
    }

    .manage-class-select-all {
        right: 15px;
        left: auto !important;
        pointer-events: auto !important;
    }

    .manage-class-select-all input {
        width: auto !important;
        right: 15px;
        margin: 3px 7px 0;
    }

    .filters-manage-class .form-select2-vikinger .select2-selection__rendered {

        height: 150px;
        overflow: auto;
    }

    .filters-manage-class .form-select2-vikinger .select2-selection.select2-selection--multiple {
        height: 158px !important;
        max-height: none !important;
    }

    .filters-manage-class .form-select2-vikinger .select2-selection.select2-selection--multiple ul {

        max-height: none !important;
    }

    .classesToCopySkills {
        display: inline-block;
    }