/*
color 1:
1D1E22

color 2:
f4d430

color 3:
D4D4DC
*/
html {
  scroll-behavior: smooth;
      }
.footerColor {
  background: #b6b6bd;}
.bacColor {
    background: #1d1e2288;}
  .bacColorF {
    background: #1D1E22;}
  .navColor {
    color: #f4d430;}
  .lineColor {
    background: #f4d430;}
  .grayBack{
    background: #D4D4DC;}
    .grayTxtx{
    color: #D4D4DC;}
    .grayTxtxHref{
      color: #D4D4DC !important;}
  .grayTxt{
    color: #1D1E22;}
    .infoPanel{
        height: 400px;
      }
  .top-nav-collapse {
    background-color: #1D1E22 !important;}
  .navbar:not(.top-nav-collapse) {
    background: transparent !important;}
    @media (max-width: 800px){
    .navbar:not(.top-nav-collapse) {
      background: #0000009a!important;}
      
    }
    @media (max-width: 990px){
    .navbar:not(.top-nav-collapse) {
      background: #0000009a!important;}
      .infoPanel{
        height: 850px;
      }
      
    }
  @media (min-width: 800px) and (max-width: 850px) {
    .navbar:not(.top-nav-collapse) {
      background: #1D1E22!important;}
      
    }


    .navbar-full-color{
      background: #1D1E22 !important;
    }

   

  .appCardInfo
  {
    color: #1D1E22;
    background: #D4D4DC;
    transition: .7s ease;
  }
  .appCardInfoText{
    color: rgb(65, 64, 64) !important;
    transition: .7s ease;
  }
  .appCardInfo:hover .appCardInfoText
  {
    color: #b6b6bd !important;
    transition: .7s ease;
  }

.appCardInfo:hover
{
  color: #b6b6bd;
    background:  #1D1E22;
    transition: .7s ease;
    cursor: pointer !important;
}

.navGrayTxtx{
  color: white;
  transition: .7s ease;
}
.navGrayTxtx:hover{
  color: #f4d430;
  transition: .7s ease;
}
.custom-href{
  color: #96730a !important;
}
.custom-href:hover{
color: #f4d430 !important;
}

.cross{
  color: #f4d430 !important;
  color: #D4D4DC !important;
  transition: .4s ease;
}
.cross:hover{
  color: #f4d430 !important;
transition: .4s ease;
}

.href-contact{
  color:#1D1E22;
}
.href-contact:hover{
  color:#1D1E22;
}

.yellowBorder{
  border-color: #f4d430;
    color: #f4d430;
    border: 2px solid; 
}
.cross-user{
  color:#f4d430 !important;
  transition: .4s ease;
}
.cross-user:hover{
  color:#D4D4DC !important;
  transition: .4s ease;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.35s;
}


.closebtn {

  top: 4px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  font-style: bold;
}

#menuVol {
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

#menuVol.fade {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.7s;
}

.sidenav-custom-item {
  color: #D4D4DC;
}

.sidenav-custom-item-href {
  color: #D4D4DC;
  transition: 1.0s;
}

.sidenav-custom-item-href:hover {
  color: #f4d430;
  transition: 0.5;
}
.metro-card{
  max-width: 200px; 
  height: 200px; 
  border: 2px solid #f4d430; 
  margin: 4px 4px 4px 4px;
  transition: 1s;
  overflow: hidden;
  font-size: 18px;
}
.metro-card:hover{
  max-width: 200px; 
  height: 200px; 
  border: 2px solid #D4D4DC; 
  margin: 4px 4px 4px 4px;
  background-color: #d4d4dc2c ;
  transition: 0.5s;
  cursor: pointer;
}
@media (max-width: 990px){
  .auto_splash_button{
    width: 100%;
  }
}
.valid_signalization_input:valid{
  border-bottom: 1px solid green !important;
}
.new_action_form_input_style.new_action_form_input_main_style{
  font-size: 20px;
}
.new_action_form_input_style.new_action_form_input_details_style{
  border: 1px solid #f4d430;
}

.new_action_form_input_style.new_action_form_input_main_style:read-only{
  background-color: #1D1E22;
}
.new_action_form_input_style.new_action_form_input_details_style:read-only{
  background-color: #1D1E22;
  border: 1px solid #f4d430;
}

.new_action_form_input_style.new_action_form_input_main_style:disabled{
  background-color: #1D1E22;
}
.new_action_form_input_style.new_action_form_input_details_style:disabled{
  background-color: #1D1E22;
  border: 1px solid #f4d430;
}

.valid_signalization_input.new_action_form_input_details_style:valid{
  border: 1px solid green !important;
}
.new_action_form_input_name_style{
  font-size: 190%;
  margin-bottom: 2px;
  margin-top: 10vh;
}
.html_time_picker{
  width: 80px;
  transition: 1s;
  background-color: transparent;
}
.html_time_picker:focus{
  transition: 1s;
  background-color: #f4d430;
}
.html_time_picker{
  width: 80px;
  color: white;
  background-color: transparent;
  text-align: center;
  border: none;
  border-radius: 0%;
  border-bottom: 1px solid #f4d430;
}
.html_time_picker:disabled{
  background-color: #1D1E22;
}
.html_time_picker:read-only{
  background-color: #1D1E22;
}
.html_time_picker:invalid{
  color:red;
}
.html_time_picker:valid{
  border-bottom: 1px solid green;
}
.html_date_picker:valid{
  
  border-bottom: 1px solid green;
}
.html_date_picker_soft:read-only{
  background-color: #1D1E22;
}
.html_date_picker_soft:disabled{
  background-color: #1D1E22;
}
.html_date_picker:read-only{
  background-color: #1D1E22;
}
.html_date_picker:disabled{
  background-color: #1D1E22;
}
.new_action_form_input_style:disabled{
  background-color: #1D1E22;
}
.new_action_form_input_style:read-only{
  background-color: #1D1E22;
}
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.dialog_wrong_button{
  border: 1px solid red;
  transition: 1s;
}
.dialog_wrong_button:hover{
  background-color: rgb(151, 25, 25);
  border: 1px solid rgb(151, 25, 25);
  color: white;
  transition: 0.5s;
}

.dialog_warning_button{
  border: 1px solid #f4d430;
  transition: 1s;
}
.dialog_warning_button:hover{
  background-color: #96730a;
  border: 1px solid #96730a;
  color: white;
  transition: 0.5s;
}
.delete-icon{
  color: red;
  transition: 0.5s;
}
.delete-icon:hover{
  color:rgb(151, 25, 25);
  transition: 0.5s;
}
.input_invalit_displayer:invalid{
  color: red;
  border-bottom-color:red;
}
.input_invalit_displayer:placeholder-shown{
  border-bottom-color: #f4d430 !important;
}
.input_invalit_displayer:valid{
  border-bottom-color: green;
}
.input_invalid_displayer_textbox:valid{
  border-color: green;
}
.input_invalid_displayer_textbox:placeholder-shown{
  border-color: #f4d430 !important;
}
.html_individual_lecture_picker:focus{
  transition: 1s;
  background-color: #f4d430;
}
.html_individual_lecture_picker{
  width: 80px;
  color: black;
  background-color: transparent;
  text-align: center;
  border: none;
  border-radius: 0%;
  border-bottom: 1px solid #f4d430;
}
.html_individual_lecture_picker:placeholder-shown{
  border-bottom-color: #96730a !important;
}
.html_individual_lecture_picker:invalid{
  border-bottom-color: red !important;
}
.html_individual_lecture_picker:valid{
  border-bottom-color: green;
}
.border-custom-button-wrong{
  border-color: red !important;
  color: red;
  border: 2px solid;
}
.border-custom-button-wrong:hover {
  background-color: #1D1E22 !important;
  border-color: #D4D4DC !important;
  color: #D4D4DC;
  border: 2px solid;
}
.diasable_transparent:disabled{
  background-color: transparent;
}
.table_button
{
  background-color: #D4D4DC;
  width: 100%;
  border: 1px solid white;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  font-family: Roboto;
  padding: 2px;
  transition: 1s;
}
.table_button:hover
{
  background-color: white;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
}
.table_button:active
{
  outline: none;
}
.table_button:focus
{
  outline: none;
}
.disable_transbarent_background:disabled{
  background-color: transparent;
  border: black;
}

.readonly_back:read-only{
  background: transparent;
}

.time-table-header{
  color: #f4d430;
  background-color: #292a2e;
  margin-left: 2px;
  margin-right: 2px;
}

.time-table-item{
  color: #292a2e;
  min-height: 50px;
  font-size: 80%;
  margin-left: 10px;
  margin-right: 10px;
}
.time-table-item-text{
  margin-top: 10px;
  margin-bottom: 10px;
}
.time-table-item:hover{
  cursor: pointer;
}
.time-table-item-close:hover{
  cursor: pointer;
}
.time-table-week-selector{
  color: #f4d430;
  background-color: #292a2e;
  font-size: 18px;
  margin-left: 2px;
  margin-right: 2px;
}
.time-table-week-selector-text{
  margin-top: 10px;
  margin-bottom: 10px;
}
.time-table-week-selector:hover{
  cursor: pointer;
}