/*/CUSTOM ALERT/*/
._wtSwtBgDiv {position: fixed; height: 100%; width: 100%; background-color: #00000038; left: 0; top: 0; z-index: 999999; display: grid; justify-content: center; align-items: center; padding: 15px;}

._wtSwtBgDiv .wtBox {position: relative; min-width: 400px; max-width: 650px; height: fit-content; border-radius: 5px; background-color: #fff; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); overflow: hidden; opacity: 1; padding: 10px 0; padding-top: 20px; text-align: center; transition: all 0.5s;}
._wtSwtBgDiv .wtBoxBody p {margin: 0;}
._wtSwtBgDiv .wtBoxBody {padding: 10px 25px;}
._wtSwtBgDiv .wtBoxFoot {padding: 10px 25px 15px;}
._wtSwtBgDiv .wtBoxBody input {width: 100%; border: 1px solid #ccc; padding: 2px 10px 4px;}
._wtSwtBgDiv .wtBoxBody input::placeholder {font-size: 14px; color: red !important;}

/*/CUSTOM TOASTER/*/
.wtBoxToast {position: fixed; height: auto; width: 300px; top: 15px; right: 15px; z-index: 9999; padding-bottom: 20px;}
.wtBoxToastBody {position: relative; width: 100%; height: 100%; padding: 15px; background-color: grey; cursor: pointer; border-radius: 5px; overflow: hidden; margin-bottom: 5px; opacity: 0.8; position: relative; display: flex;}
.wtBoxToastBody i {height: 100%; color: #fff; padding: 3px 10px 0 0;}
.wtBoxToastBody p {margin: 0; color: #fff; font-size: 14px; opacity: 1 !important;}
.top_right, .right_top {top: 15px; right: 15px; left: inherit; bottom: inherit;}
.top_left, .left_top {top: 15px; left: 15px; bottom: inherit; right: inherit;}
.bottom_left, .left_bottom {bottom: 15px; left: 15px; top: inherit; right: inherit;}
.bottom_right, .right_bottom {bottom: 15px; left: 15px; top: inherit; right: inherit;}
.top_center, .center_top {top: 15px; left: 50%; bottom: inherit; right: inherit; transform: translateX(-50%);}
.bottom_center, .center_bottom {top: inherit; left: 50%; bottom: 15px; right: inherit; transform: translateX(-50%);}
.wtType_success {background-color: #4CAF50;}
.wtType_info {background-color: #03A9F4;}
.wtType_warning {background-color: #FFC107;}
.wtType_error {background-color: #F44336;}
.wtType_question {background-color:teal;}


/*/SWEET BOX/*/
._wtSwtBgDiv .wtSweetImg {max-width: 500px; height: auto; overflow: hidden;}
._wtSwtBgDiv .wtSweetImg img {width: 100%; margin-bottom: 10px;}
._wtSwtBgDiv .wtSweetFoot {padding: 10px 25px 5px; margin-top: 5px; border-top: 1px solid #ccc; text-align: center;}
._wtSwtBgDiv .wtSweetFoot a {color: teal; font-size: 14px;}
._wtSwtBgDiv .wtSweetHtml {height: auto; overflow: hidden;}
._wtSwtBgDiv .wtSweetHtml iframe, .wtSweetHtml img {width: 100%; padding: 0 25px;}

/*/Buttons/*/
._wtSwtBgDiv ._wtSwtBtn {display: inline-block; padding: 10px 20px; margin: 0 5px; border: none; background-color: grey; width: max-content; font-size: 14px; border-radius: 3px;}
._wtSwtBgDiv ._wtBgSuccess {background-color: #7CB342; color: #fff;}
._wtSwtBgDiv ._wtBgInfo {background-color: #1aa2cf; color: #fff;}
._wtSwtBgDiv ._wtBgWarning {background-color: #FFC107; color: #fff;}
._wtSwtBgDiv ._wtBgError {background-color: #FF6245; color: #fff;}
._wtSwtBgDiv ._wtBgQuestion {background-color: teal; color: #fff;}
._wtSwtBgDiv ._wtBgGrey {background-color: grey; color: #fff;}

.flyAway {top: -50%; transition: all 0.5s;}

/*/SVG ICONS/*/
._wtSwtBgDiv .svg-box {display:inline-block; position: relative; width:150px;}
._wtSwtBgDiv .success-stroke {stroke:#7CB342;}
._wtSwtBgDiv .error-stroke {stroke: #FF6245;}
._wtSwtBgDiv .warning-stroke {stroke: #FFC107;}
._wtSwtBgDiv .info-stroke {stroke: #1aa2cf;}
._wtSwtBgDiv .question-stroke {stroke: teal;}
._wtSwtBgDiv .wt_circular {width: 100%;}
._wtSwtBgDiv .wt_circular circle.path {stroke-dasharray: 330; stroke-dashoffset: 0; stroke-linecap: round; opacity: 0.7; animation: 0.7s draw-circle ease-out;}

/*------- Checkmark ---------*/
._wtSwtBgDiv .checkmark{stroke-width: 6.25; stroke-linecap: round; position:absolute; top: 56px; left: 49px; width: 52px; height: 40px; stroke: #7CB342;}
._wtSwtBgDiv .checkmark path {animation: 1s draw-check ease-out;}
@keyframes draw-circle {
    0% {
        stroke-dasharray: 0,330;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    80% {
        stroke-dasharray: 330,330;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100%{
        opacity: 0.4;
    }
}

@keyframes draw-check {
    0% {
        stroke-dasharray: 49,80;
        stroke-dashoffset: 48;
        opacity: 0;
    }

    50% {
        stroke-dasharray: 49,80;
        stroke-dashoffset: 48;
        opacity: 1;
    }

    100% {
        stroke-dasharray: 130,80;
        stroke-dashoffset: 48;
    }
}

/*---------- Cross ----------*/
._wtSwtBgDiv .cross {stroke-width:6.25; stroke-linecap: round; position: absolute; top: 54px; left: 54px; width: 40px; height: 40px; stroke: #FF6245;}

._wtSwtBgDiv .cross .first-line {animation: 0.7s draw-first-line ease-out;}
._wtSwtBgDiv .cross .second-line {animation: 0.7s draw-second-line ease-out;}

@keyframes draw-first-line {
    0% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 56,330;
        stroke-dashoffset: 0;
    }
}

@keyframes draw-second-line {
    0% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }

    50% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }

    100% {
        stroke-dasharray: 55,0;
        stroke-dashoffset: 70;
    }
}

._wtSwtBgDiv .alert-sign {stroke-width:6.25; stroke-linecap: round; position: absolute; top: 40px; left: 68px; width: 15px; height: 70px; animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275); stroke: #FFC107;}
._wtSwtBgDiv .alert-sign .dot {stroke:none; fill: #FFC107;}
@keyframes alert-sign-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

._wtSwtBgDiv .wt-icon {position: absolute; left: 60px; top: 30px; font-size: 3.75em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
._wtSwtBgDiv .wt-icon-info {color: #1aa2cf; transform: translate(-50%,-50%) rotate(180deg); animation: 0.5s info-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);}
@keyframes info-sign-bounce {
    0% {
        transform: translate(-50%,-50%) rotate(180deg) scale(0);
        opacity: 0;
    }

    50% {
        transform: translate(-50%,-50%) rotate(180deg) scale(0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%,-50%) rotate(180deg) scale(1);
    }
}
._wtSwtBgDiv .wt-icon-question {color: teal; animation: 0.5s question-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);}

@keyframes question-sign-bounce {
    0% {
        transform: translate(-50%,-50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%,-50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%,-50%) scale(1);
    }
}