.modal-content { /* width: 900px; */ } .errored { animation: shake 300ms; color: #eb3434 !important; background-color: #fef2f2 !important; border: 1px solid #eb3434 !important; border-radius: 7px; } /* Start Select2 */ .select2.select2-container .select2-selection { display: flex !important; height: 0 !important; padding: 0px; } .select2.select2-container .select2-selection--multiple .select2-selection__rendered { margin: 0; } .select2-container--default .select2-search--inline .select2-search__field { line-height: 32px; padding: 0 0; font-family: 'IRANYekanX'; } /* End Select2 */ .validTime { color: #4d7c0f !important; } .invalidTime { color: #b91c1c !important; } .upload-box-voice { width: 100%; } .lightboxpreview { transition: all 0.3s linear; padding-top: 60%; cursor: pointer; background-size: cover; } .lightbox-content { max-height: 75vh; height: 75vh; width: 100%; max-width: 1000px; } .lightbox-close { cursor: pointer; margin-left: auto; position: absolute; right: -30px; top: -30px; color: white; font-size: 2rem; font-weight: 700; line-height: 1; } .modal_inner_image { min-height: 400px; z-index: 1000; } .modal-content { width: 100%; } .modalscale { transform: scale(0); opacity: 0; } .lightbox-container, .lightbox-btn, .lightbox-image-wrapper, .lightbox-enabled { transition: all 0.4s ease-in-out; } .lightbox_img_wrap { /* padding-top: 65%; position: relative; overflow: hidden; */ } .lightbox-enabled:hover { transform: scale(1.1); } .lightbox-enabled { width: 100%; height: 100%; position: absolute; top: 0; right: 0; object-fit: cover; cursor: pointer; } .lightbox-container { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; opacity: 0; pointer-events: none; } .lightbox-container.active { opacity: 1; pointer-events: all; } .lightbox-image-wrapper { display: flex; transform: scale(0); align-items: center; justify-content: center; max-width: 90vw; max-height: 90vh; position: relative; } .lightbox-container.active .lightbox-image-wrapper { transform: scale(1); } .lightbox-btn, #close { color: white; z-index: 9999999; cursor: pointer; position: absolute; font-size: 40px; border: 1px solid #ffffff; border-radius: 100%; background-color: rgba(0,0,0,0.4); width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; } .lightbox-btn svg, #close svg { position: relative; top: 0; right: 0; } .lightbox-btn:focus { outline: none; } .left { left: 50px; } .right { right: 50px; } #close { top: 50px; right: 50px; } .lightbox-image { width: 100%; -webkit-box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.19); box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.19); max-height: 95vh; object-fit: cover; } @keyframes slideleft { 33% { transform: translateX(-300px); opacity: 0; } 66% { transform: translateX(300px); opacity: 0; } } .slideleft { animation-name: slideleft; animation-duration: 0.5s; animation-timing-function: ease; } @keyframes slideright { 33% { transform: translateX(300px); opacity: 0; } 66% { transform: translateX(-300px); opacity: 0; } } .slideright { animation-name: slideright; animation-duration: 0.5s; animation-timing-function: ease; } @media (max-width:768px) { .lightbox-image { width: 90%; } .lightbox-btn, #close { width: 40px; height: 40px; } .right { right: 5px; } .left { left: 5px; } } .audio-player { background: #fff; padding: 10px; display: flex; align-items: center; gap: 10px; width: 100%; } .player-btn { background: #23a9a9; border: none; color: #fff; padding: 10px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; } .player-btn.play:after { content: '▶' !important; } .player-btn.pause:after { content: '❚❚' !important; } .waveform { width: 100%; height: 40px; flex-grow: 1; } .controls { display: flex; flex-direction: column; align-items: center; gap: 5px; }