:root {
    --darkGray: #212121;
    --semiGray: #2f2f2f;    
    --midGray: #4d4d4d;
    --lightGray: #777b84;
    --barColor: #292C35;
    --topContent: #30343F;
    --member: #f8c171;
    --workflow: #87d5c8;
    --finance: #dada5e;
    --payroll: #79a10a;
    --box: #f98357;
    --crm: #0189bb; 
    --orange: #fe6f1d;
    --black: #0b0b0b;
    --white: #DBDFE9;
    --darkBlue: #333f5f;
    --blackBlue: #252F4A;
}
body {
    width: 98%;
    margin: 0 auto;
}
a {
    color: unset;
    text-decoration: none;
}
img {
    width: 100% !important;
}
.fullscreen {
    display: contents !important;
}
.btn-light-gray {
    background: var(--lightGray) !important;
    color: var(--white) !important;
    text-transform: uppercase;
}
.btn-mid-gray {
    background: var(--midGray) !important;
    color: var(--white) !important;
    text-transform: uppercase;
}
.btn-dark-gray {
    background: var(--darkGray) !important;
    color: var(--white) !important;
    text-transform: uppercase;
}
.btn-dark-blue {
    background: var(--darkBlue) !important;
    color: var(--white) !important;
    text-transform: uppercase;
}
.btn-dark-blue:hover {
    background: var(--blackBlue) !important;
}
.btn-dark-blue.active {
    background: var(--midGray) !important;
}
.title-font {
    font-family: "Titillium Web", serif;
    /* letter-spacing: 0.2rem; */
}
.fira-code {
  font-family: "Fira Code", monospace;
  font-optical-sizing: auto;  
}
.bg-body {
    background: var(--lightGray) !important;
}
.bg-container {
    background: var(--darkGray) !important;
    border-radius: 10px;
}
.bg-orange {
    background: var(--orange) !important;
    color: #FFFFFF;
}
.bg-dark-gray {
    background: var(--darkGray) !important;
}
.bg-semi-gray {
    background: var(--semiGray) !important;
}
.bg-black {
    background: var(--black) !important;
}
.border-gray {
    border: 1px solid var(--midGray);
    border-radius: 10px;
    cursor: pointer;
}
.shadow-gray {
    -webkit-box-shadow: 0px 4px 17px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 17px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 17px 0px rgba(0,0,0,0.75);
}
/* start: width */
.w-10 {
    width: 10% !important;
}
.w-15 {
    width: 15% !important;
}
.w-20 {
    width: 20% !important;
}
.w-30 {
    width: 30% !important;
}
.w-35 {
    width: 35% !important;
}
.w-40 {
    width: 40% !important;
}
.w-55 {
    width: 55% !important;
}
.w-60 {
    width: 60% !important;
}
.w-65 {
    width: 65% !important;
}
.w-70 {
    width: 70% !important;
}
.w-80 {
    width: 80% !important;
}
.w-90 {
    width: 90% !important;
}
.w-95 {
    width: 95% !important;
}
.w-165px {
    width: 165px !important;
}
.w-175px {
    width: 175px !important;
}
/* end: width */
/* start: height */
.h-90 {
    height: 90% !important;
}
.h-18px {
    height: 18px !important;
}
.h-260px {
    height: 260px !important;
}
.h-265px {
    height: 265px !important;
}
.h-270px {
    height: 270px !important;
}
.h-275px {
    height: 275px !important;
}
.h-285px {
    height: 285px !important;
}
.h-325px {
    height: 325px !important;
}
.h-350px {
    height: 350px !important;
}
/* end: height */
.text-white {
    color: var(--white) !important;
}
.text-orange, .text-color-orange {
    color: var(--orange) !important;
}
.text-color-member{
    color: var(--member) !important;
}
.text-color-workflow{
    color: var(--workflow) !important;
}
.text-color-finance{
    color: var(--finance) !important;
}
.text-color-payroll{
    color: var(--payroll) !important;
}
.text-color-box{
    color: var(--box) !important;
}
.text-color-crm{
    color: var(--crm) !important;
}
.bg-member {
    background: var(--member) !important;
}
.bg-workflow {
    background: var(--workflow) !important;
}
.bg-finance {
    background: var(--finance) !important;
}
.bg-payroll {
    background: var(--payroll) !important;
}
.bg-box {
    background: var(--box) !important;
}
.bg-crm {
    background: var(--crm) !important;
}
.bg-unauth {
    background: #000000;
    width: 1005%;
    height: 100%;
    position: fixed;
    z-index: 999999;
    opacity: 0.75;
    margin-left: -5%;
}
.unauth {
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -150px;
    width: 300px;
    height: 100px;
    z-index: 999999;
}
/* swall */
.swal2-container.swal2-center>.swal2-popup {
    background: var(--midGray);
}
.swal2-popup .swal2-title, .swal2-container .swal2-html-container {
    color: var(--white);
}
.ngx-spinner-overlay > div {
    top:50% !important;
}
.ngx-spinner-overlay .loading-text {
    top : 55% !important;
}

/* Select2 */
.form-select2 .select2-selection {
    border: none !important;
}
.form-select2 .select2-results__option {
    padding: .775rem 1rem !important;
}
.form-select2 .select2-selection__choice__remove {
    display: none !important;
}

/* BG GRAY */
.bg-gray-100 {
    --bs-bg-rgb-color: var(--bs-gray-100-rgb) !important;
    background-color: var(--bs-gray-100) !important;
}
.bg-gray-200 {
    --bs-bg-rgb-color: var(--bs-gray-200-rgb) !important;
    background-color: var(--bs-gray-200) !important;
}
.bg-gray-300 {
    --bs-bg-rgb-color: var(--bs-gray-300-rgb) !important;
    background-color: var(--bs-gray-300) !important;
}
.bg-gray-400 {
    --bs-bg-rgb-color: var(--bs-gray-400-rgb) !important;
    background-color: var(--bs-gray-400) !important;
}
.bg-gray-500 {
    --bs-bg-rgb-color: var(--bs-gray-500-rgb) !important;
    background-color: var(--bs-gray-500) !important;
}
.bg-gray-600 {
    --bs-bg-rgb-color: var(--bs-gray-600-rgb) !important;
    background-color: var(--bs-gray-600) !important;
}
.bg-gray-700 {
    --bs-bg-rgb-color: var(--bs-gray-700-rgb) !important;
    background-color: var(--bs-gray-700) !important;
}
.bg-gray-800 {
    --bs-bg-rgb-color: var(--bs-gray-800-rgb) !important;
    background-color: var(--bs-gray-800) !important;
}
.bg-gray-900 {
    --bs-bg-rgb-color: var(--bs-gray-900-rgb) !important;
    background-color: var(--bs-gray-900) !important;
}
.text-right {
    text-align: right !important;
}
.modal-xxl {
    --bs-modal-width: 95%;
}
/* scrollbar */
.scroll{
    /* overflow:scroll; */
    overflow:auto;
}
.scroll::-webkit-scrollbar,
::-webkit-scrollbar {
    /* width */
    width: 6px;
    height: 6px;
}
.scroll::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    /* Track */
    background: var(--darkGray);
}
.scroll::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    /* Handle */
    background: var(--midGray);
}
.scroll::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
    /* Handle on hover */
    background: var(--lightGray);
}