/* @font-face {
  font-family:'DINNext';
  src:url('/fonts/DINNextLTPro-Light.woff') format('woff'), url('/fonts/DINNextLTPro-Light.ttf') format('truetype');
} */
@font-face {
  font-family: 'robotolight';
  src: url('/fonts/Roboto-Light-webfont.woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'robotomedium';
  src: url('/fonts/Roboto-Medium-webfont.woff');
  font-weight: normal;
  font-style: normal;
}


body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  /* font-family:'DINNextLTPro-Light', 'Open Sans', Helvetica, Arial, sans-serif !important; */
  font-family:'robotolight', 'Open Sans', Helvetica, Arial, sans-serif !important;
  color:#4f4f4f; 
  font-weight: normal;
}

h5, h2 {
  color: #00a9c5 !important;
  font-size: 28px;
  font-weight: normal;
  margin-bottom: 10px; text-rendering: optimizeLegibility;
}

.panel h3 { 
  color: #fff; 
  font-size: 22px; 
}

h1, a, .text-info {
  color: #00a9c5 !important;
}

a:hover {
  color: #000 !important;
}

h1 {
  margin-bottom:1.3rem !important;
}

h1.mb-5 {
  margin-bottom: 1.5rem!important;
}

p, li, .textbox, * {  
  /* font-family: 'DINNextLTPro-Light', 'Open Sans', Helvetica, Arial, sans-serif;  */
  font-family: 'robotolight', 'Open Sans', Helvetica, Arial, sans-serif; 
  font-size: 16px;
  line-height: 1.5; 
  color:#808080;
  text-rendering: optimizeLegibility; 
}

.textbox { 
  background-color:lightgray;
  text-align: left;
  padding: 10px 15px 15px 15px;
}

main li {
  margin-bottom: 15px; 
}

main ul {  
  padding-left: 20px;
}

.small li {
  font-size: 95%;
}

#app {
  background-color:#fff;
}

.navbar {
  border-bottom: none;
}

.btn {
  border-radius:0!important; 
  min-width: 100px;
}

.btn-primary {
  color: #fff;
  background-color: #469eb2;
  border-color: #00a9c5;
  /* font-family: 'DINNextLTPro-Light', 'Open Sans', Helvetica, Arial, sans-serif; */
  font-family: 'robotolight', 'Open Sans', Helvetica, Arial, sans-serif;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #c5c5c5;
    border-color: #c5c5c5;
}

.btn-primary:hover, .btn-primary:visited {
    background-color: #75b6c6;
    border-color: #75b6c6;
}

.btn.text-info { 
  padding: .3rem 3rem; 
  font-size: 18px; 
  font-weight: 400;
  border-radius: 0 !important;
}

.btn.text-info:hover {
  background-color:#d1e7eb!important;
}

.card {
  -moz-box-shadow: 0px 3px 11px 0 rgba(0,0,0,0.08);
  -webkit-box-shadow: 0px 3px 11px 0 rgba(0,0,0,0.08);
  box-shadow: 0px 3px 11px 0 rgba(0,0,0,0.08);
  border-radius: 0 !important;
  border: none !important;
}

.card-title {
  font-size: 32px !important;
}

.form-control {
  font-size: 1rem!important; 
  border-radius:0 !important; 
  color:#808080 !important
}

.card-body.p-5 {
  padding: 1.5rem 2.75rem 2.75rem !important;
}

footer {
  font-family: 'robotolight', 'Open Sans', Helvetica, Arial, sans-serif;
  text-align: center;
  font-weight: normal;
  min-height: 3.2rem;
  height: max-content !important;
}

footer a {
  font-weight: normal; 
  color:#fff !important
}

.informationmanagmentview {
  max-width: 1100px;
  margin: 54px auto;
}

.informationmanagmentview .card-header:first-child {
  background-color: #d9d6d5;
}

.modal-header {
  background-color: #fcfbfb!important;
  border-bottom: none !important;
}

.modal-header, .modal-body, .modal-footer {
  padding: 1rem 2rem;
}

.modal-footer {
  border-bottom: none !important;
  border-top: none!important; 
  padding: 1rem
}

.dns, .usage {
  background-color: #fcfbfb!important;
  padding: 15px 22px!important;
}

.nav-tabs .nav-link:hover {  
  background-color: #75b6c6!important;
  color:#555 !important;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:active {
   color:#443d38; 
   background-color: #fff!important;
}

.nav-tabs .nav-link {
    border: none;
    padding:12px 0;
    color:#443d38;
}

#categoryUsage .tabular-grid .sticky-top{
  background-color: #d1e7eb;
  color: #000;
}

.tabular-grid .d-sm-table-cell {
  border-bottom: 1px solid #eee;
  border-right: none;
}

 .card-body .header {
    height: 48px!important;
    line-height: 47px!important;
    font-size: 24px !important;
    font-weight:normal !important;
    background-color: #75b6c6 !important;
}

.table-sm td, .table-sm th { 
  padding: .4rem .4rem .4rem .8rem;
}

/* .table-striped tbody tr:nth-of-type(odd) {
  background-color: #fff !important;
} */

.table thead th {
  border: none !important;
  color: #525151!important;
}

.table_header {
    background-color: #d1e7eb !important;
    color: #000 !important;
    border: 1px solid #d1e7eb!important;
}

.profileview h1 {
  text-align:center
}

/* header section on home and about page */
.panel {
  min-height:400px;
  background-size: cover !important; 
  background-repeat: no-repeat; 
  background-position:center center; 
  overflow:hidden;
  background: #2f99b8; /* Old browsers */
  background: -moz-linear-gradient(top,  #2f99b8 0%, #286171 100%, #286171 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #2f99b8 0%,#286171 100%,#286171 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #2f99b8 0%,#286171 100%,#286171 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f99b8', endColorstr='#286171',GradientType=0 ); /* IE6-9 */
}

.mw-1100 {
  max-width:1100px
}

/*** 404 page***/
.block-404 {
  position: absolute;
  width: 100%;
  top: 25%;
}
.block-404 h1 {
  font-size: 150px;
}

@media (min-width:768px) {
  .panel.homePanel {
    background-image:url(../images/hero1.jpg);
  }
  .panel.aboutPanel {
    background-image:url(../images/hero2.jpg);
  }
  h5, h2 {
    font-size: 36px;
  }    
  .panel h3 { 
    color: #fff; 
    font-size: 27px; 
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
  .panel.homePanel {
    background-image:url(../images/hero1@2x.jpg);
  }
  .panel.aboutPanel {
    background-image:url(../images/hero2@2x.jpg);
  }
}