#depo-modal {display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index: 99999;align-items: center;justify-content: center;}
#depo-modal .baffle {position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color: #0000002e;backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);display: none;z-index: 0;}
#depo-modal .close {width: 52px;height: 52px;border-radius: 50%;background-repeat: no-repeat;background-image: url(resources/icon/close/think-white.svg);background-size: 44px;background-position: 50%;position: absolute;right: 20px;top: 20px;z-index: 9;}
#depo-modal .close:hover {cursor: pointer;background-color: #ffffff21;}
#depo-modal .baffle .spinner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
#depo-modal .baffle .icon {width: 70px; height: 70px; border: 6px solid rgba(255, 255, 255, 0.3); border-top: 6px solid #ffffff; border-radius: 50%; animation: spin 1s linear infinite;}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}


#overlay-sheet {position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;background-color: rgba(0, 0, 0, 0.5);z-index: 10;display:none;backdrop-filter: blur(2px);-webkit-backdrop-filter:blur(2px);}
#bottomSheet {position: fixed;z-index: 999;bottom: -30px;left: 50px;right: 50px;height: 70%;max-height: 94%;background-color: white;border-radius: 15px 15px 0 0;box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);transition: transform 0.5s ease-in-out, height 0.5s ease-in-out;transform: translateY(100%);padding: 0px 3px 0 3px;}
#bottomSheet.open {transform: translateY(0);bottom: 0;}
#bottomSheet.expanded {height: 94%;}
#bottomSheet .grip {background-color: transparent;border-radius: 3px;overflow: hidden;padding: 18px 0 20px 0;}
#bottomSheet .grip .body {width: 60px;height: 5px;background-color: #bfbfbf;border-radius: 3px;margin: 0 auto;}

#depo-modal .text-modal {max-height: calc(100% - 60px);border-radius: 10px;background-color: #f5f5f5;z-index: 2;display: none;position: relative;overflow-y: auto;overflow-x: hidden;border-right: 4px solid #f5f5f5;border-top: 16px solid #f5f5f5;border-bottom: 16px solid #f5f5f5;}
#depo-modal .text-modal::-webkit-scrollbar {width: 3px;}
#depo-modal .text-modal::-webkit-scrollbar-thumb {background-color: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #9e9e9e;}
#depo-modal .text-modal .wrap {width: 660px;padding: 20px 26px 32px 30px;}
#depo-modal .text-modal .wrap figure.normal {margin: 18px 0 0 0;padding-bottom: 12px;}
#depo-modal .text-modal .wrap figure.first {margin: 32px 0 0 0;}
#depo-modal .text-modal .wrap figure.normal img {width: 100%;height: auto;border: 1px solid #878787;padding: 5px;box-sizing: border-box;}
#depo-modal .text-modal .wrap figure.normal figcaption {margin-top: 12px; font-family: Helvetica, sans-serif; font-size: 14px; text-align: center;}
#depo-modal .text-modal .wrap figure.normal figcaption.pdf {margin-top: 32px;font-size: 14px;width: auto;display: flex;justify-content: center;font-family: 'e-Ukraine-Light';}
#depo-modal .text-modal .wrap figure.normal figcaption.pdf a {display: block; background: #007F4D; color: #fff; text-decoration: none; padding: 12px 20px; border-radius: 32px;}
#depo-modal .text-modal .wrap figure.normal figcaption.pdf a:hover {box-shadow: 0 0 0 3px #fff;}

#depo-modal .text-modal h2 {font-size: 18px;font-family: Martian Mono;text-align: left;line-height: 1.4;}
#depo-modal .text-modal p {line-height: 1.7;font-family: 'e-Ukraine-Light';font-weight: 400;font-size: 16px;margin: 18px 0 0 0;}
#depo-modal .text-modal ul {list-style-type:none;margin-top: 8px;}
#depo-modal .text-modal li {margin-top: 10px;line-height: 1.4;}

#bottomSheet .text-modal {border-radius: 10px;padding-bottom: 22px;background-color: #fff;z-index: 2;display: none;position: relative;padding-top: 10px;max-height: none;height: calc(100% - 24px);padding-right: 2px;}
#bottomSheet .text-modal .wrap {height:100%;overflow-y: auto;width: auto;padding: 0px 24px 42px 28px;}
#bottomSheet .text-modal .wrap::-webkit-scrollbar {width: 3px;}
#bottomSheet .text-modal .wrap::-webkit-scrollbar-thumb {background-color: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #9e9e9e;}
#bottomSheet .text-modal h2 {font-size: 17px;font-family: Martian Mono;text-align: left;line-height: 1.4;}
#bottomSheet .text-modal p {line-height: 1.6;font-family: 'e-Ukraine-Light';font-weight: 400;font-size: 16px;margin: 18px 0 0 0;}
#bottomSheet .text-modal ul {list-style-type:none;margin-top: 8px;}
#bottomSheet .text-modal li {margin-top: 10px;line-height: 1.4;}
#bottomSheet .text-modal .wrap figure.normal {margin: 18px 0 0 0;padding-bottom: 12px;}
#bottomSheet .text-modal .wrap figure.first {margin: 32px 0 0 0;}
#bottomSheet .text-modal .wrap figure.normal img {width: 100%;height: auto;border: 1px solid #919191;padding: 5px;box-sizing: border-box;}
#bottomSheet .text-modal .wrap figure.normal figcaption {margin-top: 12px; font-family: Helvetica, sans-serif; font-size: 14px; text-align: center;}
#bottomSheet .text-modal .wrap figure.normal figcaption.pdf {margin-top: 32px;font-size: 14px;display: flex;justify-content: center;font-family: 'e-Ukraine-Light';}
#bottomSheet .text-modal .wrap figure.normal figcaption.pdf a {display: block; background: #007F4D; color: #fff; text-decoration: none; padding: 12px 20px; border-radius: 32px;}

#depo-modal.edit-info-popup .text-modal {background-color: #3A3A3A;color: #fff;border-right: 4px solid #3A3A3A;border-top: 16px solid #3A3A3A;border-bottom: 16px solid #3A3A3A;}
#depo-modal.edit-info-popup .text-modal h2 {font-family: Martian Mono;margin-bottom: 36px;font-size: 26px;}
#depo-modal.edit-info-popup .text-modal p {font-family: 'e-Ukraine-Light';font-size: 16px;margin: 12px 0 0 0;line-height: 1.6;}

#bottomSheet.edit-info-popup {background-color: #3a3a3a;}
#bottomSheet.edit-info-popup .text-modal {background-color: #3a3a3a;color: #fff;}
#bottomSheet.edit-info-popup .text-modal h2 {font-size: 22px;font-family: Martian Mono;margin-bottom: 32px;}
#bottomSheet.edit-info-popup .text-modal p {line-height: 1.6;font-family: 'e-Ukraine-Thin';font-size: 17px;}


/*** 1670px  *******************/
@media screen and (min-width: 1670px) {
#depo-modal .close {right: 40px; top: 40px; width: 82px; height: 82px; background-size: 64px;}
}

/*** 1900px  *******************/
@media screen and (min-width: 1900px) {
#depo-modal .close {right: 50px;top: 50px;width: 92px;height: 92px;background-size: 74px;}
}

/*** 2500px  *******************/
@media screen and (min-width: 2500px) {
#depo-modal .close {right: 70px;top: 70px;width: 112px;height: 112px;background-size: 94px;}
}

/* ------------------------------------------------------------------------------------- */
/* DOWN ------------------------------- */

/*** 1010px  *******************/
@media screen and (max-width: 1010px) {
#depo-modal .imgfix-modal {height: auto;max-width: calc(100% - 150px);}
#depo-modal .imgfix-modal .boss img {height: auto;max-height: none;min-width: auto;}
}

/*** 840px *******************/
@media screen and (max-width: 840px) {
#depo-modal .text-modal {max-width: calc(100% - 160px);}
#depo-modal .text-modal .wrap {width: auto;}
#depo-modal .close {right: 16px;}
#depo-modal .close:hover {cursor: default;background-color:transparent;}
}

/*** 642px (!!!! for 640) *******************/
@media screen and (max-width: 642px) {
#depo-modal .text-modal {max-width: calc(100% - 64px);max-height: calc(100% - 54px);}
#depo-modal .close {background-color: #ffffff; background-image: url(resources/icon/close/think-black.svg); bottom: 14px; top: auto; right: auto; left: auto; box-shadow: 0 0 10px #0000004f; background-size: 36px;}
}

/*** 542px (!!!! for 540) *******************/
@media screen and (max-width: 542px) {
#bottomSheet {left: 20px;right: 20px;}
}

/*** 432px (!!!! for 424/428/430) *******************/
@media screen and (max-width: 432px) {
#depo-modal .text-modal {max-width: none;max-height: none;height: calc(100% - 24px);width: calc(100% - 24px);}
#depo-modal .text-modal .wrap {padding: 12px 20px 32px 22px;}
#depo-modal .close {background-color: #ebebeb;background-image: url(resources/icon/close/black.svg);bottom: auto;top: 12px;right: 12px;left: auto;box-shadow: none;background-size: 30px;width: 46px;height: 46px;border-radius: 0;}

#bottomSheet {left: 4px;right: 4px;}
#bottomSheet .text-modal .wrap {padding: 0 18px 42px 22px;}
#bottomSheet .text-modal h2 {font-size: 17px;}
#bottomSheet .text-modal p {font-size: 15px;}
#bottomSheet.edit-info-popup .text-modal p {font-size: 15px;}
}

/*** 377px (!!!! for 375) ***********************/
@media screen and (max-width: 377px) {
#bottomSheet .text-modal .wrap {padding: 0 16px 42px 20px;}
#bottomSheet .text-modal h2 {font-size: 16px;}

#bottomSheet.edit-info-popup .text-modal h2 {font-size: 20px;}
}

/*** 324px (!!!! for 320) ***********************/
@media screen and (max-width: 324px) {
#depo-modal .text-modal {height: calc(100% - 20px);width: calc(100% - 20px);}
#depo-modal .text-modal .wrap {padding: 12px 14px 32px 16px;}
#depo-modal .close {top: 10px;right: 10px;background-size: 28px;width: 42px;height: 42px;}
#bottomSheet .text-modal .wrap {padding: 0 14px 42px 16px;}
}