/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* KP: Overwrite theme colors */
:root {
    --bs-primary-rgb: 44, 88, 164;
    --bs-primary: #2c58a4;
    --bs-info-rgb: var(--bs-white-rgb);
    --bs-root-font-size: 18px;
    
    --bs-border-color: var(--bs-primary);
    --bs-border-width: 4px;
    --iqpr-blue-2: #009fe3;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bs-body-color);
}

.btn-primary {
   --bs-btn-bg: var(--bs-primary);
}

.progress {
    --bs-progress-bar-bg: var(--iqpr-blue-2);
}

/* KP: Align items at the start of the container */
#survey-nav .container-fluid {
    align-items: flex-start;
    justify-content: flex-start;
}

/* KP: Hide the brand div */
#survey-nav .navbar-brand {
    display: none;
}

/* KP: Decrease max logo height so make logo smaller */
#survey-nav .logo-container>img {
    max-height: 95px;
}

/* KP: Decrease progress bar margin */
body.iqpr_basic .top-container {
    margin-top: 0;
}

/* KP: Overwrite asterisk color */
.asterisk .text-danger {
    color: var(--bs-warning) !important;
}

body.iqpr_basic .text-danger {
    color: var(--bs-warning) !important;
}

/* KP: Footer */
.iqpr_footer {
    height: 80px;
    margin-top: 30px;
    border-top: 4px solid var(--bs-primary);
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* KP: Disables forced uppercase letters in column headers */
body.iqpr_basic thead th {
    text-transform: none;
}

/* KP: Survey list overview: Start page */
body.survey-list {
    display: flex;
    flex-direction: column;
}

/* KP: Fix because readable hides our modal div */
#bootstrap-alert-box-modal.fade {
opacity: 1 !important;
}

/* KP: Checked btn-check buttons are not clearly visible (checked state) */
body.iqpr_basic .btn-check:checked + label.btn-primary, 
body.iqpr_basic .btn-check:active + label.btn-primary,
body.iqpr_basic .btn-check:focus:checked + label.btn-primary {
  background-color: var(--iqpr-blue-2);
}