/* @import '../node_modules/css-star-rating/scss/star-rating'; */

p,
span,
a,
div,
button,
.form-control,
.ng-select .ng-select-container,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
    font-family: "Tajawal-Medium";
}

body,
p {
    color: #3C3C48;
}

.semi-bold {
    font-family: "Tajawal-Bold";
    font-weight: 600;
}

.bold {
    font-family: "Tajawal-Bold";
    font-weight: 700;
}

.bb-1 {
    border-bottom: 1px solid transparent;
}
.be-1{
    border-inline-end: 1px solid transparent;
}
/* font */
.font-9 {
    font-size: 9px;
}
.font-10 {
    font-size: 10px;
}
.font-12{
    font-size: 12px;
}
.font-13 {
    font-size: 13px;
}

.font-14 {
    font-size: 14px;
}
.font-17 {
    font-size: 17px;
}
.font-18 {
    font-size: 18px;
}
.font-22 {
    font-size: 22px;
}
.font-24 {
    font-size: 24px;
}
.font-28 {
    font-size: 28px;
}
.font-30 {
    font-size: 30px;
}
.font-32 {
    font-size: 32px;
}
.font-38 {
    font-size: 38px;
}
.bold-700 {
    font-weight: 700;
}

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

/* rect */
.rect-8{
    width: 8px;
    height: 8px;
}
.rect-14 {
    width: 12px;
    height: 12px;
}

.rect-14 {
    width: 14px;
    height: 14px;
}

.rect-16 {
    width: 16px;
    height: 16px;
}

.rect-18 {
    width: 18px;
    height: 18px;
}

.rect-20 {
    width: 20px;
    height: 20px;
}
.rect-22 {
    width: 22px;
    height: 22px;
}
.rect-24 {
    width: 24px;
    height: 24px;
}
.rect-32 {
    width: 32px;
    height: 32px;
}
.rect-34{
    width: 34px!important;
    height:34px!important;
}
.rect-36 {
    width: 36px;
    height: 36px;
}
.rect-40{
    width: 40px;
    height: 40px;
}
.rect-45{
    width: 45px;
    height: 45px;
}
.rect-50{
    width: 50px;
    height: 50px;
}
.rect-64{
    width: 64px;
    height: 64px;
}
.rect-80{
    width: 80px;
    height: 80px;
}
.circle{
    border-radius: 50%;
}
.be-0 {
    border-inline-end-width: 0px;
}

.bs-0 {
    border-inline-end-width: 0px;
}

.b-0 {
    border-width: 0px;
}

.bb-0 {
    border-bottom-width: 0px;
}

.bt-0 {
    border-top-width: 0px;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}


.btn-primary {
    background-color: #337AB7;
    border-color: #337AB7;
}

/* line height */
.lh-22 {
    line-height: 22px;
}

.lh-24 {
    line-height: 24px;
}

.lh-42 {
    line-height: 42px;
}

/* radius */
.radius-4 {
    border-radius: 4px;
}

.radius-5 {
    border-radius: 5px;
}
.radius-8 {
    border-radius: 8px;
}
.radius-16 {
    border-radius: 16px;
}
.flex-center-x{
    display: flex!important;
    align-items: center;
    justify-content: center;
}
.flex-center-y{
    display: flex!important;
    align-items: center;
}
input::placeholder , .ng-select input::placeholder  
 {
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    opacity: 0.5;
    color: #898990 !important;
}
/* input::placeholder , .ng-select input::placeholder  
 {
    font-weight: 700;
} */
input.regular::placeholder {
    font-weight: 500;
    font-size: 16px;
    line-height: 25px;
    color: #898990 !important;
}
.ng-touched.ng-invalid,
.ng-touched.ng-invalid~.input-group-text {
    border-color: #cc324c;
}
.r-gap-8{
    row-gap: 8px;
}
.logo-auto {
    height: auto;
    width: 100%;
}

.pointer {
    cursor: pointer;
}

.form-control:focus+.input-group-append .input-group-text {
    border: 1px solid #2323a8 !important;
}

.ng-touched.ng-invalid+.input-group-append .input-group-text {
    border: 1px solid #cc324c !important;
}


.main-page {
    /* overflow-x: hidden; */
    /* overflow-y: auto;
    height: calc(100vh - 48px); */
    display: flex;
    flex-direction: column;
}

.main-haeder {
    background-color: #FBFBFB;
    border-bottom: 0.116px solid #FBFBFB;
    background: var(--Foundation-Base-White, #FBFBFB);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.pointer {
    cursor: pointer;
}
.z-card{
    border-radius: 8px;
    border: 1px solid rgba(173, 173, 173, 0.25);
    background: #FFF;
}
.z-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 178px;
    padding: 2px;
}
.btn:focus{
    box-shadow: none!important;
}

.filter-wh {
    filter: brightness(0) invert(1);
}
.mirror-en {
    -moz-transform: scaleX(-1);
    /* Gecko */
    -o-transform: scaleX(-1);
    /* Opera */
    -webkit-transform: scaleX(-1);
    /* Webkit */
    transform: scaleX(-1);
    /* Standard */
    filter: FlipH;
    /* IE 6/7/8 */
  }
  .scroll-x{
    overflow-x: auto;
  }
/* custom */

.scroll-y{
    overflow-y: auto;
}

/* Style the entire scrollbar */
::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
    height: 8px; /* Height of the scrollbar (for horizontal scrollbars) */
}

/* Style the track (background) of the scrollbar */
::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 10px!important;
    margin: 2px; /* Optional: margin inside the track */

}

/* Style the thumb (draggable part) of the scrollbar */
::-webkit-scrollbar-thumb {
    background: #BFC4CE; 
    border: 2px solid #f1f1f1;
    border-radius: 10px!important;
}

::-webkit-scrollbar-thumb:hover {
    /* background-color: #00bcd4; */
    background: var(--Linear, linear-gradient(180deg, #66BB94 -116.31%, #4798CD 114.46%));
}
.n-lines-2{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2; 
    -webkit-box-orient: vertical;
 }
.n-lines-3{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3; 
    -webkit-box-orient: vertical;
 }

 .star-container{
    margin-inline: 0px!important;
}
.write-rate .star-container{
    gap:22px
  }
  .text-danger p{
    color: #dc3545;
  }
  .text-start{
    text-align: start!important;
  }
  @media (max-width:426px)  {
    .rates .rating.medium .star,
    .rate-section .rating.medium .star{
        width: 8px;
        height: 8px;
      }
  }

  .gutter-4 {
    row-gap: 1.5rem;
    /* column-gap: 1.5rem; */
}

.left-unset{
    left: unset;
}
.pointer-none{
    pointer-events: none;
}
.b-l{
    border-bottom:0.116px  solid #898990 !important;
}
.no-wrap{
    white-space: nowrap;
}
.capital{
    text-transform: capitalize;
}