/* General Reset */

:root {
  --primary: #000080;
  --clear: #ffffff;
  --secondary: black;
  --accent: darkgray;
  --text-primary: black;
  --text-secondary: white;
  --Border-color:darkgray;
  
}


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
   color: var(--text-primary);

  }

 .icn {
    height: 20px;
}

.searchbar {
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.searchbar input {
    width: 250px;
    height: 20px;
    border-radius: 50px 0 0 50px;
    background-color: var(--clear);
    padding: 0 20px;
    font-size: 15px;
    outline: none;
    border: none;
}

.searchbtn {
    width: 50px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px 50px 50px 0px;
    background-color: var(--secondary-color);
    cursor: pointer;
}

.dp {
    height: 40px;
    width: 40px;
    background-color: #626262;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


.dpicn {
    height: 42px;
}




  body {

    font-family: Arial, sans-serif;
  

  }
  
      #display_table {
      font-family: Arial, Helvetica, sans-serif;
      border-collapse: none;
      width: 100%;
      background-color: white;
      color:black;
      font-size:14px;
      word-break: break-all;

    }

    #display_table td, #display_table th {
      border: 0px solid #ddd;
      padding: 3px;
    }



    #display_table tr:nth-child(even){background-color: #ddd;}

    #display_table tr:hover {background-color: gray;}

    #display_table th {
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: left;
      background-color: #380D59;
      color: white;
    }

 

  .navbar {

     position: fixed;

    z-index: 999;

    width: 100%;
   
    border-bottom: 1px solid black;

    display: flex;

    justify-content: space-between;

    align-items: center;
    
    padding: 10px 20px;

    background-color: var(--primary);

    color: var(--primary);


  }






 .nav-img {
    height: 25px;
    background-color: transparent;
}

.nav-text{
  display: none;
}

  .logo {

    font-size: 1.5em;

    font-weight: bold;

    display: none;
    
    color: var(--text-primary);

  }

 

  .nav-links {

    list-style: none;

    display: none;

    gap: 20px;

  }


 

  .nav-links li a {

    color: var(--text-primary);

    text-decoration: none;

    font-size: 1.1em;

    transition: color 0.3s;
    margin: 0px;

  }

 

  .nav-links li a:hover {

    color: var(--text-secondary);
    

  }



  /* Burger Icon */

  .menu-icon {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 5px;

  }

 

  .menu-icon span {

    width: 25px;

    height: 3px;

    background-color: white;

    transition: transform 0.3s, opacity 0.3s;

  }

 

 .main-body{
  padding: 10px;
  display: grid;
  column-gap: 10px;
  grid-template-columns: 1fr;
  top: 0px;
  padding-top: 50px;
  position: relative;
   
 }

 .left-nav {
  top: 0px;
  padding-top: 50px;
  float: left;
  position: relative;
 
  display: none;

 }

 .main-nav {
   padding-top: 50px;
 }

 .threebar {
     margin-right:10px;

 }
 
 hr{
    margin-bottom: 2px;
}

 .threebar:hover .bar{ 
  background-color: var(--clear);
  color: var(--secondary);

}

.bar {
  width: 25px;
  height: 2px;
  background-color: var(--clear);
}
 
 .dropdown{
    color: var(--clear);
 }

 .drop-button{
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: white;
    border: none;
    padding: 10px;
    text-align: left;
    padding-left: 10px;
    width: 100%;
    font-size: 16px;
    color: var(--text-primary);
 }

 .drop-button img {
  margin: auto;
 }

 .drop-button p {
   padding: 5px;
   color: var(--text-color1);
   
 }

 .drop-button hover p {
  display: block;
  color: black;
   
 }

 .dropdown:hover .dropdown-content {
   opacity: 0.8;
   color: var(--text-primary);
   display: block;
   background-color: var(--clear);

 }



.dropdown-content {
  display: none;
  width: auto;
  position:relative ;
  margin-left:30px ;
 }

 .dropdown-content ul li  {
   padding: 5px 15px;  

 }

 .dropdown-content li:hover  {
   background-color: var(--primary);
   color: var(--clear);
   display: block;

 }


 .section{
  padding: 10px;
  min-height: 300px;
 }

 .sections{
  text-align: center;
  padding: 10px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
 }

 .showElement{
  display: block;
 }

.hideElement{
  display: none;
 
}
.showElement{
  display: block;
  position: absolute;
  margin-top: 45px;
 
}


/*info box */

.box {
    height: 130px;
    width: 100%;
    border-radius: 20px;
    box-shadow: 3px 3px 10px rgba(0, 30, 87, 0.751);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    color: var(--text-secondary);
}

.box:hover {
    transform: scale(1.08);
}

.box:nth-child(1) {
    background-color: var(--one-use-color);
}

.box:nth-child(2) {
    background-color: var(--two-use-color);
}

.box:nth-child(3) {
    background-color: var(--one-use-color);
}

.box:nth-child(4) {
    background-color: var(--two-use-color);
}

.box img {
    height: 50px;
}

.box .text {
    color: white;
}

.topic {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}

.topic-heading {
    font-size: 30px;
    letter-spacing: 3px;
}
/*---------------------------------*/


.cards {
 display: grid;
 grid-template-columns: 1fr ;
 margin-bottom: 10px;
 grid-gap: 10px;
}

.card {
  border-radius: 20px;
   margin-top: 20px ;
  padding: 10px;
  text-align: center;
  border: 1px solid var(--Border-color);
  position: relative;

 

}

.card-header { 
  width: inherit;
  border-bottom: 1px solid var(--Border-color);
  padding: 10px;
}

.card-body {
    width: inherit;
    min-height: 200px;
}

.card-footer {
  border-top: 1px dashed var(--Border-color);
}





/* The Modal (background) */
.modal {
    margin-top: 20px ;
  display: none; /* Hidden by default */
  z-index: 100; /* Sit on top */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding: 0px;
  position: fixed;
  left: 50%;
  top:50%;
  margin-right: auto;
  transform: translate(-50%, -50%);
   /* Styling for visibility */
    width: 100%;
    max-width: 420px;
    padding: 20px;
    background-color: #ffffff;
    border: 2px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}



/* Modal Content/Box */
.modal-content {
 display: grid;
  background-color: #fefefe;
  padding: 10px;
  width: 100%; /* Could be more or less, depending on screen size */
}



.modal-content input,select{
    
    padding:7px ;
    background-color: var(--clear);
    margin: 5px;
    border-radius : 5px ;
    border-color: solid var(--Border-color);
    width: 100%;
}

button{
    background-color: var(--primary);
    color: var(--clear);
    margin: auto;
    padding: 5px;
    border-radius: 10px;
}

.modal-content select{
   
    margin-top:10px;
 
}

.modal-content label{
    padding: 5px;
    background-color: var(--clear);
    margin: 5px;
    border: none;
    width: 100%;
}




 /*tablet*/

  @media  screen and (min-width: 768px) {
    .logo,.nav-text { display: block; }
    .left-nav{ display: block; }
    .threebar{display: none;}
    .nav-links{display: flex;}
    .main-body{
      grid-template-columns: 3fr 7fr;
    }
    .cards{
      grid-template-columns: auto auto;
    }

    
  }

   /*large screen*/

  @media  screen and (min-width: 992px) {
    .left-nav{ display: block;grid-template-columns: auto; }
    .logo,.nav-text { display: block; }
    .threebar{display: none;}
    .nav-links{display: flex;}
    .main-body{
      grid-template-columns: 1fr 9fr;
    }
    .cards {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
    }
  }