/*----------------------------------------
  Contacts Page
------------------------------------------*/
/*---------------------------------------- 
  Available Layout type names
-----------------------------------------*/
/*
 1. vertical-modern-menu-template
 2. vertical-menu-nav-dark-template
 3. vertical-gradient-menu-template
 4. vertical-dark-menu-template
 5. horizontal-menu-template

/* Need to change Layout name as per your requirement on below mentioned line.*/
/*
1. @import "../themes/vertical-gradient-menu-template/variables"; 
2. @import "../themes/vertical-gradient-menu-template/theme-variables";
*/
#contact-us .app-wrapper .sidenav {
  width: 340px;
  padding: 2rem;
}
#contact-us .app-wrapper .contact-header {
  margin-top: 3.5rem;
}
#contact-us .app-wrapper .contact-header .contact-us .social-icons i {
  font-size: 1.3rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#contact-us .app-wrapper .contact-header .contact-us i {
  font-size: 1.9rem;
}
#contact-us .app-wrapper .contact-header .contact-us .form-header {
  background-color: #d7e0e8;
  padding: 1.88rem;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
}
#contact-us .app-wrapper .contact-header .contact-us .form-header i {
  font-size: 3.5rem;
  vertical-align: middle;
  margin-right: 1rem;
}
#contact-us .app-wrapper .contact-sidenav .contact-left {
  margin-top: 2rem;
}
#contact-us .app-wrapper .contact-sidenav .sidenav-trigger {
  position: absolute;
  top: 6.5rem;
  left: 1rem;
}
#contact-us .app-wrapper .contact-sidenav .line-height {
  line-height: 1.6rem !important;
}
#contact-us .app-wrapper .contact-sidenav hr {
  border: 0;
  border-top: 1px solid #cfd8dc;
}
#contact-us .app-wrapper .contact-sidenav textarea.materialize-textarea {
  height: 12rem;
}
#contact-us .app-wrapper .contact-sidenav .contact-form {
  box-shadow: -3px 0px 10px 0px #eceff1;
  background-color: #fff;
  padding: 3rem;
}
#contact-us .app-wrapper .contact-sidenav .contact-form .btn {
  float: right;
}
#contact-us .app-wrapper .contact-sidenav .contact-form .input-field {
  overflow: visible !important;
}
#contact-us .app-wrapper .contact-sidenav .contact-form .input-field input,
#contact-us .app-wrapper .contact-sidenav .contact-form .input-field textarea {
  background-color: #eceff1;
  margin-top: 0.4rem;
  border: none;
  border-radius: 0.3rem;
  padding-left: 1rem;
}
#contact-us .app-wrapper .contact-sidenav .contact-form .input-field label {
  margin-left: 1rem;
  width: auto;
}
#contact-us .app-wrapper .contact-sidenav .contact-form .input-field label .active {
  color: #eceff1 !important;
}

.horizontal-layout #main .row .content-wrapper-before {
  top: 128px;
}

.page-header-dark #contact-us .contact-us .sidebar-title,
.page-header-dark #contact-us .contact-us .sidebar-title h5 {
  color: #fff;
}
.page-header-dark #contact-us .contact-sidenav .sidebar .sidenav-trigger i.material-icons {
  color: #fff;
}

@media (min-width: 993px) {
  #contact-us .app-sidebar {
    transform: none !important;
  }
}
@media (max-width: 998px) {
  #contact-us .app-wrapper .contact-header {
    margin-top: 1.3rem;
  }
  #contact-us .app-wrapper .contact-header h5 {
    margin-left: 2rem !important;
    margin-bottom: 1rem !important;
  }
  #contact-us .app-wrapper .contact-header i {
    margin-top: 0.1rem;
  }
}
@media (max-width: 600px) {
  #contact-us .sidenav-trigger.hide-on-large-only i.material-icons {
    position: relative;
    top: -0.5rem;
  }
  #contact-us .app-wrapper .contact-sidenav .sidenav-trigger {
    top: 6rem;
  }
}