@font-face {
  font-family: 'saudi_riyal';
  src: url('https://odoo.inethub.net/public/assets/fonts/riyal.ttf');
}
a {
    color: #000000;
    text-decoration: none;
}
.item:hover a {color: #ffffff !important;}
.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.0em;}
a:hover {text-decoration:none;}
.main-title {font-weight: 600;font-size: 10px;padding-top: 8px;}
.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;font-size: 80px;text-align: center;background-color: orange;object-fit: cover;height: 120px;width: 120px;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;}
.p-20 {padding: 20px !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;}

.mt-20 {margin-top: 20px !important;}
.mt-50 {margin-top: 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.2rem;
  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;
  background-color: #e1e1e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
  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: #714b67;
    color: white;
    transform: translate(0,-0.3rem);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  .item:hover a{
    color: white;
  }
  
 .width100 {width: 100% !important;}
 .width80 {width: 80% !important;}
 .head-title {margin-left: 20px;color: #000000;padding-left: 5px;font-weight: 800;border-left: 4px #000000 solid;font-size: 16px;}
 .no-box {box-shadow: unset;background-color: unset;border:unset}
 .no-box:hover {box-shadow: unset;background-color: unset;border:unset}
 
         @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: -5px;
    right: -5px;
    font-size: 0.75em;
    width: 25px;
    height: 25px;
    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;
    }
.delete {cursor:pointer}
.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;
}

.infoPop {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 15px 25px;
  background: blue;
  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;
    }
}
.page-title {box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;}
.note {font-weight:100 !important;font-size:12px !important;color:red !important}
.sizeColor {float:right;padding: 0 10px;margin-bottom:15px;}
.info {font-size:10px;}
.panel {-webkit-box-shadow:unset !important;box-shadow:unset !important;border:unset !important;}
.removexxx {position: absolute;margin-left: 5px;margin-top: 4px;background-color: black;color: white;}
.removexxx:hover {background-color: #714b67;}
.btnappend {background-color: black;color: white;}
.btnappend:hover {background-color: #714b67;}
.btn-success:hover {background-color: #714b67 !important;color:white !important;}
input[type="submit"] {background-color: black;color: white;}
input[type="submit"]:hover {background-color: #714b67 !important;}
#progress-bar {background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);height: 3px;transition: width 0.3s ease;}
.tooltip-inner {
  color: #ffffff;
  border: 1px #714b67 dashed;
  border-radius: 3px !important;
}
.not_expire {color: #ffffff;background-color: #4c9d03;padding: 2px 7px;border-radius: 5px;font-size: 10px;}
.expired {color: #ffffff;background-color: #ff0f0f;padding: 2px 7px;border-radius: 5px;font-size: 10px;}
.gen-active {background-color:#714b67 !important;color:white !important;}
.gen-active a {color:white !important;}
.flag {
	width: 13px;
    height: 13px;
    background: #fe8114;
    border-radius: 20px;
    margin-right: 5px;
    background-size: cover;
    background-position: center center;	
}
.BUY {
    padding: 1px 5px;
    color: #fff;
    font-size: 8px;
    border-radius: 2px;
    background: green;	
}
.CLOSED {
    padding: 1px 5px;
    color: #fff;
    font-size: 8px;
    border-radius: 2px;
    background: #08829c;	
}
.AUTO {
    padding: 1px 5px;
    color: #fff;
    font-size: 8px;
    border-radius: 2px;
    background: #6400b2;	
}
.SELL {
    padding: 1px 5px;
    color: #fff;
    font-size: 8px;
    border-radius: 2px;
    background: red;	
}
.ERROR {
    padding: 1px 5px;
    color: #fff;
    font-size: 8px;
    border-radius: 2px;
    background: #000000;	
}
.AUTOCLOSED {
    padding: 1px 5px;
    color: #fff;
    font-size: 8px;
    border-radius: 2px;
    background: #08829c;	
}

.BUY2 {
    padding: 1px 8px;
    color: #fff;
    border-radius: 4px;
    background: green;	
}
.CLOSED2 {
    padding: 1px 8px;
    color: #fff;
    border-radius: 4px;
    background: #08829c;	
}
.AUTO2 {
    padding: 1px 8px;
    color: #fff;
    border-radius: 4px;
    background: #6400b2;	
}
.SELL2 {
    padding: 1px 8px;
    color: #fff;
    border-radius: 4px;
    background: red;
}
.ERROR2 {
    padding: 1px 8px;
    color: #fff;
    border-radius: 4px;
    background: #000000;	
}
.AUTOCLOSED2 {
    padding: 1px 8px;
    color: #fff;
    border-radius: 4px;
    background: #08829c;	
}
.setAsDone {
    color: green;
}
.setAsDone:hover {
    color: #006400;
}
.cancell {
    color: red;
}
.cancell:hover {
    color: #8B0000;
}