/*
  @media (min-width: 768px) {
    body {
        background-color: tomato;
    }
}
   const mediaQuery = window.matchMedia('(min-width: 768px)')
// Check if the media query is true
    if (mediaQuery.matches) {
      // Then trigger an alert
      alert('Media Query Matched!')
    }
*/
*, :: after, ::before {
    box - sizing: border - box;
}

@font-face {
    font-family: 'IDAutomationHC39M';
    src: url('~/fonts/IDAutomationHC39M.ttf') format('truetype');
    src: url("~/fonts/IDAutomationHC39M_FREE.otf") format("opentype");
}

@font-face {
    font-family: 'TraditionalArabic';
    src: url('../fonts/TRADBDO.TTF') format('truetype')
}


@font-face {
    font-family: 'majalla2';
    src: url('../fonts/majalla.ttf') format('truetype');
}

@font-face {
    font-family: 'sst-arabic-bold';
    src: url('~/fonts/arfonts-sst-arabic-bold.ttf') format('truetype')
}


@font-face {
    font-family: "SSTArabic";
    src: url("../fonts/text-font/SSTArabic-Light.eot");
    src: url("../fonts/text-font/SSTArabic-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/SSTArabic-Light.woff") format("woff"), url("../fonts/text-font/SSTArabic-Light.ttf") format("truetype"), url("../fonts/text-font/SSTArabic-Light.svg#bcc26993292869431e54c666aafa8fcd") format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "SSTArabic";
    src: url("../fonts/text-font/SSTArabic-Roman.eot");
    src: url("../fonts/text-font/SSTArabic-Roman.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/SSTArabic-Roman.woff") format("woff"), url("../fonts/text-font/SSTArabic-Roman.ttf") format("truetype"), url("../fonts/text-font/SSTArabic-Roman.svg#bcc26993292869431e54c666aafa8fcd") format("svg");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "SSTArabic";
    src: url("../fonts/text-font/SSTArabic-Medium.eot");
    src: url("../fonts/text-font/SSTArabic-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/text-font/SSTArabic-Medium.woff") format("woff"), url("../fonts/text-font/SSTArabic-Medium.ttf") format("truetype"), url("../fonts/text-font/SSTArabic-Medium.svg#bcc26993292869431e54c666aafa8fcd") format("svg");
    font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: "Droid Arabic Kufi";
    src: url("../fonts/DroidKufi-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Amiri";
    src: url("../fonts/Amiri.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


:root {
    --base-font: "Droid Arabic Kufi", "Open Sans", "Tahoma";
}


@media (hover: hover) {
    .joinchat__button:hover .joinchat__tooltip {
        opacity: 1;
        animation: none;
        transition: opacity .2s
    }
}

   /* arfonts-sst-arabic-bold*/
    .fontbarcode2 {
        font-family: "IDAutomationHC39M" !important;
        font-size: 12pt;
        direction: rtl;
        line-height: 28px !important;
        font-weight: normal;
        font-style: normal;
    }




    a {
        text-decoration: none !important;
    }

    .form-label {
        margin-top: 7px !important;
    }

    .TColor {
        color: #ae8b00;
        font-weight: 700;
    }

    /* --------------------- 2024/03/19------------------------- */

    .fs-07 {
        font-size: 0.7rem !important;
    }

    .fs-06 {
        font-size: 0.67rem !important;
    }

    .fs-05 {
        font-size: 0.5rem !important;
    }

    .fs-04 {
        font-size: 0.4rem !important;
    }

    /* ---------------------  dataTable -------------------------- */
    .ui-dialog-titlebar-close {
        visibility: hidden;
    }

    .ui-dialog-title {
        float: none !important;
        display: block;
        text-align: center;
        color: #966001
    }


    .dataTable {
        border: 1px;
        border-style: solid;
        border-color: #966001;
        font-size: 14px;
    }

    .dataTables_wrapper {
        font-size: 16px;
        font-weight: 600;
        margin: 0 auto;
        border: 1px solid #966001;
        border-radius: 5px;
        padding: 5px;
        width: 100% !important
    }

    .dataTables_filter {
        float: right;
        text-align: right;
        font-size: 16px !important;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .dataTables_length {
        float: left;
        text-align: right;
        font-size: 16px !important;
        font-weight: 600;
        margin-bottom: 10px;
    }



    .dataTable td {
        border-left: 1px solid #966001;
        border-right: 0;
    }

        .dataTable td:last-child {
            border-left: 0 solid;
            border-right: 0;
        }

    .table.dataTable thead td {
        background-color: #fffedf !important;
    }

    /* ---------------------  dataTable -------------------------- */

    .animate-charcter {
        text-transform: uppercase;
        background-image: linear-gradient( -225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100% );
        background-size: auto auto;
        background-clip: border-box;
        background-size: 200% auto;
        color: #fff;
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: textclip 2s linear infinite;
        display: inline-block;
        /*font-size: 14px;*/
    }

    @keyframes textclip {
        to {
            background-position: 200% center;
        }
    }


    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        text-align: center;
        width: 100% !important
    }

        .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
            --bs-btn-padding-x: 0.75rem;
            --bs-btn-padding-y: 0.375rem;
            --bs-btn-font-size: 1rem;
            --bs-btn-font-weight: 400;
            --bs-btn-line-height: 1.5;
            --bs-btn-color: var(--bs-body-color);
            --bs-btn-bg: transparent;
            --bs-btn-border-width: var(--bs-border-width);
            --bs-btn-border-color: transparent;
            --bs-btn-border-radius: var(--bs-border-radius);
            --bs-btn-hover-border-color: transparent;
            --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
            --bs-btn-disabled-opacity: 0.65;
            --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
            display: inline-block;
            padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
            font-family: var(--bs-btn-font-family);
            font-size: var(--bs-btn-font-size);
            font-weight: var(--bs-btn-font-weight);
            line-height: var(--bs-btn-line-height);
            color: var(--bs-btn-color);
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
            border-radius: var(--bs-btn-border-radius);
            background-color: var(--bs-btn-bg);
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            --bs-btn-color: #198754;
            --bs-btn-border-color: #198754;
            --bs-btn-hover-color: #fff;
            --bs-btn-hover-bg: #198754;
            --bs-btn-hover-border-color: #198754;
            --bs-btn-focus-shadow-rgb: 25, 135, 84;
            --bs-btn-active-color: #fff;
            --bs-btn-active-bg: #198754;
            --bs-btn-active-border-color: #198754;
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: #198754;
            --bs-btn-disabled-bg: transparent;
            --bs-btn-disabled-border-color: #198754;
            --bs-gradient: none;
            width: 25%;
        }

    .Mybg-primary {
        background-color: #d5fae9 !important; /* #ddf5ea */
    }

    .Mybg-secondary {
    }

    .Mybg-success {
        background-color: #d5fae9 !important; /* #ddf5ea */
    }

    .Mybg-info {
    }

    .Mybg-warning {
    }

    .Mybg-danger {
    }

    .Mybg-dark {
    }

    .Mybg-Car1 {
        background-color: #ffe4ed !important; /* #ddf5ea */
    }

    .Mybg-City {
        background-color: e8ffff !important; /* #ddf5ea */
    }

    /* 2024/03/27 */
    .ui-datepicker-trigger {
        margin-right: 5px;
    }

    .row {
        margin-bottom: 2px !important;
    }

    .dt-buttons {
        /* border:0 solid #0000; */
        /* background-color:transparent; */
        padding: 0.25rem 0.5rem;
        border-radius: var(--bs-border-radius-sm);
        font-size: 0.78em !important;
    }

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

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

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


    /* select2 */
    .select2-selection__rendered {
        line-height: 31px !important;
    }

    .select2-container .select2-selection--single {
        height: 35px !important;
    }

    .select2-selection__arrow {
        height: 34px !important;
    }


    .select2-choices {
        min-height: 150px;
        max-height: 150px;
        overflow-y: auto;
    }

    .select2-container--default .select2-results > .select2-results__options {
        max-height: 150px !important;
        text-align: right !important;
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
        transition-duration: .15s;
    }

.yaqeen-backB {
    background-color: #607b95;
    color: white
}

.yaqeen-backW {
    background-color: white;
    color: #607b95
}

.yaqeen-backG {
    background-color: lightgray;
    color: #607b95
}

/*@-webkit-keyframes edublink-preloader-bounce-animation {
    0%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
   }*/
@keyframes anim2 {
    0%, 100% {
        -webkit-transform: scale(0.80);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(0.95);
    }
}

    /*@-webkit-keyframes rotate10 {
    0%, 100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50% {
        -webkit-transform: rotate(50);
        transform: rotate(50);
    }
}*/

    @keyframes rotate10 {
        0% {
            -webkit-transform: rotate(-50deg);
            transform: rotate(0deg);
        }

        25% {
            -webkit-transform: rotate(5deg);
            transform: rotate(10deg);
            /*transform: skewX(20deg);*/
        }
        /*   50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(0deg);
    }*/

        75% {
            /*-webkit-transform: rotate(20deg);*/
            transform: rotate(-5deg);
            transform: translate(0px,10px);
        }

        100% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    @keyframes translate10 {
        0% {
            transform: translate(0px,0px);
        }

        25% {
            transform: translate(10px,0px);
        }
        /*   50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(0deg);
    }*/

        75% {
            transform: translate(0px,10px);
        }

        100% {
            transform: translate(0px,0px);
        }
    }

    @keyframes translateToRight {
        0% {
            transform: translate(-1900px,0px);
        }


        100% {
            transform: translate(0px,0px);
        }
    }

    @keyframes translateToUp {
        0% {
            transform: translate(0,-1900px);
        }


        100% {
            transform: translate(0px,0px);
        }
    }

/*media*/
@media (min-width: 206px) {
    /* .container-sm, .container {
        max-width: 540px;
    }*/
    .elementor-element {
        width: 98% !important;
        margin-top: 10px;
    }

  
}

@media (min-width: 576px) {
   /* .container-sm, .container {
        max-width: 540px;
    }*/
    .elementor-element {
        width: 98% !important;
        margin-top:10px;
    }
}

@media (min-width: 768px) {
   /* .container-md, .container-sm, .container {
        max-width: 720px;
    }*/
    .elementor-element {
        width: 31% !important;
    }
}

@media (min-width: 992px) {
 /*   .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }*/
}

@media (min-width: 1200px) {
   /* .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1140px;
    }*/
}

@media (min-width: 1400px) {
   /* .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }*/
}


@media screen and (max-width: 992px) { /*576px  768px */
    .d-smm-none {
        display: none !important;
    }
}

/*---------------- PrintList-------------------- */
#Printtable {
    border: 1px solid black;
    /* font-size: 12px; */
    border-collapse: collapse
}

    #Printtable th {
        padding: 5px 5px 5px 5px;
        font-size: 14px;
        /* border-color: black; */
    }

        #Printtable th:first-child {
            border-right: 1px solid black;
            border-top: 1px solid black;
        }

    #Printtable th {
        border-left: 1px solid black;
        border-bottom: 1px solid black;
        border-top: 1px solid black;
    }

    #Printtable td {
        padding: 5px 5px 5px 5px;
        font-size: 16px;
        font-family: 'Traditional Arabic' !important;
        font-weight: bold
    }

        #Printtable td:first-child {
            border-right: 1px solid;
            border-bottom: 1px solid black;
        }

    #Printtable td {
        border-left: 1px solid black;
        border-bottom: 1px solid black;
    }

.PrintTitle {
    text-align: center;
    color: black;
    margin-top: 10px;
    margin-bottom: 15px;
}

/*-------------------------- A4 ----------------------*/
.A4 {
    background: white;
    /* 
        width: 21cm;
        height: 29.7cm; 
    */
    width: 29.7cm;
    height: 20cm;
    display: block;
    margin: 0.5cm auto;
    padding: 10px 25px;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
    overflow-y: scroll;
    box-sizing: border-box;
    font-size: 12pt;
}

.A4L {
    background: white;
    /* 
        width: 21cm;
        height: 29.7cm; 
    */
    width: 20cm;
    height: 29.7cm;
    display: block;
    margin: 0.5cm auto;
    padding: 10px 25px;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
    overflow-y: scroll;
    box-sizing: border-box;
    font-size: 12pt;
}

@media print {
    .page-break {
        display: block;
        page-break-before: always;
    }

    size: A4 portrait;
}

@media print {
    body {
        margin: 0;
        padding: 0;
    }

    .A4 {
        box-shadow: none;
        margin: 0;
        width: auto;
        height: auto;
    }

    .noprint {
        display: none;
    }

    .enable-print {
        display: block;
    }
}


.btn-yaqeen {
    --bs-btn-color: #fff;
    --bs-btn-bg: #607b95; /* */
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6f88a0; /* */
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

.btn-outline-yaqeen {
    --bs-btn-color: #607b95;
    --bs-btn-border-color: #607b95;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
}