html{line-height: 1.15; -webkit-text-size-adjust: 100%;}

main{display: block;}
hr{box-sizing: content-box; height: 0; overflow: visible;}
pre{ font-family: monospace, monospace; font-size: 1em;}
a{background-color: transparent;}
a, a:link, a:visited, a:hover, a:focus, a:active{ text-decoration: none; color: var(--gray-dark);}
input:focus, button:focus, input:active, button:active{outline: none;}
abbr[title]{border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}
b, strong{font-weight: 600;}
code, kbd, samp{font-family: monospace, monospace; font-size: 1em;}
small{font-size: 80%;}
sub, sup{font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub{bottom: -0.25em;}
sup{top: -0.5em;}
img{border-style: none;}
button, input, optgroup, select, textarea{font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button, input{overflow: visible;}
button, select{text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button; appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring{outline: 1px dotted ButtonText;}
fieldset{padding: 0.35em 0.75em 0.625em;}
legend{box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
progress{vertical-align: baseline;}
textarea{overflow: auto;resize: vertical;}
[type="checkbox"], [type="radio"]{box-sizing: border-box; padding: 0;}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{height: auto;}
[type="search"] {-webkit-appearance: textfield; outline-offset: -2px;}
[type="search"]::-webkit-search-decoration{-webkit-appearance: none;}
::-webkit-file-upload-button{-webkit-appearance: button; font: inherit;}
details{display: block;}
summary{display: list-item;}
template{display: none;}
[hidden]{display: none;}
input[type="file"], input[type="button"], button, .btn{ cursor: pointer;}


/* Custom scrollbar */
::-webkit-scrollbar,
::scrollbar {width: 4px;}
::-webkit-scrollbar-track,
::scrollbar-track {-webkit-border-radius: 10px;border-radius: 10px;}
::-webkit-scrollbar-thumb{-webkit-border-radius: 10px;border-radius: 10px;background: rgba(0,0,0,0.1);}
::-webkit-scrollbar-thumb:hover{background: rgba(0,0,0,0.5);}
::-webkit-scrollbar-thumb:window-inactive {background: rgba(255,0,0,0.0);}
::-webkit-scrollbar:horizontal{ height: 4px}
::-webkit-scrollbar {width: 4px;}
::-moz-scrollbar-track {-moz-border-radius: 10px;border-radius: 10px;}
::-moz-scrollbar-thumb{-moz-border-radius: 10px;border-radius: 10px;background: rgba(0,0,0,0.1);}
::-moz-scrollbar-thumb:hover{background: rgba(0,0,0,0.5);}
::-moz-scrollbar-thumb:window-inactive {background: rgba(255,0,0,0.0);}
::-moz-scrollbar:horizontal{ height: 4px}
*{ scrollbar-width: thin;}
scrollbar {-moz-appearance: none !important;}
scrollbarbutton {-moz-appearance: none !important;}
thumb{-moz-appearance: none !important;}
scrollcorner {-moz-appearance: none !important;resize:both;}
scrollbar[orient="vertical"] {color:silver;}

::placeholder{ color: rgba(0,0,0,0.35) !important; font-size: 0.8rem; font-weight: 500;}

input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0; /* Removes leftover margin */
}


:root {
   /* Dynamic colors  
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;*/
 
  /* Dynamic colors  */
  --gray: 108, 117, 125;
  --gray-light: 200, 200, 200;
  --gray-dark: 52, 58, 64;
  --primary: 255, 94, 32 ;
  --secondary: 109, 118, 126;
  --success: 40, 167, 69;
  --info: 32, 159, 133;
  --warning: 255, 193, 7;
  --danger: 220, 53, 69;
  --light-green: 149, 184, 132 ;
  --dark-green: 37, 104, 90;
  --light: 237, 239, 235 ;
  --dark: 51, 51, 51;
  --body-bg: 237, 239, 235 ;
  

}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("../fonts/Inter.var.woff2") format("woff2");
}


body {
  margin: 0;
  font-family: 'Inter var';
  background-color: rgba(var(--body-bg), 0.5) !important;
  /* overflow-x: hidden; */
  line-height: 1.25 !important;
  font-weight: 400;
  text-rendering: auto;
  scrollbar-width: thin;
  font-size: 14px;
  color: #666;
}

@supports (font-variation-settings: normal){ html{font-family: 'Inter var', sans-serif;} }
select option{font-family: 'Inter var'!important;}
.table-responsive{scrollbar-width: thin;}


h1, h2, h3, h4, h5, h6{ font-weight: 600; color: var(--dark);}
h1 {font-size: 20px; margin: 0.67em 0;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 15px;}
h5 {font-size: 14px;}
h6 {font-size: 13px;}

.fw-100 {font-weight:100}
.fw-200 {font-weight:200}
.fw-300 {font-weight:300}
.fw-400 {font-weight:400}
.fw-500 {font-weight:500}
.fw-600 {font-weight:600}
.fw-700 {font-weight:700}
.fw-800 {font-weight:800}
.fw-900 {font-weight:900}
.fw-normal {font-weight:normal}

.r-1{ border-radius: 0.125rem}
.r-2{ border-radius: 0.25rem}
.r-3{ border-radius: 0.5rem}
.r-4{ border-radius: 0.75rem}
.r-5{ border-radius: 0.875rem}
.r-6{ border-radius: 1rem}
.r-100{ border-radius: 100%}
.r-0{ border-radius: 0}
.r-tl-0{ border-top-left-radius: 0}
.r-tr-0{ border-top-right-radius: 0}
.r-bl-0{ border-bottom-left-radius: 0}
.r-br-0{ border-bottom-right-radius: 0}
.r-yl-0{ border-bottom-left-radius: 0;border-top-left-radius: 0}
.r-yr-0{ border-bottom-right-radius: 0;border-top-right-radius: 0}
.r-xt-0{ border-top-left-radius: 0;border-top-right-radius: 0}
.r-xb-0{ border-bottom-left-radius: 0;border-bottom-right-radius: 0}

.text-gray{ color: rgba(var(--gray),0.5);}
.text-gray-dark{ color: var(--gray-dark);}
.text-lgreen{color: var(--light-green);}
.text-info{color: rgba(var(--info),1) !important;}


/* Empty - No data available */
.if-empty:empty{}
.if-empty:empty:after{content: "No Data Available"; color: #ccc; width: 100%; text-align: center; display: flex; justify-content: center; align-items: center;}
.if-empty-image:empty{height: 100%;}
.if-empty-image:empty:after{content: "\f03e"; color: #ccc; width: 100%; text-align: center; display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; background: #eee; height: 100%; min-height: inherit; font-family: fontawesome; font-size: 2rem;}


/* Tooltip */
[tool-tip], [tool-tip]::after, [tool-tip]::before{ transition: all 0.1s linear;}
[tool-tip]{position: relative;}
[tool-tip]::after{visibility: hidden; opacity: 0; content: attr(tool-tip); position: absolute; border-radius: 0.25rem; z-index: 2; width: max-content; max-width: 240px; 
padding:0.5rem 0.75rem; background: #333; color: #fff;font-size: 0.75rem;white-space: normal;text-align: left;}
[tool-tip][fluid]::after{width: calc(100vw /5);max-width: unset;}
[tool-tip]::before{content:""; width: 10px; height: 10px; background: #333; transform: rotate(45deg); position: absolute;visibility: hidden; opacity: 0; transition-delay: 0s;}
[tool-tip][tip-pos]:hover::after, [tool-tip]:hover::after {visibility: visible; opacity: 1;}
[tool-tip][tip-pos]:hover::before, [tool-tip]:hover::before  {visibility: visible; opacity: 1;}

[tool-tip][tip-pos="top"]::after, [tool-tip]::after {bottom: calc(100% + 40px); top:auto; left: 50%; transform: translateX(-50%);}
[tool-tip][tip-pos="top"]:hover::after, [tool-tip]:hover::after {bottom: calc(100% + 10px); top:auto;}
[tool-tip][tip-pos="top"]::before, [tool-tip]::before {left: 50%; bottom: calc(100% + 37px); top:auto; margin-left: -5px;}
[tool-tip][tip-pos="top"]:hover::before, [tool-tip]:hover::before {bottom: calc(100% + 7px); top:auto;}

[tool-tip][tip-pos="bottom"]::after {top: calc(100% + 40px); bottom:auto; left: 50%; transform: translateX(-50%);}
[tool-tip][tip-pos="bottom"]:hover::after {top: calc(100% + 10px); bottom:auto;}
[tool-tip][tip-pos="bottom"]::before {left: 50%;transform: rotate(45deg) translateX(-50%); top:calc(100% + 40px); bottom:auto;margin-left: -2px;}
[tool-tip][tip-pos="bottom"]:hover::before{top: calc(100% + 10px); bottom:auto;}

[tool-tip][tip-pos="left"]::after {top: -5px; right:100%; left: auto; transform: translateX(-120px); bottom:auto}
[tool-tip][tip-pos="left"]:hover::after {transform: translateX(-10px);}
[tool-tip][tip-pos="left"]::before {left: auto; top: calc(50% - 5px); margin-left: -5px; right:calc(100% - 4px); transform: translateX(-120px) rotate(45deg);}
[tool-tip][tip-pos="left"]:hover::before {right: calc(100% + 4px); left: auto;transform: translateX(-2px) rotate(45deg);}

[tool-tip][tip-pos="right"]::after {top: -5px; left: 100%; right: auto; transform: translateX(120px); bottom:auto}
[tool-tip][tip-pos="right"]:hover::after {transform: translateX(10px);}
[tool-tip][tip-pos="right"]::before {left:calc(100% + 36px); right: auto;top: calc(50% - 5px);margin-left: -5px;transform: translateX(120px) rotate(45deg)}
[tool-tip][tip-pos="right"]:hover::before{left:calc(100% + 4px); right: auto;transform: translateX(7px) rotate(45deg);}

.scroll-x { overflow: hidden; overflow-x: auto;}
.scroll-y{ overflow: hidden; overflow-y: auto;}


/* MODAL AS LEFT/RIGHT SIDEBAR */
.modal.modal-left .modal-dialog,
.modal.modal-right .modal-dialog { position: fixed; margin: auto; width: 50vw; height: 100%; -webkit-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}
.modal.modal-left .modal-content,
.modal.modal-right .modal-content { height: 100%; overflow-y: auto; border-radius:0 !important}
.modal.modal-left .modal-body,
.modal.modal-right .modal-body { padding: 15px 15px 80px; }
/*Left*/
.modal.modal-left.fade .modal-dialog { left: -50vw; -webkit-transition: opacity 0.3s linear, left 0.3s ease-out; -moz-transition: opacity 0.3s linear, left 0.3s ease-out; -o-transition: opacity 0.3s linear, left 0.3s ease-out; transition: opacity 0.3s linear, left 0.3s ease-out; }
.modal.modal-left.fade.d-block .modal-dialog { left: 0; }
/*Right*/
.modal.modal-right.fade .modal-dialog { right: -50vw; -webkit-transition: opacity 0.3s linear, right 0.3s ease-out; -moz-transition: opacity 0.3s linear, right 0.3s ease-out; -o-transition: opacity 0.3s linear, right 0.3s ease-out; transition: opacity 0.3s linear, right 0.3s ease-out; }
.modal.modal-right.fade.d-block .modal-dialog { right: 0;}


