div#preloader {
    position: fixed;
    z-index: 9999;
    width: 100%;
    background:
      radial-gradient(circle at 55% 42%, rgba(0, 95, 85, 0.28), transparent 26rem),
      linear-gradient(135deg, #005F55, #005F55);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

div#preloader .loader_position {
    position: relative;
}




/* preloader_1 — modern brand dual gradient ring
================================================== */
.preloader_1 {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0;
  background: rgba(245, 245, 245, 0.06);
  border: 1px solid rgba(242, 160, 82, 0.18);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(0, 50, 45, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-animation: none;
  animation: none;
}

.preloader_1::before {
  content: "IS";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F2A052;
  font: 900 20px/1 "Cairo", system-ui, sans-serif;
  letter-spacing: 0;
}

.preloader_1 span {
  position: absolute;
  border-radius: 50%;
  display: block;
}

.preloader_1 span:first-child {
  inset: 14px;
  background: conic-gradient(from 90deg, rgba(0, 95, 85, 0) 0deg, rgba(0, 95, 85, 0.18) 90deg, #005F55 260deg, #F2A052 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  -webkit-animation: spin 1.1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
          animation: spin 1.1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

.preloader_1 span:last-child {
  inset: 27px;
  background: conic-gradient(from 270deg, rgba(242, 160, 82, 0) 0deg, rgba(242, 160, 82, 0.2) 120deg, #F2A052 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  -webkit-animation: spinBack 1.6s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
          animation: spinBack 1.6s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* preloader_2
================================================== */
.preloader_2 {
  position: relative;
  height: 100px;
  width: 100px;
  border: 4px solid transparent;
  border-top-color: #F2A052;
  border-left-color: #F2A052;
  border-radius: 50%;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

.preloader_2::before {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  content: "";
  border: 4px solid transparent;
  border-top-color: #005F55;
  border-left-color: #005F55;
  border-radius: 50%;
  -webkit-animation: spinBack 1s linear infinite;
  animation: spinBack 1s linear infinite;
}

@-webkit-keyframes spinBack {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }
}

@keyframes spinBack {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }
}


/* preloader_3
================================================== */
.preloader_3 {
   width:50px;
   height:50px;
   display:inline-block;
   padding:0px;
   text-align:left;
}
.preloader_3 span {
   position:absolute;
   display:inline-block;
   width:50px;
   height:50px;
   border-radius:100%;
   background:#F2A052;
   -webkit-animation:loader3 1.5s linear infinite;
   animation:loader3 1.5s linear infinite;
}
.preloader_3 span:last-child {
   animation-delay:-0.9s;
   -webkit-animation-delay:-0.9s;
}
@keyframes loader3 {
   0% {transform: scale(0, 0);opacity:0.8;}
   100% {transform: scale(1, 1);opacity:0;}
}
@-webkit-keyframes loader3 {
   0% {-webkit-transform: scale(0, 0);opacity:0.8;}
   100% {-webkit-transform: scale(1, 1);opacity:0;}
}

/*  preloader_4*/
.preloader_4{
    width: 50px;
    height: 50px;
    background-color: var(--background-color);
    border-radius: 50%;
    box-shadow: 60px 0px 0px 0px #ddd;
    position: relative;
    margin: 36px 26px;
}

.preloader_4:after{
    background-color: #F2A052;
    width: 25px;
    height: 25px;
    box-shadow: 60px 0px 0px 0px #005F55;
    border-radius: 50%;
    left: 9px;
    top: 8px;
    position: absolute;
    content: "";
    -webkit-animation: eyeball 2s linear infinite alternate;
       -moz-animation: eyeball 2s linear infinite alternate;
            animation: eyeball 2s linear infinite alternate;
}

.admin_preloader .preloader_4{
    width: 20px;
    height: 20px;
    box-shadow: 30px 0px 0px 0px #ddd;

}
.admin_preloader .preloader_4:after{
    width:10px;
    height: 10px;
    left: 9px;
    top: 8px;
     box-shadow: 30px 0px 0px 0px #005F55;
}





@-webkit-keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
@-moz-keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
@keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}



.admin_preloader {
    height: 100px;
    width: 100px;
    position: relative;
    margin-top: 20px;
}