main {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

html {
    color-scheme: light;
}
/* Hide the theme toggle button */
#navbar form .dropdown-toggle {
    display: none !important;
}

.container {
    max-width: none;
}
.container-sm {
    max-width: none;
}
.container-md {
    max-width: none;
}
.container-lg {
    max-width: none;
}
.container-xl {
    max-width: none;
}
.container-xxl {
    max-width: none;
}
/* my-template/public/main.css */
.column {
    width: calc(33.33% - 1rem); /* Adjust the width as needed */
    float: left;
    margin-right: 1rem; /* Add horizontal spacing between columns */
    margin-bottom: 3rem; /* Add vertical spacing between columns */
}

@media (width >= 1440px) {
    .box-1 {
        display: grid;
        grid-template-columns: minmax(auto, 1fr) 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 24px;
    }
    
    .box-1-image {
        grid-column: 1;   
        grid-row: 1 / span 2;     
    }

    .box-1-intro {
        grid-column: 2;
        grid-row:1;
    }
    
    .box-1-feature-list {
        grid-column: 2;
        grid-row: 2;    
    }

    .box-1-image img {    
        height: 100%;
        max-height: 300px;    
        object-fit: contain;
    }

    .box-2 {
        display: grid;
        grid-template-columns: 1fr minmax(auto, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 24px;           
    }

    .box-2-intro {
        grid-column: 1;
        grid-row:1;
    }    

    .box-2-feature-list {
        grid-column: 1;
        grid-row: 2;    
    }

    .box-2-image {
        grid-column: 2;
        grid-row: 1 / span 2;    
    }    

    .box-2-image img {    
        height: 100%;
        max-height: 300px;    
        object-fit: contain;
    }
    
}

@media (width < 1440px) {
    .box-1 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(auto, 1fr) 1fr;
        row-gap: 24px;
    }
    
    .box-1-intro {
        grid-column: 1;
        grid-row:1;
    }

    .box-1-image {
        grid-column: 1;
        grid-row: 2;   
        justify-self: center;
    }    
    
    .box-1-feature-list {
        grid-column: 1;
        grid-row: 3;    
    }

    .box-1-image img {    
        height: 100%;
        max-height: 300px;    
        object-fit: contain;
    }

    .box-2 {
        display: grid;
        grid-template-rows: auto minmax(auto, 1fr) 1fr;
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .box-2-intro {
        grid-column: 1;
        grid-row:1;
    }
    
    .box-2-image {
        grid-column: 1;
        grid-row: 2;   
        justify-self: center; 
    }

    .box-2-feature-list {
        grid-column: 1;  
        grid-row: 3;    
    }        

    .box-2-image img {    
        height: 100%;
        max-height: 300px;    
        object-fit: contain;
    }
}

.box-list li {
    margin:20px 0;
}

.box-intro-text {
    font-size: 22px;
}

.box-block {
    background-color: #f8f9fa;    
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
}

.box-feature-link {
    color: #0d6396; /* Example link color */
    font-weight: normal; /* Example font weight */
    text-decoration: underline; /* Example text decoration */
    text-align: left;
}

/* Style the flex container */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align items at the top */
    /*margin: 20px;*/
}

/* Style the flex columns */
.flex-column {    
    flex: 1;
    /* text-align: center; */
    padding: 20px;
    min-height: 340px;    
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
    margin-right: 40px;
    margin-bottom: 20px;
}
    

.custom-link {
    color: #062D59;
    font-weight: bold;
    font-size: large;
    text-transform: uppercase;
    text-decoration: none;
}

.doc-tile-text{
    min-height: 100px;
}

/* Apply your custom-link styles here for the new section */
.link-button {
    color: #107fbe; 
    font-weight: lighter;     
    border: 1px solid #107fbe;
    padding: 8px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 400;
}


/* Style the new flex container */
.new-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 20px;
}

/* Style the new flex columns */
.new-flex-column {
    flex: 1;
    text-align: center;
    padding: 20px;

}

/* Style the new column images */
.new-flex-column img {
    max-width: 80%;
}

/* Style the new column lists */
.new-flex-column ul {
    list-style-type: none;
    padding: 0;
}

/* Style the new column list items */
.new-flex-column ul li {
    margin: 5px 0;
}

/* Apply your custom-link styles here for the new section */
.new-custom-link {
    color: #0d6396; /* Example link color */
    font-weight: normal; /* Example font weight */
    text-decoration: underline; /* Example text decoration */
}

/* Style the column container for the new section */
.column-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 20px;
}

/* Style the columns for the new section */
.column {
    flex: 1;
    text-align: left; /* Align text to the left in columns */
    padding: 20px;
    
}

/* Style the column lists for the new section */
.column ul {
    list-style-type: none;
    padding: 0;
}

/* Style the column list items for the new section */
.column ul li {
    margin: 5px 0;
}

.navbar {
    margin-bottom: 0;
    margin-top: 2px;
  }
.navbar #navbar form {
    margin: 10px 0 20px 0;
}

.navbar .navbar-nav {
    display: none;
    padding-bottom: 4px;
}
.navbar>.container-xxl {
    padding-bottom: 2px;
}
form.search[id='search'] {
    position: relative;
    &::after {
        content: 'Add * at the end of your search';
        white-space: nowrap;
        position: absolute;
        top: 37px;
        left: 2px;
        font-size: 11.5px;
    }
}

a.edit-link {
    color: #0d6396;
}

a {
    color: #0d6396;
}
@media (max-width: 768px) { /* Adjust this breakpoint as needed */
    main {
        grid-template-columns: 1fr; /* Single column layout */
    }

    .column, 
    .flex-column, 
    .new-flex-column {
        width: 100%; /* Make each element take up full width */
        margin: 0 0 1rem 0; /* Add spacing between stacked elements */
        padding: 10px; /* Adjust padding for smaller screens */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }

    .flex-container, 
    .new-flex-container, 
    .column-container {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align the items */
    }

    .new-flex-column img {
        max-width: 60%; /* Adjust image size for smaller screens */
    }

    .custom-link,
    .new-custom-link {
        text-align: center; /* Center the links */
        display: block; /* Ensure they take up full width */
    }
}