:root {
  --color-primary: 255 255 255;
  --color-secondary: 226 232 240;
  --color-success: 13 148 136;
  --color-info: 6 182 212;
  --color-warning: 245 158 11;
  --color-pending: 217 119 6;
  --color-danger: 185 28 28;
  --color-light: 241 245 249;
  --color-dark: 0 0 0;
  --color-slate-50: 248 250 252;
  --color-slate-100: 241 245 249;
  --color-slate-200: 226 232 240;
  --color-slate-300: 203 213 225;
  --color-slate-400: 148 163 184;
  --color-slate-500: 100 116 139;
  --color-slate-600: 71 85 105;
  --color-slate-700: 51 65 85;
  --color-slate-800: 30 41 59;
  --color-slate-900: 15 23 42;

  --primary: hsl(0, 0%, 100%);
  --dark: #00B743;
  --dark-800: #00C248;
  --black: #171717;
  --black-800: #282828;

  /* --primary: #CCF400;
  --dark: #000000;
  --dark-800: #1e1e1e; */

  /* --primary: #BF1E2E;
  --dark: #191A1F;
  --dark-800: #232429; */
}
html body{
    color: var(--color-dark);
}
.justify-around{
    justify-content: space-around;
}
.justify-between{
    justify-content: space-between;
}
.flex-column{
  flex-direction: column;
}
.flex-column-reverse{
  flex-direction: column-reverse;
}
.col-span-8 {
  grid-column: span 8 / span 8;
}
.top-bar-boxed:before{
    background-color: #F5F5F5;
}
.top-bar-boxed:after, .login:after{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/raniecloud-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon,
.side-nav > ul > li > .side-menu.side-menu--active .side-menu__title{
    color: var(--color-dark);
}
.notification.notification--bullet:before{
    background-color: var(--primary);
}
.icon{
    color: #F5F5F5;
}
#icon-view{
    margin-left: 25px;
}
#shadow-banner{
    background: linear-gradient(180deg, var(--primary) 0%, rgba(217, 217, 217, 0) 100%);
}
#save-banner{
    margin-top: 40px;
    /* margin-right: 30px; */
}
/* Modal css */
#myModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* display: none; */
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
  }
.modal__content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    /* border-radius: 2px; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
/* Checkbox colors */
[type='checkbox']:checked {
    background-color: #2563eb;
}
.form-check-input[type="checkbox"]:checked{
  background-color: var(--dark);
  border-color: var(--dark);
}
/* Options Role Buttons */
#optionsrolefull{
    background-color: var(--primary);
  }
#optionsrolenone{
    background-color: #CECFD1;
  }
#optionsrolecustom{
    background-color: var(--primary);
  }
/* Full Access text color */
#fullAccess{
    color: #7D7D7D !important;
  }
[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
    border-color: var(--black-800);
    box-shadow: none;
  }
.z-\[1065\]{
    z-index: 10065;
  }
.timepicker div.group div.border{
    border: none;
  }
.bg-\[\#3b71ca\]{
    background-color: var(--primary);
  }
.hover\:text-\[\#3b71ca\]:hover{
    color: var(--primary);
  }
.form-control[readonly], select.form-control{
    cursor: pointer;
    background-color: #ffffff;
  }
.max-w-md{
    max-width: 28rem; /* 448px */
  }
.max-w-3xl{
    max-width: 48rem; /* 768px */
  }
.btn-primary{
    color: var(--dark);
  }
.btn-primary.alt{
    background-color: var(--dark);
    color: var(--primary);
    border: none;
  }
.mobile-menu .menu{
    color: #ffffff;
  }
.bg-black{
    background-color: var(--dark) !important;
  }
.bg-black-800{
    background-color: var(--dark-800);
  }
.bg-dark{
    background-color: var(--black) !important;
  }
.bg-dark-800{
    background-color: var(--black-800);
  }
.w-28{
    width: 7rem; /* 112px */
  }
.text-slate-300{
    color: #869099;
  }
.border-slate-300{
    border-color: #869099;
  }
.shrink-0{
    flex-shrink: 0;
  }
.opacity-50{
    opacity: 0.5;
  }
/* .shadow-lg-primary{
    box-shadow: -3px 10px 40px 4px rgb(191 30 46 / 0.2), 0 4px 6px -4px rgb(191 30 46 / 0.2);
  } */
.shadow-lg-primary{
    box-shadow: -3px 10px 40px 4px rgba(0 194 72 / 0.2), 0 4px 6px -4px rgb(0 194 72 / 0.2);
  }
input.placeholder\:text-white::-moz-placeholder {
  color: #ffffff;
  opacity: .5;
}
input.placeholder\:text-white::placeholder {
  color: #ffffff;
  opacity: .5;
}
.text-white\/50{
  color: rgba(255, 255, 255, 0.5);
}
.accordion .accordion-item .accordion-header .accordion-button:not(.collapsed){
  color: #00B743;
}