/* Deletable */
.main-blue-white-div {
    height: 100vh;
    background: linear-gradient(to bottom, var(--blue-main) 30%, white 30%);
}


.white-box {
    border-radius: 11px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 10px 0px rgba(160, 160, 160, 0.2);
}

.main-box-shadow {
    box-shadow: 0px 2px 10px 0px #A0A0A033;
    border-radius: 11px;
    min-height: 645px;
    min-width: 825px;
    background-color: #FFFFFF;
}

.rotate180 {
    transform: rotate(180deg);
}
::ng-deep html {
  overflow-x: hidden !important;
}
body {
    --mat-dialog-container-max-width: 80vw !important;
}

/* @media only screen and (max-width: 1366px) {
    .main-box-shadow {
        min-height: 500px;
        min-width: 640px;
    }
}

@media only screen and (max-width: 1200px) {
    .main-box-shadow {
        min-height: auto;
        height: 500px;
        min-width: 640px;
    }
} */

@media only screen and (max-height: 770px) {
    .main-box-shadow {
        height: auto !important;
        min-height: auto !important;
    }
}


@media only screen and (max-width: 991px) {
    .main-box-shadow {
        height: auto;
        min-width: auto;
        min-height: auto;
    }
}

/* Deletable */

.no-scroll {
    overflow: hidden;
    height: 100%;
}

.pointer {
    cursor: pointer;
}

.centXY {
    display: flex;
    justify-content: center;
    align-items: center;
}

.disabled-div {
    transition: 0.3s ease-in-out;
    pointer-events: none;
    opacity: 0.6;
}

.minH-inherit {
    min-height: inherit;
    height: inherit;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

mat-hint {
    opacity: 0.6;
}

.appearAt767 {
    display: none;
}

.appearAt991 {
    display: none;
}

.appearAt1200 {
    display: none;
}

.appearAt1200WithFlex {
    display: none;
}

@media(max-width: 991px) {
    .disAppearAt991 {
        display: none !important;
    }

    .appearAt991 {
        display: block !important;
    }
}

@media(max-width: 767px) {
    .disAppearAt767 {
        display: none !important;
    }

    .appearAt767 {
        display: block !important;
    }
}

@media(max-width: 1200px) {
    .disAppearAt1200 {
        display: none !important;
    }

    .appearAt1200WithFlex {
        display: flex !important;
    }
}

/* For all mat-fields in the project */
::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mat-mdc-notch-piece {
    border-color: #E1E6EF !important;
}

.resImg {
    width: 100%;
    height: auto;
}


.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

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

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}



.main-btn {
    padding: 20px 40px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: none;
    background-color: #F8DFFC;
}


button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

h1,
h2,
h3,
h4,
h5,
p {
    margin: 0;
}


body {
    --mdc-outlined-text-field-outline-color: #F0F1F3;
    --mdc-outlined-text-field-hover-outline-color: var(--Primary-Blue-400);
    --mdc-outlined-text-field-hover-outline-width: 0.1px;
    --mdc-outlined-text-field-focus-outline-color: var(--Primary-Blue-400);
    --mdc-outlined-text-field-focus-outline-width: 2px;
    --mdc-outlined-text-field-focus-outline-padding: 0 !important;
    --mdc-outlined-text-field-focus-outline-border-radius: 20px !important;

    ::ng-deep {
        .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label {
            border-radius: 55px !important;
        }
    }

    ::placeholder {
        color: #ADAEB9 !important;
    }


    
}



::ng-deep .mat-form-field-appearance-outline .mat-form-field-label {
    color: red !important;
}

.pos-rel {
    position: relative;
}

.mt-main {
    margin-top: 150px;
}

.gab-1 {
    gap: 1px !important;
}

.gab-2 {
    gap: 2px !important;
}

.gab-3 {
    gap: 3px !important;
}

.gab-4 {
    gap: 4px !important;
}

.gab-5 {
    gap: 5px !important;
}

.gab-6 {
    gap: 6px !important;
}

.gab-7 {
    gap: 7px !important;
}

.gab-8 {
    gap: 8px !important;
}



.ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-4-lines {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spinner-border {
    --bs-spinner-width: 1rem !important;
    --bs-spinner-height: 1rem !important;
}

.root-container {
    padding-top: var(--Navbar-height);
}

.ln-block {
    display: inline-block;
}

.fillIcon {
    font-variation-settings: 'FILL' 1 !important;
}

.btnShowMore {
    color: white;
    background-color: #3EBBEC;
    transition: 0.3s ease;
}

.btnShowMore:hover {
    background-color: #3EBBEC;
}

/* 
@media only screen and (max-height: 800px) {
    body {
        zoom: 0.85;
        zoom: 0.8;
    }

    .fixZoom {
        zoom: 1.25;
    }

    main *:not(mat-form-field):not(mat-form-field *):not(google-map):not(google-map *) {
        zoom: 0.98;
        transform: scale(95%) !important;
    }

    app-header * {
        zoom: 0.99;
        transform: scale(97%) !important;
    }

    app-footer * {
        zoom: 0.99;
        transform: scale(97%) !important;
    }
} */

/* @media only screen and (max-width: 600px) {
    body {
        zoom: 0.7;
    }
} */

.hvr-grow {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

.hvr-grow:hover {
    transform: scale(1.1);
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

 
.sticky-box {

    bottom: 79px;
    position: fixed;
    background-color: #FF6201;
    z-index: 100;
    width: fit-content;
    margin-inline-start: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 12px 0 0 12px;
    opacity: 0.7;
    padding: 30px 10px;
    right: 0;
    .en {
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    } 
    .ar {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    } 
    img { 
        cursor: pointer;
    }
}