@font-face {
  font-family: 'saudi_riyal';
  src: url('https://sg.inethub.net/assets/fonts/riyal.ttf');
}
.main-wrapper {margin: 20px;padding: 0px;}
.last_update {font-size: 10px;font-weight: 600;color: red !important;position: absolute;padding: 6px 8px;border: 1px #80808069 dotted;margin-left: 10px;}
.fs-35 {font-size: 35px;}
.fs-45 {font-size: 45px;}
.fs-1em {font-size: 1em;}
.fs-3em {font-size: 2.5em;}
a:hover {text-decoration:none;}
.main-title {text-align: center;font-weight:700;font-size: 12px;}
.border-hover:hover {border: 1px #80808059 solid;}
.avatars {width: 70px;height: 70px;object-fit: cover;border: 2px #22baa070 solid;}
::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-track{-webkit-border-radius:0;border-radius:0}
::-webkit-scrollbar-thumb{-webkit-border-radius:0;border-radius:0;background:#131e13e6}
::-webkit-scrollbar-thumb:window-inactive{background:#fff}
::-webkit-scrollbar:horizontal{
  height: 6px;
  background-color: red;
}
::-webkit-scrollbar-thumb:horizontal{
        background: #000;
        border-radius: 10px;
}
.pos-rel {position: relative;}
.bredmar {
    margin: 20px;
    padding: 0px;
}
.validate {background-color: #0f9d65;color: white;font-size: 10px;padding: 2px 10px;border-radius: 4px;}
.p-avatar {display: block;margin: 0 auto;object-fit: cover;height: 150px;width: 150px;border-radius: 50%;-webkit-box-shadow: 0 0 0 5px #fff;-moz-box-shadow: 0 0 0 5px #fff;-o-box-shadow: 0 0 0 5px #fff;box-shadow: 0 0 0 5px #fff;}
.logo {width: 70px;}
.m-0 {margin: 0!important;}

.m-0 {margin: 0!important;}

.p-0 {padding: 0 !important;}

.pt-10 {padding-top: 10px !important;}
.pt-15 {padding-top: 15px !important;}
.pt-20 {padding-top: 20px !important;}
.pt-30 {padding-top: 30px !important;}
.pt-40 {padding-top: 40px !important;}
.pt-50 {padding-top: 50px !important;}

.pl-10 {padding-left: 10px !important;}
.pl-15 {padding-left: 15px !important;}
.pl-20 {padding-left: 20px !important;}
.pl-30 {padding-left: 30px !important;}
.pl-40 {padding-left: 40px !important;}
.pl-50 {padding-left: 50px !important;}

.pb-0 {padding-bottom: 0 !important;}
.pb-10 {padding-bottom: 10px !important;}
.pb-15 {padding-bottom: 15px !important;}
.pb-20 {padding-bottom: 20px !important;}
.pb-30 {padding-bottom: 30px !important;}
.pb-40 {padding-bottom: 40px !important;}
.pb-50 {padding-bottom: 50px !important;}

.mb-0 {margin-bottom: 0 !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-15 {margin-bottom: 15px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-40 {margin-bottom: 40px !important;}
.mb-50 {margin-bottom: 50px !important;}

.gitna {text-align: center !important;}
.ctitle {color:#22BAA0 !important;}
.pula {color:red !important;}
.blue {color:blue !important;}
.search_bg {padding: 10px;border-bottom: 1px #d7d7d7 solid;}
.green {color:green;font-weight: 600;}
.tot {color: #040abf;font-weight: 600;}
.dashboard-border {padding: 20px;}
strong {color: red !important;}
.bold {font-weight: 600;}
.fw-700 {font-weight: 700;}
.feature {
  
  display: grid;
  padding: 1rem;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  column-gap: 0.5rem;
  //background-color: orange;
  
}

.item {
    
  margin: 0.5rem;
  padding: 2rem 0rem;
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
  border-radius: 10px;  
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  
  box-shadow: 0 1rem 4rem rgba(0,0,0,.25);
  transition: all .2s;
  
  
  &--1 {
    background-color: blue;
   /*  grid-row: 1 / 3;
    grid-column: 2 / 4; */
  }

  &--2 {
    background-color: purple;
  }
  
  &--3 {
    background-color: red;
  }
  
  &--4 {
    background-color: green;
  }
  
  &--5 {
    background-color: teal;
  }
  
  &--6 {
    background-color: navy;
  }
  
}

  .item:hover {
    background-color: #09b58d;
    color: white;
    transform: translate(0,-0.3rem);
    box-shadow: 0 1rem 4rem rgba(0,0,0,.50);
	
  }
  .item:hover a{
    color: white;
  }
  
 .width100 {width: 100% !important;}
 .width80 {width: 80% !important;}
 .head-title {margin-left: 20px;padding-left: 5px;font-weight: 800;border-left: 4px #337ab7 solid;}
 .no-box {box-shadow: 0 1rem 4rem rgb(0 0 0 / 0%) !important;}
 .no-box:hover {background-color: rgb(0 0 0 / 0%) !important;}
 
         @keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

.item:hover .blinking-text {display:none;}
.blinking-text2 {
	position: absolute;
    top: 2px;
    right: -52px;
    font-size: 0.65em;
    width: 49px;
    height: 18px;
    background: red;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-weight: 600;
    animation: blink 2s infinite;
}
.blinking-text {
    position: absolute;
    top: -4px;
    right: -3px;
    font-size: 0.75em;
    width: 30px;
    height: 30px;
    background: red;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: 600;
    animation: blink 2s infinite;
}
.marquee {
    font-size: 12px;
    line-height: 1;
    padding: 5px 0;
    border-top: 1px #8080804a solid;
    border-bottom: 1px #8080804a solid;
    overflow: hidden;
	box-shadow: 0 1rem 4rem rgb(0 0 0 / 25%);

}
.ago {font-size: 10px;font-style: italic;padding-left: 0 !important;color: #ad0707e3;}
.marquee__item{margin:0 auto;white-space:nowrap;overflow:hidden;animation:marquee 280s linear infinite;display:inline-block;padding:5px 0}
.marquee__item:hover{-moz-animation-play-state:paused;-webkit-animation-play-state:paused;animation-play-state:paused}
.marquee__item>span {
    padding-left: 24px;
}
.blues {color:#09b58d !important;}
@keyframes marquee{0%{transform:translate(0,0)}100%{transform:translate(-50%,0)}}
.tr-bg {background-color: #22BAA0 !important;color:white;}
.emp-img {width: 100%;}
    .pdf {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .pdf,
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
	
    .fade-in {
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    .fade-in.visible {
        opacity: 1;
    }

.deleted {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 15px 25px;
  background: #dd1028;
  color: white;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  animation: slideIn 0.5s ease-out, fadeOut 0s ease-in 10s forwards;
  z-index: 1000;
}

.database {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 15px 25px;
  background: #dd1028;
  color: white;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  animation: slideIn 0.5s ease-out, fadeOut 0s ease-in 10s forwards;
  z-index: 1000;
}

.generated {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 15px 25px;
  background: #097848;
  color: white;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  animation: slideIn 0.5s ease-out, fadeOut 0s ease-in 10s forwards;
  z-index: 1000;
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes stay {
    to {
        opacity: 1;
        display: none;
    }
}
@keyframes fadeOut {
    to {
        opacity: 0;
        display: none;
    }
}
.action {display: flex;}
.action_btn {opacity: 0;margin-left: 10px;}
.action:hover .action_btn {opacity: 1;}