/* Custom page CSS
-------------------------------------------------- */
:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    /*--bs-primary: #006292; */
    --bs-primary: #008453 !important; /* new */
    --bs-secondary: #8A8F94;  /* new */
    --bs-success: #198754;
    --bs-info: #2B9EB3;
    --bs-warning: #FF883E;
    --bs-danger: #C72C3C !important; /* new */
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    /*--bs-primary-rgb: 0, 98, 146;  */
    --bs-primary-rgb: 0, 132, 83 !important; /* new */
    --bs-secondary-rgb: 138,143,148;  /* new */
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 43,158,179;
    --bs-warning-rgb: 255,136,62;
    --bs-danger-rgb: 199,44,60;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-body-rgb: 33,37,41;
    --bs-header-rgb: 25,135,84;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-bg-opacity: 0.75;
}

/* Not required for template or sticky footer method. */
main > .container {
    /*padding: 160px 15px 120px 15px;*/
    padding: 160px 15px 20px 15px;
}

.logo {
    background-color: #fff;
    padding: 0 1rem;
    margin: 0;
}

#mainNav {
    /*background-color: #f2ebe5;*/
}
#mainNav.bg-light {
    background-color: rgba(var(--bs-header-rgb), var(--bs-bg-opacity)) !important;
}

.login-bar .nav-item {
    display: flex;
    justify-content: center;
}

.login-bar .separator {
    display: flex;
    align-items: center;
    margin: 0 5px;
}

.login-bar .separator span {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.login-bar .nav-item .nav-link {
    color: #fff;
    text-decoration: none;
}
.login-bar .nav-item .nav-link:hover {
    color: rgba(255,255,255,0.7);
}

.login-bar .disabled.nav-link {
    color: #ebd7c7;
}

footer {
    /* padding-top: 60px;*/
}

.text-muted {
    color: rgba(0,0,0,0.5) !important;
}

.check-group-btn .btn {
    margin: 0.5rem 0.25rem;
}

.site-title {
    color: #008453;
}
.site-title a, .site-title a:hover {
    color: #006642;
    text-decoration: none;
}
.site-description {
    color: #FF883E;
}

a {
    color: #008453;
    text-decoration: none;
}
a:hover,
a:focus {
    color: #006642;
    text-decoration: underline;
}
a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.progress-bar {
    background-color: #FF883E;
}

.btn:hover {
    text-decoration: none;
}
.btn-primary {
    color: #fff;
    background-color: #008453;
    border-color: #008453;
}

.btn-primary:hover {
    background-color: #006642;
    border-color: #006642;
}

.btn-warning {
    color: #fff;
    background-color: #FF883E;
    border-color: #FF883E;
}

.frag24h .btn-outline-secondary {
    color: rgba(81, 61, 54, 1);
    border-color: rgba(81, 61, 54, 1);
}
.frag24h .btn-secondary, .frag24h .btn-outline-secondary:hover {
    color: rgba(255,255,255,0.85);
    background-color: rgba(81, 61, 54, 0.8);
    border-color: rgba(81, 61, 54, 0.8);
}
.frag24h .btn-secondary:hover {
    color: #fff;
    background-color: rgba(81, 61, 54, 0.8);
    border-color: rgba(81, 61, 54, 0.8);
}
.frag24h .btn-check:active+.btn-outline-secondary,
.frag24h .btn-check:checked+.btn-outline-secondary,
.frag24h .btn-outline-secondary.active,
.frag24h .btn-outline-secondary.dropdown-toggle.show,
.frag24h .btn-outline-secondary:active {
    color: rgba(255,255,255,0.85);
    background-color: rgba(81, 61, 54, 1);
    border-color: rgba(81, 61, 54, 1);
}


.form-check-input:checked {
    background-color: #FF883E;
    border-color: #FF883E;
}

footer {
    /* padding-top: 60px;*/
}

.check-group-btn .btn {
    margin: 0.5rem 0.25rem;
}

/* Register OK page */
.suggestion-wrap {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
}

.card-vip .card-header {
    background-image: url("../img/header_circle.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-text {
    color: rgba(255,255,255,0.5);
    /*font-size: 3rem;*/
    font-size: calc(0.5rem + 2.4vw);
    font-weight: 300;
    padding-left: 1.5rem;
    line-height: 1;
    text-transform: uppercase;
    background-image: linear-gradient(
            -225deg,
            rgba(255,255,255,0.4) 0%,
            rgba(255,255,255,0.6) 29%,
            rgba(255,255,255,0.8) 67%,
            rgba(255,255,255,0.9) 100%
    );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;

}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

.card-vip .card-header img {
    width: 30%;
    height: auto;
    border: 2px solid rgba(255,255,255,0.5);
}

/* New btn colors */
.btn-purple {
    color: #fff;
    background-color: var(--bs-purple);
    border-color: var(--bs-purple);
}
.btn-purple:hover {
    color: #fff;
    background-color: var(--bs-purple-hover);
    border-color: var(--bs-purple-hover);
}

/* Fragebogen section */
.frag24h {
        background:
                url('../img/home-bg2.png') no-repeat -80px -50px / 800px,
                url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='800' preserveAspectRatio='none' viewBox='0 0 1440 800'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1114%26quot%3b)' fill='none'%3e%3crect width='1440' height='800' x='0' y='0' fill='rgba(222%2c 191%2c 168%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c671.466C123.53%2c670.363%2c216.818%2c559.018%2c301.387%2c468.968C371.684%2c394.115%2c404.256%2c297.309%2c441.32%2c201.544C476.176%2c111.485%2c518.395%2c22.791%2c511.346%2c-73.52C504.01%2c-173.752%2c451.212%2c-260.448%2c401.129%2c-347.58C340.041%2c-453.857%2c296.282%2c-581.591%2c187.181%2c-637.48C72.549%2c-696.203%2c-74.945%2c-706.537%2c-191.147%2c-650.985C-304.153%2c-596.96%2c-343.865%2c-461.004%2c-407.561%2c-353.153C-459.977%2c-264.401%2c-502.468%2c-175.456%2c-530.56%2c-76.283C-562.692%2c37.152%2c-627.729%2c157.164%2c-583.017%2c266.255C-538.193%2c375.619%2c-401.919%2c406.924%2c-304.865%2c474.379C-203.446%2c544.868%2c-123.504%2c672.568%2c0%2c671.466' fill='%23d9b59a'%3e%3c/path%3e%3cpath d='M1440 1332.6779999999999C1534.855 1307.384 1602.72 1232.973 1691.945 1192.034 1801.179 1141.914 1949.778 1161.901 2021.835 1065.715 2094.225 969.085 2090.86 826.222 2051.5 712.08 2014.387 604.454 1899.9560000000001 551.3779999999999 1817.429 472.956 1744.047 403.225 1686.084 318.065 1593.584 276.942 1492.86 232.163 1375.195 189.83500000000004 1272.888 230.86800000000005 1171.4769999999999 271.54200000000003 1150.663 404.821 1075.953 484.552 996.892 568.9259999999999 867.795 604.759 822.757 711.254 773.684 827.291 776.069 964.83 823.471 1081.559 871.729 1200.395 965.058 1305.806 1083.844 1354.1889999999999 1196.27 1399.981 1322.705 1363.9560000000001 1440 1332.6779999999999' fill='%23e3c9b6'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1114'%3e%3crect width='1440' height='800' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e") no-repeat center top / cover;

        padding-top: 50px;
}

.frag24h .hero {
    /*display: flex;*/
    gap: 2rem;
}


.page-index .frag24h .hero {
    flex-direction: column-reverse;
    align-content: flex-end;
    flex-wrap: wrap;
}
.page-index .frag24h .hero-title {
    flex-direction: column;
}


.frag24h .progress-bar {
    background-color: var(--bs-primary);
}

.hero-poll {
    background-color: rgba(255,255,255,0.7);
    padding: 0 0;
    min-height: 400px;
}
.page-index .hero-poll {
    background-color: transparent;
    min-height: unset;
}

.page-index .security {
    flex-direction: row;
    gap: 1rem;
}

.page-24h .hero-right,
.page-registerOK .hero-right {
    width: 65%;
}

.page-24h .hero-title,
.page-registerOK .hero-title {
    padding-top: 11rem;
    width: 35%;
    flex-direction: column;
    text-align: right;
}

.page-registerOK .card {
    font-size: 85%;
}
.page-registerOK .card h5 {
    font-size: 1rem;
}

.hero-title h2 span {
    background-color: rgba(0,0,0,0.5);
    color: #dec0a8;
    margin: 0.25rem 0 0.25rem 0;
    padding: 0.25rem 0.25rem;
    line-height: 1;
    display: inline-block;
}
.hero-title h2 span.inverse {
    background-color: rgba(134, 161, 127, 0.65);
    color: rgba(0, 0, 0, 0.80);
}

.form-container {
    width: 100%;
}
.form-container .header {
    background-color: rgba(255, 136, 62, 0.8);
    padding: 1rem 2rem;
}
.form-container .header h1 {
    margin-bottom: 0;
    color: #f5ece5;
    font-size: 1.75rem;
}

.form-container .form-inner {
    padding: 2rem;
}

.hidden {
    display: none;
}

.frag24h .form-check {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.5rem 0.5rem;
    position: relative; /* Добавяме relative позициониране */
}

.frag24h input[type="checkbox"]:not(.btn-check),
.frag24h input[type="radio"]:not(.btn-check) {
    font-size: 1.25rem;
    margin: 0.25em 0 0.25em 0.5rem;
    position: relative; /* Добавяме relative позициониране */
    z-index: 2; /* Слагаме по-висок z-index */
}

.frag24h .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.frag24h .form-check-input:focus {
    outline: none;  /* Премахва външния син контур */
    box-shadow: 0 0 0 0.25rem rgba(163, 197, 155, 0.25); /* Добавя зелена сянка */
}

.frag24h .form-check-label {
    width: 100%;
    text-transform: capitalize;
    padding: 0.5rem 2rem 0.5rem 2.75rem; /*0.5rem 1rem 0.5rem 3rem;*/
    margin-left: -2.5rem;
    border: 1px solid rgba(85, 57, 46, 0.6);
    border-radius: .25rem;
    position: relative; /* Добавяме relative позициониране */
    z-index: 1; /* По-нисък z-index от input-а */
    cursor: pointer; /* Добавяме курсор pointer */
}

.frag24h .form-check-label:hover {
    background-color: rgba(85, 57, 46, 0.1);
}

label:not(.form-check-label):not(.btn):not(.list-group-item),
.col-form-label, .frag24h legend, .frag24h .form-label {
    font-weight: bold;
    color: rgba(85, 57, 46, 0.6);
}

.frag24h legend {
    font-size: 1rem;
}

.frag24h .header small {
    color: rgba(255,255,255,0.7);
}

.frag24h .form-control, .frag24h .col-form-control {
    color: unset;
    background-color: transparent;
    background-clip: padding-box;
    border: 1px solid rgba(85, 57, 46, 0.6);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
}

.frag24h .form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    border: 1px solid rgba(85, 57, 46, 0.6);
}

.frag24h .input-group-text {
    color: rgba(0,0,0,0.75);
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(85, 57, 46, 0.6);
}

.frag24h .list-group-item {
    padding: .5rem 1rem;
    color: #212529;
    background-color: rgba(255,255,255,0.5);
    border: 1px solid rgba(85, 57, 46, 0.6);
    cursor: pointer;
}
.frag24h .list-group-item+.list-group-item {
    border-top-width: 0;
}

.frag-24h .card-header {
    background-color: rgba(85, 57, 46, .05);
    border-bottom: 1px solid rgba(85, 57, 46, .125);
}

#ui-datepicker-div {
    z-index: 100 !important;
}

.benefits {
    background-color: rgba(81, 61, 54, 1);
    padding: 2rem 0;
}
.benefits ul {
    list-style: none;
    color: #dec0a8;
    margin: 0;
    padding: 0 0;
}
.benefits ul li {
    display: flex;
    /*width: 25%;*/
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Добавено за вертикално центриране */
    text-align: center;
    gap: 1rem;
}
.benefits h4 {
    font-size: 1.25rem;
}

.manual-box .alert-secondary {
    color: #513D36;
    background-color: #f5ece5;
    border-color: #dec0a8;
}

.goog-stars {
    color: #513D36;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-end;
}

.reviews {
    background-color: rgba(140, 169, 135, 0.7);
}

.stars {
    font-size: 24px; /* Размер на звездите, можеш да го промениш */
}
.stars .empty {
    color: lightgray;
}
.stars .full {
    color: gold;
}
.stars .half {
    position: relative;
    color: lightgray;
}
.stars  .half::before {
    content: '\2605'; /* Същият символ за звезда */
    color: gold; /* Цвят на незапълнената част */
    position: absolute;
    left: 0;
    width: 50%;
    overflow: hidden;
}

.security {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0;
    margin: 0 0 0 auto;
    gap: 0.25rem;
    list-style: none;
}
.security li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .toast-container {
        position: relative !important;
        margin-top: 2rem;
    }

    .page-24h .hero-poll, .page-24h .hero-title, .page-24h .hero-right {
        /*width: 100%;*/
    }
    .page-24h .hero-title, .page-registerOK .hero-title {
        padding-top: 5rem;
        flex-direction: row;
    }
    .page-24h .hero-right, .page-registerOK .hero-right {
        margin-top: 1rem;
    }

    .goog-stars {
        background-color: rgba(255,255,255,0.5);
        padding: 0.5rem 0.5rem;
    }
}

/* Small devices (landscape phones, 768px and down) */
@media (max-width: 769px) {
    .front main {
        margin-top: 140px;
    }
    main > .container {
        padding: 60px 15px 10px 15px;
    }

    .page-24h .hero-poll,
    .page-24h .hero-title,
    .page-24h .hero-right,
    .page-registerOK .hero-poll,
    .page-registerOK .hero-title,
    .page-registerOK .hero-right {
        width: 100%;
    }

    .login-bar {
        justify-content: center;
    }
    .login-bar .uname {
        order: 3;
    }
    .login-bar .nav-link {
        padding: 0.25rem 1rem;
    }

    .frag24h {
        /*background-position: top center;*/
        padding-top: 2rem;
        padding-bottom: 20px;
    }

    .frag24h .hero-title {
        text-align: left;
        flex-direction: column;
    }

    .hero-right {
        width: 100%;
    }

    .security {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 2rem;
        gap: 0.5rem;
    }
}

/* Premium ribbon */
.ribbon-wrap {
    z-index: 1;
    overflow: hidden;
}
.ribbon span, .premium span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#9BC90D 0%, #79A70A 100%);
    box-shadow: 0 3px 10px -5px rgba(37, 37, 37, 0.76);
    position: absolute;
    top: 19px; left: -21px;
}

.vip span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 70px;
    display: block;
    background: #6d0550;
    background: linear-gradient(#b34d97 0%, #6d0550 100%);
    box-shadow: 0 3px 10px -5px rgba(37, 37, 37, 0.76);
    position: absolute;
    top: 5px; left: -20px;
}

/* capitalize first letter of names */
.capname {
    text-transform: capitalize;
}

/* Rate sliders */
.range-wrap {
    position: relative;
    margin: 0 auto 3rem;
}
.form-range {
    width: 100%;
}
.bubble {
    background: var(--bs-secondary);
    color: white;
    padding: 4px 12px;
    position: absolute;
    border-radius: 4px;
    left: 50%;
    top: 1.75rem;
    transform: translateX(-50%);
    z-index: 2;
}
.bubble::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--bs-secondary);
    top: -1px;
    left: 50%;
}

datalist {
    display: flex;
    /*justify-content: space-between;*/
    justify-content: space-between;
    color: #ccc;
    width: 100%;
    z-index: 1;
}

.div-is-invalid, input:focus:invalid {
    border: 1px solid #dc3545;
    border-radius: 4px;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("../img/invalid.svg");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* FB and Google login */
.fb-logo #fb-button {
    /* Facebook blue */
    border-radius: 5px;  /* Rectangle with slight rounded corners */
    width: 200px;  /* Adjust the width as needed */
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1877F2;
    border: 1px solid #1877F2;
    font-weight: 400;
    font-size: 14px;  /* Text size for Facebook */
}

.fb-logo i {
    font-size: 24px;
    margin-right: 8px;  /* Adds some space between the icon and text */
}

/* Google and fb divider */
.sign_divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.sign_divider::before,
.sign_divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ccc;
}

.sign_divider::before {
    margin-right: 10px;
}

.sign_divider::after {
    margin-left: 10px;
}

.sign_divider h5 {
    padding: 0 10px;
    margin: 0;
    white-space: nowrap;
}

/* from html */
.frag label:hover {
    background-color: rgba(0,0,0,0.1);
}
.frag input[type="checkbox"],
.schedule input[type="checkbox"],
.frag input[type="radio"] {
    font-size: 2rem;
    margin: 0.25em 0 0.25em 0;
}

#num_employees label {
    margin: 0.25rem;
}