.door {background-repeat: no-repeat;background-image: url(resources/icon/way/doors-beige.svg);border: 2px solid #EADEC8;background-color: #315049d1;border-radius: 30px;pointer-events: auto;}
.door:hover {background-color: #315049;}
.door.left_view {-webkit-transform: scaleX(-1);transform: scaleX(-1);}
.door.x40 {width: 40px;height: 40px;background-size: 18px;background-position: 8px 50%;box-shadow: 0 0 0 6px #ffffff36;}
.door.x50 {width: 50px;height: 50px;background-size: 24px;background-position: 9px 50%;box-shadow: 0 0 0 7px #ffffff36;}
.door.x60 {width: 60px;height: 60px;background-size: 30px;background-position: 11px 50%;box-shadow: 0 0 0 8px #ffffff36;}

.sound_point{pointer-events:auto;border-radius: 50%;width: 38px;height: 38px;box-sizing: border-box;box-shadow: 1px 1px 2px 1px #00000022;}
.sound_point:hover {box-shadow: 0 0 0 3px #ffffff33;opacity:1;}
.sound_point.on {opacity:1;}

.sound_point.on::before,
.sound_point.on::after {content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #eadec8; transform: translate(-50%, -50%) scale(1); opacity: 0; transition: opacity 0.3s ease-in-out; aspect-ratio: 1 / 1;}

.sound_point.on::before {animation: pulse-animation 1.2s infinite ease-out;}
.sound_point.on::after {animation: pulse-animation 1.2s infinite ease-out 0.6s;}
@keyframes pulse-animation {
    0% {transform: translate(-50%, -50%) scale(1);opacity: 0.9;}
    100% {transform: translate(-50%, -50%) scale(1.5);opacity: 0;}
}

.sp_white {opacity:0.7;border: 1px solid #EADEC8;background-color: transparent;background-image: url(resources/icon/audio/headphone.svg);background-size: 18px;background-position: 50% 8px;background-repeat: no-repeat;}
.sp_black{opacity:1;border: 1px solid #1f241d;background-color: #978f8233;background-image: url(resources/icon/audio/headphone-black.svg);background-size: 20px;background-position: 50% 7px;background-repeat: no-repeat;}

.text_point{pointer-events:auto;border-radius: 50%;width: 38px;height: 38px;box-sizing: border-box;box-shadow: 1px 1px 2px 1px #00000022;}
.text_point:hover {box-shadow: 0 0 0 3px #ffffff33;opacity:1;}
.tp_white {opacity:0.7;border: 1px solid #EADEC8;background-color: transparent;background-image: url(resources/icon/text/file-white.svg);background-size: 22px;background-position: 50% 7px;background-repeat: no-repeat;}
.tp_black {opacity:1;border: 1px solid #1f241d;background-color: #978f8233;background-image: url(resources/icon/text/file-black.svg);background-size: 22px;background-position: 50% 7px;background-repeat: no-repeat;}

.quiz_point{pointer-events:auto;border-radius: 50%;width: 38px;height: 38px;box-sizing: border-box;box-shadow: 1px 1px 2px 1px #00000022;}
.quiz_point:hover {box-shadow: 0 0 0 3px #ffffff33;opacity:1;}
.qp_white {opacity:0.7;border: 1px solid #EADEC8;background-color: transparent;background-image: url(resources/icon/quest/quiz-white.svg);background-size: 22px;background-position: 50% 50%;background-repeat: no-repeat;}
.qp_black {opacity:1;border: 1px solid #1f241d;background-color: #978f8233;background-image: url(resources/icon/quest/quiz-black.svg);background-size: 22px;background-position: 50% 50%;background-repeat: no-repeat;}

.grmfon_point{border-radius: 50%;width: 48px;height: 48px;box-sizing: border-box;
  border: 1px solid #EADEC8;background-color:#315049;background-image: url(resources/icon/audio/grmfn.svg);
  background-size: 22px;background-position: 50% 8px;background-repeat: no-repeat;
}
.grmfon_point::before,
.grmfon_point::after {content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #eadec8; transform: translate(-50%, -50%) scale(1); opacity: 0; transition: opacity 0.3s ease-in-out; aspect-ratio: 1 / 1;}
.grmfon_point::before {animation: pulse-animation 1.2s infinite ease-out;}
.grmfon_point::after {animation: pulse-animation 1.2s infinite ease-out 0.6s;}

#depo-3d-model {position: fixed;top:0;left:0;right:0;bottom:0;width: 100%;height: 100%;background-color: #ffffff42;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;}
}