* {
  box-sizing : border-box;
}
body, html {
  font-family : 'Roboto', sans-serif;
  cursor      : default;
  width       : 100%;
  min-height  : 100%;
  height      : 100%;
  margin      : 0;
  padding     : 0;
  background  : url("cabina_bg.jpg") no-repeat center/cover;
}

#localVideo, .bg {
  position   : fixed;
  top        : 0;
  left       : 0;
  width      : 100vw;
  height     : 100vh;
  object-fit : cover;
}

.bottom-holder {
  display         : flex;
  justify-content : center;
  align-items     : center;
  flex-flow       : column;
  gap             : 20px;

  position        : absolute;
  bottom          : 50px;
  width           : 100%;
}
#call {
  display         : inline-flex;
  justify-content : center;
  align-items     : center;

  position        : relative;
  padding         : 15px 25px;
  background      : #1E559F;
  border-radius   : 99px;
  cursor          : pointer;
  transition      : color .4s ease-out, background-color .4s ease-out;

  font-size       : 30px;
  color           : #FFFFFF;
  text-transform  : uppercase;
}
#call:hover {
  background : #2F428C;
}
#call.hidden {
  display : none;
}
#call.disabled {
  opacity: .7;
  cursor: default;
}
#warn {
  display         : inline-flex;
  justify-content : center;
  align-items     : center;

  position        : relative;
  padding         : 15px 25px;
  background      : #1E559F;
  border-radius   : 99px;
  cursor          : pointer;
  transition      : color .4s ease-out, background-color .4s ease-out;

  font-size       : 30px;
  color           : #FFFFFF;
  text-transform  : uppercase;
}
#warn:hover {
  background : #2F428C;
}
#warn.hidden {
  display : none;
}
#warn.disabled {
  opacity: .7;
  cursor: default;
}

#hang {
  display         : inline-flex;
  justify-content : center;
  align-items     : center;

  position        : relative;
  padding         : 15px 25px;
  background      : #FE4545;
  border-radius   : 99px;
  cursor          : pointer;
  transition      : color .4s ease-out, background-color .4s ease-out;

  font-size       : 30px;
  color           : #FFFFFF;
  text-transform  : uppercase;
}
#hang:hover {
  background : #FF0000;
}
#hang.hidden {
  display : none;
}

.bottom-info, .bottom-alert {
  position   : relative;

  font-size  : 16px;
  text-align : center;
  color      : #3B4452;
}
.bottom-info.hidden, .bottom-alert.hidden {
  display : none;
}

.settings {
  display         : inline-flex;
  justify-content : center;
  align-items     : center;

  position        : absolute;
  top             : 25px;
  right           : 25px;
  padding         : 5px 15px;
  background      : #1E559F;
  border-radius   : 99px;
  cursor          : pointer;
  transition      : color .4s ease-out, background-color .4s ease-out;

  font-size       : 16px;
  color           : #FFFFFF;
  text-transform  : uppercase;
}
.settings:hover {
  background : #2F428C;
}

.dropdown {
  position      : absolute;
  top           : 45px;
  /*right         : 15px;*/
  width         : 192px;
  background    : #FFFFFF;
  border-radius : 15px;
  padding       : 0;
  overflow      : hidden;
  max-height    : 0;
  transition    : max-height .4s ease-out;
}
.dropdown.opened {
  max-height : 400px;
}
.dd-title {
  position       : relative;
  width          : 100%;
  margin         : 15px 0;

  font-size      : 12px;
  color          : #89A1B6;
  text-align     : center;
  text-transform : capitalize;
}
.dd-variant {
  position   : relative;
  width      : 100%;
  padding    : 10px 20px;
  background : #FFFFFF;
  transition : background-color .4s ease-out;
  cursor     : pointer;

  font-size  : 12px;
  color      : #2B323C;
}
.dd-variant.selected, .dd-variant.selected:hover {
  background : #EEEEEE;
  cursor     : default;
}
.dd-variant:hover {
  background : #F1F6FB;
}

.center-holder {
  display         : flex;
  justify-content : center;
  align-items     : center;
  flex-flow       : column;
  gap             : 30px;

  height          : 100%;
}
.center-info {
  position   : relative;

  font-size  : 42px;
  text-align : center;
  color      : #3B4452;
}