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

.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); /*left: 50%; top: 50%; transform: translate(-50%,-50%);*/ overflow: hidden; opacity: 1; padding: 10px 0; padding-top: 20px; text-align: center; transition: all 0.5s;}
.wtBoxBody p {margin: 0;}
.wtBoxBody {padding: 10px 25px;}
.wtBoxFoot {padding: 10px 25px 15px;}
.wtBoxBody input {width: 100%; border: 1px solid #ccc; padding: 2px 10px 4px;}
.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: #F44336;}
.wtType_error {background-color: #FFC107;}
.wtType_question {background-color:teal;}


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

/*/MODAL/*/
._wtModalBg {position: fixed; height: 100%; width: 100%; background-color: #00000010; left: 0; top: 0; z-index: 999999;}
.closeBtn {position: absolute; top: 0; right: 0; padding: 0 10px; color: #ccc; cursor: pointer; font-size: 19px;}

._wtModalBx {border-radius: 4px; background-color: #fff; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden; opacity: 1; transition: all 0.5s;}
._wtModalMd {width: 600px;}
._wtModalLg {width: 1000px;}
._wtSweetModalHead {padding: 15px; background-color: #96959c; position: relative;}
._wtSweetModalBody {padding: 0 15px; overflow-y: auto;}
._wtSweetModalFoot {padding: 15px; text-align: right;}
._wtModalInput {margin-bottom: 10px;}
._wtModalInput small {width: 100%;}
._wtModalInput input, .modalInput select {font-size: 12px; height: 35px; padding: 10px; border: 1px solid #ccc; width: 100%; padding: 3px;}

._wtBtnSm:focus, ._wtBtnMd:focus, ._wtBtnLg:focus {outline: none;}
._wtBtnSm:hover, ._wtBtnMd:hover, ._wtBtnLg:hover {box-shadow: 0 3px 8px 0 rgb(0 0 0 / 25%); color: #fff;}
.flyAway {top: -50%; transition: all 0.5s;}

/*/SVG ICONS/*/
.svg-box {display:inline-block; position: relative; width:150px;}
.green-stroke {stroke:#7CB342;}
.red-stroke {stroke: #FF6245;}
.yellow-stroke {stroke: #FFC107;}
.blue-stroke {stroke: #1aa2cf;}
.teal-stroke {stroke: teal;}
.circular {width: 100%;}
.circular circle.path {stroke-dasharray: 330; stroke-dashoffset: 0; stroke-linecap: round; opacity: 0.4; animation: 0.7s draw-circle ease-out;}

/*------- Checkmark ---------*/
.checkmark{stroke-width: 6.25; stroke-linecap: round; position:absolute; top: 56px; left: 49px; width: 52px; height: 40px;}
.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 ----------*/
.cross {stroke-width:6.25; stroke-linecap: round; position: absolute; top: 54px; left: 54px; width: 40px; height: 40px;}

.cross .first-line {animation: 0.7s draw-first-line ease-out;}
.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;
    }
}

.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);}
.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);
    }
}

.wt-icon {position: absolute; left: 60px; top: 30px; font-size: 3.75em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.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);
    }
}
.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);
    }
}



/*///////////LIGHT BOX////////////////*/
body{overflow-x: hidden; overflow-y: auto;}
.noYScroll {overflow-y: hidden;}
._wt_Box a {display: block; height: 100%; width: 100%;}

._wt_BoxBg {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #151515d4; z-index: 999999;}
._wt_fadeBox {animation: 0.5s open-bounce;}
@keyframes open-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}
._wt_BoxPanel {width: calc(100% - 220px) !important;}
._wt_BoxInner {position: relative; height: 100%; width: 100%; display: grid; align-items: center;}
._wt_BoxSlider {height: 100%; width: 100%; display: -webkit-box; overflow: hidden;}
._wt_BoxSlide {height: 100%; width: 100%; text-align: center; position: relative; left: 0;}
._wt_BoxSlide img {height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); cursor: zoom-in;}
._wtPan {cursor: grab !important;}
._wtBoxBtn {background-color: #000000a8; padding: 5px 10px 8px; text-align: center; cursor: pointer; color: #fff; position: absolute; top: 50%; transform: translateY(-50%); border: none;}
._wt_prevBtn {left: 5px;}
._wt_nextBtn {right: 5px;}
._wtBoxBtn img {filter: invert(1); height: 12px;}
._wt_num_bx {font-size: 14px; color: #c9c9c9; padding: 10px; font-weight: 200; display: inline-block; position: absolute; left: 0; top: 0;}
._wtOptions {position: absolute; top: 0; right: 0; background-color: red; display: flex; background-color: #00000075; z-index: 999990;}
._wtOptions button {width: 50px; padding: 5px 0 10px; border: none; text-align: center; background-color: transparent; overflow: hidden;}
._wtOptions button img {height: 15px; width: 15px; filter: invert(1);}
._wtBoxPanel {width: 220px; height: 100%; position: fixed; right: 0; top: 0; background-color: #fff; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: max-content; grid-gap: 5px; padding: 5px; background-color: #ccc; right: -100%; }
/*/SCROLL/*/
._wtBoxPanel::-webkit-scrollbar{width: 0.4em; overflow-y: hidden; background-color: #888;}
._wtBoxPanel::-webkit-scrollbar,
._wtBoxPanel::-webkit-scrollbar-thumb {overflow:visible;}
._wtBoxPanel::-webkit-scrollbar-thumb {border-radius: 2px; background-color: #444;}
/* MAGIC HAPPENS HERE */
._wtBoxPanel:hover {overflow-y: auto; -webkit-transition: all 0.5s;}

._wt_panelOp {right: 0% !important;}
._wtThumbBox {height: 75px; overflow: hidden; display: block; position: relative; cursor: pointer;}
._wtThumbBox:before {border: 5px solid #5284ffc7; bottom: 0; content: ''; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: all .2s cubic-bezier(.25, .46, .45, .94); z-index: 99991;}
._wtThumbBox img {height: 100%; width: 100%; object-fit: cover;}
._wtThumbActive:before {opacity: 1 !important;}

.cancelBtn {padding: 8px 15px; background-color: #ccc; color: #333; border: none; }

/*/MOBILE SLIDER/*/
@media only screen and (max-width:767px) {
    ._wt_BoxSlide img {height: auto; width: 100%;}
}