/* @font-face {
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/avenirltstd-light.otf) format('otf');
}

@font-face {font-family: "Avenir Book"; src: url("//db.onlinewebfonts.com/t/331ec49c0d78e469c42c1d814dd45838.eot"); src: url("//db.onlinewebfonts.com/t/331ec49c0d78e469c42c1d814dd45838.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/331ec49c0d78e469c42c1d814dd45838.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/331ec49c0d78e469c42c1d814dd45838.woff") format("woff"), url("//db.onlinewebfonts.com/t/331ec49c0d78e469c42c1d814dd45838.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/331ec49c0d78e469c42c1d814dd45838.svg#Avenir Book") format("svg"); } */

html, body {
     margin:0px;
     /* font-family:  "Roboto", "RobotoFallback", "Helvetica", "Arial", sans-serif; */
     /* font-family: "Avenir","Helvetica", "Arial", sans-serif; */
     /* font-family: "Avenir Book"; */
     font-family: "Verdana";
    font-size: 14px;
    color:#000;
    background-color: white; 
    height: calc(100vh - 50px);
    touch-action: auto;
  }


.dx-widget {
    /* font-family: "Avenir","Helvetica", "Arial", sans-serif; */
    /* font-family: "Avenir Book"; */
    font-family: "Verdana";
  }
  
  .dx-widget input, .dx-widget textarea {
     /* font-family: "Avenir","Helvetica", "Arial", sans-serif; */
     /* font-family: "Avenir Book"; */
     font-family: "Verdana";
  } 
  
  .dx-theme-material-typography {
    /* font-family: "Avenir","Helvetica", "Arial", sans-serif; */
    /* font-family: "Avenir Book"; */
    font-family: "Verdana";
  }

  .dx-toolbar {    
    /* border-left: 5px solid #0080ff;*/
    border-top: 1px solid #000;
    border-bottom: 1px solid #000; 
    padding-right: 10px;
}

  .dx-toolbar .dx-toolbar-items-container {
    height: 42px !important;
  }
    
  .toolbar-label,
  .toolbar-label>b {
    font-size: 14px;
  }
  
  .custom-icon .icon {
    font-size: 17px;
    margin-right: 2px;
    color: #0080ff;
  }
  
  .dx-list-group-header {
    margin-left: -10px;
  }
  
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
     background-color: #0080ff;
    color: #fff;
  }
  
  .footerSmall {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #0080ff;
    color: #fff;
    display: none;
  }

  
  .header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
    background-color: white; 
  }
  
  .headerTitle{
    font-weight: bold;
    color:#0080ff;
    padding: 5px;
    font-size: 22px;
  }

  #page   {
    margin-top: 160px;
    border: 1px solid #000;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 60px;
    padding: 5px;
  }
  
  #listingGrid {
    /* margin-top: 160px;
    border: 1px solid #000; */
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 60px;
    padding: 5px;
  }
  

  .pageTitle{
    font-weight: bold;
    padding: 5px;
    /* font-size: 22px; */
    z-index: 9;
    color: #fff; 
    text-align: center;
    border: 1px solid #000;
    margin-top: -22px;
    background-color: #0080ff;
    margin-left: 10%;
    width: 80%;
    /* font-size: 16px; */
  }
  
  h1 {
    color: #0080ff;
    font-weight: bold;
    font-size: 16px;
  }
  
  h2 {
    color: #000;
    font-weight: bold;
    font-size: 14px;
  }
  
  h3 {
    color: #000;
    font-weight: bold;
    font-size: 12px;
  }
  .imgLeft{
    float:left;
    border: 1px solid #000;
    margin: 15px;
  }

  .imgRight{
    float:right;
    border: 1px solid #000;
    margin: 15px;
  }

  .imgFigure{
    max-width: 500px;
    border: 1px solid #000;
  }

    
  /* For mobile devices */
  @media only screen and (max-width: 767px) {
      
    .footer{
      display:none;
    }
    .footerSmall {
      display:block;
    }
    .imgFigure{
      max-width: 100%;
      border: 1px solid #000;
    }
  } 


  .image-blurred-edge {
    background-image: url(../img/maths.jpg);
    width: 180px;
    height: 180px;
    box-shadow: 0 0 8px 8px white inset;
    float: right;
}

.dx-form-group-caption {
  color: #0080ff;
}

.dx-field-item-label-text {
  color: black;
}

.dx-field-item-help-text {
  color:red;
}

.listingLink{
  color: #0080ff;
  text-decoration: underline;
}

.wizardHeading {
  color: #0080ff;
  font-weight: bold;
}

.answerHeading{
  font-weight: bolder;
}