/* font face */
@font-face {
    font-family: 'Larkens Bold';
    src: url('../fonts/Larken-ExtraBold.otf') format('opentype');
}

@font-face {
    font-family: 'Larkens Regular';
    src: url('../fonts/Larken-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'byt light';
    src: url('../fonts/byt-Light.otf') format('opentype');
}

@font-face {
    font-family: 'byt regular';
    src: url('../fonts/byt-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'byt semibold';
    src: url('../fonts/byt-SemiBold.otf') format('opentype');
}

.arabic {
    direction: rtl;
    font-family: 'byt light' !important;
}

.arabic-font {
    font-family: 'byt light' !important;
}

.arabic p , .arabic span{
    font-family: 'byt regular' !important;
}

.arabic-bold, .arabic-bold span{
    font-family: 'byt semibold' !important;
}

.b-3 {
    border: 3px solid #333 !important;
}

.arabic-font h1,
.arabic-font h2, 
.arabic-font h3, 
.arabic-font h4, 
.arabic-font h5, 
.arabic-font h6{
    font-family: 'byt semibold' !important;
}

.arabic h1, 
.arabic h2, 
.arabic h3, 
.arabic h4, 
.arabic h5, 
.arabic h6 {
    font-family: 'byt semibold' !important; 
}

.arabic-font .table thead tr th, 
.arabic, .table thead tr th{
    font-family: 'byt semibold' !important;
}

.arabic-font label, .arabic label{
    font-family: 'byt semibold' !important;
}

.english {
    direction: ltr;
    font-family: 'Larkens Regular' !important;
}

.english-font {
    font-family: 'Larkens Regular' !important;
}

.english h1,
.english h2,
.english h3,
.english h4,
.english h5,
.english h6 {
    font-family: 'Larkens Bold' !important;
}

.english-font h1,
.english-font h2,
.english-font h3,
.english-font h4,
.english-font h5,
.english-font h6 {
    font-family: 'Larkens Bold' !important;
}

.english .table thead tr th{
    font-family: 'Larkens Bold' !important;
}

.english-font .table thead tr th{
    font-family: 'Larkens Bold' !important;
}

.english label{
    font-family: 'Larkens Bold' !important;
}

.english-font label{
    font-family: 'Larkens Bold' !important;
}

body {
    margin: 0;
    padding: 0;
    background-image: url('../images/background_image.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.container {
    max-width: 1000px ! important;
    padding: 20px;
    text-align: -webkit-center;
}

.main-container {
    max-width: 1000px ! important;
    padding-left: 60px;
    text-align: -webkit-center;
}

.branch-name-show{
    position: relative;
    top: 50px;
    background-color: #36E39B;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 25px;
    width: 120px;
}

#language-toggle {
    position: relative;
    top: 50px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100px;
    font-size: 25px;
}

header h1 {
    font-size: 24px;
    color: #333;
    margin: 10px 0 5px;
}

header p {
    font-size: 14px;
    color: gray;
}

main {
    text-align: center;
}

main h2 {
    font-size: 24px;
    color: #555;
    margin-bottom: 20px;
}

.buttons {
    margin-top: 30px !important;
    text-align: -webkit-center ! important;
    place-content: center;
    gap: 15px;
    font-size: 30px !important;
}

.action-button {
    width: 500px !important;
    padding: 10px;
    color: black;
    background-color: #36E39B;
    text-decoration: none;
    place-content: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    transition: background-color 0.3s;
}

.login-button {
    width: 100% !important;
    padding: 10px;
    color: black;
    background-color: #36E39B;
    text-decoration: none;
    place-content: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    transition: background-color 0.3s;
}

.action-button-black {
    padding: 10px;
    font-size: 20px;
    color: white;
    background-color: black;
    text-decoration: none ! important;
    place-content: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    transition: background-color 0.3s;
}

.action-button-white {
    padding: 10px;
    font-size: 20px;
    color: black;
    background-color: white;
    text-decoration: none ! important;
    place-content: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    transition: background-color 0.3s;
}

.span-or {
    font-size: 14px !important;
    color: black;
}

.logo {
    width: 300px;
    /* height: 100px; */
    display: block;
    /* margin: -50px auto; */
}

#welcome-text {
    color: #333;
    margin: 40px 0 5px;
}

.form-group {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    padding: 10px;
    /* margin: 10px 0 10px; */
    /* gap: 10px; */
    background-color: white;
    border: 1px solid gainsboro;
}

.form-fields-arabic{
    text-align: right;
}

.form-fields-english{
    text-align: left;
}

/* country code */

.iti {
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    padding: 5px !important;
}

.iti {
    &.iti--allow-dropdown {
        &.iti--separate-dial-code {
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            width: 300px;
            /* background-color: #fff; */
        }
    }
}


div.iti.iti--allow-dropdown.iti--separate-dial-code {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    width: 500px;
    background-color: #fff;
    /* font-size: 20px; */
}

div.iti__flag-container {
    position: relative;
    display: flex;
    align-items: center;
    /* padding-right: 10px; */
    /* border-right: 1px solid #ccc; */
}

div.iti__selected-flag {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* placeholder font size */

input::placeholder {
    font-size: 20px;
}

.modal-body input::placeholder {
    font-size: 16px;
}

input {
    padding-left: 10px !important;
}

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

main h2 {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
}

.steps-indicator {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.step {
    width: 10px;
    height: 10px;
    background-color: lightgray;
    border-radius: 50%;
}

.step.completed {
    background-color: #2ecc71;
}

.step.active {
    background-color: #3498db;
}

/* form {
    display: flex;
    flex-direction: column;
    gap: 15px;
} */

label {
    font-size: 14px;
    color: #555;
    /* text-align: right; */
}

input {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.visitor-type,
.gender {
    display: flex;
    justify-content: space-between;
}

.type-option,
.gender-option {
    flex: 1;
    margin: 0 5px;
    padding: 10px;
    font-size: 14px;
    background-color: lightgray;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.type-option.active,
.gender-option.active {
    background-color: #2ecc71;
    color: white;
}

.submit-button {
    padding: 10px;
    font-size: 16px;
    color: white;
    background-color: #3498db;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #2980b9;
}

.tw-center {
    text-align: -webkit-center;
}

.login-info {
    margin-bottom: 50px;
    margin-top: 50px;
    color: black !important;
    font-weight: 600 !important;
    width: 700px !important;
    text-align: left;
    font-size: 20px;
}

.login-info p {
    margin: 5px 0;
}

.login-info div {
    margin: 5px 0;
}

.login-info span {
    font-weight: bold;
    color: #333;
}

h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
}

.companions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    /* text-align: center; */
    margin-bottom: 20px;
    /* width: 80%; */
}

.companion-card {
    border: 1px solid #ddd;
    padding: 10px;
    gap: 10px;
    border-radius: 5px;
    width: 260px !important;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.companion-card p {
    margin: 5px 0;
    font-size: 14px;
}

.hidden {
    display: none;
}

#companion-form {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

#companion-form h4 {
    margin-bottom: 10px;
    font-size: 16px;
}

#companion-form input,
#companion-form select {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

#save-companion {
    padding: 8px;
    font-size: 14px;
    color: white;
    background-color: #3498db;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#save-companion:hover {
    background-color: #2980b9;
}

.add-companion-button {
    padding: 10px;
    font-size: 14px;
    color: black;
    background-color: #36E39B;

    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
}

.add-companion-button:hover {
    background-color: #27ae60;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-justify {
    text-align: justify !important;
}

.text-end {
    text-align: end !important;
}

/* modal */
.modal-content {
    background-image: url('../images/background_image.png') ! important;
    background-size: cover !important;
    background-position: center ! important;
    background-attachment: fixed ! important;
    background-repeat: no-repeat ! important;
    border-radius: 8px;
    padding: 20px;
}

/* .modal-body{
    background-image: url('../images/background_image.png') ! important;
    background-size: cover !important;
    background-position: center ! important;
    background-attachment: fixed ! important;
    background-repeat: no-repeat ! important;
} */

.modal-header {
    border-bottom: none;
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
}

.btn-age {
    width: 40px ! important;
    height: 40px ! important;
    border-radius: 50%;
    font-size: 18px;
}

.btn-black {
    background-color: black ! important;
    color: white ! important;
}

.btn-white {
    background-color: white ! important;
    color: black ! important;
}

#companion-age {
    width: 180px;
    /* border: 1px solid #ddd; */
    border-radius: 5px;
    font-size: 16px;
}

.gender-btn {
    width: 50%;
    margin-right: 5px;
    padding: 10px;
    text-align: center;
    border: 1px solid #A7A8AA;
    background-color: #A7A8AA ! important;
    color: #f0f0f0 !important;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.add-btn {
    width: 40%;
    margin: 10px;
    padding: 10px;
    text-align: center;
    border: 1px solid black;
    background-color: black ! important;
    color: white ! important;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.cancel-btn {
    width: 40%;
    margin: 10px;
    padding: 10px;
    text-align: center;
    border: 1px solid white;
    background-color: white ! important;
    color: black ! important;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

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

.gender-btn.active {
    background-color: #36E39B ! important;
    color: black ! important;
    border-color: #36E39B ! important;
}

.gender-btn:last-child {
    margin-right: 0;
}

a,
button {
    text-decoration: none !important;
}

.bg-green {
    background-color: #2ecc71 ! important;
}

/* input[type="checkbox"] {
    appearance: none;
    background-color: #f0f0f0 !important;
}

input[type="checkbox"]:checked {
    background-color: #36E39B ! important;
    border-color: #36E39B ! important;
} */

/* input[type="checkbox"]:checked::after {
    content: '✔';
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #36E39B ! important;
} */

input[type="checkbox"] {
    accent-color: #36E39B ! important;
    /* Sets the color when checked */
    width: 20px;
    /* Optional: adjust size */
    height: 20px;
    /* Optional: adjust size */
    cursor: pointer;
    /* Pointer cursor for better UX */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* For Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* table */
thead>tr>th {
    background-color: #36E39B !important;
    border: 1px solid black !important;
}

tbody>tr>td {
    border: 1px solid black !important;
}

.width-680 {
    width: 680px !important;
}

#select-companion {
    margin-left: 80px;
}

.border-bottom-1 {
    border-bottom: 1px solid gainsboro !important;
    /* margin-left: 80px; */
}

/* Laptop Display block */
.laptop-block {
    display: block ! important;
}

.laptop-none {
    display: none !important;
}

.p-35-custom {
    padding: 0% 28% !important;
}

div:where(.swal2-container) h2:where(.swal2-title) {
    position: relative;
    max-width: 231px !important;
    /* width: 231px; */
    margin: 0;
    padding: .8em 1em 0;
    color: inherit;
    font-size: 1em ! important;
    font-weight: 500;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    display: none;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 100%);
    /* width: 0em !important; */
    max-width: 231px !important;
    padding: 0 0 1.25em;
    border: none;
    border-radius: 5px;
    background: #fff;
    color: hsl(0, 0%, 33%);
    font-family: inherit;
    font-size: 1rem;
}


.place-content-center{
    place-content: center;
}

.text-red{
    color: #209967;
    font-size: 17px !important;
}

.iti__country {
    padding: 5px 10px;
    outline: none;
    font-size: 16px !important;
}

.place-self-center{
    place-self: center;
}
.place-self-end{
    place-self: end;
}

/* Wrapper datatables */
.dataTables_wrapper {
    overflow-x: auto;
}

.text-underline{
    text-decoration: underline !important;
}

.ltr{
    direction: ltr !important;
}

/* Width */
.w-5{
    width: 5% !important;
}
.w-10{
    width: 10% !important;
}
.w-15{
    width: 15% !important;
}
.w-20{
    width: 20% !important;
}
.w-25{
    width: 25% !important;
}
.w-30{
    width: 30% !important;
}
.w-35{
    width: 35% !important;
}
.w-40{
    width: 40% !important;
}
.w-45{
    width: 45% !important;
}
.w-50{
    width: 50% !important;
}
.w-55{
    width: 55% !important;
}
.w-60{
    width: 60% !important;
}
.w-65{
    width: 65% !important;
}
.w-70{
    width: 70% !important;
}
.w-75{
    width: 75% !important;
}
.w-80{
    width: 80% !important;
}
.w-85{
    width: 85% !important;
}
.w-90{
    width: 90% !important;
}
.w-95{
    width: 95% !important;
}
.ticket{
    border: 1px solid black !important;
    /* background-image: url('../images/background_image.png'); */
    /* background-position: contain; */
    width: 30%;
    background-color: transparent !important;
}

.ticket .card-header{
    background-color: #36E39B !important;
}

.action-button-green {
    /* width: 500px !important; */
    padding-top: 10px;
    padding-bottom: 10px;
    color: black;
    background-color: #36E39B;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding-left: 100px;
    padding-right: 100px;
}

.px-100{
    padding-left: 100px !important;
    padding-right: 100px !important;
}

.action-button-green-arabic {
    /* width: 500px !important; */
    padding-top: 10px;
    padding-bottom: 10px;
    color: black;
    background-color: #36E39B;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding-left: 30px;
    padding-right: 50px;
}

.otp-button {
    padding-top: 5px;
    padding-bottom: 5px;
    color: black;
    background-color: #36E39B;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.3s;
}

.border-none{
    border: 0px !important;
}

.place-items-center{
    place-items: center !important;
}

.login-info td{
    border: none !important;
    padding: 5px !important;
}

.login-info td:nth-child(1){
    width: 180px !important;
}

@media only screen and (max-width: 450px) {
    .w-30{
        width: 50% !important;
    }
    
    .fs-30 {
        font-size: 20px !important;
    }

    .p-35-custom {
        padding: 0% 1rem !important;
    }

    .buttons {
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    div.col-4 > svg {
        height: 30px !important;
    }

    .steps-indicator > img{
        width: 100% !important;
    }

    .login-info,.ticket{
        width: 100% !important;
    }

    .modal.show .modal-dialog {
        transform: translateY(50%) !important;
    }

    .text-left {
        text-align: left !important;
    }

    .companions-list > .row {
        justify-content: center !important;
    }

    .fs-25 {
        font-size: 18px !important;
    }

    .fs-25-english {
        font-size: 16px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    .fs-35 {
        font-size: 25px !important;
    }

    .h4, h4, .fs-20 {
        font-size: 16px !important;
    }

    .action-button-black, .action-button-white{
        font-size: 15px !important;
        display: block !important;
    }
}

.px-28{
    padding: 0px 28% !important;
}

span.select2-container{
    width: 100% !important;
    border: 0px solid #ddd !important;
    border-radius: 5px !important;
}

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

.select2-container--default .select2-selection--single{
    border: 0px solid #ddd !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 34px !important;
}

.b-8 {
    border: 8px solid #333 !important;
} 

.br-23 {
    border-radius: 23px !important;
}

.p-25-1{
    padding: 1.5rem 1rem !important;
}

.block{
    display: block !important;
}

.grid {
    display: grid;
    height: 97vh;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
}

.grid p{
    color: #b3b3b3;
}

.bg-green-button {
    background-color: #36E39B ! important;
    background-size: cover;
}

.fw-400 {
    font-weight: 400 !important;
}

.lh-40px {
    line-height: 40px !important;
}