/*********************************/
/* palauteboksi login ja etusivu */
/*********************************/

.front-wrapper,
.front-page .palauteboksi-full-container {
    height: 100%;
    position: relative;
}
.front-image img {
    bottom: 0;
    left: 0;
    max-width: 804px;
    position: absolute;
    width: 45vw;
}
.front-login-page-container {
    align-items: center;
    background-color: var(--bg-light);
    display: flex;
    justify-content: center;
    position: relative;
}
.front-login-page-container .curve {
    height: 100%;
    right: calc(100% - 2px);
    position: absolute;
}
.front-page-container {
    display: grid;
    padding-bottom: 4rem;
    padding-right: 3rem;
    padding-top: 4rem;
    row-gap: 2.75rem;
    width: 100%;
}
.front-page .front-page-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.front-page-container .description {
    font-size: 1rem;
    line-height: 1.625;
    text-align: center;
}

.front-logo {
    margin: 0 auto;
}
.front-logo .custom-logo {
    max-width: 15rem;
}

#login {
    width: 23.125rem;
    padding: 0;
    margin: auto;
}
.login form {
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 1rem;
    font-weight: 400;
    padding: 0;
}
.login label {
    font-size: 1rem;
    line-height: 1.625;
    display: inline-block;
    margin-bottom: 5px;
}
#login form .input,
#login form .input[type="checkbox"] {
    font-size: 1rem;
    line-height: 1.35;
    width: 100%;
    border: solid 0.0625rem #e2e2e2;
    box-shadow: none;
    padding: 0.25rem 0.5rem;
    margin: 0 6px 16px 0;
    min-height: 55px;
    max-height: none;
}
.login form input[type=checkbox] {
    height: 2rem;
    width: 2rem;
}
.login form .input:focus,
.login form .input[type=checkbox]:focus {
    border: solid 0.0625rem var(--color-secondary);
    box-shadow: none;
    outline: 0;
}
#login .forgetmenot {
    margin-bottom: 1.875rem;
}
.login .forgetmenot label {
    font-size: .875rem;
}
#rememberme {
    border: solid 0.0625rem #e2e2e2;
    box-shadow: none;
}
.login input[type=checkbox]:checked::before {
    content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E);
    margin: -0.25rem 0 0 -0.45rem;
    height: 2.5rem;
    width: 2.5rem;
}
.login #wp-submit {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    border-radius: .375rem;
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    float: none;
    height: 55px;
    width: 100%;
}
.login #wp-submit:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* foot */
.wp-login-lost-password {
    font-size: 1rem;
}
.login #backtoblog, .login #nav {
    font-size: .875rem;
    text-align: center;
}
.login #backtoblog {
    margin-top: 5rem;
}
.login #backtoblog a, .login #nav a {
    color: var(--color-dark);
}
.login-page #login + .language-switcher {
    display: none;
    visibility: hidden;
}


@media (min-width: 1024px) {
    .front-page-container {
        max-width: 23.125rem;
    }
}
@media (max-width: 1023px) {
    .front-wrapper,
    .front-page .palauteboksi-full-container {
        height: auto;
    }
    .front-login-page-container {
        padding-top: 1.75rem;
    }
    .front-login-page-container .curve {
        height: 100vw;
        left: -8%;
        top: calc(100% - 2px);
        transform: rotate(270deg);
        transform-origin: top right;
        width: auto;
    }
    .front-page-container {
        padding: 0;
        row-gap: 1.5rem;
    }
    .front-page .front-page-container {
        padding-bottom: 3rem;
    }

    .front-image {
        padding-top: 24vw;
    }
    .front-page .front-image {
        padding-top: 18vw;
    }
    .front-image img {
        padding-right: 1.25rem;
        position: relative;
        width: 100%;
    }

    .front-logo {
        width: 10rem;
    }
    .login #backtoblog {
        left: 50%;
        margin: 0;
        position: absolute;
        top: calc(100% + 12vw);
        transform: translateX(-50%);
        width: 100%;
    }
}


@media (max-width: 639px) {
    #login {
        padding: 0 1.5rem;
        width: 100%;
    }
}




/****************************/
/* Kampanjasivut (Campaign) */
/****************************/

section.campaign-page {
    margin-bottom: 10vw;
    position: relative;
}

/***************************/
/* Palautesivut (Feedback) */
/***************************/

section.feedback-page {
    position: relative;
}



/***********************/
/* Palauteboksi -osiot */
/***********************/

.palauteboksi-container {
    padding: 3.75rem 1.5rem;
}

.palauteboksi-head {
    margin: 0 auto 2.25rem;
    max-width: 37rem;
}

.palauteboksi-wrapper {
    background: #fff;
    border-radius: 1.25rem;
    filter: drop-shadow(0px 0px 1.875rem rgba(0,0,0,0.1));
    height: min-content;
    margin: 0 auto;
    max-width: 37rem;
    padding: 3.75rem 5rem 4.375rem;
    position: relative;
}
.palauteboksi-wrapper:after {
    bottom: 2.75rem;
    content: url('../img/paperplane.svg');
    left: 100%;
    position: absolute;
}

.palauteboksi-container.wide-container .palauteboksi-head {
    max-width: 44rem;
}
.palauteboksi-container.wide-container .palauteboksi-wrapper {
    max-width: 44rem;
    padding: 2.5rem;
}

.palauteboksi-wrapper.feedback-expired {
    padding-bottom: 5rem;
}


.palauteboksi-container .custom-logo {
    max-width: 12.5rem;
}

.palauteboksi-title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.35;
}

.palauteboksi-container p:last-child {
    margin-bottom: 0;
}


section .divider {
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: calc(100% - 2px);
    width: 100%;
}


@media (min-width: 1024px) {
    .page-template-palauteboksi:not(.page-template-front-page) {
        background-color: var(--bg-light);
    }
    .palauteboksi-head {
        text-align: center;
    }
}

@media (max-width: 1023px) {
    .page-template-palauteboksi {
        background-color: #fff;
    }
    .page-template-palauteboksi .palauteboksi-section {
        background-color: var(--bg-light);
    }
    .palauteboksi-container {
        margin-bottom: 12vw;
        padding-bottom: 3rem;
        padding-top: 3rem;
    }

    /*.campaign-page .palauteboksi-container {
        padding-bottom: 0;
    }*/
    .palauteboksi-container {
        padding-bottom: 0;
    }

    .campaign-page .palauteboksi-head {
        margin-bottom: 0;
    }

    .palauteboksi-wrapper {
        position: static;
    }
    .palauteboksi-wrapper:after {
        bottom: auto;
        left: auto;
        right: 0;
        top: 1.875rem;
        transform: scaleX(-1);
    }
    .palauteboksi-container.wide-container .palauteboksi-wrapper {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 639px) {
    .palauteboksi-wrapper {
        padding: 2.5rem 0;
    }
}





.feedback-page .palauteboksi-wrapper-container {
    height: 100%;
    display: flex;
    align-items: center;
}

.palauteboksi-wrapper .image-container {
    height: 100%;
}
.palauteboksi-wrapper .image-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.palauteboksi-wrapper .content-container form {
    position: relative;
}

.palauteboksi-wrapper .content-container form .status-indicator {
    position: absolute;
    bottom: calc( (-50px - 14px) / 2 );
    font-size: 14px;
    line-height: 1;
    padding-left: calc(16px + 8px);
}
.palauteboksi-wrapper .content-container form.success .status-indicator {
    color: #5AA249;
}
.palauteboksi-wrapper .content-container form.error .status-indicator {
    color: #D96265;
}
.palauteboksi-wrapper .content-container form.error .status-indicator:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNy43MjciIGhlaWdodD0iMTcuNzI3IiB2aWV3Qm94PSIwIDAgMTcuNzI3IDE3LjcyNyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc3OC41IC02MzMuNzczKSI+CiAgICA8cGF0aCBkPSJNMTA4Ljg2Ni04NDIuMjcyYTguNjM0LDguNjM0LDAsMCwxLTMuNDU3LS43LDguOTU0LDguOTU0LDAsMCwxLTIuODE1LTEuODk0LDguOTUsOC45NSwwLDAsMS0xLjktMi44MTQsOC42MjYsOC42MjYsMCwwLDEtLjctMy40NTYsOC42MzUsOC42MzUsMCwwLDEsLjctMy40NTcsOC45NTUsOC45NTUsMCwwLDEsMS44OTQtMi44MTUsOC45NTEsOC45NTEsMCwwLDEsMi44MTQtMS45LDguNjI1LDguNjI1LDAsMCwxLDMuNDU2LS43LDguNjM1LDguNjM1LDAsMCwxLDMuNDU3LjcsOC45NTUsOC45NTUsMCwwLDEsMi44MTUsMS44OTQsOC45NDgsOC45NDgsMCwwLDEsMS45LDIuODE0LDguNjI2LDguNjI2LDAsMCwxLC43LDMuNDU2LDguNjM1LDguNjM1LDAsMCwxLS43LDMuNDU3LDguOTUzLDguOTUzLDAsMCwxLTEuODk0LDIuODE1LDguOTQ3LDguOTQ3LDAsMCwxLTIuODE0LDEuOUE4LjYyNiw4LjYyNiwwLDAsMSwxMDguODY2LTg0Mi4yNzJabTAtMS40YTcuMiw3LjIsMCwwLDAsNS4yOTUtMi4xNjksNy4yLDcuMiwwLDAsMCwyLjE2OS01LjI5NSw3LjIsNy4yLDAsMCwwLTIuMTY5LTUuMjk1LDcuMiw3LjIsMCwwLDAtNS4yOTUtMi4xNjksNy4yLDcuMiwwLDAsMC01LjI5NSwyLjE2OSw3LjIsNy4yLDAsMCwwLTIuMTY5LDUuMjk1LDcuMiw3LjIsMCwwLDAsMi4xNjksNS4yOTVBNy4yLDcuMiwwLDAsMCwxMDguODY0LTg0My42NzFaTTEwOC44NjQtODUxLjEzNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3OC40OTkgMTQ5My43NzEpIiBmaWxsPSIjZDk2MjY1Ii8+CiAgICA8bGluZSBpZD0iTGluZV8xNiIgeDI9IjgiIHkyPSI4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3ODMuNSA2MzguNSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q5NjI2NSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8bGluZSBpZD0iTGluZV8xNyIgeDI9IjgiIHkyPSI4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3OTEuNSA2MzguNSkgcm90YXRlKDkwKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDk2MjY1IiBzdHJva2Utd2lkdGg9IjIiLz4KICA8L2c+Cjwvc3ZnPg==");
    position: absolute;
    top: -2.5px;
    left: 0;
}
.palauteboksi-wrapper .content-container form.success .status-indicator:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNy43MjciIGhlaWdodD0iMTcuNzI3IiB2aWV3Qm94PSIwIDAgMTcuNzI3IDE3LjcyNyI+CiAgPHBhdGggZD0iTTEwNy41NC04NDcuMTY3bDYuMjczLTYuMjczLS45ODMtLjk4My01LjI4OSw1LjI4OS0yLjY1OS0yLjY1OS0uOTgzLjk4M1ptMS4zMjYsNC44OTVhOC42MzQsOC42MzQsMCwwLDEtMy40NTctLjcsOC45NTQsOC45NTQsMCwwLDEtMi44MTUtMS44OTQsOC45NSw4Ljk1LDAsMCwxLTEuOS0yLjgxNCw4LjYyNiw4LjYyNiwwLDAsMS0uNy0zLjQ1Niw4LjYzNSw4LjYzNSwwLDAsMSwuNy0zLjQ1Nyw4Ljk1NSw4Ljk1NSwwLDAsMSwxLjg5NC0yLjgxNSw4Ljk1MSw4Ljk1MSwwLDAsMSwyLjgxNC0xLjksOC42MjUsOC42MjUsMCwwLDEsMy40NTYtLjcsOC42MzUsOC42MzUsMCwwLDEsMy40NTcuNyw4Ljk1NSw4Ljk1NSwwLDAsMSwyLjgxNSwxLjg5NCw4Ljk0OCw4Ljk0OCwwLDAsMSwxLjksMi44MTQsOC42MjYsOC42MjYsMCwwLDEsLjcsMy40NTYsOC42MzUsOC42MzUsMCwwLDEtLjcsMy40NTcsOC45NTMsOC45NTMsMCwwLDEtMS44OTQsMi44MTUsOC45NDcsOC45NDcsMCwwLDEtMi44MTQsMS45QTguNjI2LDguNjI2LDAsMCwxLDEwOC44NjYtODQyLjI3MlptMC0xLjRhNy4yLDcuMiwwLDAsMCw1LjI5NS0yLjE2OSw3LjIsNy4yLDAsMCwwLDIuMTY5LTUuMjk1LDcuMiw3LjIsMCwwLDAtMi4xNjktNS4yOTUsNy4yLDcuMiwwLDAsMC01LjI5NS0yLjE2OSw3LjIsNy4yLDAsMCwwLTUuMjk1LDIuMTY5LDcuMiw3LjIsMCwwLDAtMi4xNjksNS4yOTUsNy4yLDcuMiwwLDAsMCwyLjE2OSw1LjI5NUE3LjIsNy4yLDAsMCwwLDEwOC44NjQtODQzLjY3MVpNMTA4Ljg2NC04NTEuMTM1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwMC4wMDEgODU5Ljk5OSkiIGZpbGw9IiM1YWEyNDkiLz4KPC9zdmc+");
    position: absolute;
    top: -2.5px;
    left: 0;
}

.palauteboksi-wrapper .content-container form.error input {
    border: solid 1px #D96265;
}

/* reset p margins to manually handle the spacing */
.palauteboksi-wrapper .content-container p {
    margin: unset;
}

.palauteboksi-wrapper .content-container p.content-title {
    font-size: 1.75rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 1.25rem;
}

.palauteboksi-wrapper.campaign .content-container p.content-title {
    font-size: 1.75rem;
}


.palauteboksi-wrapper .content-container p.content-text,
.palauteboksi-wrapper.campaign .content-container p.content-text,
.palauteboksi-wrapper label,
.palauteboksi-wrapper input  {
    font-size: 1rem;
}
.palauteboksi-wrapper .content-container p.content-text {
    line-height: 1.5;
    margin-bottom: 1.75rem;
}

.palauteboksi-wrapper label {
    line-height: 1;
    margin-bottom: .6875rem;
}

.palauteboksi-wrapper input {
    line-height: 1.325;
    padding: 1rem 1.125rem;
    box-sizing: content-box;
    height: min-content;
    margin-bottom: 1.625rem;
    box-shadow: unset;
    filter: unset;
    border-radius: 6px!important;
    border: 1px solid #D6D6D6;
    width: -webkit-fill-available;
}

.palauteboksi-wrapper input:visible:last-of-type {
    margin-bottom: 2rem;
}
 
.palauteboksi-wrapper input[type=email]:focus, 
.palauteboksi-wrapper input[type=text]:focus, 
.palauteboksi-wrapper textarea:focus {
    box-shadow: none;
    border: solid 1px #D6D6D6;
}

.form-grid {
    display: grid;
    grid-column-gap: 1.375rem;
    margin-bottom: .625rem;
}
.form-grid.grid-30-70 {
    grid-template-columns: 30% 1fr;
}

/* large and smaller */
@media (max-width: 1023px) {
    .palauteboksi-wrapper-container {
        padding: unset;
    }
    .palauteboksi-wrapper {
        background: unset;
        border-radius: unset;
        overflow: unset;
        width: 100%;
        max-width: 100%;
        filter: unset;
    }
    
    /*.palauteboksi-wrapper .content-container {
        margin: 41px 23px;
    }*/
}

@media (max-width: 639px) {
    .form-grid.grid-30-70 {
        grid-template-columns: 1fr;
    }
    .palauteboksi-wrapper .content-container p.content-text,
    .palauteboksi-wrapper.campaign .content-container p.content-text,
    .palauteboksi-wrapper label,
    .palauteboksi-wrapper input  {
        font-size: .9375rem;
    }
}


/**********************************************/
/* palauteboksi-wrapper feedback and star rating */
/**********************************************/

.palauteboksi-wrapper .stars-indicator {
    display: flex;
    gap: 3.5px;
}

/* by default hide content container */
.palauteboksi-wrapper.feedback .content-container > div {
    display: none;
}
.palauteboksi-wrapper.feedback .content-container.low .low-rating {
    display: block;
}
.palauteboksi-wrapper.feedback .content-container.high .high-rating {
    display: block;
}
.palauteboksi-wrapper.feedback .content-container.change .change-rating {
    display: block;
}
.palauteboksi-wrapper.feedback .content-container.low-thank .low-thank-you {
    display: block;
}
.palauteboksi-wrapper.feedback .content-container.high-thank .high-thank-you {
    display: block;
}
.palauteboksi-wrapper.feedback .content-container.return .returning {
    display: block;
}

.palauteboksi-wrapper.feedback .content-container .stars-indicator {
    margin-bottom: 18px;
}

.palauteboksi-wrapper.feedback .content-container .content-title {
    font-size: 22px;
    margin-bottom: 30px;
}

.palauteboksi-wrapper.feedback .content-container .content-additional-text {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 23px;
}

.palauteboksi-wrapper.feedback .content-container .btn-link {
    margin-bottom: 39px;
}


.palauteboksi-wrapper.feedback .rating-selections .selection {
    display: flex;
    align-items: center;
    --float: inline-start;
    margin-bottom: 24px;
    cursor: pointer;
    transition: var(--transition);
}
.palauteboksi-wrapper.feedback .rating-selections .selection.disabled {
    filter: opacity(0.3);
    pointer-events: none;
    cursor: none;
}

.palauteboksi-wrapper.feedback .content-container .rating-selections .stars-indicator {
    margin-bottom: unset;
}

.palauteboksi-wrapper.feedback .rating-selections .selection:last-of-type {
    margin-bottom: unset;
}
.palauteboksi-wrapper.feedback .rating-selections label {
    margin-bottom: unset;
}

.palauteboksi-wrapper.feedback .change-rating input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: black;
    margin-bottom: unset;
    margin-right: 18px;
    cursor: pointer;
}

/* Hide all filled stars initially */
.single-star .filled-star {
    display: none;
}
/* large and smaller */
@media print, screen and (max-width: 63.99em) {

    .feedback-page .palauteboksi-wrapper-container {
        align-items: start;
    }
    
    .palauteboksi-wrapper.feedback .image-wrapper {
        height: 25vh;
    }
    
    .single-star svg {
        width: 34px;
        height: 32px;
    }

}


/* Show the appropriate number of filled stars based on the parent class */
.stars-indicator.stars-1 .star-1 .filled-star,
.stars-indicator.stars-2 .star-1 .filled-star,
.stars-indicator.stars-2 .star-2 .filled-star,
.stars-indicator.stars-3 .star-1 .filled-star,
.stars-indicator.stars-3 .star-2 .filled-star,
.stars-indicator.stars-3 .star-3 .filled-star,
.stars-indicator.stars-4 .star-1 .filled-star,
.stars-indicator.stars-4 .star-2 .filled-star,
.stars-indicator.stars-4 .star-3 .filled-star,
.stars-indicator.stars-4 .star-4 .filled-star,
.stars-indicator.stars-5 .star-1 .filled-star,
.stars-indicator.stars-5 .star-2 .filled-star,
.stars-indicator.stars-5 .star-3 .filled-star,
.stars-indicator.stars-5 .star-4 .filled-star,
.stars-indicator.stars-5 .star-5 .filled-star {
    display: block;
}

/* Show the appropriate number of filled stars based on the parent class */
.stars-indicator.stars-1 .star-1 .unfilled-star,
.stars-indicator.stars-2 .star-1 .unfilled-star,
.stars-indicator.stars-2 .star-2 .unfilled-star,
.stars-indicator.stars-3 .star-1 .unfilled-star,
.stars-indicator.stars-3 .star-2 .unfilled-star,
.stars-indicator.stars-3 .star-3 .unfilled-star,
.stars-indicator.stars-4 .star-1 .unfilled-star,
.stars-indicator.stars-4 .star-2 .unfilled-star,
.stars-indicator.stars-4 .star-3 .unfilled-star,
.stars-indicator.stars-4 .star-4 .unfilled-star,
.stars-indicator.stars-5 .star-1 .unfilled-star,
.stars-indicator.stars-5 .star-2 .unfilled-star,
.stars-indicator.stars-5 .star-3 .unfilled-star,
.stars-indicator.stars-5 .star-4 .unfilled-star,
.stars-indicator.stars-5 .star-5 .unfilled-star {
    display: none;
}

section.login-page,
section.front-page {
    margin-top: calc(var(--menu-height) + var(--secondary-menu-height));
    height: calc( 100vh - (var(--menu-height) + var(--secondary-menu-height) + var(--admin-bar)));
}
section.feedback-page {
    margin-top: calc(var(--menu-height) + var(--secondary-menu-height));
}

.palauteboksi-wrapper .content-container textarea.feedback {
    border: solid 1px #9FA4B4;
    color: #000;
    border-radius: 6px;
    padding: 18px 22px;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 24px;
}

.palauteboksi-wrapper .content-container textarea.feedback::placeholder {
  color: #989898;
}

.palauteboksi-wrapper form #formFeedback {
    position: absolute;
}


/**********************/
/* palauteboksi table */
/**********************/

.palauteboksi-table-container {
    padding: 2.5rem 3rem 7.5rem;
}
.palauteboksi-table {
    max-width: calc( 1300px + 6rem);
    margin: 0 auto;
}

.palauteboksi-table .thead .trow {
    border-bottom: 1px solid #D6D6D6;
}

.palauteboksi-table .thead .trow {
    height: 60px;
    align-content: center;
}


.palauteboksi-table .tbody .trow {
    height: 55px;
    align-content: center;
    border-bottom: 1px solid #D6D6D6;
}
.palauteboksi-table .tbody .trow:nth-child(even) {
    background: #F9FBFE;
}
.palauteboksi-table .tbody .trow:last-of-type {
    border-bottom: unset;
}


.palauteboksi-table .ttext {
    font-size: 16px;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    align-self: center;
}
.palauteboksi-table .ttext.status:before {
    content: '';
    height: 10px;
    width: 10px;
    margin: 0 20px 0 0;
    border-radius: 10px;
    display: inline-block;
}

.palauteboksi-table .ttext.status.standby:before {
    background: #FFBA00;
}
.palauteboksi-table .ttext.status.opened:before,
.palauteboksi-table .ttext.status.sent:before {
    background: #6DA5E5;
}
.palauteboksi-table .ttext.status.reminded:before {
    background: #D6D6D6;
}
.palauteboksi-table .ttext.status.rated:before {
    background: #7ABC6A;
}
.palauteboksi-table .ttext.status.feedback:before,
.palauteboksi-table .ttext.status.reviewed:before {
    background: #7ABC6A;
}
.palauteboksi-table .ttext.status.failed:before {
    background: #F69598;
}

.palauteboksi-table .ttitle {
    font-size: 16px;
}

.palauteboksi-table .feedback-button {
    width: fit-content;
    cursor: pointer;
}
.palauteboksi-table .feedback-button span {
    text-decoration: underline;
}

/* large and smaller */
@media (max-width: 1023px) {

    .palauteboksi-table .tbody .trow {
        height: unset;
    }
    .palauteboksi-table .ttext {
        font-size: 14px;
    }
    .palauteboksi-table .ttitle {
        font-size: 14px;
    }


    .palauteboksi-table  .tbody .trow {
        padding: 21px 0;
    }
    .palauteboksi-table  .tbody .trow:first-of-type {
        padding-top: 0;
    }
    .palauteboksi-table  .tbody .trow:last-of-type {
        padding-bottom: 0;
    }
    .palauteboksi-table .tbody .trow:nth-child(even) {
        background: unset;
    }

    .palauteboksi-table .ttext.status:before {
        margin: 0 10px 0 0;
    }
    
}

@media (max-width: 639px) {
    .palauteboksi-table-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* New request custom CSS */
.palauteboksi-table .new-request {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* When visible class is added, change opacity to 1 */
.palauteboksi-table .new-request.visible {
    opacity: 1;
}

/* Highlight effect */
@keyframes highlight {
    0%, 100% { background-color: transparent; }
    50% { background-color: yellow; }
}

/* Apply highlight animation */
.palauteboksi-table .new-request.highlight {
    animation: highlight 3s ease-in-out;
}

.palauteboksi-table .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}


.palauteboksi-table .modal-content {
    background-color: var(--color-light);
    border: unset;
    border-radius: 20px;
    margin: auto;
    max-width: 656px;
    min-height: 25rem;
    padding: 52px 50px;
    position: relative;
    width: 80%;
}

.modal .modal-title {
    font-size: 28px;
    line-height: 35px;
    font-weight: bold;
    margin-bottom: 29px;
}
.modal .modal-subtitle {
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 12px;
}
.modal .modal-subtext {
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal .modal-text {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: unset;
}

.palauteboksi-table .close-button {
    color: var(--color-light);
    font-family: system-ui;
    font-size: 3.75rem;
    font-weight: 200;
    line-height: 0;
    right: -2.5rem;
    top: -1.5rem;
}

.palauteboksi-table .close-button:hover,
.palauteboksi-table .close-button:focus {
    color: #d7d7d7;
    text-decoration: none;
    cursor: pointer;
}

/* large and smaller */
@media print, screen and (max-width: 63.99em) {
    .palauteboksi-table .close-button {
        top: -2rem;
        right: -7px;
    }

    .palauteboksi-table .modal-content {
        border-radius: 12px;
        padding: 26px 23px;
    }

    .modal .modal-title {
        font-size: 18px;
        line-height: 22px;
        font-weight: bold;
        margin-bottom: 21px;
    }
    .modal .modal-subtitle,
    .modal .modal-subtext {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 12px;
    }

    .modal #modalEmail.modal-subtext {
        margin-bottom: 29px;
    }
    
    .modal .modal-text {
        font-size: 16px;
    }
}