#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: #0a0a0a9e;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: #ffffff;z-index: 2;display: none;position: relative;overflow-y: auto;border-right: 4px solid #fff;border-top: 16px solid #fff;border-bottom: 16px solid #fff;}
#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: 680px;padding: 28px 42px 32px 42px;}
#depo-modal .text-modal .wrap figure.normal {margin: 18px 0 0 0;padding-bottom: 12px;}
#depo-modal .text-modal .wrap figure.normal img {width: 100%;height: auto;}
#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 h2 {font-size: 22px;font-family: 'e-UkraineHead-Medium';text-align: left;line-height: 1.4;}
#depo-modal .text-modal h3 {font-size: 20px;font-family: 'e-UkraineHead-Medium';text-align: left;line-height: 1.4;margin-top: 28px;}
#depo-modal .text-modal p {line-height: 1.6;font-family: 'e-Ukraine-Light';font-size: 16px;margin: 18px 0 0 0;}
#depo-modal .text-modal p.edit {margin: 12px 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: #ffffff;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: 20px;font-family: 'e-UkraineHead-Medium';text-align: left;line-height: 1.4;}
#bottomSheet .text-modal h3 {font-size: 18px;font-family: 'e-UkraineHead-Medium';text-align: left;line-height: 1.4;margin-top: 28px;}
#bottomSheet .text-modal p {line-height: 1.6;font-family: 'e-Ukraine-Light';font-size: 16px;margin: 18px 0 0 0;}
#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;}

#depo-modal .picture-modal {height: calc(100% - 84px);max-height: calc(100vw - 280px);max-width: calc(100% - 150px);width: auto;border-radius: 10px;padding: 16px 4px 16px 16px;background-color: #ffffff;opacity: 0;position: relative;transition: opacity 0.3s ease-in;-webkit-transition: opacity 0.3s ease-in;-moz-transition: opacity 0.3s ease-in;-o-transition: opacity 0.3s ease-in;}
#depo-modal .picture-modal.open {opacity: 1;transition: opacity 0.2s ease-in;-webkit-transition: opacity 0.2s ease-in;-moz-transition: opacity 0.2s ease-in;-o-transition: opacity 0.2s ease-in;}
#depo-modal .picture-modal .boss {display: flex;width: 100%;height: 100%;}
#depo-modal .picture-modal .img-wrap {height: auto;}
#depo-modal .picture-modal .img-wrap img {width: auto;height: auto;background-color: #e7e7e7;max-height: 100%;display: block;max-width: 100%;}
#depo-modal .picture-modal .text-wrap {height: 100%;overflow-y: auto;width: 320px;padding: 10px 22px 22px 22px;flex-shrink: 0;}
#depo-modal .picture-modal .text-wrap::-webkit-scrollbar {width: 3px;}
#depo-modal .picture-modal .text-wrap::-webkit-scrollbar-thumb {background-color: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #9e9e9e;}
#depo-modal .picture-modal h2 {font-size: 18px;font-family: 'e-UkraineHead-Medium';font-family: 'e-UkraineHead-Bold';text-align: left;line-height: 1.45;}
#depo-modal .picture-modal p {line-height: 1.45;font-family: 'e-Ukraine-Light';font-size: 16px;margin: 12px 0 0 0;}
#depo-modal .picture-modal p.name {font-size: 17px;font-family: 'e-Ukraine-regular';line-height: 1.4;}
#depo-modal .picture-modal ul {list-style-type:none;margin-top: 8px;}
#depo-modal .picture-modal li {margin-top: 10px;line-height: 1.4;}

#bottomSheet .picture-modal {border-radius: 10px;padding-bottom: 22px;background-color: #ffffff;z-index: 2;display: none;position: relative;padding-top: 10px;height: calc(100% - 24px);padding-right: 2px;}
#bottomSheet .picture-modal .boss {height:100%;overflow-y: auto;width: 100%;padding: 0px 24px 42px 28px;}
#bottomSheet .picture-modal .boss::-webkit-scrollbar {width: 3px;}
#bottomSheet .picture-modal .boss::-webkit-scrollbar-thumb {background-color: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #9e9e9e;}
#bottomSheet .picture-modal .img-wrap {height: auto;width:100%;}
#bottomSheet .picture-modal .img-wrap img {width: auto;height: auto;background-color: #e7e7e7;display: block;max-width: 100%;}
#bottomSheet .picture-modal .text-wrap {padding: 22px 0 22px 0;}
#bottomSheet .picture-modal h2 {font-size: 18px;font-family: 'e-UkraineHead-Bold';text-align: left;line-height: 1.4;}
#bottomSheet .picture-modal p {line-height: 1.4;font-family: 'e-Ukraine-Light';font-size: 16px;margin: 12px 0 0 0;}
#bottomSheet .picture-modal p.name {font-size: 18px;font-family: 'e-Ukraine-regular';line-height: 1.4;}
#bottomSheet .picture-modal ul {list-style-type:none;margin-top: 8px;}
#bottomSheet .picture-modal li {margin-top: 10px;line-height: 1.4;}

#depo-modal .imgfix-modal {opacity: 0;border-radius: 10px;z-index: 2;pointer-events: auto;position: relative;background-color: #ffffff;padding: 22px; max-width: calc(100% - 80px);max-height: calc(100% - 40px);overflow-y: auto;transition: opacity 0.3s ease-in;-webkit-transition: opacity 0.3s ease-in;-moz-transition: opacity 0.3s ease-in;-o-transition: opacity 0.3s ease-in;}
#depo-modal .imgfix-modal.open {opacity: 1;transition: opacity 0.2s ease-in;-webkit-transition: opacity 0.2s ease-in;-moz-transition: opacity 0.2s ease-in;-o-transition: opacity 0.2s ease-in;}
#depo-modal .imgfix-modal .boss {height: 100%;width: 100%;display: flex;justify-content: flex-start;align-items: center;flex-direction: column;position: relative;z-index: 9999;}
#depo-modal .imgfix-modal .boss img {background-color: #e7e7e7;max-width: 100%;max-height: calc(88vh - 110px);}
#depo-modal .imgfix-modal h2 {font-size: 18px;font-family: 'e-UkraineHead-Medium';line-height: 1.45;margin-top: 16px;box-sizing: border-box;text-align: center;}
#depo-modal .imgfix-modal p {line-height: 1.45;font-family: "Roboto", sans-serif;font-weight: 400;font-size: 16px;margin: 8px auto 0;box-sizing: border-box;text-align: center;}

#bottomSheet .imgfix-modal {border-radius: 10px;padding-bottom: 42px;background-color: #ffffff;z-index: 2;display: none;position: relative;padding-top: 14px;max-width: none;max-height: none;height: 100%;overflow-y: hidden;}
#bottomSheet .imgfix-modal .boss {height:100%;overflow-y: auto;width: 100%;padding: 0px 22px 42px 22px;text-align: center;}
#bottomSheet .imgfix-modal .boss img {width: auto;height: auto;background-color: #e7e7e7;display: block;max-width: 100%;}
#bottomSheet .imgfix-modal h2 {font-size: 16px;font-family: 'e-UkraineHead-Medium';text-align: left;line-height: 1.4;margin-top: 22px;text-align: center;}
#bottomSheet .imgfix-modal p {line-height: 1.45;font-family: "Roboto", sans-serif;font-weight: 400;font-size: 16px;margin: 8px 0 0 0;}


/*** 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;}
}

/*** 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;}
}


/*** 770px  (!!!! for 768) *******************/
@media screen and (max-width: 770px) {
#depo-modal .picture-modal {max-width: calc(100% - 140px);}
}


/*** 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;}

#depo-modal .picture-modal::-webkit-scrollbar {width: 3px;}
#depo-modal .picture-modal::-webkit-scrollbar-thumb {background-color: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #9e9e9e;}
#depo-modal .picture-modal {max-height: calc(100% - 54px) !important; height: auto; overflow-y: auto; border-right: 4px solid #fff; border-top: 16px solid #fff; border-bottom: 16px solid #fff; padding: 8px 15px 22px 22px;}
#depo-modal .picture-modal .boss {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; height: auto;}
#depo-modal .picture-modal .text-wrap {height: auto; width: 100%; padding: 22px 0px 22px 0px;}
}

/*** 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 p {font-size: 16px;}

#depo-modal .picture-modal {height: calc(100% - 24px) !important;width: calc(100% - 24px);max-height: none !important;max-width: none;}
#depo-modal .picture-modal .text-wrap {padding: 22px 0px 22px 0px;}
#bottomSheet .picture-modal .boss {padding: 0px 18px 42px 22px;}
}

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

/*** 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;}
#depo-modal .picture-modal {padding: 0px 8px 22px 12px;}
#bottomSheet .text-modal .wrap {padding: 0 14px 42px 16px;}
#bottomSheet .text-modal h2 {font-size: 18px;}
#bottomSheet .text-modal p {font-size: 15px;}
#bottomSheet .picture-modal .boss {padding: 0 10px 32px 14px;}
#bottomSheet .picture-modal p.name {font-size: 17px;line-height: 1.3;}
#bottomSheet .imgfix-modal {padding-top: 6px;}
#bottomSheet .imgfix-modal .boss {padding: 0 12px 42px 12px;}
#bottomSheet .imgfix-modal h2 {margin-top: 16px;font-size: 15px;}
}

#depo-3d-model {position: fixed;top:0;left:0;right:0;bottom:0;width: 100%;height: 100%;background-color: #ffffff42;background-color: #00000042;z-index:999999;display:none;backdrop-filter:blur(10px);-webkit-backdrop-filter: blur(10px);}
#depo-3d-model .content {position: absolute;top:0;left:0;right:0;bottom:0;width: 100%;height: 100%;/* display:flex; */flex-direction: column;justify-content: center;align-items: center;}
#depo-3d-model .container {position: absolute;top:0;left:0;right:0;bottom:0;width: 100%;height: 100%;display:flex;flex-direction: column;justify-content: center;align-items: center;}
#depo-3d-model .container.off {display:none;}
#depo-3d-model .wrap_obj {width: 100%;height: 100%;}
#depo-3d-model .wrap_title {font-family: 'e-Ukraine-Light';font-size: 16px;color:#fff;margin-top: 22px;position: absolute;bottom: 50px;text-align: center;text-shadow:1px 1px 2px #000;max-width: calc(100% - 124px);line-height: 1.4;}
#depo-3d-model .close {background-color: #ffffff21;width: 62px;height: 62px;border-radius: 50%;background-repeat: no-repeat;background-image: url(resources/icon/close/white.svg);background-size: 38px;background-position: 50%;position: absolute;right: 40px;top: 40px;z-index: 9;}
#depo-3d-model .close:hover {cursor: pointer;background-color: #ffffff55;}

:not(:defined) > * {display: none;}
model-viewer {width: 100%;height: 100%;}
.progress-bar {display: block; width: 33%; height: 10%; max-height: 2%; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); border-radius: 25px; box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.9); background-color: rgba(0, 0, 0, 0.5);}
.progress-bar.hided {visibility: hidden;transition: visibility 0.3s;}
.update-bar {background-color: rgba(255, 255, 255, 0.9); width: 0%; height: 100%; border-radius: 25px; float: left; transition: width 0.3s;}
#ar-button {background-image: url(modal/model/obj/ar_icon.png); background-repeat: no-repeat; background-size: 20px 20px; background-position: 12px 50%; background-color: #fff; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; bottom: 16px; padding: 0px 16px 0px 40px; font-family: Helvetica, Helvetica Neue, Arial, sans-serif; font-size: 14px; color:#4285f4; height: 36px; line-height: 36px; border-radius: 18px; border: 1px solid #DADCE0;}
#ar-button:active {background-color: #E8EAED;}
#ar-button:focus {outline: none;}
#ar-button:focus-visible {outline: 1px solid #4285f4;}

@keyframes circle {
  from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}
@keyframes elongate {
  from { transform: translateX(100px); }
  to   { transform: translateX(-100px); }
}
model-viewer > #ar-prompt {position: absolute;left: 50%;bottom: 60px;animation: elongate 2s infinite ease-in-out alternate;display: none;}
model-viewer[ar-status="session-started"] > #ar-prompt {display: block;}
model-viewer > #ar-prompt > img {animation: circle 4s linear infinite;}

/*** 1024px *******************/
@media screen and (max-width: 1030px) {
#depo-3d-model .wrap_title {bottom: auto;top: 42px;margin-top: 0;text-align: left;width: calc(100% - 84px);max-width: none;}
#depo-3d-model .wrap_title span {width: calc(100% - 120px);}
}

/*** 580px *******************/
@media screen and (max-width: 580px) {
#depo-3d-model .wrap_title {bottom: auto;top: 22px;margin-top: 0;text-align: left;width: calc(100% - 44px);}
#depo-3d-model .wrap_title span {width: calc(100% - 60px);}
#depo-3d-model .close {right: 16px;top: 20px;width: 50px;height: 50px;background-size: 30px;}
}

/*** 480px *******************/
@media screen and (max-width: 480px) {
#depo-3d-model .wrap_title {}
#depo-3d-model .close {}
}

/*** 390px *******************/
@media screen and (max-width: 390px) {
#depo-3d-model .wrap_title {font-size: 15px;}
#depo-3d-model .close {width: 44px; height: 44px;background-size: 26px;}
}

/*** 320px *******************/
@media screen and (max-width: 320px) {
#depo-3d-model .wrap_title {font-size: 14px;text-shadow: 1px 1px 1px #000;top: 20px;}
#depo-3d-model .wrap_title span {width: calc(100% - 50px);}
#depo-3d-model .close {right: 16px; top: 16px; width: 40px; height: 40px; background-size: 24px;}
}