.supercenter{
      display: flex;
      vertical-align: middle;
      justify-content: center;
      align-items: center;
}
.no_p{
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
}
.no_m{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important; 
  margin-right: 0 !important;
}
.no_p_y{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.no_m_y{
  margin-left: 0 !important; 
  margin-right: 0 !important;
}
/* Color Theme Swatches in Hex */
.rojo { color: #AD0E1F; }
.rosadito { color: #F8D7D0; }
.colorpastel { color: #FFE9CD; }
.azul { color: #BFE9FF; }
.verdecito { color: #B7D7D9; }


  /* label color */
  .input-field label {
    color: #000;
  }
  /* label focus color */
  .input-field input[type=text]:focus + label {
    color: #000 !important;
  }
  /* label underline focus color */
  .input-field input[type=text]:focus {
    border-bottom: 0px solid #AD0E1F !important;
    box-shadow: 0 1px 0 0 #fff !important;
  }
  /* valid color */
  .input-field input[type=text].valid {
    border-bottom: 0px solid #AD0E1F!important;
    box-shadow: 0 1px 0 0 #fff !important;
  }
  /* invalid color */
  .input-field input[type=text].invalid {
    border-bottom: 0px solid #AD0E1F !important;
    box-shadow: 0 1px 0 0 #fff !important;
  }
  /* icon prefix focus color */
  .input-field .prefix.active {
    color: #000 !important;
  }

#div-inicio{
  background-color: pink;
  height: 100vh;
  scroll-behavior: smooth;
  padding: 2em;
}
#div-logo-container{
  width: 50%;
  margin-right:25%;
  height: 10vh;
  background-color: yellow;
}
#div-vista-container{
  background-color: brown;
  height: 60vh;
  width: 70%;
  margin-left: 15%;
}
#logout-container{
  display: flex;
  justify-content:flex-end;
  height: 10vh;
}
#btn-logout{
  margin-right: 5em;
}
#div-select-paginas{
  background-color: orange;
  height: 10vh;
  width: 70%;
  margin-left: 15%
}
#select-paginas-li{
  display: inline;
}
#div-login {
  background: rgb(0,0,0);
  background: linear-gradient(51deg, rgba(0,0,0,1) 0%, rgba(173,14,31,1) 50%, rgba(223,68,68,1) 100%);
  height: 100vh;
  padding: 10em;

}
#div-login-container{
  background-color: #4D4D4D;
  width: 60%;
  margin-left: 20%;
  height: 50vh;
  border-radius: 10px;
  color: #fff;
}
#form-login{
  width: 100%;
    display: flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#btn_login_send{
  background-color: #AD0E1F;
  color:#FFF;
}
.login_input{
background-color: #fff !important;
border-radius: 5px !important;
line-height: 3em;
border-bottom: 0 !important;

}
.login_input:focus{
    /*input cuando lo estan focus/escribiendo */
      border-bottom: 0px solid #000 !important;
      box-shadow: 0 0px 0 0 #000 !important;
      background-color: #B7D7D9 !important;
}

.login_input.valid{
  /*input cuando el campo esta validad*/
  border-bottom: 0px solid #000 !important;
  box-shadow: 0 0px 0 0 #000 !important;
  background-color: #B7D7D9 !important;
}
.login_input.invalid{
    /*input cuando el campo esta invalido (escribieron mal etc)*/
  border-bottom: 0px solid #000 !important;
  box-shadow: 0 0px 0 0 #000 !important;
  background-color: #AD0E1F !important;
}

#slide-out2{
  width: 15%;
  right: 0 !important;
  left: unset !important;
}

#logo_container{
  height: 20vh;
}
#nav_logo_img{
  height: 10vh;
}
#nav_dit{
  background-color: #AD0E1F;
  height: 10vh;
  display: grid;
  align-items: center;
}
#nav_title{
  text-align: center;
  font-size: 1.5em;
  color: #fff;
  
}
#container_nav{
  height: auto;
}
#sidenav_option{
  width: 100%;
  text-align: right;
}
#nav_buser{
  font-size: .8em;
  font-style: italic;
  margin-right: 1em;
}
#nav_user{
  font-size: 1.2em;
}
#content_container{
  background-color: #f5f5f5;
  height: 90vh;
  width: 80%;
  padding-top: 5vh;
  margin-top: 0;
  margin-bottom: 0;
  
}
#sidenav_option{
  transition: all .5s ease;
}
#sidenav_option:hover{
  transform: scale(1.1);
}
#container_registrar{
  box-shadow: #000;
  height: 80vh;
  padding: 2em;
  display: flex;
  flex-direction: column;
  vertical-align: middle; 
  overflow-y: scroll;
  overflow-x: hidden
}
#registrar_title{
  font-size: 2em;
  color: #AD0E1F;
}
#registrar_form{
  width: 90%;
}
#registrar_form input{
  border-bottom: none;
  color: #f5f5f5;
}
#registrar_form input:focus{
  box-shadow: 0 1px 0 0 #fff !important;
}
#registrar_form label{
  color: #f1f1f1;
}
#input_field{
  background-color: #AD0E1F;
  border-radius: 5px !important;
  border-bottom: 0 !important;
  margin: 1em;
  height: 5em;
}
#input_field2{
  border-radius: 5px !important;
  border-bottom: 0 !important;
  margin: 1em;
  height: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn_form{
  background-color: #AD0E1F;
}
.btn_form:hover{
  background-color: #AD0E1F;
}
.btn_form:focus{
  background-color: #AD0E1F !important;
}
.table_opc{
  background-color: #8C1313;
  color: #FFF;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
}

#table_agencias td,th,label{
  text-align: center;
  color: #232224;
}
#btn_acciones{
  background-color: #8C1313;
  width: 100%;
  line-height: 1em;
  font-size: .9em;
}

#table_agencias p {
  font-size: 1em;
  background-color: #232224;
  color: #FFF;
  line-height: 1em;
  padding: 10px;
  width: 100%;
}
#table_agencias span {
  font-size: 1em;
  background-color: #fff;
  color: #232224;
  box-shadow: 5px #000 !important;
  line-height: 1em;
  padding: 10px;
  width: 100%;
}
#space_divisor{
  background-color: #f5f5f5;
  height: 10vh;
}
#tour_container{
  background-color: #8C1313;
  margin: 2em;
  aspect-ratio: 1/1;
  background-position: center;
  background-size: cover;
  cursor: pointer;
  transition: all .5s ease;
}
#tour_container:hover{
  transform: scale(1.1);
}
#modal_img{
  aspect-ratio: 1/1;
}
#modal_content{
  display: grid;
  align-items: center;
  justify-content: center;
}
#btn_modal_t{
  background-color: #8C1313;
  margin: 1em;
  transition: all .5s ease;
  line-height: 1em;
    padding: 0.5em;
    display: grid;
    align-items: center;
    justify-content: center;
}
#btn_modal_t:hover{
  transform: scale(1.1);
}
#table_content{
  height: 80%;
  display: grid;
  align-items: center;
  justify-content: center;
}

#tour_span{
  color: rgba(0,0,0,0.87);
  font-size: 14px;
  font-weight: 500;
  line-height: 1em;
}
.false{
  background-color: #8C1313 !important;
  transition: all .5s ease;
}
.true{
  background-color: #128031 !important;
  transition: all .5s ease;
}
.false:hover{
  background-color: #8C1313 !important;
  transform: scale(1.1);
}
.true:hover{
  background-color: #128031 !important;
  transform: scale(1.1);
}
.false:focus{
  background-color: #8C1313 !important;
  transform: scale(1.1);
}
.true:focus{
  background-color: #128031 !important;
  transform: scale(1.1);
}