html {
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  background-color: #f4f4f4;
  overflow-x: hidden;
  position: absolute; 
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 2rem;
  text-transform: uppercase;
  font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing: 1px; }

p {
  margin: 0 0 1.5rem; }
/* =======================================
    Top Bannaer
========================================== */

.content_1 h4{
  font-size: 1em;
  text-transform: none;
  font-weight: bold;
  margin: 0;
  clear: left;
  overflow: hidden;
  color: #EC5800;
}
.content_1 i{
  margin-right: 2px;
  color: #EC5800;
}
.content_1 a{
  font-size: 0.9em;
  font-weight: bold;
  padding-left: 0;
  line-height: 1.2em !important;
  padding-top: 0;
  margin: 0;
  display: inline-block;
  color: #000;
  text-decoration: none;

  
}
.content_1 li{
  font-size: 0.8em;
  margin:4px 0;

}
.content_1 li span{
  font-size: 0.7em;
  border-radius: 50px;
  padding: 5px;
 
}
.content_1 a:hover{
  color: #EC5800;
  
}
span.title{
  font-size: .9em;
  font-weight: bold;
  padding: 0;
  display: inline-block;
}
span.db_content{
  font-size: .9em;
  color: #EC5800;
  padding: 0;
}
.custom-footer{
  
   background-color:#EC5800;
  color: #ffffff;
  padding: 20px 0 10px 0;
  position: relative;

  .form-group{
    display: flex;
    @media(max-width: 575px){
      margin-bottom: .25rem;
    }
  }
}

.card-body a:hover{
    color:#EC5800;
}

.custom-bg{
 
  background-color:#FFAC1C;
  color: #000000;
  padding: 20px 0 10px 0;
  position: relative;

  .form-group{
    display: flex;
    @media(max-width: 575px){
      margin-bottom: .25rem;
    }
  }
}
header h1{
  font-size: 1em;
  margin-bottom: 10px;


}
@media(max-width: 575px){
  header h1{
    font-size: .8em;
  }
}
#search{
  float: right;
 
}
.form-group{
  margin-bottom: 10px;
}
@media(max-width: 767px){
  #search{
    float: left;
    margin-left: 0;
  }
}
/* =======================================
    Navigation
========================================== */
#main-nav{
  background-color: #001f46;
 

}
.hover-bg a:hover{
  background-color: #FFAC1C;
}



/* =======================================
    Body content
========================================== */
.content{
  display: inline-block;
  overflow: hidden;

}
.content p{
  text-transform: inherit !important;
  overflow: hidden;

}
#journal-info{
  font-size: 0.8em;
 
}
#journal-info span{
  margin: 10px 0;
}
section{
  margin-top: 20px;
}
.card{
  margin-bottom: 1rem;
  display: flex;
}
.card-body h6{
  text-transform: inherit;
  color: #03717e;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  margin:0 0 10px 0;
}
.card-body table{
  width: 100%;

}
.card-body table, th, td{
  border: 1px solid #ccc;
border-collapse: collapse;
padding: 5px;
text-align: left;
font-size: 0.9em;
color: #555;
}
.card-body ul li,hr{
  padding: 0;
  margin:0 0 8px 0;
  font-size:0.9em;
}

button.accordion{
  font-size: 1em;
  color: #034ba6;
  font-weight: bold;
  cursor: pointer;
  border: none;
  outline: none;
  width: 100%;
  text-align: left;
  margin: 4px;
  background-color: transparent;
  transition: 0.3s;

}
button.accordion:hover{
  color: #549bf5;
}

button.accordion.active{
  color: #034ba6;

  }
div.panel{
  color: #549bf5;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: 0.3s;
}
div.panel.show{
  opacity: 1;
  max-height: 500px;
}
a.custom-a{
  text-decoration-line: none;
  margin-left: 10px;
}
a.custom-a:hover{
  color: #000;
}
.card-heading{
  background-image: linear-gradient(#EC5800, #FF7518 60%, #FFAC1C);
  color: #fff;
  padding: .75rem 1rem;
  .card-title {
    margin-bottom: 0;
  }
  .card-body #journal{
    font-size: 1em;
  }
}
.content p{
  text-align: justify;
  line-height: 1.5rem;
  font-size: 1em;
  font-family: sans-serif;
}
.content a{
  text-decoration-line: none;
}

.graphics{
  margin: 20px 0;
}
article p{
  text-align: justify;
}
/* =======================================
    Footer Begining
========================================== */
article h5{
  text-transform: inherit; font-size: 1.2em; font-weight: bold;
  margin-bottom: 10px;
}
article h6{
  text-transform: inherit; font-size: 1em; font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
}
article ul li{
 list-style: inherit;
}
article ul li a{
  text-decoration-line: none;
  color: #03717e;

}
footer{
  text-align: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
footer .container{
  text-align: left;
}
footer .container h4{
  color: #fff;
  font-size: 1.2rem;
  text-transform: inherit;
}
footer .container ul{
  margin: 0;
  padding: 0;
}

footer .container ul li a{
  color: #fff;
  text-decoration: none;
}
footer .container ul li a:hover{
  color: #FFAC1C;
}
footer .container hr{
  background: #FFAC1C;
}
.copy-right{
  border: 2px solid #FFAC1C;
 
}
.copy-right p{
  margin:10px 0;
  padding: 0;
}

.heading-title{
  display: inline;
  overflow: hidden;

}
.heading-title h4{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-transform: initial;
  display: inline-block;
  
  position: relative;


}
.heading-title hr{
  border-top: 1.8px dotted #ccc;
  margin: 0;
  padding: 0;
  width: 100%;
  
}
.article-heading a{
  color: #03717e;
}
ul li .icon {
    width: 45px;
    height: 45px;
    line-height: 14px;
    text-align: center;
    border-radius: 6px;
    padding: 14px;
    margin-right: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--paraColor);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

/* The switch - the box around the slider */
.switch {
      --width: 70px;
      --height: 30px;

      position: relative;
      display: inline-block;
      width: var(--width);
      height: var(--height);
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      border-radius: var(--height);
      cursor: pointer;
      margin-bottom: -10px;
    }

    .switch input {
      display: none;
    }

    .switch .slider {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--height);
      background-color: #000;
      transition: all 0.4s ease-in-out;
    }

    .switch .slider::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: calc(var(--height));
      height: calc(var(--height));
      border-radius: calc(var(--height) / 2);
      background-color: #fff;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      transition: all 0.4s ease-in-out;
    }

    .switch input:checked+.slider {
      background-color: #2196F3;
    }

    .switch input:checked+.slider::before {
      transform: translateX(calc(var(--width) - var(--height)));
    }

    .switch .labels {
      position: absolute;
      top: 8px;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 12px;
      font-family: sans-serif;
      transition: all 0.4s ease-in-out;
    }

    .switch .labels::after {
      content: attr(data-off);
      position: absolute;
      right: 5px;
      color: #fff;
      font-weight: bold;
      opacity: 1;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
      transition: all 0.4s ease-in-out;
    }

    .switch .labels::before {
      content: attr(data-on);
      position: absolute;
      left: 5px;
      color: #ffffff;
      font-weight: bold;
      opacity: 0;
      text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
      transition: all 0.4s ease-in-out;
    }

    .switch input:checked~.labels::after {
      opacity: 0;
    }

    .switch input:checked~.labels::before {
      opacity: 1;
    }