@charset "UTF-8";
:root {
  --bg-color: #F5F6FA;
  --popup-background-transparent: rgba(245,246,250, 0.7);
  --popup-background-non-transparent: rgba(245,246,250);
  --section-color: #FFFFFF;
  --selection-color: rgba(24, 26, 41, 0.5); /*#181A29; */
  --hover-color: rgba(24, 26, 41, 0.1); /*#181A29; */
  --border-color: rgba(24, 26, 41, 0.2); /*#181A29; */
  --font-color: #181A29;
  --font-color-soft: rgba(24, 26, 41, 0.7); /*#181A29; */
  --font-color-oposite: #E3E3E3;
  --font-color-light: #E3E3E3;
  --font-color-dark: #181A29;
  --button-bg-color:#FFFFFF;
  --primary-color: #4285f4;
  --success-color: #1FD286;
  --danger-color: #F12B43;
  --alert-color: #F99600;
  --primary-color-opacity: rgba(66, 133,	244, 0.2);
  --success-color-opacity: rgba(31, 210,	134, 0.2);
  --danger-color-opacity: rgba(241,	43,	67, 0.2);
  --alert-color-opacity: rgba(249,	150,	0, 0.2);
  --info-color-opacity: rgba(122,	169,	247, 0.2);
  --border-radius: 5px;
  --content-max-width:2000px;
  --font-size-small: 0.8rem;
  --font-size-medium: 0.9rem;
  --font-weight-normal: normal;
  --font-weight-bold: bold;
  --content-padding: 30px;
  --content-wrapper-inner-padding-top-bottom: 10px;
  --content-wrapper-inner-padding-left-right-mobile: 10px;
  --content-wrapper-inner-padding-left-right-desktop: 20px;
  --transition-duration: 0.5s;
  --top-menu-height: 50px;
  --side-menu-width: 250px;
  --side-menu-collapsed-width: 50px;
  --page-header-margin-bottom: 20px;
  --page-header-height:75px;
  --min-width-body:320px;
  --side-menu-li-padding-left-right:15px;
  --side-menu-li-padding-top-bottom:10px;
  --menu-icons-size-half-value:5px;
  --screen-height-no-menu-only: calc(100vh - var(--top-menu-height));
  --screen-height-no-menu-no-header: calc(100vh - var(--top-menu-height) - var(--page-header-margin-bottom) - var(--standard-margin) - calc(var(--content-wrapper-inner-padding-top-bottom) * 2) - (var(--content-padding) * 2));
  --big-margin:20px;
  --standard-margin:10px;
  --small-margin:5px;
  --big-padding:20px;
  --standard-padding:10px;
  --small-padding:5px;
}

html.light {
  --bg-color: #F5F6FA;
  --popup-background-transparent: rgba(245,246,250, 0.7);
  --popup-background-non-transparent: rgba(245,246,250);
  --section-color: #FFFFFF;
  --selection-color: rgba(24, 26, 41, 0.5); /*#181A29; */
  --hover-color: rgba(24, 26, 41, 0.1); /*#181A29; */
  --border-color: rgba(24, 26, 41, 0.2); /*#181A29; */
  --font-color: #181A29;
  --font-color-soft: rgba(24, 26, 41, 0.7); /*#181A29; */
  --font-color-oposite: #E3E3E3;
  --font-color-light: #E3E3E3;
  --font-color-dark: #181A29;
  --button-bg-color:#FFFFFF;
  --primary-color: #4285f4;
  --success-color: #1FD286;
  --danger-color: #F12B43;
  --alert-color: #F99600;
  --info-color: #7AA9F7;
  --primary-color-opacity: rgba(66, 133,	244, 0.2);
  --success-color-opacity: rgba(31, 210,	134, 0.2);
  --danger-color-opacity: rgba(241,	43,	67, 0.2);
  --alert-color-opacity: rgba(249,	150,	0, 0.2);
  --info-color-opacity: rgba(122,	169,	247, 0.2);
}

html.dark {
  --bg-color: #1E1E1E;
  --popup-background-transparent: rgba(30,30,30, 0.7);
  --popup-background-non-transparent: rgba(30,30,30);
  --section-color: #202124;
  --selection-color: rgba(227, 227, 227, 0.5); /*#E3E3E3  = */
  --hover-color: rgba(227, 227, 227, 0.1); /*#E3E3E3  = */
  --border-color: rgba(227, 227, 227, 0.2); /*#E3E3E3  = */
  --font-color: #E3E3E3;
  --font-color-soft: rgba(227, 227, 227, 0.7); /*#E3E3E3  = */
  --font-color-oposite: #181A29;
  --font-color-light: #E3E3E3;
  --font-color-dark: #181A29;
  --button-bg-color:#202124;
  --primary-color: #4285f4;
  --success-color: #1FD286;
  --danger-color: #F12B43;
  --alert-color: #F99600;
  --info-color: #7AA9F7;
  --primary-color-opacity: rgba(66, 133,	244, 0.2);
  --success-color-opacity: rgba(31, 210,	134, 0.2);
  --danger-color-opacity: rgba(241,	43,	67, 0.2);
  --alert-color-opacity: rgba(249,	150,	0, 0.2);
  --info-color-opacity: rgba(122,	169,	247, 0.2);
}

#screen-size {
  content: var(--text-content);
}

@media (min-width: 0px) {
  :root {
    --text-content:"xs" ;
  }
}
@media (min-width: 768px) {
  :root {
    --text-content:"sm"
    --content-wrapper-inner-padding:20px;
  }
}
@media (min-width: 992px) {
  :root {
    --text-content:"md" ;
  }
}
@media (min-width: 1200px) {
  :root {
    --text-content:"xl" ;
  }
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}

.height-fit {
  height: fit-content;
}

.height-10 {
  height: 10%;
}

.height-20 {
  height: 20%;
}

.height-30 {
  height: 30%;
}

.height-40 {
  height: 40%;
}

.height-49 {
  height: 49%;
}

.height-50 {
  height: 50%;
}

.height-60 {
  height: 60%;
}

.height-70 {
  height: 70%;
}

.height-80 {
  height: 80%;
}

.height-90 {
  height: 90%;
}

.height-100 {
  height: 100%;
}

.min-height-10 {
  min-height: 10%;
}

.min-height-20 {
  min-height: 20%;
}

.min-height-30 {
  min-height: 30%;
}

.min-height-40 {
  min-height: 40%;
}

.min-height-49 {
  min-height: 49%;
}

.min-height-50 {
  min-height: 50%;
}

.min-height-60 {
  min-height: 60%;
}

.min-height-70 {
  min-height: 70%;
}

.min-height-80 {
  min-height: 80%;
}

.min-height-90 {
  min-height: 90%;
}

.min-height-100 {
  min-height: 100%;
}

.min-height-200px {
  min-height: 200px;
}

.min-height-300px {
  min-height: 300px;
}

.min-height-500px {
  min-height: 500px;
}

.max-height-10 {
  max-height: 10%;
}

.max-height-20 {
  max-height: 20%;
}

.max-height-30 {
  max-height: 30%;
}

.max-height-40 {
  max-height: 40%;
}

.max-height-49 {
  max-height: 49%;
}

.max-height-50 {
  max-height: 50%;
}

.max-height-60 {
  max-height: 60%;
}

.max-height-70 {
  max-height: 70%;
}

.max-height-80 {
  max-height: 80%;
}

.max-height-90 {
  max-height: 90%;
}

.max-height-100 {
  max-height: 100%;
}

.max-height-500px {
  max-height: 500px;
}

.max-height-300px {
  max-height: 300px;
}

.width-max-content {
  width: max-content;
}

.custom-max-width-100percent-60px {
  max-width: calc(100% - 60px);
}

.width-10 {
  width: 10%;
}

.width-20 {
  width: 20%;
}

.width-25 {
  width: 25%;
}

.width-30 {
  width: 30%;
}

.width-33 {
  width: 33.333%;
}

.width-33-10px {
  width: calc(33.333% - var(--standard-padding));
}

.width-40 {
  width: 40%;
}

.width-49 {
  width: 49%;
}

.width-50 {
  width: 50%;
}

.width-60 {
  width: 60%;
}

.width-70 {
  width: 70%;
}

.width-80 {
  width: 80%;
}

.width-90 {
  width: 90%;
}

.width-100 {
  width: 100%;
}

.min-width-10 {
  min-width: 10%;
}

.min-width-20 {
  min-width: 20%;
}

.min-width-30 {
  min-width: 30%;
}

.min-width-40 {
  min-width: 40%;
}

.min-width-49 {
  min-width: 49%;
}

.min-width-50 {
  min-width: 50%;
}

.min-width-60 {
  min-width: 60%;
}

.min-width-70 {
  min-width: 70%;
}

.min-width-80 {
  min-width: 80%;
}

.min-width-90 {
  min-width: 90%;
}

.min-width-100 {
  min-width: 100%;
}

.min-width-100px {
  min-width: 100px;
}

.min-width-200px {
  min-width: 200px;
}

.min-width-300px {
  min-width: 300px;
}

.min-width-500px {
  min-width: 300px;
}

.max-width-10 {
  max-width: 10%;
}

.max-width-20 {
  max-width: 20%;
}

.max-width-30 {
  max-width: 30%;
}

.max-width-40 {
  max-width: 40%;
}

.max-width-49 {
  max-width: 49%;
}

.max-width-50 {
  max-width: 50%;
}

.max-width-60 {
  max-width: 60%;
}

.max-width-70 {
  max-width: 70%;
}

.max-width-80 {
  max-width: 80%;
}

.max-width-90 {
  max-width: 90%;
}

.max-width-100 {
  max-width: 100%;
}

.width-40px {
  width: 40px;
}

.width-60px {
  width: 60px;
}

.width-80px {
  width: 80px;
}

.width-100px {
  width: 100px;
}

.width-200px {
  width: 200px;
}

.width-300px {
  width: 300px;
}

.width-500px {
  width: 500px;
}

.min-width-40px {
  min-width: 40px;
}

.min-width-60px {
  min-width: 60px;
}

.min-width-80px {
  min-width: 80px;
}

.min-width-100px {
  min-width: 100px;
}

.min-width-200px {
  min-width: 200px;
}

.min-width-300px {
  min-width: 300px;
}

.min-width-500px {
  min-width: 500px;
}

.max-width-40px {
  max-width: 40px;
}

.max-width-60px {
  max-width: 60px;
}

.max-width-80px {
  max-width: 80px;
}

.max-width-100px {
  max-width: 100px;
}

.max-width-200px {
  max-width: 200px;
}

.max-width-300px {
  max-width: 300px;
}

.max-width-500px {
  max-width: 500px;
}

.m-auto {
  margin: auto;
}

.me-auto {
  margin-right: auto;
}

.ms-auto {
  margin-left: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.mt-auto {
  margin-top: auto;
}

.m-small {
  margin: var(--small-margin);
}

.m {
  margin: var(--standard-margin);
}

.m2 {
  margin: var(--big-margin);
}

.mt-small {
  margin-top: var(--small-margin);
}

.mt {
  margin-top: var(--standard-margin);
}

.mt2 {
  margin-top: calc(var(--standard-margin) * 2);
}

.me-small {
  margin-right: var(--small-margin);
}

.me {
  margin-right: var(--standard-margin);
}

.me2 {
  margin-right: calc(var(--standard-margin) * 2);
}

.mb-small {
  margin-bottom: var(--small-margin);
}

.mb {
  margin-bottom: var(--standard-margin);
}

.mb2 {
  margin-bottom: calc(var(--standard-margin) * 2);
}

.ms-small {
  margin-left: var(--small-margin);
}

.ms {
  margin-left: var(--standard-margin);
}

.ms2 {
  margin-left: calc(var(--standard-margin) * 2);
}

.p-small {
  padding: var(--small-padding);
}

.p {
  padding: var(--standard-padding);
}

.p2 {
  padding: var(--big-padding);
}

.pt {
  padding-top: var(--standard-padding);
}

.pt2 {
  padding-top: calc(var(--standard-padding) * 2);
}

.pe {
  padding-right: var(--standard-padding);
}

.pe2 {
  padding-right: calc(var(--standard-padding) * 2);
}

.pb-small {
  padding-bottom: var(--small-padding);
}

.pb {
  padding-bottom: var(--standard-padding);
}

.pb2 {
  padding-bottom: calc(var(--standard-padding) * 2);
}

.ps {
  padding-left: var(--standard-padding);
}

.ps2 {
  padding-left: calc(var(--standard-padding) * 2);
}

.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.me-0 {
  margin-right: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ms-0 {
  margin-left: 0;
}

.p-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

.pe-0 {
  padding-right: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.ps-0 {
  padding-left: 0;
}

.font-size-small {
  font-size: var(--font-size-small) !important;
}

.font-size-medium {
  font-size: var(--font-size-medium) !important;
}

.font-size-normal {
  font-size: 1rem !important;
}

.font-weight-normal {
  font-weight: var(--font-weight-normal);
}

.font-weight-bold {
  font-weight: var(--font-weight-bold);
}

.font-color-light {
  color: var(--font-color-light) !important;
}

.font-color-normal {
  color: var(--font-color) !important;
}

.font-color-soft {
  color: var(--font-color-soft) !important;
}

.font-color-primary {
  color: var(--primary-color) !important;
}

.font-color-success {
  color: var(--success-color) !important;
}

.font-color-danger {
  color: var(--danger-color) !important;
}

.font-color-alert {
  color: var(--alert-color) !important;
}

.font-color-info {
  color: var(--info-color) !important;
}

text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

text-align-left {
  text-align: left;
}

.border {
  border: 1px solid var(--border-color);
}

.border-dashed {
  border: 1px dotted var(--border-color);
  border-style: dashed;
}

.border-top {
  border-top: 1px solid var(--border-color);
}

.border-end {
  border-right: 1px solid var(--border-color);
}

.border-bottom {
  border-bottom: 1px solid var(--border-color);
}

.border-start {
  border-right: 1px solid var(--border-color);
}

.border-radius {
  border-radius: var(--border-radius);
}

.border-radius-circle {
  border-radius: 50%;
}

.border-color-primary {
  border-color: var(--primary-color) !important;
}

.border-color-success {
  border-color: var(--success-color) !important;
}

.border-color-danger {
  border-color: var(--danger-color) !important;
}

.border-color-section {
  border-color: var(--section-color) !important;
}

.border-color-bg {
  border-color: var(--bg-color) !important;
}

.border-left-cart {
  border-left: 3px solid var(--primary-color);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.absolute {
  position: absolute;
}

.sticky {
  position: sticky;
}

.top-0 {
  top: 0px;
}

.top-5 {
  top: 5px;
}

.top-minus-5 {
  top: -5px;
}

.top-10 {
  top: 10px;
}

.top-minus-10 {
  top: -10px;
}

.top-15 {
  top: 15px;
}

.top-minus-15 {
  top: -15px;
}

.top-20 {
  top: 20px;
}

.top-minus-20 {
  top: -20px;
}

.right-0 {
  right: 0px;
}

.right-5 {
  right: 5px;
}

.right-minus-5 {
  right: -5px;
}

.right-10 {
  right: 10px;
}

.right-minus-10 {
  right: -10px;
}

.right-minus-15 {
  right: -15px;
}

.right-20 {
  right: 20px;
}

.right-minus-20 {
  right: -20px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-5 {
  bottom: 5px;
}

.bottom-minus-5 {
  bottom: -5px;
}

.bottom-10 {
  bottom: 10px;
}

.bottom-minus-10 {
  bottom: -10px;
}

.bottom-15 {
  bottom: 15px;
}

.bottom-minus-15 {
  bottom: -15px;
}

.bottom-20 {
  bottom: 20px;
}

.bottom-minus-20 {
  bottom: -20px;
}

.left-0 {
  left: 0px;
}

.left-5 {
  left: 5px;
}

.left-minus-5 {
  left: -5px;
}

.left-10 {
  left: 10px;
}

.left-minus-10 {
  left: -10px;
}

.left-15 {
  left: 15px;
}

.left-minus-15 {
  left: -15px;
}

.left-20 {
  left: 20px;
}

.left-minus-20 {
  left: -20px;
}

.d-inline-flex {
  display: inline-flex;
}

.d-inline-block {
  display: inline-block;
}

.d-inline {
  display: inline;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}
.d-flex.wrap {
  flex-wrap: wrap;
}
.d-flex.no-wrap {
  flex-wrap: nowrap;
}
.d-flex.column {
  flex-direction: column;
}
.d-flex.row {
  flex-direction: row;
}
.d-flex.align-start {
  align-items: flex-start;
}
.d-flex.align-center {
  align-items: center;
}
.d-flex.align-end {
  align-items: flex-end;
}
.d-flex.justify-start {
  justify-content: flex-start;
}
.d-flex.justify-center {
  justify-content: center;
}
.d-flex.justify-end {
  justify-content: flex-end;
}
.d-flex.justify-between {
  justify-content: space-between;
}
.d-flex.justify-around {
  justify-content: space-around;
}
.d-flex.gap-10 {
  gap: 10px;
}

.d-none {
  display: none;
}

.bg-primary {
  background-color: var(--primary-color);
}

.bg-success {
  background-color: var(--success-color);
}

.bg-danger {
  background-color: var(--danger-color);
}

.bg-section {
  background-color: var(--section-color);
}

.bg-bg {
  background-color: var(--bg-color);
}

.bg-primary-opacity {
  background-color: var(--primary-color-opacity);
}

.bg-success-opacity {
  background-color: var(--success-color-opacity);
}

.bg-danger-opacity {
  background-color: var(--danger-color-opacity);
}

.bg-alert-opacity {
  background-color: var(--alert-color-opacity);
}

.bg-info-opacity {
  background-color: var(--info-color-opacity);
}

.image-10 {
  max-width: 10px;
  max-height: 10px;
}

.image-15 {
  max-width: 15px;
  max-height: 15px;
}

.image-20 {
  max-width: 20px;
  max-height: 20px;
}

.image-30 {
  max-width: 30px;
  max-height: 30px;
}

.image-40 {
  max-width: 40px;
  max-height: 40px;
}

.image-50 {
  max-width: 50px;
  max-height: 50px;
}

.image-60 {
  max-width: 60px;
  max-height: 60px;
}

.image-70 {
  max-width: 70px;
  max-height: 70px;
}

.image-80 {
  max-width: 80px;
  max-height: 80px;
}

.image-90 {
  max-width: 90px;
  max-height: 90px;
}

.image-100 {
  max-width: 100px;
  max-height: 100px;
}

.image-150 {
  max-width: 150px;
  max-height: 150px;
}

.image-200 {
  max-width: 200px;
  max-height: 200px;
}

.image-250 {
  max-width: 250px;
  max-height: 250px;
}

.image-300 {
  max-width: 300px;
  max-height: 300px;
}

.image-500 {
  max-width: 500px;
  max-height: 500px;
}

.image-750 {
  max-width: 750px;
  max-height: 750px;
}

.image-1000 {
  max-width: 1000px;
  max-height: 1000px;
}

.y-scroll {
  overflow-y: scroll;
}

.y-hidden {
  overflow-y: hidden;
}

.y-auto {
  overflow-y: auto;
}

.x-scroll {
  overflow-x: scroll;
}

.x-hidden {
  overflow-x: hidden;
}

.x-auto {
  overflow-x: auto;
}

.box-shadow {
  box-shadow: 1px 4px 8px 3px var(--bg-color);
}

.z1 {
  z-index: 1;
}

.border-box {
  box-sizing: border-box;
}

.disabled {
  color: var(--font-color-soft);
  background-color: var(--section-color);
}
.disabled:hover {
  color: var(--font-color-soft);
  background: var(--section-color);
  cursor: default;
}

.opacitiy0 {
  opacity: 0;
}

.three-dots {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cursor-pointer {
  cursor: pointer;
}

.fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ===== Custom Scrollbar ===== */
/* Main scrollbar container */
::-webkit-scrollbar {
  width: 14px; /* Width of the vertical scrollbar */
  height: 14px; /* Height of the horizontal scrollbar */
}

/* Scrollbar track (background behind the thumb) */
::-webkit-scrollbar-track {
  background-color: var(--section-color); /* Background color of the track */
}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background-color: var(--border-color); /* Default color */
  border-radius: 20px; /* Rounded corners */
  border: 2px solid transparent; /* Creates padding effect */
  background-clip: content-box; /* Prevents the border from affecting size */
}

/* Scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--selection-color); /* Changes color when hovered */
  opacity: 0.5; /* Adds a transparency effect */
  cursor: pointer; /* Shows pointer cursor */
}

/* ===== Scrollbar Buttons (Arrows) ===== */
/* General button styles */
::-webkit-scrollbar-button:single-button {
  display: block; /* Ensures buttons are visible */
  border-style: solid; /* Makes buttons appear as arrows */
  height: 8px; /* Adjusts the height of the buttons */
  width: 10px; /* Adjusts the width of the buttons */
}

/* === Vertical Scrollbar Buttons === */
/* Up button (▲) */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 6px 6px 6px; /* Creates a triangle pointing up */
  border-color: transparent transparent var(--border-color) transparent;
}

/* Up button on hover */
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent var(--selection-color) transparent;
  cursor: pointer;
}

/* Down button (▼) */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 6px 6px 0 6px; /* Creates a triangle pointing down */
  border-color: var(--border-color) transparent transparent transparent;
}

/* Down button on hover */
::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  border-color: var(--selection-color) transparent transparent transparent;
  cursor: pointer;
}

/* === Horizontal Scrollbar Buttons === */
/* Left button (◄) */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  border-width: 6px 6px 6px 0; /* Creates a triangle pointing left */
  border-color: transparent var(--border-color) transparent transparent;
}

/* Left button on hover */
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
  border-color: transparent var(--selection-color) transparent transparent;
  cursor: pointer;
}

/* Right button (►) */
::-webkit-scrollbar-button:single-button:horizontal:increment {
  border-width: 6px 0 6px 6px; /* Creates a triangle pointing right */
  border-color: transparent transparent transparent var(--border-color);
}

/* Right button on hover */
::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
  border-color: transparent transparent transparent var(--selection-color);
  cursor: pointer;
}

/*# sourceMappingURL=shared.css.map */