:root{
    /*Define global variables for colors here*/
    --color-body-background: #F1F1F1;
    --color-bg-contbox: #ffffff;
    --color-primary: #d11e31;
    --color-primary-hover: #ac1221;

    --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);
}

.text-primary-1{
    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: 350px;*/
    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: #F03801;
    --bs-btn-border-color: #F03801;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #c52e00;
    --bs-btn-hover-border-color: #c52e00;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: #c52e00;
    --bs-btn-active-border-color: #c52e00;
    border-radius: var(--global-border-radius);
    padding: 0.65rem 1rem;

    /*
    --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);*/


    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: #F03801;
    --bs-btn-border-color: #F03801;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #c52e00;
    --bs-btn-hover-border-color: #c52e00;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: #c52e00;
    --bs-btn-active-border-color: #c52e00;
    border-radius: var(--global-border-radius);
    padding: 0.65rem 1rem;
}


.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);
}


.btn-danger-1{
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: #F03801;
    --bs-btn-border-color: #F03801;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #c52e00;
    --bs-btn-hover-border-color: #c52e00;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: #c52e00;
    --bs-btn-active-border-color: #c52e00;
    border-radius: var(--global-border-radius);
    padding: 0.65rem 1rem /*var(--globel-btn-padding)*/;
    max-width: 160px;
    
}

.btn-success-1{
    --bs-btn-font-weight: 500;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: rgba(var(--bs-success-rgb), 1);
    --bs-btn-border-color: rgba(var(--bs-success-rgb), 1);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: rgb(14, 99, 59);
    --bs-btn-hover-border-color: rgb(14, 99, 59);
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: rgb(14, 99, 59);
    --bs-btn-active-border-color: rgb(14, 99, 59);
    border-radius: var(--global-border-radius);
    padding: 0.65rem 1rem /*var(--globel-btn-padding)*/;
    max-width: 160px;
    
}

.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: 150px;
        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: 100px;
        height: auto;
    }

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

}