@import './style/flowbite.min.css';
@import './style/animate.min.css';
@import './style/animation_utility.css';
@import './style/aos.css';
@import './style/toastify.min.css';
body {
  margin: 0;
  line-height: inherit;
  box-sizing: border-box;
  padding: 0;
}

[x-cloak] { display: none !important; }

p {
  margin-block-start: 0em;
  margin-block-end: 0em;
}

@font-face {
    font-family: Inter-SemiBold;
    src: url(/assets/fonts/inter/Inter-SemiBold.ttf);
    /*font-weight:normal*/
}

@font-face {
  font-family: Dyslexie;
  src: url(/assets/fonts/Dyslexie.ttf);
  /*font-weight:normal*/
}

@font-face {
    font-family: Din-Bold;
    src: url(/assets/fonts/din-Next/ArbFONTS-DINNextLTArabic-Bold-2.ttf);
    /*font-weight:normal*/
}
@font-face {
    font-family: Din-Medium;
    src: url(/assets/fonts/din-Next/ArbFONTS-DINNextLTArabic-Medium-2.ttf);
    /*font-weight:normal*/
}
@font-face {
    font-family: Din-Black;
    src: url(/assets/fonts/din-Next/ArbFONTS-DINNextLTArabic-Black-2.ttf);
    /*font-weight:normal*/
}
@font-face {
    font-family: Din-Regular;
    src: url(/assets/fonts/din-Next/ArbFONTS-DINNextLTArabic-Regular-2.ttf);
    /*font-weight:normal*/
}
@font-face {
    font-family: Din-Light;
    src: url(/assets/fonts/din-Next/ArbFONTS-DINNEXTLTARABIC-LIGHT-2-2.ttf);
    /*font-weight:normal*/
}


.image-container::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 30px;
  mix-blend-mode: multiply; /* or screen, overlay, etc. */
  opacity: 0.5;
}


input[type=range]::-webkit-slider-thumb {
	pointer-events: all;
	width: 24px;
	height: 24px;
	-webkit-appearance: none;
  
}


        .custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: 200px; /* Adjust the width as needed */
}

/* Style the custom select element */
.custom-select {
  appearance: none; /* Remove default styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: 1px solid #ccc; /* Adjust border as needed */
  padding: 10px;
  padding-inline-end: 40px; /* Space for the custom arrow icon */
  width: 100%;
  font-size: 16px; /* Adjust font size as needed */
  cursor: pointer;
}

/* Hide the default arrow */
.custom-select::-ms-expand {
  display: none;
}

/* Position the custom arrow icon */
.custom-select-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-end: 20px; /* Adjust the position as needed */
  transform: translateY(-50%);
  pointer-events: none; /* Allow click through */
  width: 16px; /* Adjust the size as needed */
  height: 16px; /* Adjust the size as needed */
  background: url('../../assets/icons/down_arrow.svg') no-repeat center center;
  background-size: contain;
}

.outstanding{
    color: white;
    background-color: #35379E;
}

.not-scored{
    color: #231F20;
    background-color: #ACB0B1;
}

.very-good{
    color: #231F20;
    background-color: #02ADEE;
}

.good{
    color: #231F20;
    background-color: #84C543;
}

.acceptable{
    color: #231F20;
    background-color: #DDB528;
}

.poor{
    color: white;
    background-color: #F1582F;
}

.very-poor{
    color: white;
    background-color: #8F151A;
}


/* animations for AR */
body[dir="rtl"] .parent-hover:hover .hover-effect {
  transform: translateX(-8px);
}

body[dir="rtl"] .parent-card:hover .show-effect {
  transform: translateX(-8px);
  opacity: 1;
}

/* animations for EN */
body[dir="ltr"] .parent-hover-en:hover .hover-effect-en {
  transform: translateX(8px) rotate(180deg);
}

body[dir="ltr"] .parent-card-en:hover .show-effect-en {
  transform: translateX(8px) rotate(180deg);
  opacity: 1;
}

.color-effect:hover{
  background-color: #EFFAFE;
  border: 1px solid #28A8E0;
} 


table,td,th{
  border: 1px solid;
  border-collapse: collapse;
  color: #263A3E;
}


.loading {
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg); 
    opacity: 1;
  }
  50% {
    transform: rotate(180deg);
    opacity: 0.1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    -webkit-transform: rotate(180deg);
    opacity: 0.1;
  }
  100% {
    -webkit-transform: rotate(360deg);
    opacity: 1;
  }
}

.rotate {
  animation-name: rotate;
  -webkit-animation-name: rotate;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
#carousel{
  scrollbar-width: none;
}


.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #EDF5FF;
  text-align: justify;
  line-height: 214%;
}

.toast{
  background: #28A8E0 !important;
  border-radius: 20px;
}

@media (max-width: 767px) {
  .toast{
    transform: scale(0.6) !important;
  }
}

.toast-close{
  position: absolute;
  top: 16px;
  right: 24px;
}