@font-face{
  font-family: dinot;
  src: url('/wp-content/themes/tbbc/Fonts/dinot.woff2') format('woff2'),
     url('/wp-content/themes/tbbc/Fonts/dinot.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: bignoodle;
  src: url('/wp-content/themes/tbbc/Fonts/bignoodle.woff') format('woff'),
     url('/wp-content/themes/tbbc/Fonts/bignoodle.ttf') format('truetype');
  font-display: swap;  
}

:root {
  --dark: #182244;
  --primary: #E2869C; 
}

#tbbc_cost_calculator_form{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

#tbbc_cc_left{
  position: relative;
  width: 100%;
  padding: 1.5em;
  box-sizing: border-box;
}

#tbbc_cc_right{
  position: relative;
  width: 100%;
  padding: 1.5em;
  background: var(--primary);
  box-sizing: border-box;
}

.tbbc_form_group label{
  display: block;
  font-family: bignoodle, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  color: var(--dark);
  text-transform: uppercase;
}

.tbbc_form_group label .req{
  color: #D63637;
  padding-left: .3em;
}

.tbbc_form_group select{
  padding: .5em !important;
  border-radius: 2px !important;
}

.tbbc_input{
  display: block;
  font-family: dinot, sans-serif;
  width: 100%;
  background: var(--bright) !important;
  padding: .5em !important;
  margin: .5em 0em .8em 0em;
  border: 1px solid var(--dark) !important;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
}

.tbbc_textarea{
  display: block;
  font-family: dinot, sans-serif;
  width: 100%;
  height: 10em;
  background: var(--bright) !important;
  padding: .5em !important;
  margin: .5em 0em .8em 0em;
  border: 1px solid var(--dark) !important;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
}

.tbbc_form_text{
  font-family: dinot, sans-serif !important;
  font-size: 1.1em !important;
  font-weight: normal !important;
  letter-spacing: 0;
  text-transform: capitalize !important;
}

#tbbc_guest_block{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

#tbbc_guests{
  position: relative;
  width: calc(100% - 6em);
  box-sizing: border-box;
}

#tbbc_guest_count{
  position: relative;
  width: 2.5em;
  height: 2.5em;
  font-size: 1.3em;
  color: var(--bright);
  text-align: center;
  line-height: 2.5em;
  border-radius: 50%;
  background: var(--dark);
  box-sizing: border-box;
  margin-left: 1.5em;
  margin-top: -.2em;
}

#tbbc_cost_calculator_form input[type="range"].tbbc_input {
  cursor: pointer;
}

#tbbc_guests{
   accent-color: var(--dark);
}

#tbbc_cc_right button{
  font-family: bignoodle, sans-serif;
  font-size: 2em;
  width: 100%;
  color: var(--bright); 
  text-transform: uppercase;
  text-align: center; 
  transition: none;
  background: var(--dark);
  padding: .5em 0em .5em 0em;
  border: 2px solid var(--dark);
  margin-top: .5em;
  outline: none;
  box-sizing: border-box;
}

#tbbc_cc_right button:hover{
  cursor: pointer;
  color: var(--dark);
  background: var(--bright);
}

#tbbc_cc_right label{
  font-family: dinot, sans-serif;
  font-size: 1.3em;
  text-align: center;
}

#tbbc_cost_output{
  font-family: bignoodle, sans-serif;
  font-size: 4em;
  color: var(--dark);
  text-align: center;
  line-height: 1em;
  margin: .1em 0em .3em 0em;
}


/**Media Queries*/

@media only screen and (min-width: 54em){

  #tbbc_cc_left, #tbbc_cc_right{
    width: 50%;
    padding: 1.5em;
  }

}



@media only screen and (min-width: 70em){

  #tbbc_cc_left{
    padding-right: 4em;
  }

   #tbbc_cc_right{
    padding-left: 4em;
  }


}