/******************
    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
*/
 
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sarala:wght@400;700&display=swap');
 
 
  .table-bordered > thead > tr > th {
    border: 1px solid #1C2F25;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #1C2F25;
  }
  body, .survey-description, .error-content, .div-col {
      color: #1C2F25;
      font-family: 'Sarala', sans-serif !important;
 
  }
  h1, h2, h3,  .survey-name, .group-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700; 
    color: #005A48; 
}

.text-info {
     color: #D89A56 !important;
 }
 
.text-primary {
    --bs-text-opacity: 1;
    color: #005A48 !important;
}
.btn-primary {
    background-color: #005A48;
    border-color: #1C2F25;
    color: #FEF9F2;
    padding-bottom: 14px;
}
.btn-primary:hover {
    background-color: #A1B8B4;
    border-color: #1C2F25;
    color: #1C2F25;
    box-shadow: 0px 0px 0px 3px rgba(0, 90, 72, 0.4);
}
.btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary.dropdown-toggle.show, .btn-primary.dropdown-toggle.show:focus {
    background-color: #A1B8B4;
    border-color: #1C2F25;
    color: #1C2F25;
    box-shadow: 4px 4px 0px rgba(0, 90, 72, 0.4);
}
a {
    color: #D89A56;
    font-size: 1em;
}
.btn-link {
    color: #D89A56;
    font-weight: 400;
    text-decoration: underline;
}
 
.control-label {
    color: #1C2F25;
}
 
.btn-outline-secondary {
    border-color: #A1B8B4;
    color: #A1B8B4;
}
.btn-outline-secondary:hover {
    background-color: #A1B8B4;
    color: #FEF9F2;
    border-color: #1C2F25;
     box-shadow: 0px 0px 0px 3px rgba(0, 90, 72, 0.4);
}
.btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus, .btn-outline-secondary:active, .btn-outline-secondary:focus {
     box-shadow: 4px 4px 0px rgba(0, 90, 72, 0.4);
}  

.form-control:focus {
    box-shadow: 4px 4px 0px rgba(216, 154, 86, 0.4);
}
.question-container {
    margin-bottom: 2em;
    border: 1px solid #D89A56;
    background-color: #FEF9F2;
 
}
 
.question-text {
    color: #1C2F25;
}
.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #005A48;
    --bs-table-striped-bg: #A1B8B4;
    --bs-table-active-color: #005A48;
    --bs-table-active-bg: rgba(0, 0, 0, .1);
    --bs-table-hover-color: #005A48;
    --bs-table-hover-bg: #A1B8B4;
    border-color: #005A48;
    color: #1C2F25;
    margin-bottom: 2em;
}
.form-control {
 
    background-color: #FEF9F2;
    border: 1px solid #D89A56;
    color: #005A48;
    margin-bottom: 2em;
}
 
.form-control:focus {
 
    background-color: #FEF9F2;
    border: 1px solid #D89A56;
    color: #005A48;
}
 
.progress {
    background-color: #DEEDEA;
}
 
.progress-bar {
    background-color: #005A48;
    color: #FEF9F2;
}
 
.well {
    background-color: #FEF9F2;
    border: 1px solid #D89A56;
    color: #005A48;
  font-size: 1.5em;
}

.form-change-lang #language-changer-select {
    color: #D89A56;
}


.ls-answers label, .answer-item label, .control-label {
    color: #1C2F25;
}

.radio-item input[type=radio]:checked + label {
    color: #D89A56;
}

/* Stilizuje radio dugme */
.radio-item label::before, .checkbox-item label::before {
    border: 2px solid #1C2F25;
    background-color: #FEF9F2;
}

.radio-item input[type=radio]:checked + label::before {
    border-color: #D89A56;  /* Narandžasti border */
}

/* Menja boju i border selektovane tačkice */
.radio-item input[type=radio]:checked + label::after {
    border-color: #D89A56; /* Boja granice selektovane tačkice */
    color: #D89A56; /* Boja same tačkice */
    background-color: #D89A56; /* Pozadinska boja tačkice */
}

/* Promene za checkbox (ako se koristi) */
.checkbox-item input[type=checkbox]:checked + label,
.checkbox-item input[type=checkbox]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::after {
    border-color: #D89A56;
    color: #D89A56;
}

.form-change-lang #lang-select::after {
    color: #005A48;
}

.req {
    font-size: 75%;
}

.group-container .group-title {
    margin-bottom: 39px;
}

.survey-item-link-wrapper span:first-of-type {
    font-weight: bold;
    font-size: 1.5em;
}


.question-container .ls-label-question {
    margin-top: 25px;
    font-size: 20px;
}

.logo-wrapper-custom {
    width: 66.66666667%;
}
.navbar-custom {
    display: flex;
    justify-content: center !important;
}

@media only screen and (max-width: 1199px) {
    .logo-wrapper-custom {
        width: 100%;
    }
}

body.error-page .error-title p {
  color: #005A48 !important; 
}

img.m-auto {
    width: 350px;
}

.fruity_twentythree .input-group-addon {
    background-color: #005A48;
    color: #D89A56;
    height: fit-content;
}

.date-timepicker-group .input-group-addon {
    border: 2px solid #005A48;
}

.question-container .help-block {
    color: #005A48;
}
.ls-answers .ls-heading th, .ls-answers th {
    color: #005A48;
    border: none;
}
.table-bordered > thead > tr > td {
    border: none;
}
.table-hover > tbody > tr:hover > th {
    color: white;
}
.alert-info {
    background-color: #D89A56;
    border: 1px solid #005A48;
}
.space-col {
    margin-top: 0;
    margin-bottom: 0;
}
.imageselect-container .imageselect-radiobutton:before {
    border: 2px solid #1C2F25;
}
.upload-button {
    margin-bottom: 24px;
}