@charset "UTF-8";

body {
    background-color: #22272a;
    color: #E4E7EA;
    font-family:  "Segoe UI", "Helvetica Neue", "Helvetica", Arial, "Noto Sans", sans-serif;
    font-size: 0.95rem;
    margin:0;
  }

  a {
    color: #4d94ff;
    text-decoration-style: none;
    text-decoration: none;
  }

  a:hover {
    color: #E4E7EA;
  }

  .link_white a {
    color: #E4E7EA;
    text-decoration-style: none;
    text-decoration: none;
  }

  .link_white a:hover {
    color: #66747f;
  }

h1, h2, h3, h4 {
  color: #20a8d8;
}

#breadcrumb {
    padding: 10px 10px 10px 25px;
    color: #E4E7EA;
    background-color: #3B4349;
    border-bottom: #1a1a1a solid 1px;
    margin:0px;
    margin-top: 52px;
}

#breadcrumb a {
  margin-right:15px;
  color: #E4E7EA;
}

#breadcrumb a:hover {
  color: #20a8d8;
}


#breadcrumb span {
  margin-right:15px;
}

.main {
    background-color: #3A4149;
    margin:30px;
    padding: 20px;
    padding-top: 5px;
    border-radius: 6px 6px 10px 10px;
    border: #1a1a1a solid 1px;
    box-sizing: border-box;
}

.row:after {
  content: "";
  display: table;
  clear: both;
  box-sizing: border-box;
}

.display_box {
  margin-right:30px;
  margin-left:30px;
  box-sizing: border-box;
  /* for testing enable background-color: #8c8c8c; */
}

.display_box_first {
  float: left;
  background-color: #20a8d8;
  border-radius: 6px 6px 10px 10px;
  border: #1b89b1 solid 1px;
  width: 22.8%;
  color: white;
  box-sizing: border-box;
  margin: 25px 15px 0px 0px;
  padding: 10px;
}


.display_box_secound {
  float: left;
  background-color: #4dbd74;
  border-radius: 6px 6px 10px 10px;
  border: #297042 solid 1px;
  width: 22.8%;
  color: white;
  box-sizing: border-box;
  margin: 25px 15px 0px 15px;
  padding: 10px;
}

.display_box_third {
  float: left;
  background-color: #f86c6b;
  border-radius: 6px 6px 10px 10px;
  border: #aa0808 solid 1px;
  width: 22.8%;
  color: white;
  box-sizing: border-box;
  margin: 25px 15px 0px 15px;
  padding: 10px;
}

.display_box_fourth {
  float: left;
  background-color: #ffc107;
  border-radius: 6px 6px 10px 10px;
  border: #b38600 solid 1px;
  width: 22.8%;
  color: white;
  box-sizing: border-box;
  margin: 25px 0px 0px 15px;
  padding: 10px;
}


    /* START NAV menu */
 

    .topnav {
      color: #E4E7EA;
      background-color: #3B4349;
      border-bottom: #1a1a1a solid 1px;
      position: fixed;
      top: 0;
      width: 100%;
    }
    
    .topnav a {
      color: #E4E7EA;
      float: left;
      display: block;
      padding: 16px; 
      text-decoration: none;
      text-decoration-style: none;
    }
    
    .topnav .icon {
      display: none;
    }

    .topnav_right img {
      border: 0px;
      padding-top: 8px;
      padding-right: 10px;
      float: right;
    }
    
    .topnav_right a {
      float: right;
      color: #E4E7EA;
    }
    
    .topnav .icon {
      display: none;
    }
    
    .dropdown {
      float: left;
      overflow: hidden;
      color: #E4E7EA;
    }
    
    .dropdown .dropbtn { 
      border: none;
      outline: none;
      color: #E4E7EA;
      padding: 16px; 
      background-color: #394147; 
      font-family: inherit;
      font-size: inherit;
      margin: 0;
    }
    
    .dropdown-content {
      color: #E4E7EA;
      display: none;
      position: absolute;
      background-color: #394147;
      min-width: 120px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      border: #1a1a1a solid 1px;
      border-radius: 6px 6px 10px 10px;
    }
    
    .dropdown-content a {
      float: none;
      color: #E4E7EA;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      
    }
    
    .topnav a:hover, .dropdown:hover .dropbtn{
      text-shadow: 3px 3px 4px #000;
      color: #20a8d8;
    }

    .dropdown-content a:hover  {
      background-color: #2d3439; 
      color: #20a8d8;
      border-radius: 6px 6px 10px 10px;
    }

    
    .dropdown:hover .dropdown-content {
      display: block;
      color: #20a8d8;
    }
    
    /* END NAV menu */


/* Start sliding nav */

.sidenav {
  height: 220px;
  width: 0px;
  position: fixed;
  z-index: 1;
  top: 30;
  left: 0;
  background-color: #3A4149;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 50px;
  border-radius: 0px 6px 10px 10px;
  border: #1a1a1a solid 1px;
}

.sidenav a {
  padding: 5px 8px 8px 15px;
  text-decoration: none;
  color: #E4E7EA;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #20a8d8;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 5px;
  font-size: 30px;
  margin-left: 0px;
}
/* End sliding nav */


/**** ####################  Media 1095 ################### **/
@media screen and (max-width: 1095px) {

  .display_box_first {
    width: 23.5%;
    margin: 15px 15px 0px 0px;
  }

  .display_box_secound {
    width: 23.5%;
    margin: 15px 15px 0px 0px;
  }
  
  .display_box_third {
    width: 23.5%;
    margin: 15px 15px 0px 0px;
  }
  
  .display_box_fourth {
    width: 23.5%;
    margin: 15px 0px 0px 0px;
  }

} /**** #################### END  Media 1095 ################### **/ 

/**** ####################  Media 825px ################### **/
@media screen and (max-width: 825px) {

  .display_box_first {
    width: 23%;
    margin: 15px 15px 0px 0px;
  }

  .display_box_secound {
    width: 23%;
    margin: 15px 15px 0px 0px;
  }
  
  .display_box_third {
    width: 23%;
    margin: 15px 15px 0px 0px;
  }
  
  .display_box_fourth {
    width: 23%;
    margin: 15px 0px 0px 0px;
  }

} /**** #################### END  Media 825px ################### **/ 

/**** ####################  Media 620px ################### **/
@media screen and (max-width: 620px) {

    .main {
        background-color: #3A4149;
        margin:10px;
        padding: 10px;
        border-radius: 6px 6px 10px 10px;
        border: #1a1a1a solid 1px;
    }

    .display_box {
      margin-right:10px;
      margin-left:10px;
    }

    #breadcrumb {
        padding: 5px;
        color: #E4E7EA;
        background-color: #3B4349;
        border-bottom: #1a1a1a solid 1px;
        margin:0px;
        font-size: 85%;
        margin-top: 52px;
    }
    
    #breadcrumb a {
      margin-right:5px;
    }
    
    #breadcrumb span {
      margin-right:5px;
    }


    .display_box_first {
      width: 48%;
      margin: 15px 15px 0px 0px;
    }

    .display_box_secound {
      width: 48%;
      margin: 15px 0px 0px 0px;
    }
    
    .display_box_third {
      width: 48%;
      margin: 15px 15px 0px 0px;
    }
    
    .display_box_fourth {
      width: 48%;
      margin: 15px 0px 0px 0px;
    }

    /* Start nav media 600 */
      .topnav a:not(:nth-of-type(-n+2)), .dropdown .dropbtn {
        display: none;
        padding: 8px 8px;
      }
      .topnav a.icon {
        float: right;
        display: block;
      }

      .topnav_right {
        display: none;
      }
    
      .topnav.responsive {position: relative;}
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
      .topnav.responsive .dropdown {float: none;}
      .topnav.responsive .dropdown-content {position: relative;}
      .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
      }

      .dropdown-content a {
        padding: 8px 8px;
      
      }
      /* End nav media 600 */

  /* Start sliding nav media 620 */
  .sidenav {padding-top: 15px;}

} /*********************** ################################ End sliding nav media 600 */


/**** ####################  Media 400px ################### **/
@media screen and (max-width: 400px) {

  .display_box_first {
    width: 99%;
    margin: 15px 15px 0px 0px;
  }

  .display_box_secound {
    width: 99%;
    margin: 15px 0px 0px 0px;
  }
  
  .display_box_third {
    width: 99%;
    margin: 15px 15px 0px 0px;
  }
  
  .display_box_fourth {
    width: 99%;
    margin: 15px 0px 0px 0px;
  }

} /**** #################### END  Media 400px ################### **/

  .size_85_percent {
    font-size: 85%;
  }

  .size_75_percent {
    font-size: 75%;
  }

  .size_65_percent {
    font-size: 65%;
  }

  .size_110_percent {
    font-size: 110%;
    font-weight: bold;
  }

.text-red {
  color: #f63c3c;
}

.text-blue {
  color: #20a8d8;
}

.text-green {
  color: #4dbd74;
}


.text-yellow {
  color: #ffc107;
}


.text-link {
  color: #4d94ff;
}

.text-grey {
  color: #3B4349;
}

.text-dark-grey {
  color: #22272a;
}

#nav_line  {
  background-color: #20a8d8;
  width: 100% ;
  padding-bottom: 0px;
  border-bottom: 1px solid #20a8d8;
  }