/* TOMATO COMMON CSS LIBRARY V1.01 */
/*    2022.04.04. */


/* Loading Animations */
/* <div class="nb-spinner"></div> */
.nb-spinner {
    width: 75px;
    height: 75px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    border-top: 4px solid var(--szf-orange-light);
    border-right: 4px solid transparent;
    border-radius: 50%;
    -webkit-animation: 1.2s spin linear infinite;
    animation: 1.2s spin linear infinite;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/* DOT */
.loader-dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #03A9F4;
    position: relative;
    /* -webkit-animation: 1.2s scaleDown ease-in-out infinite;
    animation: 1.2s scaleDown ease-in-out infinite; */
    margin-left: 0.125rem;
    margin-right: 0.125rem;
}
    .loader-dot:first-child {
        margin-left: 0 !important;
    }
    /*.loader-dot:nth-child(2) {
        margin: 0 15px;
        -webkit-animation: 1.2s scaleDown ease-in-out infinite .15555s;
        animation: 1.2s scaleDown ease-in-out infinite .15555s;
    }
    .loader-dot:nth-child(3) {
        -webkit-animation: 1.2s scaleDown ease-in-out infinite .300000s;
        animation: 1.2s scaleDown ease-in-out infinite .300000s;
    } */
    .loader-dot:last-child {
        margin-right: 0 !important;
    }
@-webkit-keyframes scaleDown {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scaleDown {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* <div class="loader-circle" >
<div > </div >
<div > </div >
<div > </div >
<div > </div >
<div > </div >
<div > </div >
<div > </div >
<div > </div >
</div > */
.loader-circle {
    position: relative;
}
    .loader-circle div {
        height: 10px;
        width: 10px;
        background-color: #03A9F4;
        border-radius: 50%;
        position: absolute;
        -webkit-animation: 1.3s opaque ease-in-out infinite both;
        animation: 1.3s opaque ease-in-out infinite both;
    }
    .loader-circle > div:nth-child(1) {
        top: -25px;
        left: 0;
    }
    .loader-circle > div:nth-child(2) {
        top: -17px;
        left: 17px;
        -webkit-animation-delay: .15s;
        animation-delay: .15s;
    }
    .loader-circle > div:nth-child(3) {
        top: 0;
        left: 25px;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }
    .loader-circle > div:nth-child(4) {
        top: 17px;
        left: 17px;
        -webkit-animation-delay: 0.45s;
        animation-delay: 0.45s;
    }
    .loader-circle > div:nth-child(5) {
        top: 25px;
        left: 0;
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }
    .loader-circle > div:nth-child(6) {
        top: 17px;
        left: -17px;
        -webkit-animation-delay: 0.75s;
        animation-delay: 0.75s;
    }
    .loader-circle > div:nth-child(7) {
        top: 0;
        left: -25px;
        -webkit-animation-delay: .9s;
        animation-delay: .9s;
    }
    .loader-circle > div:nth-child(8) {
        top: -17px;
        left: -17px;
        -webkit-animation-delay: 1.05s;
        animation-delay: 1.05s;
    }
@-webkit-keyframes opaque {
    0%, 40%, 100% {
        opacity: 0.1;
    }
    40% {
        opacity: 1;
    }
}
@keyframes opaque {
    0%, 40%, 100% {
        opacity: 0.1;
    }
    40% {
        opacity: 1;
    }
}
/* END LOADERS PART */

.progress-circle {
    font-size: 1.5rem;
    position: relative; /* so that children can be absolutely positioned */
    padding: 0;
    width: 5em;
    height: 5em;
    background-color: #C4C4C4;
    border-radius: 50%;
    line-height: 5em;
}

    .progress-circle:after {
        border: none;
        position: absolute;
        top: 0.2em;
        left: 0.2em;
        text-align: center;
        display: block;
        border-radius: 50%;
        width: 4.6em;
        height: 4.6em;
        background-color: #F2F0ED;
        content: " ";
    }
    /* Text inside the control */
    .progress-circle span {
        position: absolute;
        font-family: "Work Sans", Arial, sans-serif;
        line-height: 5em;
        width: 5em;
        text-align: center;
        display: block;
        color: #DA7100;
        z-index: 2;
    }

.left-half-clipper {
    /* a round circle */
    border-radius: 50%;
    width: 5em;
    height: 5em;
    position: absolute; /* needed for clipping */
    clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
    clip: rect(auto,auto,auto,auto);
}

.value-bar {
    /*This is an overlayed square, that is made round with the border radius,
   then it is cut to display only the left half, then rotated clockwise
   to escape the outer clipping path.*/
    position: absolute; /*needed for clipping*/
    clip: rect(0, 2.5em, 5em, 0);
    width: 5em;
    height: 5em;
    border-radius: 50%;
    border: 0.45em solid #DA7100; /*The border is 0.35 but making it larger removes visual artifacts */
    /*background-color: #4D642D;*/ /* for debug */
    box-sizing: border-box;
}
/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
    /*Progress bar for the first 50%, filling the whole right half*/
    position: absolute; /*needed for clipping*/
    clip: rect(0, 5em, 5em, 2.5em);
    background-color: #DA7100;
    border-radius: 50%;
    width: 5em;
    height: 5em;
}

.progress-circle:not(.over50) .first50-bar {
    display: none;
}


/* Progress bar rotation position */
.progress-circle.p0 .value-bar {
    display: none;
}

.progress-circle.p1 .value-bar {
    transform: rotate(4deg);
}

/* Porgress bar for JS download method*/
.progress-circle-dl {
    font-size: 2rem;
    position: relative; /* so that children can be absolutely positioned */
    padding: 0;
    width: 10rem;
    height: 10rem;
    background-color: #C4C4C4;
    border-radius: 50%;
    line-height: 10rem;
}

    .progress-circle-dl:after {
        border: none;
        position: absolute;
        top: 0.2em;
        left: 0.2em;
        text-align: center;
        display: block;
        border-radius: 50%;
        width: 9.2rem;
        height: 9.2rem;
        background-color: white;
        content: " ";
    }
    /* Text inside the control */
    .progress-circle-dl span {
        position: absolute;
        font-family: "Work Sans", Arial, sans-serif;
        line-height: 10rem;
        width: 10rem;
        text-align: center;
        display: block;
        color: #DA7100;
        z-index: 2;
    }

.left-half-clipper-dl {
    /* a round circle */
    border-radius: 50%;
    width: 10rem;
    height: 10rem;
    position: absolute; /* needed for clipping */
    clip: rect(0, 10rem, 10rem, 5rem); /* clips the whole left half*/
}
/* when p>50, don't clip left half*/
.progress-circle-dl.over50-dl .left-half-clipper-dl {
    clip: rect(auto,auto,auto,auto);
}

.value-bar-dl {
    position: absolute; /*needed for clipping*/
    clip: rect(0, 5rem, 10rem, 0);
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    border: 0.45em solid #DA7100;
    box-sizing: border-box;
}
.progress-circle-dl.over50-dl .first50-bar-dl {
    /*Progress bar for the first 50%, filling the whole right half*/
    position: absolute; /*needed for clipping*/
    clip: rect(0, 10rem, 10rem, 5rem);
    background-color: #DA7100;
    border-radius: 50%;
    width: 10rem;
    height: 10rem;
}

.progress-circle-dl:not(.over50-dl) .first50-bar-dl {
    display: none;
}


/* Progress bar rotation position */
.progress-circle-dl.p0 .value-bar-dl {
    display: none;
}

.progress-circle-dl.p1 .value-bar-dl {
    transform: rotate(4deg);
}

.responsive-sm-mt-4rem {
    margin-top: 2rem;
}

.responsive-sm-mt-2rem {
    margin-top: 1rem;
}

.responsive-sm-mb-4rem {
    margin-bottom: 2rem;
}

.responsive-sm-mb-2rem {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .responsive-sm-mt-4rem {
        margin-top: 4rem;
    }

    .responsive-sm-mt-2rem {
        margin-top: 2rem;
    }

    .responsive-sm-mb-4rem {
        margin-bottom: 4rem;
    }

    .responsive-sm-mb-2rem {
        margin-bottom: 2rem;
    }
}
/* Toast */
.tomato-toast {
    visibility: hidden;
    min-width: 250px;
    padding: 0.5rem 1.5rem 0 1.5rem;
    color: #fff;
    z-index: 1;
    position: fixed;
    width: 25rem;
    border-radius: 0.3rem;
    opacity: 0;
    box-shadow: 1px 5px 10px 3px rgba(20,20,20,0.2);
}
@media (max-width:576px) {
    .tomato-toast {
        width: 95%;
        bottom: 0;
    }
}
@media (min-width:577px) {
    .tomato-toast {
        top: 0;
        right: 15%;
        margin-left: auto;
        margin-right: auto;
    }
}
.tomato-toast-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 1rem;
    font-size: 2rem;
}
.tomato-toast-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 1rem;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 0.85rem;
}
    .tomato-toast-body p {
        margin-bottom: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
.tomato-toast-visible {
    display: flex !important;
    flex-direction: row;
    animation: fadein 5s 1; /* 0.5s; */
    animation-fill-mode: forwards;
    animation-delay: 2s;
}
.tomato-toast-fadein {
    visibility: visible;
    opacity: 1;
}
.tomato-toast-fadeout {
    visibility: hidden;
    opacity: 0;
}
@media (max-width:576px) {
    .tomato-toast-fadein {
        bottom: 1rem;
        transition: opacity 0.5s linear, bottom 0.5s;
    }
    .tomato-toast-fadeout {
        bottom: -5rem;
        transition: visibility 0s 2s, opacity 2s linear, bottom 2s;
    }
}

@media (min-width:577px) {
    .tomato-toast-fadein {
        top: 3rem;
        transition: opacity 0.5s linear, top 0.5s;
    }

    .tomato-toast-fadeout {
        top: -4rem;
        transition: visibility 0s 2s, opacity 2s linear, top 2s;
    }
}
.tomato-toast-bg-info {
    color: #066477;
    background-color: #CFF4FC; /* skyblue; */
}
.tomato-toast-bg-warning {
    color: #876500;
    background-color: #FFF3CD; /* goldenrod; */
}
.tomato-toast-bg-error {
    color: #DC3545;
    background-color: #F8D7DA; /* darkred; */
}
.tomato-toast-bg-success {
    color: #198754;
    background-color: #D1E7DD; /* darkseagreen; */
}

/* PLUSMINUSBOX */
.number-container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.sg-cw-form-field
{
    margin-top: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    width: 100%;
    align-self: center;
    color: darkorange;
}
cw-secondary {
    color: var(--button-flat-secondary-text-color);
    background-color: var(--button-flat-secondary-background-color);
}
.sg-cw-button {
    align-self: center;
    margin-top: 0;
    transition: all ease-out .1s;
    font-size: 0.875rem;
    border: 0;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    display: inline-block;
    letter-spacing: .03125rem;
    line-height: var(--button-flat-raised-line-height);
    min-height: 2.5rem;
    min-width: 2.5rem;
    outline: none;
    padding: var(--button-flat-raised-y-padding) var(--button-flat-raised-x-padding);
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    text-decoration: none;
    text-transform: var(--button-text-transform);
    user-select: none;
    vertical-align: middle;
}
.sg-cw-ripple-light, .sg-cw-ripple-dark {
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.number-container > * {
    flex: 0 0 auto;
    text-align: center;
}
flat-icon {
    box-shadow: none;
    color: var(--button-flat-text-color);
    font-family: var(--button-flat-raised-font);
    font-weight: var(--button-flat-font-weight);
    background-color: var(--button-flat-background-color);
}
input[type="number"][_ngcontent-flo-c50] {
    -moz-appearance: textfield;
}

.number-container > input {
    margin-top: 0;
    max-width: 50px;
}

input[type="text"].number, input[type="number"] {
    border: 1px solid var(--form-color-border-number);
    padding: .25rem 0;
}

.sg-cw-form-field > input, .sg-cw-form-field > textarea, .sg-cw-form-field > .sg-cw-form-select {
    background-color: transparent;
    border: 0;
    border-bottom: var(--form-select-border-width) solid var(--form-color-border);
    border-radius: 0;
    color: var(--form-color-input);
    font-size: var(--form-font-size);
    margin: 1rem 0 1px;
    margin-top: 1rem;
    outline: none;
    padding: var(--form-select-padding) 0;
    position: relative;
    resize: none;
    width: 100%;
}
.sg-cw-cards.sg-cw-product .sg-cw-form-field > input {
    border: 1px solid var(--cards-product-options-color);
    color: var(--cards-product-options-color);
}
.icon-minus::before {
    content: "&6901";
}
.icon-add::before {
    content: "&6955";
}
.plusminusbox {
    border: 1px solid #ccc;
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
    border-radius: .0em;
    background-image: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    /* color: #212529;
    color: #606060; */
}
.hide-plusminusbox-input {
    position: relative;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    /* margin-top: 1px; */
}
    .hide-plusminusbox-input, .hide-plusminusbox-input::before, .hide-plusminusbox-input::after {
        box-sizing: border-box;
    }
        .hide-plusminusbox-input input {
            border: none;
            -webkit-appearance: none;
            -ms-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: transparent;
            padding: 0;
            border-radius: 0;
            width: 2rem;
            font-size: 14px;
            color: #606060;
            vertical-align: middle;
        }
            .hide-plusminusbox-input input:focus, .hide-plusminusbox-input input:focus-visible {
                border: 0;
                outline: none;
            }
.PlusMinusPseudo .btn-check:focus + .btn, .PlusMinusPseudo .btn:focus {
    outline: 0;
    box-shadow: none;
}
.PlusMinusPseudos {
    border: 1px solid transparent;
}
    .PlusMinusPseudos:hover {
        border: 1px solid #CCCCCC;
        box-shadow: 1px 1px 10px 1px rgba(187, 177, 166);
        outline: none;
    }
    .PlusMinusPseudos:active {
        border: 1px solid rgba(128, 61,4,0.5);
        box-shadow: 1px 1px 10px 1px rgba(187, 177, 166);
        outline: 0;
        background-image: linear-gradient(to bottom, rgba(218,113,20,0.2) 0%, rgba(128,61,4,0.2) 100%);
    }
    .PlusMinusPseudos:focus {
        border: 1px solid #CCCCCC;
        box-shadow: 1px 1px 10px 1px rgba(187, 177, 166);
        /* outline: none;
        background-image: linear-gradient(to bottom, rgba(218,113,20,0.2) 0%, rgba(128,61,4,0.2) 100%); */
    }

.btn-svg-trl {
    background: transparent;
    border-color: transparent;
    padding: 0;
    margin-top: -3px;
    border-width: 0px !important;
    outline: 0;
    border-style: none;
}

.btn-svg-trl:hover {
    box-shadow: none;
}

.btn-svg-trl.focus, .btn-svg-trl:focus {
    outline: 0;
    box-shadow: none !important;
}
.copied-to-clipboard-box {
    position: absolute;
    overflow: visible;
    text-align: center;
    overflow-wrap: anywhere;

}
    .copied-to-clipboard-box span {
        background-color: #121212C0;
        padding: 0.25rem 0.75rem;
        border-radius: 5px;
        color: whitesmoke;
        width: max-content;
        display: block;
    }
.opacity-full {
    opacity: 1;
}