:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray-light: #dadada;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #6485c3;
  --background: #f0f3f9;
  --secondary: #b72718;
  --success: #27b6af;
  --info: #1f7bb6;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: 'Poppins', sans-serif !important;
  --font-family-monospace: 'Poppins', sans-serif !important;
}

/* ------------------------------ Font ------------------------------  */

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Poppins/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Poppins/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Poppins/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------ Generic ------------------------------ */

#error-body {
  height: 100vh;
}


.btn{
  border-radius: 0.5rem;
}

.h1, .h2, h1, h2 {
  font-weight: 400;
}

@media (min-width: 1200px){
  .h1, h1{
      font-size: 3rem;
  }

  .h2, h2 {
      font-size: 2.25rem;
  }
}

body {
  font-family: 'Poppins', sans-serif !important;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
}

.text-muted {
  color: rgb(111,113,115);
}

.input-group-text{
  background-color: var(--background);
}

.card-button {
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 2.8em;
  border: 2px solid #1F2329;
  border-radius: 50px;
  width: 80%;
}  

/* ------------------------------ Background components ------------------------------ */
.spacer {
  height: 2px;
  width: 40px;
  margin: 20px auto;
  background: #b72718;
}

.rot-background {
  background-image: linear-gradient(#2c3e5057  0,#2c3e508f 150%), url('../img/background-img.webp')!important;
  background-repeat: no-repeat;
  background-size: cover;
}

.rot-bg-lines-left-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 2px solid #dadada7c;
  border-right: 2px solid #dadada7c;
  border-radius: 0 0  20px 0;
  height: calc(100% - 8rem);
  width: 7rem;
  z-index: -10;
}

.rot-bg-lines-left-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-top: 2px solid #dadada7c;
  border-left: 2px solid #dadada7c;
  border-radius: 20px 0 0 0;
  width: calc(100% - 66px);
  height: 12rem;
  z-index: -10;
}

.rot-bg-lines-right-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-bottom: 2px solid #dadada7c;
  border-left: 2px solid #dadada7c;
  border-radius: 0 0 0 20px;
  height: calc(100% - 6rem);
  width: 7rem;
  z-index: -10;
}

.rot-bg-lines-right-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid #dadada7c;
  border-right: 2px solid #dadada7c;
  border-radius: 0 20px 0 0;
  width: calc(100% - 66px);
  height: 10rem;
  z-index: -10;
}

.social{
  height: 2rem;
}


.brand {
  position: relative;
  float: center;
  width: 17rem;
  padding-left: 2rem;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center!important;
}

/* ------------------------------ DaterangePicker ------------------------------ */

.daterangepicker .ranges li.active {
  background-color: var(--primary) !important;
  color: #fff;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: var(--primary) !important;
  border-color: transparent;
  color: #fff;
}

/* ------------------------------ Card ------------------------------ */

.card-header {
  background-color: var(--background);
}

.card-footer{
  background-color: var(--background);
}

.card.border {
  border: 0px !important;
  border-radius: .5rem;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.card.border .card-header:first-child {
    border-top-left-radius: calc(0.75rem - 1px);
    border-top-right-radius: calc(0.75rem - 1px);
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.card.border .card-header {
  border-left: 2px solid #dadada !important;
  border-top: 2px  solid #dadada !important;
  border-right: 2px  solid #dadada !important;
  border-bottom: 0 !important;
}

.card.border .card-body {
  border: 2px solid #dadada !important;
}

.card.border .card-body:last-child {
  border-radius: 0 0 calc(.75rem - 1px) calc(.75rem - 1px);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: calc(0.75rem - 1px);
  border-bottom-left-radius: calc(0.75rem - 1px);
}

.card.border .card-footer {
  border-left: 2px  solid #dadada !important;
  border-bottom: 2px  solid #dadada !important;
  border-right: 2px  solid #dadada !important;
  border-top: 0 !important;
}

.card.border .card-footer:last-child {
  border-radius: 0 0 calc(.75rem - 1px) calc(.75rem - 1px);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: calc(0.75rem - 1px);
  border-bottom-left-radius: calc(0.75rem - 1px);
}

/* ------------------------------ Toggle button ------------------------------ */

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: var(--success);
  border-top-color: var(--success);
  border-right-color: var(--success);
  border-bottom-color: var(--success);
  border-left-color: var(--success);
  background-color: var(--success);
}

/* Datatable */
.page-item.active .page-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
  background-color: var(--primary) !important;
}

.dataTable td{
  padding: 0.2rem;
}

/* ------------------------------ Slider button ------------------------------ */

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

.toggle-handle {
  background-color: #fff;
}

/* ------------------------------ Wizard ------------------------------ */
.sw-theme-arrows > ul.step-anchor > li.active > a {
  border-color: var(--primary) !important;
  border: 0;
  color: #fff !important;
  background: var(--primary)!important;
}

.sw-theme-arrows > ul.step-anchor > li.active > a:after {
  border-left: 30px solid var(--primary) !important;
}

.sw-theme-arrows > ul.step-anchor {
  background: whitesmoke !important;
}

.sw-theme-arrows > ul.step-anchor > li.done > a {
  color: rgb(54, 54, 54) !important;
  background: whitesmoke !important;
}

.sw-theme-arrows > ul.step-anchor > li.done > a:after {
  border-left: 30px solid whitesmoke!important;
}

.sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover {
  color: rgb(54, 54, 54) !important;
  background: whitesmoke !important;
}

.sw-theme-arrows > ul.step-anchor > li > a:after {
  border-left: 30px solid whitesmoke !important;
}

/* ------------------------------ Button configuration ------------------------------ */
/* Primary */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  filter: brightness(85%);
}

.btn-primary.disabled:hover{
  background-color: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
}

/* Secondary */

.btn-secondary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}

.btn-secondary:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  filter: brightness(85%);
}

.btn-secondary.disabled:hover{
  background-color: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
}

/* Success */

.btn-success {
  background-color: var(--success);
  border-color: var(--success);
  color:#ffffff;
}

.btn-success:hover {
  background-color: var(--success);
  border-color: var(--success);
  filter: brightness(85%);
}

.btn-success.disabled:hover{
  background-color: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
}

/* Gray */

.btn-gray {
  background-color: var(--gray);
  border-color: var(--gray);
  color:#ffffff;
}

.btn-gray:hover {
  background-color: var(--gray);
  border-color: var(--gray);
  filter: brightness(85%);
}

.btn-gray.disabled:hover{
  background-color: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
}

/* info */

.btn-info {
  background-color: var(--info);
  border-color: var(--info);
  color:#ffffff;
}

.btn-info:hover {
  background-color: var(--info);
  border-color: var(--info);
  filter: brightness(85%);
}

.btn-info.disabled:hover{
  background-color: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
}

/* ------------------------------ Button configuration ------------------------------ */
/* Primary */
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: var(--primary);
  background-color: transparent;
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Secondary */
.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
  color: var(--secondary);
  background-color: transparent;
}

.btn-outline-secondary {
  color: var(--secondary);
  border-color: var(--secondary);
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: var(--secondary);
  border-color: var(--secondary);
}

/* Success */
.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show>.btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: var(--success);
  border-color: var(--success);
}

.btn-outline-success.disabled, .btn-outline-success:disabled {
  color: var(--success);
  background-color: transparent;
}

.btn-outline-success {
  color: var(--success);
  border-color: var(--success);
}

.btn-outline-success:hover {
  color: #fff;
  background-color: var(--success);
  border-color: var(--success);
}

/* Success */
.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show>.btn-outline-info.dropdown-toggle {
  color: #fff;
  background-color: var(--info);
  border-color: var(--info);
}

.btn-outline-info.disabled, .btn-outline-info:disabled {
  color: var(--info);
  background-color: transparent;
}

.btn-outline-info {
  color: var(--info);
  border-color: var(--info);
}

.btn-outline-info:hover {
  color: #fff;
  background-color: var(--info);
  border-color: var(--info);
}

/* ------------------------------ Background configuration ------------------------------ */
.bg-primary {
  background-color: var(--primary)!important;
  color:#fff;
}

.bg-secondary {
  background-color: var(--secondary) !important;
  color:#fff;
}

.bg-success {
  background-color: var(--success)!important;
  color:#000;
}

.bg-info {
  background-color: var(--info)!important;
  color:#fff;
}

.bg-warning {
  background-color: var(--warning)!important;
  color:#000;
}

.bg-danger {
  background-color: var(--danger)!important;
  color:#fff;
}


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

/* list-item */
.list-group-item.active {
  color: #fff !important;
  background-color: var(--primary);
  border-color: var(--primary);
}

/* ------------------------------ Badge configuration ------------------------------ */
.badge-primary {
  background-color: var(--primary)!important;
  color:#fff;
}

.badge-secondary {
  background-color: var(--secondary) !important;
  color:#fff;
}

.badge-success {
  background-color: var(--success)!important;
  color:#000;
}

.badge-info {
  background-color: var(--info)!important;
  color:#fff;
}

.badge-warning {
  background-color: var(--warning)!important;
  color:#000;
}

.badge-danger {
  background-color: var(--danger)!important;
  color:#000;
}

/* ------------------------------ Slider configuration ------------------------------ */
.slider-handle {
  background-color: var(--primary) !important;
}