.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tlradius { border-top-left-radius:var(--rounded-btn,.5rem) !important; } .blradius { border-bottom-left-radius:var(--rounded-btn,.5rem) !important; } .trradius { border-top-right-radius:var(--rounded-btn,.5rem) !important; } .brradius { border-bottom-right-radius:var(--rounded-btn,.5rem) !important; } [v-cloak] { display:none; } .pulse { box-shadow: 0 0 0 rgba(88, 120, 243, 0.4); animation: pulse 1s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(88, 120, 243, 0); } 100% { box-shadow: 0 0 0 0 rgba(88, 120, 243, 0); } } :root{ scrollbar-color: #606060 !important; scrollbar-width: thin !important; } ::-webkit-scrollbar { background: transparent; width: 12px !important; } ::-webkit-scrollbar-thumb { background: #606060 !important; border-radius: 100px !important; } /* Hide scrollbar For Chrome, Safari And Opera */ /*.drawer-side::-webkit-scrollbar { */ /* display: none; */ /*} */ .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-2xl { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0rem; width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); } @media (min-width: 576px) { .container { max-width: 576px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 992px) { .container { max-width: 992px; } } @media (min-width: 1200px) { .container { max-width: 1200px; } } @media (min-width: 1400px) { .container { max-width: 1400px; } } .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0rem; display: flex; flex-wrap: wrap; margin-bottom: .75rem; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-.5 * var(--bs-gutter-x)); margin-left: calc(-.5 * var(--bs-gutter-x)) } .row>* { box-sizing: border-box; flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y) } .col { flex: 1 0 0%; padding-top: .75rem; padding-bottom: .75rem } .swiper { --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc); --swiper-pagination-color: var(--ion-color-primary, #3880ff); --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25); --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1); --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5); } .swiper-slide { display: flex; position: relative; flex-direction: column; flex-shrink: 0; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; text-align: center; box-sizing: border-box; } .swiper-slide img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: cover; } .paginationjs .paginationjs-pages li { border: 1px solid #aaa !important; } :root { --glass-opacity: 25%; --glass-border-opacity: 15%; --glass-blur: 40px; --glass-reflex-degree: 100deg; --glass-text-shadow-opacity: 5%; --glass-reflex-opacity:10% } .glass { border: none; -webkit-backdrop-filter: blur(var(--glass-blur, 40px)); backdrop-filter: blur(var(--glass-blur, 40px)); background-color: transparent; background-image: linear-gradient(135deg, rgb(255 255 255 / var(--glass-opacity, 30%)) 0, rgb(0 0 0 / 0%) 100%), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%, rgb(0 0 0 / 0%) 25%); box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgb(0 0 0 / 5%); text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%)) } .hoverable { -webkit-transition: -webkit-box-shadow 0.25s; transition: -webkit-box-shadow 0.25s; transition: box-shadow 0.25s; transition: box-shadow 0.25s, -webkit-box-shadow 0.25s; } .hoverable:hover { -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .z-depth-0 { -webkit-box-shadow: none !important; box-shadow: none !important } .z-depth-1 { -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2) } .z-depth-1-half { -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .14), 0 1px 7px 0 rgba(0, 0, 0, .12), 0 3px 1px -1px rgba(0, 0, 0, .2); box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .14), 0 1px 7px 0 rgba(0, 0, 0, .12), 0 3px 1px -1px rgba(0, 0, 0, .2) } .z-depth-2 { -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .3); box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .3) } .z-depth-3 { -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2); box-shadow: 0 8px 17px 2px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2) } .z-depth-4 { -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2); box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2) } .z-depth-5 { -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px -7px rgba(0, 0, 0, .2); box-shadow: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px -7px rgba(0, 0, 0, .2) } .pulse { overflow: visible; position: relative } .pulse::before { content: ""; display: block; position: absolute; pointer-events: none; width: 100%; height: 100%; top: 0; left: 0; background-color: inherit; border-radius: inherit; -webkit-transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, transform .3s; transition: opacity .3s, transform .3s, -webkit-transform .3s; -webkit-animation: pulse-animation 1s cubic-bezier(.24, 0, .38, 1) infinite; animation: pulse-animation 1s cubic-bezier(.24, 0, .38, 1) infinite; z-index: -1 } @-webkit-keyframes pulse-animation { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } 50% { opacity: 0; -webkit-transform: scale(1.5); transform: scale(1.5) } 100% { opacity: 0; -webkit-transform: scale(1.5); transform: scale(1.5) } } @keyframes pulse-animation { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } 50% { opacity: 0; -webkit-transform: scale(1.5); transform: scale(1.5) } 100% { opacity: 0; -webkit-transform: scale(1.5); transform: scale(1.5) } } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .screen { overflow-y: auto !important; text-align: initial !important; } .overlay { border: 1px solid #b71c1c; background: #d50000; padding: 5px; font-size: 17px; color: white; } .kanban-container { position: relative; width: auto; overflow: scroll } .kanban-container, .kanban-container * { box-sizing: border-box } .kanban-container:after { clear: both; display: block; content: "" } .kanban-board { position: relative; float: left; background: #e9ecef; transition: all .3s cubic-bezier(.23, 1, .32, 1); border-radius: .5rem } .kanban-board.disabled-board { opacity: .3 } .kanban-board.is-moving.gu-mirror { transform: rotate(3deg) } .kanban-board.is-moving.gu-mirror .kanban-drag { overflow: hidden; padding-right: 50px } .kanban-board header { font-size: 16px; padding: 20px } .kanban-board header .kanban-title-board { font-weight: 600; margin: 0; padding: 0; display: inline; color: #344767 } .kanban-board header .kanban-title-button { float: right } .kanban-board .kanban-drag { min-height: 200px; padding: 20px } .kanban-board:after { clear: both; display: block; content: "" } .kanban-item { background: #fff; padding: 15px; margin-bottom: 20px; transition: all .3s cubic-bezier(.23, 1, .32, 1) } .kanban-item img.w-100 { border-radius: .5rem } .kanban-item:hover { cursor: move } .kanban-item:last-child { margin: 0 } .kanban-item.is-moving.gu-mirror { transform: rotate(3deg); height: auto !important } .gu-mirror { position: fixed !important; margin: 0 !important; z-index: 9999 !important } .gu-hide { display: none !important } .gu-unselectable { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important } .gu-transit { box-shadow: inset 0 0 2px #fefefed1; -webkit-backdrop-filter: saturate(200%) blur(30px); backdrop-filter: saturate(200%) blur(30px); background-color: hsla(0, 0%, 100%, .8) !important; box-shadow: inset 0 0 1px 1px hsla(0, 0%, 100%, .9), 0 20px 27px 0 rgba(0, 0, 0, .05) !important } .drag_handler { background: #fff; border-radius: 50%; width: 24px; height: 24px; position: relative; float: left; top: -3px; margin-right: 4px } .drag_handler:hover { cursor: move } .drag_handler_icon { position: relative; display: block; background: #000; width: 24px; height: 2px; top: 12px; transition: .5s ease-in-out } .drag_handler_icon:after, .drag_handler_icon:before { background: #000; content: ""; display: block; width: 100%; height: 100%; position: absolute; transition: .5s ease-in-out } .drag_handler_icon:before { top: 6px } .drag_handler_icon:after { bottom: 6px }