:root{
    /*Define global variables for colors here*/
    --color-body-background: #F1F1F1;
    --color-bg-contbox: #ffffff;
    --color-primary: #4C8B6D;
    --color-primary-hover: #2a6247;

    --global-border-radius: 3px;
    --globel-btn-padding: 0.65rem 2rem;

    --color-btn2-bg: #4472c4;
    --color-btn2-bg-hover: #28217A;
}

.text-primary-0{
    color: var(--color-primary);
}

.form-check-input:checked{
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

body{
    background-color: var(--color-body-background);
    padding: 12vh 0 0 0;

}
.wrapper{
    max-width: 900px;
    min-height: 80vh;
}

.max-width-500{
    max-width: 500px;
}

.content-box{
    background-color: var(--color-bg-contbox);
    border-radius: var(--global-border-radius);
}

.logo{
    height: 120px;
    max-width: 250px;
    min-width: 250px;
    object-fit: contain;
}
.main-header{
    color: #28217A;
    font-family: Inter;
    font-weight: 800;

}
.secondary-header{
    font-family: IM FELL Great Primer;
}

.main-content-box{
    min-height: 300px;
}

/*Create a new button from bootstrap btn class*/
.btn-primary-0{
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    border-radius: var(--global-border-radius);
    padding: var(--globel-btn-padding);
}


.btn-primary-1{
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--color-btn2-bg);
    --bs-btn-border-color: var(--color-btn2-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--color-btn2-bg-hover);
    --bs-btn-hover-border-color: var(--color-btn2-bg-hover);
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--color-btn2-bg-hover);
    --bs-btn-active-border-color: var(--color-btn2-bg-hover);
    border-radius: var(--global-border-radius);
    padding: var(--globel-btn-padding);
}

.btn-secondary-0{
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--color-primary);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    border-radius: var(--global-border-radius);
    padding: var(--globel-btn-padding);
}

.btn-secondary-1{
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--color-btn2-bg);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--color-btn2-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--color-btn2-bg-hover);
    --bs-btn-hover-border-color: var(--color-btn2-bg-hover);
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--color-btn2-bg-hover);
    --bs-btn-active-border-color: var(--color-btn2-bg-hover);
    border-radius: var(--global-border-radius);
    padding: var(--globel-btn-padding);
}

.tab-btn-inactive{
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--color-primary);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    border-radius: var(--global-border-radius);
    padding: var(--globel-btn-padding);
}

.tab-btn-active{
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    border-radius: var(--global-border-radius);
    padding: var(--globel-btn-padding);
}


/*
    Now make it responsive for tab screens
    900px is breakpoint for tab screens in bootstrap
*/
@media screen and (max-width:900px){
    body{
        padding: 64px 0 0 0;
    
    }

    .logo{
        width: 125px;
        height: auto;
    }

}



/*
    Now make it responsive for mobile screens
    586px is breakpoint for mobile screens in bootstrap
*/
@media screen and (max-width:586px){
    body{
        padding: 64px 0 0 0;
    
    }
    
      

    .logo{
        width: 75px;
        height: auto;
    }

   
    
      .btn {
        margin-right: 0 !important;
        margin-bottom: 1rem;
      }

}


/*** Print Styles ***/
@media print {
    @page {
        size: A4; /* Or 'letter' or 'landscape' */
        margin: 1cm; /* Adjust margins to your liking */
    }
    /* 1. Hide the Navbar and Footer */
    nav, .page-footer, .action-buttons {
        display: none !important;
    }
    nav {
        opacity: 0 !important;
    }

    /* 2. Reset margins and sizing */
    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .content-box,
    .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* 3. Ensure the main container takes up the full width */
    .print-no-break {
        /* Avoid breaking the div in the middle */
        break-inside: avoid;
        page-break-inside: avoid; /* For older browser support */

        /* Optional: Add a small margin to give it breathing room */
        margin-bottom: 10px;
        display: block; /* Ensure it's not inline-flex or inline-grid */
    }


    /* 4. Remove borders if they interfere with printing */
    .print-no-borders {
        border: none !important;
    }
    
    /* 5. Remove shadows and backgrounds if they cause issues */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
}