:root {
  --radio-switch-width: 126px;
  --radio-switch-height: 46px;
  --radio-switch-padding: 3px;
  --radio-switch-radius: 50em;
  --radio-switch-animation-duration: 0.3s;
    /* colors */
  --ri5-color-primary-hsl: 359, 85%, 53%;
  --ri5-color-bg-hsl: 0, 0%, 100%;
  --ri5-color-contrast-high-hsl: 230, 7%, 23%;
  --ri5-color-contrast-higher-hsl: 230, 13%, 9%;
  --ri5-color-bg-darker-hsl: 0, 0%, 0%;
  --ri5-color-white-hsl: 0, 0%, 100%;

  /* typography */
  --ri5-text-sm: 0.833rem;
}

h1 {text-align:center !important;}
.text-center {text-align:center;}
.step1, .step2, .step3, .small_big_block_options, .godzilla_options, .coyote_options, .universal_options {max-width:1200px; margin: 0 auto;}
main img {max-width:100%; height:auto;}
.row {display:flex; gap:1em; flex-wrap:wrap; justify-content:center;}
.col {flex-grow:1; width:100px;}
.col-md-6 {width:calc(50% - 0.75em);}
.col-md-3 {width:calc(25% - 0.75em);}
.col-md-4 {width:calc(33.333% - 0.75em);}

.m-3 {margin: 1rem !important;}
.mb-3 {margin-bottom: 1rem !important;}
    
.img_holder {cursor:pointer; border:1px solid #000; transition:0.2s border ease-in-out;}
.img_holder .label {margin: 4px auto 10px;}
.img_holder {text-align:center;}
.img_holder:hover {border:1px solid #fff;}
.img_holder.active, .img_holder.active:hover {border:1px solid #ED1F24; background:#ED1F24; color:#fff;}

.alert {
    text-align: center;
    padding: 0.5em 1em;
    background: #fff;
    border-radius: 5px;
    color: #000;
}

.alert.alert-success {
    background: green;
    color: white;
}

.alert.alert-error {
    background: red;
    color: white;
}

main form#custom_build {max-width:100%;}
.ps-form-control {padding:0.75em 0.85em; border:1px solid #666; border-radius:4px; box-sizing: border-box;}
#custom_build button.button {
    appearance: none;
    background: #ED1F24;
    color: #fff;
    padding: 0.75em 0.85em;
    border-radius: 4px;
    border: 1px solid #ED1F24;
    text-transform: uppercase;
    cursor: pointer;
    font-size:1.25em;
    margin-top:30px;
}

#custom_build button.button#custom_build_submit {
    font-size:1.25em;
    margin-top:30px;
}

#custom_build button.button:hover, #custom_build button.button:active {
    background: #C91C29;
    border-color: #C91C29;
}

#custom_build button.button:disabled, 
#custom_build button.button:disabled:hover {
    background: #555;
    border-color: #555;
    color:#fff;
    opacity:0.5;
}

table.table {
    max-width: 100%;
    border: 0;
    margin:0 auto;
    border-spacing: 0;
    color:#fff;
}

table.table thead {text-align:center;}

table.table tbody tr:nth-child(odd) {
    background: #333;
}

table.table tbody tr:nth-child(even) {
    background: #222;
}

table.table tbody td {
    padding: 10px 15px;
    border-bottom:0;
}

.form-group {width:648px; max-width:100%; margin: 0 auto;}
.form-group .ps-form-control {width:100%; margin-bottom:1em;}

#form-result {margin-top:15px;}

@media(max-width:768px) {
    /*.col-md-6 {width:100%;}*/
    .col-md-3, .col {width:calc(50% - 0.75em);}
    .text-md-start {
        text-align: left !important;
    }
}

@media(max-width:480px) {
    .col-sm-12 {width:100%;}
/*.col-md-3, .col {width:100%;}*/
}

.radio-switch {
  position: relative;
  display: inline-block;
  display: inline-flex;
  padding: var(--radio-switch-padding);
  border-radius: calc(var(--radio-switch-radius) * 1.4);
  background-color: hsl(var(--ri5-color-bg-darker-hsl));
  margin:0;
}
.radio-switch.high-contrast {
    background-color: hsl(var(--ri5-color-contrast-high-hsl));
}
.radio-switch:focus-within, .radio-switch:active {
  box-shadow: 0 0 0 2px hsla(var(--ri5-color-contrast-higher-hsl), 0.15);
}

.radio-switch__item {
  position: relative;
  display: inline-block;
  height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding));
  width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding));
}

.radio-switch__label {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-switch-radius);
  cursor: pointer;
  font-size: var(--ri5-text-sm);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: all var(--radio-switch-animation-duration);
  color:#fff;
}
.radio-switch__input:checked ~ .radio-switch__label {
  color: hsl(var(--ri5-color-white-hsl));
}
.radio-switch__input:focus ~ .radio-switch__label {
  background-color: hsla(var(--ri5-color-primary-hsl), 0.6));
}
.radio-switch__label :not(*):focus-within, .radio-switch__input:focus ~ .radio-switch__label {
  background-color: transparent;
}

.radio-switch__marker {
  position: absolute;
  z-index: 1;
  top: 0;
  left: -100%;
  border-radius: var(--radio-switch-radius);
  background-color: hsl(var(--ri5-color-primary-hsl));
  height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding));
  width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding));
  box-shadow: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
  transition: -webkit-transform var(--radio-switch-animation-duration);
  transition: transform var(--radio-switch-animation-duration);
  transition: transform var(--radio-switch-animation-duration), -webkit-transform var(--radio-switch-animation-duration);
}
.radio-switch__input:checked ~ .radio-switch__marker {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

/* utility classes */
.ri5-sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap;
}