@font-face {
   font-family: 'Lucy Said Font';
   src: url("../fonts/lucy-said-font.ttf");
 }

 /* ------------Theme Setting------------ */
 .side-menu {
   background: #0c2f52 !important;
 }

 .bg-primary {
   background-color: #1C4E80 !important;
 }

 .text-primary {
   color: #1c4e80 !important;
 }

 #sidebar-menu>ul>li>a.mm-active {
   color: #b4c9de !important;
   background-color: #1C4E80 !important;
 }

 .badge-primary {
   background-color: #1a4c7e;
 }

 .topbar .topbar-left {
   background: #f5f7ff;
 }

 .btn-primary {
   background-color: #1C4E80 !important;
   border: 1px solid #1C4E80 !important;
 }

 .pagination .page-item.active .page-link {
   background-color: #1c4e80;
   border-color: #1c4e80;
 }

 /* -----------------End Theam--------------- */
 .clockin p {
   background: #1c4e80;
   color: #fff;
   display: inline-block;
   padding: 5px 15px;
   border-radius: 6px;
   min-width: 115px;
   font-size: 2rem;
 }

 .clockout p {
   background: #ec4561;
   color: #fff;
   display: inline-block;
   padding: 5px 15px;
   border-radius: 6px;
   min-width: 115px;
   font-size: 2rem;
 }

 .clockin i {
   color: #ec4561;
 }

 .clockout i {
   color: #1c4e80;
 }

 .header-title {
   margin-bottom: 8px;
   letter-spacing: .02em;
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
 }

 .rec-acti-list .rec-acti-list-item {
   margin-bottom: 10px;
   position: relative;
   padding: 14px 10px;
   background: #f5f7ff;
   border-bottom: 1px solid #eee;
 }

 .error-container {
   color: #ec4561;
 }

 /* -----------Setting Page ----------------------- */
 .small-edit-btn:hover {
   background: #626ed4;
   color: #fff !important;
   transition: all ease-in-out 0.2s;
 }

 .small-edit-btn {
   background: none;
   position: absolute;
   left: 70px;
   color: #626ed4 !important;
   border: none;
   border-radius: 4px;
   padding: 2px 14px;
   font-size: 14px;
   margin-left: 30px;
   transition: all ease-in-out 0.2s;
 }

 .small-edit-btn-2 {
   background: none;
   position: absolute;
   left: 0px;
   color: #626ed4 !important;
   border: none;
   border-radius: 4px;
   padding: 2px 14px;
   font-size: 14px;
   /* margin-left: 30px; */
   margin-top: 11px;
   transition: all ease-in-out 0.2s;
 }

 .hide {
   display: none;
 }

 .show {
   display: block;
 }
 .label-tag {
    font-size: 12px;
    font-weight: 500;
    color: #3e7cbd;
 }
 .last-seen {
  font-size: 11px;
 }

 .swal2-actions button {
   margin-right: 8px;
   margin-left: 8px;
 }

 @media screen and (min-width: 980px) {
   body {
     zoom: 0.92;
   }
 }

 /* -------------Modal Style------------------- */
 .modal-header {
   background-color: #1C4E80;
   color: #fff;
 }

 .close {
   color: #ffe6e6;
   font-size: 1.5rem;
   opacity: 1;
 }

 .close:hover {
   color: #c0c0c0;
 }

 .form-control {
   border-radius: 8px;
   border: 1px solid rgb(173, 173, 173);
   height: calc(2.0em + 0.75rem + 2px) !important;
   background-color: #ffffff !important;
 }

 .form-control:focus {
   border: 1px solid rgb(173, 173, 173);

 }

 .modal-footer {
   border-top: none !important;
 }

 /* -----------Test Area---------- */

 textarea {
   width: 100%;
   height: 100px;
   background: none repeat scroll 0 0 #FFFFFF;
   border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
   border-image: none;
   border-radius: 6px 6px 6px 6px;
   border-style: none solid solid none;
   border-width: medium 1px 1px medium;
   border: 1px solid rgb(173, 173, 173) !important;
   color: #555555;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1em;
   line-height: 1.4em;
   padding: 5px 8px;
   box-shadow: none;
   transition: background-color 0.2s ease 0s;
 }

 textarea:focus {
   background: none repeat scroll 0 0 #FFFFFF;
   outline-width: 0;
 }

 /* --------------CODE BY SABA-------------- */

 .modal-content {
   background-color: #f5fdff !important;
 }

 .content-page .content {
   background-color: #f5f7ff;
 }

 .modal-backdrop {
   width: 100% !important;
   height: 100% !important;
 }

 .modal-dialog {
   margin: 5.8rem auto;
 }

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

 .footer {
   background-color: #ececf1 !important;
 }

 .pagination .page-link:focus,
 .pagination .page-link:hover {
   color: #ffffff;
 }

 .setting-choose-file-btn {
   display: flex;
   justify-content: center;
   height: 100% !important;
   align-items: center;
 }

 .wid-peity {
   margin-bottom: 10px;
   position: relative;
   padding: 14px 10px;
   background: #f5f7ff;
 }

 .checked-box {
   accent-color: #02a499;
 }


 /* .text-dark h {
    color: red; 
  }
    .text-dark m {
    color: blue; 
  } */
 /* 
  .work-hours .text-dark::after {
    content: ' h';
    color: red;
  }
  
  .work-hours .text-dark::before {
    content: 'm ';
    color: blue; /
  } */

 /* ---------------Birthday Banner---------- */

 .birthday-banner {
   padding-top: 30px;
   padding-bottom: 30px;
   background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #02a499);
   background-size: 400% 400%;
   animation: gradient 15s ease infinite;
   border-radius: 10px;
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
 }


 .birthday-head {
   font-size: 90px;
   color: #ffffff;
   font-family: 'Lucy Said Font';
   font-weight: normal;

 }

 .birthday-wish-text {
   font-size: 20px;
   color: #ffffff;
 }


 @keyframes gradient {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 /* ------moving ballooons---- */

 /* #balloons {
    bottom: 15%;
    position: absolute;
    -webkit-animation: linear infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 5s;
  }
  @-webkit-keyframes run {
    0% {
      left: 0;
    }
    50% {
      left: 10%;
    }
    100% {
      left: 30;    
    }
  } */

 :root {
   --swings: calc(60 / 10 * 1s);
   --swing-time: var(--swings);
 }



 .stick {
   position: relative;
   transform-origin: 50% 100%;

   float: left;

   animation: swing var(--swing-time) ease-in-out infinite;
 }

 @keyframes swing {

   0%,
   100% {
     transform: rotate(-6deg);
   }

   50% {
     transform: rotate(8deg);
   }
 }


 /* -------fireworks---------- */
 /* 
  #firework {
    position: relative;
  }
  .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #eee56baf;
    opacity: 0.3;
    animation: explode 1s ease-in-out infinite;
  }
  @keyframes explode {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(2);
    }
  } */


 .pyro>.before,
 .pyro>.after {
   position: absolute;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
   -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
   -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
   -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
   -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
   animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
 }

 .pyro>.after {
   -moz-animation-delay: 1.25s, 1.25s, 1.25s;
   -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
   -o-animation-delay: 1.25s, 1.25s, 1.25s;
   -ms-animation-delay: 1.25s, 1.25s, 1.25s;
   animation-delay: 1.25s, 1.25s, 1.25s;
   -moz-animation-duration: 1.25s, 1.25s, 6.25s;
   -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
   -o-animation-duration: 1.25s, 1.25s, 6.25s;
   -ms-animation-duration: 1.25s, 1.25s, 6.25s;
   animation-duration: 1.25s, 1.25s, 6.25s;
 }

 @-webkit-keyframes bang {
   from {
     box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
   }
 }

 @-moz-keyframes bang {
   from {
     box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
   }
 }

 @-o-keyframes bang {
   from {
     box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
   }
 }

 @-ms-keyframes bang {
   from {
     box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
   }
 }

 @keyframes bang {
   from {
     box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
   }
 }

 @-webkit-keyframes gravity {
   to {
     transform: translateY(200px);
     -moz-transform: translateY(200px);
     -webkit-transform: translateY(200px);
     -o-transform: translateY(200px);
     -ms-transform: translateY(200px);
     opacity: 0;
   }
 }

 @-moz-keyframes gravity {
   to {
     transform: translateY(200px);
     -moz-transform: translateY(200px);
     -webkit-transform: translateY(200px);
     -o-transform: translateY(200px);
     -ms-transform: translateY(200px);
     opacity: 0;
   }
 }

 @-o-keyframes gravity {
   to {
     transform: translateY(200px);
     -moz-transform: translateY(200px);
     -webkit-transform: translateY(200px);
     -o-transform: translateY(200px);
     -ms-transform: translateY(200px);
     opacity: 0;
   }
 }

 @-ms-keyframes gravity {
   to {
     transform: translateY(200px);
     -moz-transform: translateY(200px);
     -webkit-transform: translateY(200px);
     -o-transform: translateY(200px);
     -ms-transform: translateY(200px);
     opacity: 0;
   }
 }

 @keyframes gravity {
   to {
     transform: translateY(200px);
     -moz-transform: translateY(200px);
     -webkit-transform: translateY(200px);
     -o-transform: translateY(200px);
     -ms-transform: translateY(200px);
     opacity: 0;
   }
 }

 @-webkit-keyframes position {

   0%,
   19.9% {
     margin-top: 10%;
     margin-left: 40%;
   }

   20%,
   39.9% {
     margin-top: 40%;
     margin-left: 30%;
   }

   40%,
   59.9% {
     margin-top: 20%;
     margin-left: 70%;
   }

   60%,
   79.9% {
     margin-top: 30%;
     margin-left: 20%;
   }

   80%,
   99.9% {
     margin-top: 30%;
     margin-left: 80%;
   }
 }

 @-moz-keyframes position {

   0%,
   19.9% {
     margin-top: 10%;
     margin-left: 40%;
   }

   20%,
   39.9% {
     margin-top: 40%;
     margin-left: 30%;
   }

   40%,
   59.9% {
     margin-top: 20%;
     margin-left: 70%;
   }

   60%,
   79.9% {
     margin-top: 30%;
     margin-left: 20%;
   }

   80%,
   99.9% {
     margin-top: 30%;
     margin-left: 80%;
   }
 }

 @-o-keyframes position {

   0%,
   19.9% {
     margin-top: 10%;
     margin-left: 40%;
   }

   20%,
   39.9% {
     margin-top: 40%;
     margin-left: 30%;
   }

   40%,
   59.9% {
     margin-top: 20%;
     margin-left: 70%;
   }

   60%,
   79.9% {
     margin-top: 30%;
     margin-left: 20%;
   }

   80%,
   99.9% {
     margin-top: 30%;
     margin-left: 80%;
   }
 }

 @-ms-keyframes position {

   0%,
   19.9% {
     margin-top: 10%;
     margin-left: 40%;
   }

   20%,
   39.9% {
     margin-top: 40%;
     margin-left: 30%;
   }

   40%,
   59.9% {
     margin-top: 20%;
     margin-left: 70%;
   }

   60%,
   79.9% {
     margin-top: 30%;
     margin-left: 20%;
   }

   80%,
   99.9% {
     margin-top: 30%;
     margin-left: 80%;
   }
 }

 @keyframes position {

   0%,
   19.9% {
     margin-top: 10%;
     margin-left: 40%;
   }

   20%,
   39.9% {
     margin-top: 40%;
     margin-left: 30%;
   }

   40%,
   59.9% {
     margin-top: 20%;
     margin-left: 70%;
   }

   60%,
   79.9% {
     margin-top: 30%;
     margin-left: 20%;
   }

   80%,
   99.9% {
     margin-top: 30%;
     margin-left: 80%;
   }
 }



 /* ------------------Upcoming Events----------------- */

 .wrap {
   position: relative;
   width: 100%;
   height: 250px;
 }

 .slider {
   height: 250px;
   overflow: hidden;
   width: 100%;
 }

 #upcoming_events {
   display: flex;
   flex-direction: column;

   position: relative;
   top: 0;
   left: 0;

   overflow: hidden;

   transition: .5s;

 }

 .events-icon {
   animation: blink-1 2s infinite both;
   color: #f7ff48;
 }

 @-webkit-keyframes blink-1 {

   0%,
   50%,
   100% {
     opacity: 1;
   }

   25%,
   75% {
     opacity: 0;
   }
 }

 @keyframes blink-1 {

   0%,
   50%,
   100% {
     opacity: 1;
 
   }

   25%,
   75% {
     opacity: 0;
   }

   50%{
    transform: scale(1.4);
   }
 }


 .bg-blink {
  background-color: #1c4e80;

 -webkit-animation: bg-blink-anim 1s infinite; /* Safari 4+ */
  -moz-animation:    bg-blink-anim 1s infinite; /* Fx 5+ */
  -o-animation:      bg-blink-anim 1s infinite; /* Opera 12+ */
  animation:         bg-blink-anim 1s infinite; /* IE 10+, Fx 29+ */
}

@keyframes bg-blink-anim{

0%, 49% {
    background-color: #02a499;
}
50%, 100% {
    background-color: #ff143b;
}
}


.up-birthday-head {
  animation: color-change 1s infinite;

}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}
@keyframes depth {
 
  0%, 50% {
    text-shadow: 0 0 black;
    color: #ec1c3f; 
  }
  75% {
    text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black,
      -5px 0 black;
      color: #7102a4; 
  }
  100% {
    text-shadow: 0 0 black;
    color: #ec1c3f; 
  }
}



@keyframes color-change {
  0% { color: #e00e31; }
  50% { color: #7102a4; }
  100% { color: #ec1c3f; }
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm{
  background-color: #02a499 !important;
  border: 1px solid #02a499;
}

.slimScrollDiv{
  height: 100% !important;
}

.slimscroll-menu{
height: 100% !important;
}


/* ---------slick lib carousal------ */

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}






/* -------Slick lib end-------------- */