html {
    --dark: #1F1F1F;
    --blue: #2D8DF1 !important;
    --gray: #7C96B0;
    --gray-light: #EEF6FF;
    --gray-line: #E2EDF9;
    --gray-medium: #D5E6F9;
    --geen: #0CC94C;
    --orange: #FF9900;
    --red: #FF553E;
    --white: #FFFFFF;
    --yellow-green: #D7E058;
    --yellow-green_dark: #CAD437;
    --black: #000000;
    --tg-theme-button-color: #D7E058 !important;
}

.b-contain *,
.b-contain *::before,
.b-contain *::after {
  box-sizing: content-box !important;
}

.b-contain input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.b-contain span {
  line-height: 2;
  font-size: 1rem;
  font-family: inherit;
}

.b-contain {
  display: table;
  position: relative;
  padding-left: 2rem;
  cursor: pointer;
  margin-bottom: 1.22rem;
}

.b-contain input[type="checkbox"] ~ .b-input {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.75rem;
  width: 1.75rem;
  background: rgb(231, 244, 232);
  transition: background 250ms;
  border: 2px solid #7C96B0;
  border-radius: 0rem;
}

.b-contain input[type="radio"] ~ .b-input {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.75rem;
  width: 1.75rem;
  background: rgb(231, 244, 232);
  transition: background 250ms;
  border: 2px solid #7C96B0;
  border-radius: 3rem;
}

.b-contain input[type="checkbox"] ~ .b-input::after {
  content: "";
  position: absolute;
  display: none;
  left: 9px;
  top: 2px;
  width: 0.41rem;
  height: 0.96rem;
  border: solid #1f1f1f;
  border-width: 0 5px 5px 0;
  transition: background 250ms;
  transform: rotate(45deg);
}

.b-contain input[type="radio"] ~ .b-input::after {
  content: "";
  position: absolute;
  display: none;
  left: 4px;
  top: 4px;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3rem;
  background: #1f1f1f;
  transition: background 250ms;
}

.b-contain input[type="checkbox"]:disabled ~ .b-input::after {
  border-color: #1f1f1f;
}

.b-contain input:checked ~ .b-input::after {
  display: block;
}

.b-contain:hover input[type="checkbox"]:not([disabled]) ~ .b-input,
.b-contain input[type="checkbox"]:focus ~ .b-input {
  background: #e2e8f0;
  border-color: #64748b;
}

.b-contain:hover input[type="radio"]:not([disabled]) ~ .b-input,
.b-contain input[type="radio"]:focus ~ .b-input {
  background: #e2e8f0;
  border-color: #64748b;
}

.b-contain input:focus ~ .b-input {
  box-shadow: none;
}

.b-contain input[type="checkbox"]:checked ~ .b-input {
  background: #D7E058;
  border-color: #7C96B0;
}

.b-contain input[type="radio"]:checked ~ .b-input {
  background: #D7E058;
  border-color: #1d4ed8;
}

.b-contain input[type="checkbox"]:disabled ~ .b-input,
.b-contain input[type="radio"]:disabled ~ .b-input {
  opacity: 0.5;
  cursor: not-allowed;
}

.b-contain input[type="radio"]:disabled ~ .b-input::after {
  background: #1f1f1f;
}

.b-contain:hover input[type="checkbox"]:not([disabled]):checked ~ .b-input,
.b-contain input[type="checkbox"]:checked:focus ~ .b-input {
  background: #D7E058;
  border-color: #1e40af;
}

.b-contain:hover input[type="radio"]:not([disabled]):checked ~ .b-input,
.b-contain input[type="radio"]:checked:focus ~ .b-input {
  background: #D7E058;
  border-color: #1e40af;
}

.b-contain span {
    margin-left: 8px;
}

.b-contain input[type="checkbox"], .b-contain input[type="checkbox"]:focus{
    outline: none !important;
    border:none !important;
}