/*
 * SilverBox 1.3.1
 * Flexible alert/modal with zero dependencies
 *
 * https://silverboxjs.ir/
 *
 * Released on: October 08, 2023
 */

.silverBox-container {
    --silverBox-items-top-margin: 15px;
    --silverBox-padding: 20px;
    --silverBox-border: 0px solid;
    --silverBox-timer-bar-height: 3px;
    --silverBox-timer-bar-border-radius: 10px;
    --silverBox-border-radius: 20px;
    --silverBox-z-index: 1402;
    --silverBox-width: 90vw;
    --silverBox-max-width: min-content;
    --silverBox-min-width: 400px;
    --silverBox-max-height: max-content;
    --silverBox-overlay-width: 100vw;
    --silverBox-overlay-height: 100vh;
    --silverBox-top-distance: 10px;
    --silverBox-top-right-distance: 10px;
    --silverBox-top-left-distance: 10px;
    --silverBox-bottom-distance: 10px;
    --silverBox-bottom-right-distance: 10px;
    --silverBox-bottom-left-distance: 10px;
    --silverBox-slide-animation-left-distance: 10px;
    --silverBox-slide-animation-right-distance: 10px;
    --silverBox-slide-animation-top-distance: 10px;
    --silverBox-slide-animation-bottom-distance: 10px;
    --silverBox-close-button-grid-column-start: 3;
    --silverBox-close-button-justify-self: end;
    --silverBox-close-button-align-self: start;
    --silverBox-title-font-size: 18px;
    --silverBox-title-font-weight: 600;
    --silverBox-title-gap: 0 10px;
    --silverBox-title-justifyContent: center;
    --silverBox-text-font-size: 16px;
    --silverBox-text-font-weight: 500;
    --silverBox-custom-image-max-width: 100px;
    --silverBox-custom-image-max-height: 100px;
    --silverBox-custom-image-width: unset;
    --silverBox-custom-image-height: unset;
    --silverBox-custom-image-border-radius: 3px;
    --silverBox-icon-wrapper-grid-template-columns: repeat(3, 1fr);
    --silverBox-icon-wrapper-align-items: center;
    --silverBox-centered-icon-justify-self: center;
    --silverBox-centered-icon-grid-column-start: 2;
    --silverBox-tick-mark-size: 50px;
    --silverBox-tick-right-size: 50%;
    --silverBox-tick-left-size: 10px;
    --silverBox-tick-circle-border: 3px solid;
    --silverBox-tick-inside-border: 3px solid;
    --silverBox-info-circle-border: 3px solid;
    --silverBox-info-size: 50px;
    --silverBox-info-icon-inside-size: 30px;
    --silverBox-info-icon-width: 500;
    --silverBox-question-circle-border: 3px solid;
    --silverBox-question-size: 50px;
    --silverBox-question-icon-inside-size: 30px;
    --silverBox-question-icon-width: 500;
    --silverBox-warning-circle-border: 3px solid;
    --silverBox-warning-size: 50px;
    --silverBox-warning-icon-inside-size: 30px;
    --silverBox-warning-icon-width: 500;
    --silverBox-error-circle-border: 3px solid;
    --silverBox-error-size: 50px;
    --silverBox-error-icon-inside-size: 30px;
    --silverBox-error-icon-width: 3px;
    --silverBox-button-border-radius: 8px;
    --silverBox-button-icon-border-radius: 10px;
    --silverBox-button-border-width: 1px;
    --silverBox-button-font-size: 16px;
    --silverBox-button-font-weight: 600;
    --silverBox-button-padding: 7px 20px;
    --silverBox-button-min-width: 200px;
    --silverBox-button-width: 100%;
    --silverBox-button-image-max-width: 40px;
    --silverBox-button-text-min-height: 30px;
    --silverBox-button-column-gap: 10px;
    --silverBox-button-wrapper-gap: 10px;
    --silverBox-button-transition: 0.2s ease;
    --silverBox-input-container-flex-wrap: wrap;
    --silverBox-input-font-size: 16px;
    --silverBox-input-padding: 10px;
    --silverBox-input-border-radius: 8px;
    --silverBox-inside-input-gap: 7px;
    --silverBox-input-parent-gap: 10px 0;
    --silverBox-input-font-weight: 500;
    --silverBox-input-width: 100%;
    --silverBox-input-wrapper-width: 100%;
    --silverBox-input-border: 1px solid var(--silverBox-input-border-color);
    --silverBox-input-text-align: start;
    --silverBox-input-flex-direction: column;
    --silverBox-input-parent-justify-content: space-around;
    --silverBox-input-parent-align-items: center;
    --silverBox-hint-fontSize: 12px;
    --silverBox-hint-font-weight: 500;
    --silverBox-input-label-font-size: 14px;
    --silverBox-input-label-font-weight: 500;
    --silverBox-placeHolder-fontSize: 16px;
    --silverBox-input-placeHolder-font-weight: 500;
    --silverBox-input-select-border-radius: 2px;
    --silverBox-input-select-padding: 5px 8px;
    --silverBox-select-input-width: fit-content;
    --silverBox-footer-font-size: 16px;
    --silverBox-footer-font-weight: 500;
    --silverBox-footer-hr-margin: 20px 0 10px;
    --silverBox-footer-hr-height: 1px;
}
.silverBox-container[data-theme="light"] {
    --silverBox-overlay-background: #d0d5dde2;
    --silverBox-background-color: white;
    --silverBox-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    --silverBox-border-color: #fff;
    --silverBox-timer-bar: #bbb;
    --silverBox-title-color: #000;
    --silverBox-text-color: #475467;
    --silverBox-confirm-color: #fff;
    --silverBox-confirm-bg-color: #7f56d9;
    --silverBox-confirm-border-color: #7f56d9;
    --silverBox-confirm-hover-color: #a86ff9;
    --silverBox-deny-color: #fff;
    --silverBox-deny-bg-color: #d33;
    --silverBox-deny-border-color: #d33;
    --silverBox-deny-hover-color: #fa7070;
    --silverBox-cancel-color: #475467;
    --silverBox-cancel-bg-color: #fff;
    --silverBox-cancel-border-color: #d0d5dd;
    --silverBox-cancel-hover-color: #d2d2d2;
    --silverBox-custom-color: #475467;
    --silverBox-custom-bg-color: #fff;
    --silverBox-custom-border-color: #d0d5dd;
    --silverBox-custom-hover-color: #d2d2d2;
    --silverBox-input-border-color: #d0d5dd;
    --silverBox-input-background: #fff;
    --silverBox-input-color: #000;
    --silverBox-input-placeHolder-color: #475467;
    --silverBox-label-color: #1d2939;
    --silverBox-hint-color: #101828;
    --silverBox-input-box-shadow: 0px 0px 4px rgba(201, 14, 14, 0.1);
    --silverBox-hr-line-color: #bbbbbb;
    --silverBox-footer-color: #474747;
    --silverBox-tick-inside-border-color: #15b79e;
    --silverBox-tick-circle-border-color: #15b79e;
    --silverBox-info-circle-border-color: #2e90fa;
    --silverBox-info-color: #2e90fa;
    --silverBox-question-circle-border-color: #a4bcfd;
    --silverBox-question-color: #a4bcfd;
    --silverBox-warning-circle-border-color: #eaaa08;
    --silverBox-warning-color: #eaaa08;
    --silverBox-error-circle-border-color: #e62e05;
    --silverBox-error-color: #e62e05;
}
.silverBox-container[data-theme="dark"] {
    --silverBox-overlay-background: #191919ea;
    --silverBox-background-color: #1f2637;
    --silverBox-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    --silverBox-border-color: #171e2e;
    --silverBox-timer-bar: #555;
    --silverBox-title-color: #fff;
    --silverBox-text-color: #9fa3ad;
    --silverBox-confirm-color: #fff;
    --silverBox-confirm-bg-color: #4c2b92;
    --silverBox-confirm-border-color: #4c2b92;
    --silverBox-confirm-hover-color: #5a30b3;
    --silverBox-deny-color: #fff;
    --silverBox-deny-bg-color: #9d0f0f;
    --silverBox-deny-border-color: #9d0f0f;
    --silverBox-deny-hover-color: #d33;
    --silverBox-cancel-color: #fff;
    --silverBox-cancel-bg-color: #5f5f5f;
    --silverBox-cancel-border-color: #5f5f5f;
    --silverBox-cancel-hover-color: #838383;
    --silverBox-custom-color: #fff;
    --silverBox-custom-bg-color: #5f5f5f;
    --silverBox-custom-border-color: #5f5f5f;
    --silverBox-custom-hover-color: #838383;
    --silverBox-input-border-color: #39363f;
    --silverBox-input-background: #515864;
    --silverBox-input-color: #fff;
    --silverBox-input-placeHolder-color: #a1a4a9;
    --silverBox-label-color: #fff;
    --silverBox-hint-color: #fff;
    --silverBox-input-box-shadow: 0px 0px 4px rgba(90, 206, 23, 0.1);
    --silverBox-hr-line-color: #bbbbbb;
    --silverBox-footer-color: #a1a4a9;
    --silverBox-tick-inside-border-color: #15b79e;
    --silverBox-tick-circle-border-color: #15b79e;
    --silverBox-info-circle-border-color: #2e90fa;
    --silverBox-info-color: #2e90fa;
    --silverBox-question-circle-border-color: #a4bcfd;
    --silverBox-question-color: #a4bcfd;
    --silverBox-warning-circle-border-color: #eaaa08;
    --silverBox-warning-color: #eaaa08;
    --silverBox-error-circle-border-color: #e62e05;
    --silverBox-error-color: #e62e05;
}
.silverBox-container,
.silverBox-container *,
.silverBox * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    border: none;
    text-decoration: none;
}
.silverBox-form {
    margin-top: var(--silverBox-items-top-margin);
}
.silverBox-form .silverBox-input-container {
    margin-top: var(--silverBox-items-top-margin);
    display: flex;
    flex-wrap: var(--silverBox-input-container-flex-wrap);
    gap: var(--silverBox-input-parent-gap);
    justify-content: var(--silverBox-input-parent-justify-content);
    align-items: var(--silverBox-input-parent-align-items);
}
.silverBox-form .silverBox-input-container .silverBox-input-wrapper {
    width: var(--silverBox-input-wrapper-width);
    display: inline-flex;
    flex-direction: var(--silverBox-input-flex-direction);
    gap: var(--silverBox-inside-input-gap);
    text-align: var(--silverBox-input-text-align);
}
.silverBox-form
    .silverBox-input-container
    .silverBox-input-wrapper
    .silverBox-select {
    width: var(--silverBox-select-input-width);
    padding: var(--silverBox-input-select-padding);
    border-radius: var(--silverBox-input-select-border-radius);
}
.silverBox-form .silverBox-input-container .silverBox-input-wrapper > input,
.silverBox-form .silverBox-input-container .silverBox-input-wrapper > textarea {
    background: var(--silverBox-input-background);
    outline: none;
    border: var(--silverBox-input-border);
    color: var(--silverBox-input-color);
    padding: var(--silverBox-input-padding);
    border-radius: var(--silverBox-input-border-radius);
    resize: none;
    font-size: var(--silverBox-input-font-size);
    box-shadow: var(--silverBox-input-box-shadow);
    font-weight: var(--silverBox-input-font-weight);
    width: var(--silverBox-input-width);
}
.silverBox-form
    .silverBox-input-container
    .silverBox-input-wrapper
    > input::placeholder,
.silverBox-form
    .silverBox-input-container
    .silverBox-input-wrapper
    > textarea::placeholder {
    color: var(--silverBox-input-placeHolder-color);
    font-size: var(--silverBox-placeHolder-fontSize);
    font-weight: var(--silverBox-input-placeHolder-font-weight);
}
.silverBox-form .silverBox-input-container .silverBox-input-wrapper label {
    color: var(--silverBox-label-color);
    font-size: var(--silverBox-input-label-font-size);
    font-weight: var(--silverBox-input-label-font-weight);
}
.silverBox-form
    .silverBox-input-container
    .silverBox-input-wrapper
    .silverBox-input-hint {
    color: var(--silverBox-hint-color);
    font-size: var(--silverBox-hint-fontSize);
    font-weight: var(--silverBox-hint-font-weight);
}
.silverBox-button-wrapper {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    gap: var(--silverBox-button-wrapper-gap);
    margin-top: var(--silverBox-items-top-margin);
}
.silverBox-button {
    display: flex;
    column-gap: var(--silverBox-button-column-gap);
    justify-content: center;
    align-items: center;
    outline: none;
    border-width: var(--silverBox-button-border-width);
    border-style: solid;
    border-radius: var(--silverBox-button-border-radius);
    font-size: var(--silverBox-button-font-size);
    font-weight: var(--silverBox-button-font-weight);
    padding: var(--silverBox-button-padding);
    cursor: pointer;
    transition: var(--silverBox-button-transition);
    min-width: var(--silverBox-button-min-width);
    width: var(--silverBox-button-width);
}
.silverBox-button .silverBox-button-icon {
    border-radius: var(--silverBox-button-icon-border-radius);
}
.silverBox-button.silverBox-confirm-button {
    border-color: var(--silverBox-confirm-border-color);
    background-color: var(--silverBox-confirm-bg-color);
    color: var(--silverBox-confirm-color);
}
.silverBox-button.silverBox-confirm-button:hover {
    background-color: var(--silverBox-confirm-hover-color);
}
.silverBox-button.silverBox-custom-button {
    border-color: var(--silverBox-custom-border-color);
    background-color: var(--silverBox-custom-bg-color);
    color: var(--silverBox-custom-color);
}
.silverBox-button.silverBox-custom-button:hover {
    background-color: var(--silverBox-custom-hover-color);
}
.silverBox-button.silverBox-cancel-button {
    border-color: var(--silverBox-cancel-border-color);
    background-color: var(--silverBox-cancel-bg-color);
    color: var(--silverBox-cancel-color);
}
.silverBox-button.silverBox-cancel-button:hover {
    background-color: var(--silverBox-cancel-hover-color);
}
.silverBox-button.silverBox-deny-button {
    border-color: var(--silverBox-deny-border-color);
    background-color: var(--silverBox-deny-bg-color);
    color: var(--silverBox-deny-color);
}
.silverBox-button.silverBox-deny-button:hover {
    background-color: var(--silverBox-deny-hover-color);
}
.silverBox-button img {
    max-width: var(--silverBox-button-image-max-width);
}
.silverBox-button .silverBox-button-text {
    min-height: var(--silverBox-button-text-min-height);
    display: flex;
    align-items: center;
}
.silverBox-button .silverBox-button-loading-animation {
    display: none;
}
.silverBox-button.silverBox-loading-button {
    pointer-events: none;
}
.silverBox-button.silverBox-loading-button .silverBox-button-loading-animation {
    display: inline;
}
.silverBox-button.silverBox-loading-button .silverBox-button-text {
    display: none;
}
.silverBox-button.silverBox-loading-button img {
    display: none;
}
@media only screen and (max-width: 800px) {
    .silverBox-button-wrapper {
        flex-direction: column;
    }
}
.silverBox-close-button {
    cursor: pointer;
    grid-column-start: var(--silverBox-close-button-grid-column-start);
}
.silverBox-icon-wrapper {
    display: grid;
    grid-template-columns: var(--silverBox-icon-wrapper-grid-template-columns);
    align-items: var(--silverBox-icon-wrapper-align-items);
}
.silverBox-icon-wrapper .silverBox-close-button {
    justify-self: var(--silverBox-close-button-justify-self);
    align-self: var(--silverBox-close-button-align-self);
}
.silverBox-header-wrapper > * {
    margin-top: var(--silverBox-items-top-margin);
}
.silverBox-header-wrapper .silverBox-header-title {
    color: var(--silverBox-title-color);
    font-size: var(--silverBox-title-font-size);
    font-weight: var(--silverBox-title-font-weight);
    gap: var(--silverBox-title-gap);
}
.silverBox-header-wrapper .silverBox-header-title.silverBox-title-has-icon {
    display: flex;
    align-items: center;
}
.silverBox-header-wrapper
    .silverBox-header-title.silverBox-title-has-icon.silverBox-title-centred {
    justify-content: var(--silverBox-title-justifyContent);
}
.silverBox-container .silverBox-body-wrapper {
    margin-top: var(--silverBox-items-top-margin);
}
.silverBox-container .silverBox-body-wrapper *:first-child {
    margin-top: 0;
}
.silverBox-container .silverBox-body-wrapper .silverBox-body-description {
    color: var(--silverBox-text-color);
    font-size: var(--silverBox-text-font-size);
    font-weight: var(--silverBox-text-font-weight);
}
.silverBox-icon-wrapper.silverBox-centered-icon,
.silverBox-icon-wrapper > *.silverBox-centered-icon {
    justify-self: var(--silverBox-centered-icon-justify-self);
    grid-column-start: var(--silverBox-centered-icon-grid-column-start);
}
.silverBox-image-wrapper {
    display: flex;
}
.silverBox-image-wrapper > * {
    width: var(--silverBox-custom-image-width);
    max-width: var(--silverBox-custom-image-max-width);
    height: var(--silverBox-custom-image-height);
    max-height: var(--silverBox-custom-image-max-height);
    border-radius: var(--silverBox-custom-image-border-radius);
}
.silverBox-default-icon {
    min-width: 50px;
}
.silverBox-tick-mark {
    position: relative;
    width: var(--silverBox-tick-mark-size);
    height: var(--silverBox-tick-mark-size);
    border: var(--silverBox-tick-circle-border);
    border-color: var(--silverBox-tick-circle-border-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: 1s appear;
}
.silverBox-tick-mark .inside {
    position: absolute;
    width: var(--silverBox-tick-right-size);
    height: var(--silverBox-tick-left-size);
    border-left: var(--silverBox-tick-inside-border);
    border-bottom: var(--silverBox-tick-inside-border);
    border-color: var(--silverBox-tick-inside-border-color);
    transform: rotate(-45deg);
    margin-bottom: 15%;
}
.silverBox-info {
    border: var(--silverBox-info-circle-border);
    border-color: var(--silverBox-info-circle-border-color);
    width: var(--silverBox-info-size);
    height: var(--silverBox-info-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--silverBox-info-icon-inside-size);
    font-weight: var(--silverBox-info-icon-width);
    color: var(--silverBox-info-color);
    animation: rotate 0.25s;
}
.silverBox-question {
    border: var(--silverBox-question-circle-border);
    border-color: var(--silverBox-question-circle-border-color);
    width: var(--silverBox-question-size);
    height: var(--silverBox-question-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--silverBox-question-icon-inside-size);
    font-weight: var(--silverBox-question-icon-width);
    color: var(--silverBox-question-color);
    animation: rotate 0.25s;
}
.silverBox-warning {
    border: var(--silverBox-warning-circle-border);
    border-color: var(--silverBox-warning-circle-border-color);
    width: var(--silverBox-warning-size);
    height: var(--silverBox-warning-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--silverBox-warning-icon-inside-size);
    font-weight: var(--silverBox-warning-icon-width);
    color: var(--silverBox-warning-color);
    animation: warning 0.5s;
}
.silverBox-error {
    width: var(--silverBox-error-size);
    height: var(--silverBox-error-size);
    border-radius: 50%;
    border: var(--silverBox-error-circle-border);
    border-color: var(--silverBox-error-circle-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: error 0.25s;
}
.silverBox-error .x {
    width: var(--silverBox-error-icon-inside-size);
    height: var(--silverBox-error-icon-width);
    position: relative;
}
.silverBox-error .x::before,
.silverBox-error .x::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: var(--silverBox-error-icon-inside-size);
    height: var(--silverBox-error-icon-width);
    background-color: var(--silverBox-error-color);
    border-radius: 10px;
}
.silverBox-error .x::before {
    transform: rotate(45deg);
}
.silverBox-error .x::after {
    transform: rotate(-45deg);
}
@keyframes rotate {
    0% {
        transform: scale(1) rotate(0);
    }
    25% {
        transform: rotate(25deg);
    }
    50% {
        transform: scale(1.1) rotate(-25deg);
    }
    75% {
        transform: rotate(25deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}
@keyframes error {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(5px) scale(1.05);
    }
    50% {
        transform: translateX(-5px) scale(1.1);
    }
    75% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes appear {
    0% {
        transform: scale(1) rotate(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
@keyframes warning {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    25% {
        opacity: 0;
        transform: scale(0.6);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    75% {
        opacity: 0;
        transform: scale(0.6);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.silverBox-button-loading-animation {
    width: 30px;
    height: 30px;
    border: 3px solid;
    border-color: #fff rgba(0, 0, 0, 0);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.silverBox-footer-wrapper {
    margin-top: var(--silverBox-items-top-margin);
    color: var(--silverBox-footer-color);
    font-size: var(--silverBox-footer-font-size);
    font-weight: var(--silverBox-footer-font-weight);
}
.silverBox-footer-wrapper hr {
    margin: var(--silverBox-footer-hr-margin);
    background-color: var(--silverBox-hr-line-color);
    height: var(--silverBox-footer-hr-height);
    border: none;
}
@keyframes leftToRight {
    0% {
        left: -100%;
    }
    80% {
        left: var(--silverBox-slide-animation-left-distance);
    }
    95% {
        left: 2px;
    }
    100% {
        left: var(--silverBox-slide-animation-left-distance);
    }
}
@keyframes rightToLeft {
    0% {
        right: -100%;
    }
    80% {
        right: var(--silverBox-slide-animation-right-distance);
    }
    95% {
        right: 2px;
    }
    100% {
        right: var(--silverBox-slide-animation-right-distance);
    }
}
@keyframes topToBottom {
    0% {
        top: -100%;
    }
    80% {
        top: var(--silverBox-slide-animation-top-distance);
    }
    95% {
        top: 2px;
    }
    100% {
        top: var(--silverBox-slide-animation-top-distance);
    }
}
@keyframes bottomToTop {
    0% {
        bottom: -100%;
    }
    80% {
        bottom: var(--silverBox-slide-animation-bottom-distance);
    }
    95% {
        bottom: 2px;
    }
    100% {
        bottom: var(--silverBox-slide-animation-bottom-distance);
    }
}
body.stop-scrolling {
    height: 100%;
    overflow: hidden;
}
.silverBox-container {
    z-index: var(--silverBox-z-index);
    display: grid;
    overflow-y: auto;
    padding: 20px 10px;
}
.silverBox-container.silverBox-overlay {
    width: var(--silverBox-overlay-width);
    height: var(--silverBox-overlay-height);
    position: fixed;
    top: 0;
    left: 0;
    justify-content: center;
    background-color: var(--silverBox-overlay-background);
    z-index: calc(var(--silverBox-z-index) - 1);
}
.silverBox-container .silverBox {
    z-index: var(--silverBox-z-index);
    position: relative;
    box-sizing: border-box;
    width: var(--silverBox-width);
    min-width: var(--silverBox-min-width);
    max-width: var(--silverBox-max-width);
    max-height: var(--silverBox-max-height);
    display: grid;
    grid-column: 2;
    align-self: center;
    justify-self: center;
    border: var(--silverBox-border);
    border-color: var(--silverBox-border-color);
    border-radius: var(--silverBox-border-radius);
    padding: var(--silverBox-padding);
    box-shadow: var(--silverBox-box-shadow);
    background-color: var(--silverBox-background-color);
    animation: popUp 0.3s linear;
}
.silverBox-container .silverBox .timer-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: var(--silverBox-timer-bar-height);
    border-radius: var(--silverBox-timer-bar-border-radius);
    background-color: var(--silverBox-timer-bar);
}
.silverBox-container .silverBox .timer-bar-wrapper {
    z-index: calc(var(--silverBox-z-index) + 1);
    position: absolute;
    bottom: 0;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
.silverBox-container .silverBox *:first-child {
    margin-top: 0;
}
.silverBox-container .silverBox-body-wrapper,
.silverBox-container .silverBox-header-wrapper,
.silverBox-container .silverBox-footer-wrapper {
    position: relative;
    z-index: calc(var(--silverBox-z-index) + 2);
}
@keyframes popUp {
    50% {
        transform: scale(1.05);
    }
}
@keyframes timer {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}
@media only screen and (max-width: 800px) {
    .silverBox-container .silverBox-container {
        padding: 6px;
    }
    .silverBox-container .silverBox {
        max-width: 90vw;
        min-width: unset;
    }
}
.silverBox-container.silverBox-top-right,
.silverBox-container.silverBox-top-center,
.silverBox-container.silverBox-top-left,
.silverBox-container.silverBox-bottom-right,
.silverBox-container.silverBox-bottom-center,
.silverBox-container.silverBox-bottom-left {
    position: fixed;
    width: -moz-fit-content;
    width: fit-content;
    height: fit-content;
    overflow-x: hidden;
}
.silverBox-container.silverBox-top-right,
.silverBox-container.silverBox-top-center,
.silverBox-container.silverBox-top-left {
    top: var(--silverBox-top-distance);
}
.silverBox-container.silverBox-top-right {
    animation: rightToLeft 0.7s ease-out;
    right: var(--silverBox-top-right-distance);
}
.silverBox-container.silverBox-top-center {
    animation: topToBottom 0.7s ease-out;
    transform: translateX(50%);
    right: 50%;
}
.silverBox-container.silverBox-top-left {
    animation: leftToRight 0.7s ease-out;
    left: var(--silverBox-top-left-distance);
}
.silverBox-container.silverBox-bottom-right,
.silverBox-container.silverBox-bottom-left,
.silverBox-container.silverBox-bottom-center {
    bottom: var(--silverBox-bottom-distance);
}
.silverBox-container.silverBox-bottom-right {
    animation: rightToLeft 0.7s ease-out;
    right: var(--silverBox-bottom-right-distance);
}
.silverBox-container.silverBox-bottom-center {
    animation: bottomToTop 0.7s ease-out;
    transform: translateX(50%);
    right: 50%;
}
.silverBox-container.silverBox-bottom-left {
    animation: leftToRight 0.7s ease-out;
    left: var(--silverBox-bottom-left-distance);
}