.btn {
  display: inline-flex;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 12px;
  font-family: "Rethink Sans" !important;
}

.btn-square{
display: flex;
height: 32px;
padding: 6px 8px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 6px !important;
border: 1px solid  #E4EAF1;
background:  #FFF;
}

.btn-square-2{
display: flex;
height: 48px;
padding: 12px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 6px !important;
border: 1px solid  #E4EAF1;
background:  #FFF;
}


.btn-xl {
  padding: 7px 40px !important;
  gap: 8px !important;
  font-size: var(--h4-font-size) !important;
  line-height: var(--t1-line-height) !important;
}

.btn-lg {
  padding: 7px 32px !important;
  gap: 8px !important;
  font-size: var(--b1-font-size) !important;
  line-height: var(--b1-line-height) !important;
}

.btn-md {
  padding: 7px 16px !important;
  font-size: var(--b3-font-size) !important;
  line-height: var(--b3-line-height) !important;
  border-radius: 8px !important;
}

.btn-sm {
  padding: 3px 12px !important;
  gap: 8px !important;
  font-size: var(--b3-font-size) !important;
  line-height: var(--b3-line-height) !important;
  border-radius: 8px !important;
}

.btn-xs {
  padding: 0px 4px !important;
  gap: 4px !important;
  font-size: var(--t4-font-size) !important;
  line-height: var(--t4-line-height) !important;
  border-radius: 4px !important;
}

.btn-icon {
  display: flex !important;
  width: 32px !important;
  height: 32px !important;
  padding: 8px !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 8px !important;
}

.btn-lime-green-gradient {
  background: var(--gradient-2) !important;
  color: var(--bg-light) !important;
}

.btn-white-gradient {
  background: var(--bg-flash-white) !important;
  color: var(--neutral-cadet-gray) !important;
}
.btn-blue-gradient {
  background: var(--gradient-1) !important;
  color: var(--bg-light) !important;
}

.btn-accent-vermilion {
  background: var(--accent-vermilion) !important;
  color: #fff !important;
}


.btn-outline {
  border-color: var(--bg-flash-white) !important;
  color: var(--neutral-charcoal) !important;
}
.btn-neutral-cadet-gray {
  background: var(--neutral-cadet-gray);
  color: var(--bg-light) !important;
}

.btn-neutral-cadet-gray:hover {
  background: var(--neutral-cadet-gray);
  color: var(--bg-light) !important;
}

.btn-brand-space-cadet-50 {
  background-color: rgba(24, 39, 73, 0.5);
  color: var(--bg-light);
  backdrop-filter: blur(4px) !important;
  border: 1px solid rgb(255, 255, 255) !important;
}

.btn-brand-space-cadet-50:hover {
  background-color: rgba(24, 39, 73, 0.5);
  color: var(--bg-light);
  backdrop-filter: blur(4px) !important;
}

.btn-refresh{
padding: 8px;
border-radius: 8px !important;
border: 1px solid rgba(255, 255, 255, 0.50);
background: rgba(24, 39, 73, 0.50);
backdrop-filter: blur(4px);
color:#475067 ;
}


.tag-before{
display: flex;
padding: 0px 4px;
align-items: center;
gap: 4px;
border-radius: 6px;
border: 1px solid var(--neutral-charcoal);
background: var(--bg-light);
backdrop-filter: blur(4px);
width: fit-content;
color:#475067 ;
}

/* Buttons Media */
@media (max-width: 768px) {
.btn-xl {
  font-size: var(--b1-font-size) !important;
  line-height: var(--b1-line-height) !important;
}

/* .btn-lg {
  padding: 7px 32px !important;
  gap: 8px !important;
  font-size: var(--b1-font-size) !important;
  line-height: var(--b1-line-height) !important;
} */

/* .btn-md {
  padding: 7px 16px !important;
  font-size: var(--b3-font-size) !important;
  line-height: var(--b3-line-height) !important;
  border-radius: 8px !important;
} */

/* .btn-sm {
  padding: 3px 12px !important;
  gap: 8px !important;
  font-size: var(--b3-font-size) !important;
  line-height: var(--b3-line-height) !important;
  border-radius: 8px !important;
} */


}


/* date picker */

    .datepicker {
      width: fit-content;
      padding: 24px !important;
      border-radius: 16px;
      margin-top: 12px;
    }

    .datepicker-dropdown.datepicker-orient-bottom:before {
      display: none !important;
    }

    .datepicker-dropdown.datepicker-orient-bottom:after {
      display: none !important;
    }

    .datepicker .datepicker-switch {
      color: #475067;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.56px;
      padding-bottom: 12px;
      border-bottom: 1px solid #E4EAF1;
      text-align: center;
      cursor: pointer;
    }

    .datepicker .next {
      color: #475067;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.56px;
      padding-bottom: 12px;
      border-bottom: 1px solid #E4EAF1;
      text-align: right;
      cursor: pointer;
    }

    .datepicker .prev {
      color: #475067;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.56px;
      padding-bottom: 12px;
      border-bottom: 1px solid #E4EAF1;
      text-align: left;
      cursor: pointer;
    }

    .datepicker .dow {
      padding-top: 24px;
      color: #A2A8B9;
      text-align: center;
      font-size: 10px;
      font-weight: 400;
      letter-spacing: -0.4px;
      text-transform: uppercase;
      padding-bottom: 12px;
    }


    .datepicker .day {
      padding: 4px 6px;
      width: 24px;
      height: 24px;
      color: #475067;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.56px;
    }


    .datepicker .old {
      color: #475067;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.56px;
    }

    .datepicker .new {
      color: #475067;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.56px;
    }


    .datepicker table tr td.today {
      background-color: grey;
      background-image: none !important;
      color: white;
      border-radius: 100%;
    }

    .datepicker table tr td.active.active {
      background-color: #475067;
      background-image: none !important;
      color: white;
      border-radius: 100%;
    }

    .datepicker table tr td span {
      border-radius: 100%;
      height: fit-content;
      line-height: 44px !important;
      color: #475067;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: -0.56px;
    }

    .datepicker table tr td span.focused {
      background-color: #475067;
      color: white;
    }

    .datepicker .datepicker-switch:hover {
      background-color: transparent;
    }

    .datepicker .next:hover {
      background-color: transparent;
    }

    .datepicker .prev:hover {
      background-color: transparent;
    }

    .datepicker table tr td.day:hover {
      border-radius: 100%;
    }