body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0px 200px 0px 200px; /* Adjusted margin to give 0px top, 200px left/right, 0 bottom */
    line-height: 0.9;
    text-align: left;
    
    /*Styles for background image start*/
             /* Set the background image */
             background-image: url('../img/bg.jpg');
            
            /* Ensure the background covers the entire page */
            background-size: cover;
            
            /* Center the background */
            background-position: center;
            
            /* Prevent background from repeating */
            background-repeat: no-repeat;
            
            /* Set a fixed background so it doesn't scroll */
            background-attachment: fixed;
            
            /* Optional: Add a slight overlay to make text more readable */
            background-color: rgba(0, 0, 0, 0.1); /* Dark overlay */
            background-blend-mode: overlay;
    /*Styles for background image end*/
}

/*====================================
Clear default margin and padding
=====================================*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*a {
    color: #5a3791;
    text-decoration: none;
}*/


/*====================================
CSS for topnavigtion start
=====================================*/
.topnav {
    overflow: hidden;
    background-color: #f0f0f0;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 11px 13px;
    text-decoration: none;
    font-size: 15px;
  }
  
  .topnav a:hover {
    background-color:#d9d9d9;
     color: black;
  }
  
  
  .topnav a.active {
    background-color:#5a3791;
    color: white;
  }

  
 /* Prevent hover effect when the item is active */
 .topnavactive:hover {
    background-color: #5a3791; /* Retain the active background color */
    color: white;              /* Retain the active text color */
}
  
  .topnav .icon {
    display: none;
  }

  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
/*====================================
CSS for topnavigtion end
=====================================*/

/*====================================
CSS for for share icons start
=====================================*/
.social-icons {
    text-align: right;
    margin-bottom: 20px;
  }

  .social-icons a {
    margin: 0 10px;
    text-decoration: none;
  }

  .social-icons img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
/*====================================
CSS for for share icons end
=====================================*/

/*CSS for header,footer, sidebar and main content start */
        header {
            background-color: white;
            text-align: center;
            padding: 0.5rem;
        }

        header {
            flex-shrink: 0;
        }

        footer {
            flex-shrink: 0;
            margin-top: auto;
            background-color: #f0f0f0; 
            color: white;
            text-align: center;
            padding: 0.5rem;
        }

        .container {
            display: flex;
            flex-grow: 1;
            margin-top: 20px;
        }

        .sidebar {
            background-color: #f0f0f0;
            padding: 1rem;
            flex-shrink: 0;
            font-size: 15px;
            text-align: left;
            
        }

        .left {
            width: 25%;
        }

        .right {
            width: 25%;
        }

        .content {
            padding: 1rem;
            width: 50%;
            flex-grow: 1;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            /*margin: 0px 10px 10px 10px;*/
        }

        .nav-list {
            list-style-type: none;
            padding: 0;
        }
        .nav-list a {
            text-decoration: none;
            color: black;
        }

        .nav-item {
            padding: 10px;
            cursor: pointer;
        }

        
        .nav-item.active {
            background-color: #5a3791;
            color: white;
        }
        .nav-item:hover
         {
            background-color:#d9d9d9;
            color: black;
        }
        /* Prevent hover effect when the item is active */
        .nav-item.active:hover {
            background-color: #5a3791; /* Retain the active background color */
            color: white;              /* Retain the active text color */
        }

        .footer-links {
            margin-top: 1rem;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        .footer-links a {
            color: black;
            text-decoration: none;
            padding: 0.5rem 1rem;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        /* Responsive Design */
        @media (max-width: 1100px) {  /*768 */
            body {
                margin: 0; /* Remove margin on small screens */
            }

            .container {
                flex-direction: column;
            }

            .left, .right, .content {
                width: 100%;
            }

            .sidebar {
                order: 1;
            }

            .content {
                order: 0;
            }

            .footer-links {
                justify-content: center;
                flex-wrap: nowrap;
            }

            .footer-links a {
                padding: 0.5rem;
            }
        }
/*CSS for header,footer, sidebar and main content end */
        /* CSS for search suggestions start */
        .search-container {
            text-align: left;
            width: 400px;
            position: relative;
            margin: 0 auto; /* Center the search container */
            color: black;
            margin-top: 15px;
            margin-bottom: 10px;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 20px;
            outline: none;
            text-indent: 20px; /* Space between the cursor and text */
        }
        .search-icon {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            font-size: 16px;
            color: #888;
        }
        
        input[type="text"]:focus {
            border-color: #5a3791;
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
        }

        .suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            border-radius: 4px;
            max-height: 150px;
            overflow-y: auto;
            background-color: white; /* Match input field background */
            box-sizing: border-box;
            z-index: 1000;
        }

        .suggestion-item {
            padding: 10px;
            cursor: pointer;
        }

        .suggestion-item:hover,
        .suggestion-item.active {
            background-color: #f0f0f0;
        }
        .clear-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 10px;
            display: none;
        }

        
        
        
        /* CSS for search suggestions end */ 
        
        /*CSS for main content start*/
        .container2 {
            max-width: 500px;
            margin: 30px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }
        .container2 label{
            margin-bottom: 10px;
            font-size: 15px;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 25px;
            line-height:1.5;
        }
        h3{
            margin-bottom: 25px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: bold;
        }

        input[type="number"], input[type="date"], textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            outline: none;
            font-size: 15px;
        }
        
        input[type="number"]:focus, input[type="date"]:focus, textarea:focus {
            border-color: #5a3791;
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
        }

        textarea {
            width: 100%;
            height: 100px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
          }

        button {
            width: 100%;
            padding: 10px;
            background-color: #5a3791;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color:#5a3791;
        }


        select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            outline: none;
        }
        
        select:focus {
            border-color: #5a3791;
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
        }

        

        .result {
            margin-top: 20px;
            font-size: 18px;
            text-align: center;
            color: #5a3791;;
            font-weight:bold
        }
        .steps {
            margin-top: 20px;
            font-size: 16px;
            line-height: 1.5;
            color: #5a3791;;
          }
        /*Media query start*/
        @media screen and (max-width: 768px) {
            
                h1 { font-size: 120%; }
                h2 { font-size: 110%; }
                h3 { font-size: 100%; }
                h4 { font-size: 90%; }
                .search-container {
                width: 300px;
            }
        }
            /*Media query end*/
        /*CSS for main content end*/
        
    
        
 /*====================================================
 css for all tables in container2 (result table) start
=======================================================*/

.container2 table {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 25px;
    font-size: 16px;
    table-layout: fixed; /* Ensures better control over table width */
    word-wrap: break-word; /* Ensures long words break and don't overflow */
}

.container2 table td, .container2 table th {
    border: 1px solid #ddd;  
    text-align: center;
    padding: 10px; /* Add padding for better spacing */
}

.container2 table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.container2 table tr:hover {
    background-color: #ddd;
}

.container2 table th {
    text-align: center;
    background-color: #5a3791;
    color: white;
}

/* Make the table scrollable on smaller screens */
@media screen and (max-width: 768px) {
    .container2 table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .container2 table td, .container2 table th {
        white-space: nowrap; /* Prevents text wrapping inside table cells */
    }
}

/* Adjust styles for very small screens */
@media screen and (max-width: 480px) {
    .container2 table {
        font-size: 12px; /* Reduce the font size for small screens */
        margin: 0 10px; /* Adjust margin for smaller screens */
    }

    .container2 table td, .container2 table th {
        padding: 8px; /* Reduce padding for small screens */
    }
}



 /*====================================================
 css for all tables in container2 (result table) start
=======================================================*/
        


        
 /*====================================
General css for all tables start
=====================================*/
table:not(.container2) {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 25px;
}

table:not(.container2) td, table:not(.container2) th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

table:not(.container2) tr:nth-child(even) {
    background-color: #f9f9f9;
}

table:not(.container2) tr:hover {
    background-color: #f1f1f1;
}

table:not(.container2) th {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #5a3791;
    color: white;
}
 /*====================================
General css for all tables end
=====================================*/


code {
    background: #f4f4f4;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 15px;
}
.result{
    padding: 10px;
    line-height:2;
}

.logotext{
    text-align:center;
    margin-top:15px;
    font-weight:bold;
    font-size:25px;
    color:#5a3791;
}
/*================================================
Style for the last updated date start
==================================================*/
.author-details {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: right;
    color:#D3D3D3;
    font-size: 14px;
}

/* Media Queries for responsiveness */
@media (max-width: 768px) {
    .author-details{
        font-size: 13px;
    }
}
/*================================================
Style for the last updated date end
==================================================*/


/*====================================
CSS for article explanation start (old css)
=====================================*/
.explanation li {
    margin: 15px;
    line-height:1.8;
}
.explanation p,h2 {
    margin-bottom:20px;
    line-height:1.8;
}
.explanation h2 {
    margin-bottom:20px;
    line-height:1.3;
}
.example {
    background-color: #f9f9f9;
    padding: 20px;
    border-left: 5px solid #5a3791;
    margin-bottom: 25px;
    line-height:1.8;
}
/*====================================
CSS for article explanation end (old css)
=====================================*/

/*=========================================
CSS for article in main page start (new css)
===========================================*/

/* Section Boxes */
.box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
    padding: 2rem;
}

.box h2 {
    margin-bottom: 1rem;
    color: #333;
    border-bottom: 2px solid #4a2e74;
    padding-bottom: 1rem;
}

.box h3 {
    margin-bottom: 1rem;
    color: #333;
    font-size: 1.2rem;
    border-bottom: 2px solid #4a2e74;
    padding-bottom: 1rem;
    line-height: 1.5; 
}

.box p {
    font-size: 1rem;
}

/*=========================================
CSS for article in main page end (new css)
===========================================*/