.leftGrid {
  grid-column: 1;
}
.rightGrid {
  grid-column: 2;
}
input[type="submit"] {
  margin: 28px 0 0 0;
}
form span {
  position: relative;
}

/* ------------------------------------------------------------------------------------------ */
/* Form Topics ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.form_paragraph{
  font-size: 14px;
  color: #314a63;
  margin-top: 12px;
}
.form_warning_big{
  display: flex;
  max-width: 764px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #000;
  padding: 16px;
  grid-column: 1 / span 2;
  pointer-events: none;
  gap: 8px;
}
.form_warning_big *{
  color: #000 !important;
}
.form_topic {
  display: flex;
  width: 100%;
  font-size: 16px;
  grid-column: 1 / span 2;
  color: #314a63;
  font-weight: 600;
  align-items: center;
  gap: 8px;
}
.form_topic_big {
  width: 100%;
  font-size: 20px;
  grid-column: 1 / span 2;
  color: #314a63;
}
body.darkmode .form_topic,
body.darkmode .form_topic_big {
  color: #CAE4FF;
}
form .form_topic,
form .form_topic_big {
  margin-top: 16px;
}
form .form_topic:first-of-type,
form .form_topic_big:first-of-type {
  margin-top: 0;
}
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
form .form_row {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  gap: 16px;
}
form .form_row {
  grid-template-rows: auto auto auto;
}
.form_row input,
.form_row select {
  grid-column: 1 / span 2;
}

/* ------------------------------------------------------------------------------------------ */
/* Custom Radio Button ---------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------ */

.radio-toolbar {
  display: flex;
  width: 100%;
  grid-column: 1 / span 2;
  flex-wrap: wrap;
  gap: 16px;
}
.radio-toolbar.left {
  flex-direction: row;
  justify-content: flex-start;
}
.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
.radio-toolbar label {
  position: relative;
  display: flex;
  height: 44px;
  width: fit-content;
  padding: 10px 14px 10px 32px;
  align-items: center;
  background-color: rgba(31, 99, 150, 0);
  border: 12px solid rgba(31, 99, 150, 0);
  border-radius: 4px;
  font-size: 14px;
  margin: 0;
  cursor: pointer;
}
.radio-toolbar label::after{
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  left: 0;
  opacity: 0.24;
  background-image: url("../assets/icons/inputs/radio_button_unchecked.svg");
  background-repeat: no-repeat;
}
body.darkmode .radio-toolbar label::after{
  filter: invert(88%) sepia(19%) saturate(1148%) hue-rotate(181deg) brightness(100%) contrast(108%);
}
.radio-toolbar label:hover {
  background-color: rgba(54, 83, 130, 0.08);
}
body.darkmode .radio-toolbar label:hover {
  background-color: #1F2832;
}
.radio-toolbar label:hover::after {
  opacity: 0.32;
}
.radio-toolbar input[type="radio"]:focus + label {
  background-color: rgba(54, 83, 130, 0.08);
}
.radio-toolbar input[type="radio"]:checked + label {
  background-color: rgba(54, 83, 130, 0.64);
  color: #fff;
}
body.darkmode .radio-toolbar input[type="radio"]:checked + label {
  background-color: #CAE4FF;
  color: #314a63;
}
.radio-toolbar input[type="radio"]:checked + label::after{
  opacity: 1;
  filter: invert(1);
  background-image: url("../assets/icons/inputs/radio_button_checked.svg");
}
body.darkmode .radio-toolbar input[type="radio"]:checked + label::after{
  opacity: 1;
  filter: invert(29%) sepia(5%) saturate(6630%) hue-rotate(169deg) brightness(66%) contrast(73%);
  background-image: url("../assets/icons/inputs/radio_button_checked.svg");
}
#radio1 {
  grid-column: 1;
}
#radio2 {
  grid-column: 2;
}

@media only all and (max-width: 474px) {
  .radio-toolbar {
    justify-content: flex-start;
    margin-bottom: 24px;
  }
  .radio-toolbar label {
    width: 100%;
  }
}

/* ------------------------------------------------------------------------------------------ */
/* Inputs ----------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------ */

.form-input,.form-dropdown, .form-search,
.form-password span{
  position: relative;
  display: flex;
}
.form-search{
  align-items: center;
}
.form-search:hover input,
.form-input:hover input{
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.12);
}
.form-password span{
  width: 100%;
}
.form-dropdown{
  display: flex;
  align-items: center;
}
.form-item{
  position: relative;
  width: 100%;
  height: 44px;
  border-radius: 4px;
  border: 0.5px solid #EEE;
  padding: 0 16px;
  color: #444444;
  background: #FFF;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.04);
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  caret-color: auto;
}
.form-dropdown:hover select{
  cursor: pointer;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.12);
}
.form-item + label,
.form-dropdown label{
  position: absolute;
  font-size: 14px;
  padding: 0px 16px;
  top: 29%;
  border-radius: 4px;
  pointer-events: none;
  text-align: left;
  white-space: nowrap;
  z-index: 3;
}
.form-item + label.active,
.form-dropdown label{
  top: -17%;
  left: 0px !important;
  font-size: 12px;
  padding: 0px 10px;
  margin: 0 6px;
  color: #6D6D6D;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 52%, rgba(255,255,255,0) 76%, rgba(255,255,255,0) 100%);
}
.form-item + label.centered{
  left: 50% !important;
  width: fit-content;
  transform: translate(-50%, 0%);
  text-align: center;
  margin: 0 !important;
}
.input_icon{
  position: absolute;
  content: '';
  height: 24px;
  left: 10px;
  top: 10px;
  aspect-ratio: 1 / 1;
  opacity: 0.32;
  pointer-events: none;
  z-index: 2;
}
.form-password i{
  position: absolute;
  box-sizing: content-box;
  height: 44px;
  width: 24px;
  right: 10px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.visibility,
.visibility_off{
  filter: invert(29%) sepia(5%) saturate(6630%) hue-rotate(169deg) brightness(66%) contrast(73%);
  opacity: 0.64;
}
.visibility {
  background: url("../assets/icons/inputs/visibility.svg") no-repeat;
}
.visibility_off {
  background: url("../assets/icons/inputs/visibility_off.svg") no-repeat;
}
.form-search .search_buttons{
  position: absolute;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: inherit;
  right: 8px;
  background-color: #fff;
  padding-left: 8px;
}
.form-search .search_buttons button{
  justify-content: center;
  align-items: center;
  height: 32px;
  aspect-ratio: 1 / 1;
  background-color: rgba(0, 0, 0, 0);
  filter: invert(45%) sepia(0%) saturate(0%) hue-rotate(201deg) brightness(92%) contrast(87%);
  box-shadow: none;
  padding: 0;
  border: none;
}
.form-search .search_buttons button:hover{
  background-color: rgba(0, 0, 0, 0.044);
}
.form-search .btn_input_search{
  background: url('../assets/icons/search.svg') no-repeat center;
}
.form-search .btn_input_clear{
  background: url('../assets/icons/clear_all.svg') no-repeat center;
}
.form-dropdown::after{
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  right: 10px;
  background: url('../assets/icons/expand_more.svg') no-repeat center;
  opacity: 0.85;
  pointer-events: none;
}
.form-input .form-dropdown::after{
  right: 95px;
}

.form-dropdown select{
  -webkit-appearance: none;
}

/* ------------------------------------------------------------------------------------------ */
/* Custom Checkbox Button ------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------ */

.checkbox-toolbar {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}
.checkbox-toolbar.centered {
  justify-content: center;
}
label[name="checkbox"] {
  display: flex;
  align-items: center;
}
input[type="checkbox"] {
  width: 24px;
  height: 24px;
  background: url("../assets/icons/inputs/check_box_outline_blank.svg") no-repeat;
  margin: 0 12px 0 0;
  display: inline-block;
}
input[type="checkbox"]:checked {
  background: url("../assets/icons/inputs/check_box.svg") no-repeat;
  display: inline-block;
}
.checkbox-toolbar input[type="checkbox"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
.checkbox-toolbar label {
  position: relative;
  display: flex;
  height: 48px;
  width: fit-content;
  padding: 0 8px 0 32px;
  font-size: 14px;
  margin: 0;
  align-items: center;
  color: #6D6D6D;
  border: 12px solid transparent;
  border-left: none;
  border-right: none;
  background-origin: padding-box;
  border-radius: 6px;
  cursor: pointer;
}
.checkbox-toolbar label:hover::after {
  background-image: url("../assets/icons/inputs/check_box_outline_blank.svg");
  background-repeat: no-repeat;
}
.checkbox-toolbar .checkbox-toolbar input[type="checkbox"]:checked label:hover {
  opacity: 0.72;
}
.checkbox-toolbar input[type="checkbox"]:checked + label {
  color: #365382 !important;
}
body.darkmode .checkbox-toolbar input[type="checkbox"] + label {
  color: #CAE4FF !important;
  opacity: 0.72;
}
body.darkmode .checkbox-toolbar input[type="checkbox"]:checked + label {
  color: #CAE4FF !important;
  opacity: 1;
}
.checkbox-toolbar label::after {
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  left: 0;
  transition: 0.24s;
  background-image: url("../assets/icons/inputs/check_box_outline_blank.svg");
  filter: invert(51%) sepia(12%) saturate(897%) hue-rotate(142deg) brightness(90%) contrast(90%);
  background-repeat: no-repeat;
  opacity: 1;
}
.checkbox-toolbar input[type="checkbox"]:checked + label:hover::after {
  opacity: 0.64;
}
.checkbox-toolbar input[type="checkbox"]:checked + label::after {
  background-image: url("../assets/icons/inputs/check_box.svg");
  background-position: center;
  opacity: 1;
}