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

:root {
    /* Red color used at the PKP site */
    --red: #a61a2e;
    /* Gray color used at the PKP site */
    --gray: #e2e2e2;
    /* Dark gray for font color */
    --dark-gray: #333333;
    /* Blue for the color of information elements, such as buttons and texts */
    --blue: #336699;
    /* Light blue color for the background of informative elements */
    --light-blue: #ebf3fb;
    /* White color for some texts that are on a dark background color */
    --white: #ffffff;
}

body.PKP-SFU-bootswatch {
    font-size: 11pt;
    font-family: system-ui;
    line-height: 1.4;
}

/* Container bottom space is reduced */
#navigator-container {
    padding-bottom: 0;
    margin: 0;
}

.container-fluid .navbar-brand.logo-container.d-none.d-md-block {
    margin-left: -25px;
}

.container-fluid div#navbar {
    margin-right: -25px;
}

/* The top space of the progress bar container is reduced */
.brand-logo .top-container .top-content {
    padding-top: 1em;
}

/* The width of the progress bar is reduced and aligned to the width of the main container */
.top-container {
    width: 100%;
    margin: 0 auto;
}

/* Removed the bottom space of the progress bar container */
.top-container .top-content {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* The white space at the top margin of the parent container is reduced */
body .top-container {
    margin-top: 0px !important;
}

/* Hyphens are eliminated */
#outerframeContainer {
    hyphens: none;
}

/* The progress bar becomes higher */
.top-container .progress {
    height: 30px;
}

/* The background color of the progress bar is downgraded to grayscale. Font size also increased */
.progress {
    background-color: var(--gray);
    font-size: 1rem;
}

/* The progress color is now dark gray */
.progress-bar {
    background-color: var(--red);
}

/* The top margin of each row of the page is eliminated, this slightly reduces white space */
.row {
    max-width: 100%;
}

/* Language selector aligned to the right */
.form-change-lang {
    justify-content: right;
}

/* The white space on the sides is reduced */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 90%;
}

.card.card-body.bg-light.container-fluid.mb-3 {
    width: 100%;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 90%;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 90%;
    }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 90%;
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 90%;
    }
}

.group-outer-container {
    display: flow;
}

/* Text justification */
#welcome-container {
    text-align: justify;
}

/* The font size is reduced to initial (initial value) */
.h5, h5 {
    font-size: initial;
}

/* The font thickness is slightly smaller than normal. Also, the spacing between each line has been increased for better readability */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: inherit;
}

/* Text color is changed to the same color as the official PKP website */
.text-primary {
    color: var(--dark-gray) !important;
}

/* The color of the links is the same red color of the links of the official PKP website */
a, a:hover {
    color: var(--red);
}

/* The underscore is removed from u type elements */
u {
    text-decoration: none;
}

.survey-description.text-info.text-center {
    color: var(--dark-gray) !important;
}

/* Container of the question titles */
.bg-primary {
    background-color: var(--gray) !important;
    color: var(--dark-gray);
}

/* Style for the group title */
.group-title {
    width: 100%;
    text-align: center;
    color: var(--blue);
    font-weight: 300;
}

.group-title:after {
    display: block;
    width: 6rem;
    height: 1px;
    background-color: var(--blue);
    content: '';
    margin: 20px auto;
}

/* The top and bottom space of the question title container is reduced */
.question-title-container {
    padding-top: .5em;
    padding-bottom: .5em;
}

/* The bottom space in the question title is removed */
.question-title-container .question-text .ls-label-question p {
    margin-bottom: 0;
}


.group-description.row.space-col {
    margin: auto;
}

.text-danger {
    color: var(--red) !important;
}

sup.text-danger.fa.fa-asterisk.small {
    font-size: .575em;
    margin-right: 3px;
}

.question-valid-container .text-danger {
    font-weight: normal;
}


/* The font size of the questions is increased */
.question-text {
    font-size: 11pt;
    font-weight: 500;
}

span.fa.fa-exclamation-circle.ri-error-warning-fill {
    margin-left: 8px;
}

.question-help-container {
    background-color: var(--gray);
}

.question-help-container .ls-questionhelp, .dir-ltr .ls-questionhelp {
    font-size: 10pt;
    margin-left: 24px;
}

/* The help message of the question is reduced by 1 point with respect to the question title */
.ls-question-message {
    font-size: 10pt;
}

/* Styles for the top message bar */
.alert-warning {
    background-color: var(--light-blue);
    border-color: var(--blue);
    color: var(--blue);
    margin: .5rem auto;
}

.text-info {
    color: var(--blue) !important;
}

label {
    font-weight: normal;
}

/* Space is reduced to 0, in the list of answers */
.ls-answers {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* The space between each response (radiobutton) is reduced */
li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
    margin-bottom: .75em;
}

/* Color of the info texts */
.ls-questionhelp {
    color: var(--blue);
}

/* Alignment to the left for question help */
.question-valid-container {
    text-align: left;
}

.question-container {
    margin-bottom: 2em;
/*    background: white;
    color: var(--dark-gray);
    border-bottom: 1px solid var(--gray); */
    max-width: 100%;
    margin: 1rem auto;
}

/* Blank space is removed from the radiobutton when it is equal to “No anwser” */
.no-anwser-item {
    margin-bottom: 0px !important;
}

/* Removed top and bottom space from the answer container */
.answer-container {
    padding-top: 0;
    padding-bottom: 0;
}

/* The space of the table type elements inside the answer container is increased */
table.ls-answers {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.table>:not(:first-child) {
    border-top: inherit;
}

/* The color of the buttons has been changed to red for the links of the official PKP site */
.btn-outline-secondary, .btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-check:active+.btn-outline-secondary:focus, .btn-check:checked+.btn-outline-secondary:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus, .btn-outline-secondary:active:focus,
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-primary:active:focus,
.btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-primary.disabled, .btn-primary:disabled {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* The color of the radiobuttons is customized to red, when selecting an element as a response */
.radio-item label::after {
    background-color: var(--red);
}

/* The color of the checkboxes is customized to red, when selecting an element as a response */
.checkbox-item label::after {
    color: var(--red);
}

.btn-group-lg>.btn, .btn-lg {
    font-size: 1rem;
}

/* The style of the Number of questions has been changed, and now it is blue, informative */
.number-of-questions.text-muted {
    background-color: var(--blue);
    color: var(--white) !important;
    padding: .50rem;
    border-radius: 5px;
    width: fit-content;
}

/* Removes the bottom space of the main container */
.space-col {
    margin-bottom: 0;
    margin-top: 1rem;
}

input[name$="other"].form-control {
    width: 400px !important;  /* Adjust width */
}