@charset "utf-8";

/* ===============================
   Checkbox / Radio (custom UI)
=============================== */

input[type="checkbox"],
input[type="radio"]{
  position:absolute;
  display:none;
}

input[type="radio"][disabled],
input[type="checkbox"][disabled]{
  cursor:not-allowed;
}

input[type="radio"]+label,
input[type="checkbox"]+label{
  position:relative;
  padding-left:30px;
  margin-right:0;
  cursor:pointer;
  vertical-align:middle;
  padding-top:4px;
  padding-bottom:4px;
  line-height:30px;
  color:#fff;
  z-index: 1;
}

input[type="radio"]+label:hover:before,
input[type="checkbox"]+label:hover:before{
  animation-duration:.4s;
  animation-fill-mode:both;
  animation-name:hover-color;
}

/* box / circle */
input[type="radio"]+label:before,
input[type="checkbox"]+label:before{
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  display:inline-block;
  width:25px;
  height:25px;
  content:'';
  border:1px solid #444;
  background-color:#212121;
}

input[type="radio"]+label:before{
  border-radius:50%;
}

input[type="checkbox"]+label:before{
  border-radius:6px;
}

/* dot / check */
input[type="radio"]+label:after,
input[type="checkbox"]+label:after{
  position:absolute;
  display:none;
  content:'';
}

input[type="radio"]+label:after{
  top:50%;
  left:6px;
  transform:translateY(-50%);
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--rb-main-color);
}

input[type="checkbox"]+label:after{
  top:50%;
  left:10px;
  transform:translateY(-50%) rotate(45deg);
  box-sizing:border-box;
  width:6px;
  height:11px;
  border-width:1.7px;
  border-style:solid;
  border-color:#fff;
  border-top:0;
  border-left:0;
}

/* checked */
input[type="radio"]:checked+label:after,
input[type="checkbox"]:checked+label:after{
  display:block;
}

input[type="radio"]:checked+label:before{
  border:1px solid var(--rb-main-color);
  background:#121212;
}

input[type="checkbox"]:checked+label:before{
  border:1px solid var(--rb-main-color);
  background:var(--rb-main-color);
}

/* disabled */
input[type="radio"][disabled]+label,
input[type="checkbox"][disabled]+label{
  cursor:not-allowed;
  color:#777;
}

input[type="radio"][disabled]+label:hover,
input[type="radio"][disabled]+label:before,
input[type="radio"][disabled]+label:after,
input[type="checkbox"][disabled]+label:hover,
input[type="checkbox"][disabled]+label:before,
input[type="checkbox"][disabled]+label:after{
  cursor:not-allowed;
}

input[type="radio"][disabled]+label:hover:before,
input[type="checkbox"][disabled]+label:hover:before{
  animation-name:none;
}

input[type="radio"][disabled]+label:before,
input[type="checkbox"][disabled]+label:before{
  border-color:#444;
  background-color:#1a1a1a;
}

input[type="radio"]:checked[disabled]+label:before{
  border-color:#555;
  background:#1a1a1a;
}

input[type="radio"]:checked[disabled]+label:after{
  background:#777;
}

input[type="checkbox"]:checked[disabled]+label:before{
  border:1px solid #555;
  background:#1a1a1a;
}

/* ===============================
   Text inputs
=============================== */

input[type="text"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="file"],
input[type="email"],
input[type="number"]{
  border:1px solid #333;
  border-radius:10px;
  height:47px;
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
  background-color:#181818;
  color:#f5f5f5;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="file"]:focus,
input[type="email"]:focus,
input[type="number"]:focus{
  outline:none;
  border-color:var(--rb-main-color);
  background-color:#181818;
}

/* ===============================
   Select
=============================== */

.select{
  padding-left:20px;
  padding-right:20px;
  border:1px solid #333;
  background:url(../rb.img/icon/arr_down.svg) no-repeat right 20px center;
  background-color:#121212;
  border-radius:10px;
  box-sizing:border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  font-size:14px;
  color:#f5f5f5;
  margin:0;
  height:47px;
}

.select:focus,
.select:hover{
  outline:none;
  border-color:var(--rb-main-color);
}

/* ===============================
   Generic input classes
=============================== */

.input{
  height:47px;
  border:1px solid #333;
  border-radius:10px;
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
  background-color:#121212;
  color:#f5f5f5;
}

.input:disabled{
  color:#777;
  opacity:.6;
}

.input_tiny{
  height:35px !important;
  border:1px solid #333;
  border-radius:6px !important;
  padding-left:10px !important;
  padding-right:10px !important;
  box-sizing:border-box;
  font-size:13px !important;
  background-color:#121212;
  color:#f5f5f5;
}

.input_tiny:disabled{
  color:#777;
  opacity:.6;
}

/* ===============================
   Textarea
=============================== */

textarea{
  border:1px solid #333 !important;
  border-radius:10px !important;
  padding:20px !important;
  width:100%;
  resize:none;
  box-shadow:none !important;
  box-sizing:border-box;
  background-color:#121212;
  color:#f5f5f5;
}

/* ===============================
   Focus + remove shadows
=============================== */

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus{
  -webkit-transition:none;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  border:1px solid var(--rb-main-color) !important;
}

input[type="text"],
input[type="password"],
textarea,
select{
  -webkit-transition:none;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}