#depo-baffle {display:none;position: fixed;inset: 0;background-color: #00000063;z-index: 1000;}
#depo-baffle .spinner {position: absolute;width: 100%;height: 100%;}
#depo-baffle .spinner .icon {top: 50%;left: 50%;transform: translate(-50%, -50%);width: 90px;height: 90px;border: 4px solid rgb(187 179 158 / 25%);border-top: 4px solid #ffffff;border-radius: 50%;animation: spin 1s linear infinite;position: relative;}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
#depo-modal {display: none;position: fixed;top: 0;right: 0;width: 460px;height: 100%;background: #fff;transform: translateX(600px);transition: transform 0.75s ease-in-out;z-index: 1001;box-shadow: -1px 0px 10px #00000059;}
#depo-modal.open {transform: translateX(0px);}
#depo-modal .close {width: 40px;height: 40px;border-radius: 2px;background-repeat: no-repeat;background-image: url(../img/icon/close/black.svg);background-size: 24px;background-position: 50%;position: absolute;left: -60px;top: 20px;z-index: 1;background-color: #ffffff;}
#depo-modal .close:hover {cursor: pointer;background-size: 30px;}
#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 .content {height: 100dvh;background-color: #ffffff;z-index: 2;position: relative;overflow-y: auto;border-right: 1px solid #0000;border-bottom: 4px solid #0000;color: #1f1f1f;}
#depo-modal .content::-webkit-scrollbar {width: 4px;}
#depo-modal .content::-webkit-scrollbar-thumb {background-color: #9e9e9e;}
#depo-modal .content .wrap {padding: 0 0 22px;}
#depo-modal .content figure {margin: 18px 0 0 0;padding-bottom: 12px;}
#depo-modal .content figure img {width: 100%;height: auto;}
#depo-modal .content figure figcaption {margin-top: 12px; font-family: Helvetica, sans-serif; font-size: 14px; text-align: center;}
#depo-modal .content .title {margin: 22px 28px 0;}
#depo-modal .content h2 {font-size: 22px;font-family: 'Lydian';font-weight: 400;text-align: left;line-height: 1.25;}
#depo-modal .content h3 {font-size: 20px;font-family: 'e-UkraineHead';font-weight: 500;text-align: left;line-height: 1.4;margin-top: 28px;}
#depo-modal .content p {line-height: 1.45;font-family: 'VinnytsiaSans', sans-serif;font-weight: 400;font-size: 16px;margin: 18px 28px 0;}
#depo-modal .content ul {list-style-type:none;margin-top: 8px;}
#depo-modal .content li {margin-top: 10px;line-height: 1.4;}
#depo-modal .content .title-img {overflow: hidden;width: 100%;}
#bottomSheet .text-modal {border-radius: 10px;padding-bottom: 22px;background-color: #ffffff;z-index: 2;display: none;position: relative;padding-top: 2px;max-height: none;height: calc(100% - 24px);padding-right: 2px;}
#bottomSheet .text-modal .wrap {height:100%;overflow-y: auto;width: auto;padding: 0px 18px 32px 22px;}
#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: 22px;font-family: 'Lydian';font-weight: 500;text-align: left;line-height: 1.25;}
#bottomSheet .text-modal h3 {font-size: 18px;font-family: 'VinnytsiaSans';font-weight: 700;text-align: left;line-height: 1.4;margin-top: 28px;}
#bottomSheet .text-modal p {line-height: 1.45;font-family: 'VinnytsiaSans';font-size: 16px;margin: 18px 0 0 0;font-weight: 400;}
#bottomSheet .text-modal p.edit {margin: 12px 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.normal img {width: 100%;height: auto;}
#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 .photo {margin: 32px 0 0 0;overflow: hidden;padding-bottom: 12px;}
#bottomSheet .text-modal .wrap .pdf_link {color:#3a84df;}
#bottomSheet .text-modal .title {margin-top: 22px;}
#bottomSheet .text-modal .title-img {overflow: hidden;width: 100%;}
@media screen and (min-width: 1670px) {
#depo-modal .close {}
}
@media screen and (min-width: 1900px) {
#depo-modal {width: 540px;}
#depo-modal .content h2 {font-size: 30px;}
#depo-modal .content p {font-size: 18px;}
#depo-modal .close {width: 42px;height: 42px;background-size: 26px;}
#depo-baffle {background-color: #00000082;}
}
@media screen and (min-width: 2500px) {
#depo-modal .close {}
}
@media screen and (max-width: 840px) {
#depo-modal .content {}
#depo-modal .content .wrap {}
#depo-modal .close {}
#depo-modal .close:hover {}
}
@media screen and (max-width: 642px) {
#depo-modal .content {}
#depo-modal .close {}
}
@media screen and (max-width: 542px) {
#bottomSheet {left: 20px;right: 20px;}
}
@media screen and (max-width: 500px) {
#depo-modal {width: calc(100% - 32px);}
#depo-modal .close {z-index: 9;left: -20px;}
}
@media screen and (max-width: 432px) {
#depo-modal .content {}
#depo-modal .content .wrap {}
#depo-modal .close {}
#bottomSheet {left: 4px;right: 4px;}
#bottomSheet .text-modal .wrap {}
#bottomSheet .text-modal h2 {}
#bottomSheet .text-modal p {}
}
@media screen and (max-width: 377px) {
#bottomSheet .text-modal .wrap {padding: 0 14px 32px 18px;}
#bottomSheet .text-modal h2 {}
}
@media screen and (max-width: 324px) {
#depo-modal .content {}
#depo-modal .content .wrap {}
#depo-modal .close {}
#bottomSheet .text-modal .wrap {padding: 0 14px 32px 16px;}
#bottomSheet .text-modal h2 {font-size: 20px;}
#bottomSheet .text-modal p {font-size: 14px;}
}