/* ----------     HTML & BODY CLASS     ---------- */
html { overflow: -moz-scrollbars-none; }
html, body { font-family: "Aeonik"; overflow: hidden; height: 100%; font-size: 13px; margin: 0; }
/*? ----------     HTML & BODY CLASS     ---------- */

/* ----------     SCROLLBAR CLASS     ---------- */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-light::-webkit-scrollbar { width: 5px; }

.scrollbar-none { scrollbar-width: none; overflow-y: auto; overflow-x: hidden; }
.scrollbar-light { scrollbar-width: thin; overflow-y: auto; overflow-x: hidden; }
/*? ----------     SCROLLBAR CLASS     ---------- */

/* ----------     UNIVERSAL CLASS     ---------- */
[data-href] { cursor: pointer; }
input[type="time"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
input[type="time"]::-webkit-clear-button, input[type="time"]::-webkit-inner-spin-button { display: none; -webkit-appearance: none; }
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.btn { display: flex; align-items: center; justify-content: center; width: fit-content; cursor: pointer; padding: 12.5px 20px; text-align: center; border-radius: 6px; }
.btn.small { padding: 7.5px 12px; font-size: 12px; }
.btn.disabled { cursor: not-allowed !important; }
.btn.non { background: none; }
.btn i { margin: 0 3px; font-size: 16px; }
.btn-group { display: flex; gap: 10px; }

.disabled { cursor: not-allowed !important; opacity: 0.6; }
.none { display: none !important; }
.d-flex { display: flex !important; }
.d-flex-dir { flex-direction: column !important; }
.j-content-c { justify-content: center !important; }    
.a-item-n { align-items: normal !important; }

.mr-5 { margin-right: 5px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }

.f16 { font-size: 16px !important; }
.fw400 { font-weight: 400 !important; }
.br6 { border-radius: 6px !important; }

.error { display: none; font-weight: 500; text-transform: uppercase; font-size: 11px; padding: 5px 15px 10px; margin-top: -5px; margin-bottom: 5px; }
.error.show { display: flex; }
/*? ----------     UNIVERSAL CLASS     ---------- */

/* ----------     GLOBAL     ---------- */
.form .input { margin-bottom: 10px; }

.input-group { position: relative; margin-bottom: 15px; margin-top: 10px; }
.input-group input, .input-group select { width: 100%; height: 42px; padding: 0 15px; border-radius: 6px; box-sizing: border-box; outline: none; font-size: 14px; background: transparent; }
.input-group label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; transition: all 0.2s ease; padding: 0 5px; }
.input-group input:focus + label, .input-group input:valid + label, .input-group select:focus + label, .input-group select:valid + label { top: 0; left: 5px; font-size: 12px; }

.input-group.time { display: flex; }
.input-group.time .label { position: relative; left: 0; top: 0; padding: 0; display: flex;  align-items: center; margin-bottom: 0 !important; }
.input-group.time .range { display: flex; align-items: center; }
.input-group.time .range .dash { margin: 0 10px; }

.wrapper { display: flex; flex-direction: column; position: relative; width: 100%; box-sizing: border-box; }
.wrapper.portal { height: 100%; }
.wrapper.content { margin-top: 90px; padding: 30px 25px 0 25px; }

.wrapper .container { width: 100%; height: 100%; max-width: 1600px; margin-right: auto; margin-left: auto; }
.wrapper .container.large { width: 100%; max-width: 2000px; margin-right: auto; margin-left: auto; }
.wrapper .container.small { width: 100%; max-width: 1440px; margin-right: auto; margin-left: auto; }
.wrapper .container .title { font-size: 38px; }
.wrapper .container .top-menu .title { font-weight: 600; }
.wrapper .container .title.medium { font-size: 22px; }

.split { display: flex; gap: 25px; }

.select .custom-select { position: relative; display: flex; border-radius: 6px; min-width: 200px; width: 100%; box-sizing: border-box; cursor: pointer; user-select: none; font-size: 14px; outline: none; }
.select .custom-select.filter { max-width: 320px; }
.select .custom-select .select-display { height: 42px; padding: 0 40px 0 20px; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; }
.select .custom-select .select-arrow {position: absolute; top: 0; bottom: 0; right: 10px; display: flex; align-items: center; pointer-events: none; }
.select .custom-select .select-dropdown { position: absolute; left: 0; top: calc(100% + 6px); min-width: 100%; max-width: 480px; box-sizing: border-box; border-radius: 6px; z-index: 999; max-height: 260px; overflow: auto; display: none; }
.select .custom-select.open .select-dropdown { display: flex; flex-direction: column; }
.select .custom-select .select-dropdown .select-search .select-search-input { border: none; border-radius: 0; }
.select .custom-select .select-item { padding: 14px 24px; cursor: pointer;display: flex; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 1.2; }
.select .custom-select .select-display .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search { max-width: 400px; width: 100%; }
.search .input { display: flex; align-items: center; border-radius: 6px; padding: 10px 13px; transition: border-color 0.2s; }
.search .input i { transition: color 0.2s; }
.search .input input { border: none; outline: none; flex: 1; margin: 0 6px; font-size: 15px; background: transparent; }
.search .input .hgi-cancel-circle { cursor: pointer; visibility: hidden; opacity: 0; transition: opacity 0.2s ease; }
.search .input .hgi-cancel-circle.show { visibility: visible; opacity: 1; }

.skeleton { position: relative; overflow: hidden; display: inline-block; width: 100%; height: 14px; border-radius: 4px; }
.skeleton::after { content: ""; position: absolute; top: 0; left: -150%; height: 100%; width: 150%; transform: translateX(0); animation: skeleton-shimmer 1.2s linear infinite; pointer-events: none; }
.skeleton.round { max-width: 50px; height: 50px; border-radius: 50%; }
.skeleton.small { max-width: 60%; height: 14px; border-radius: 4px; }
.skeleton.mid { max-width: 80%; height: 14px; border-radius: 4px; }
.skeleton.large { max-width: 95%; height: 14px; border-radius: 4px; }
.preview.skeleton { width: 200px; }
@keyframes skeleton-shimmer { 0% { transform: translateX(0); } 100% { transform: translateX(300%); }}
.action-menu { position: absolute; z-index: 9999; min-width: 160px; border-radius: 6px; cursor: pointer; }
.action-menu .action-item { padding: 15px 20px; }
.action-menu .action-item:hover { border-radius: inherit; }

.toggle-group { display: flex; align-items: center; }
.toggle-switch { display: flex; align-items: center; justify-content: end; width: 150px; }
.toggle-switch .checkbox { display: none; }
.checkbox + label { outline: 0px; display: block; width: 2.8em; height: 1.6em; position: relative; cursor: pointer; user-select: none; background: rgb(188, 202, 216); border-radius: 2em; padding: 2px; transition: 0.4s; }
.checkbox:checked + label::after { left: 50%; }
.checkbox + label:hover::after { will-change: padding; }
.checkbox + label::after { position: relative; display: block; content: ""; width: 50%; height: 100%; left: 0px; border-radius: 2em; background: rgb(251, 251, 251); transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s, margin 0.3s; }

.wrapper.unsupported { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; flex-direction: column; justify-content: center; padding: 50px; z-index: 1004; }
.wrapper.unsupported .title { width: 100%; font-size: 42px; font-weight: 600; margin-bottom: 25px; }
.wrapper.unsupported .title.small { font-size: 20px; font-weight: 400; }
.wrapper.unsupported [data-href] { text-decoration: underline; font-size: 16px; }
@media screen and (max-width: 1280px) {
    .wrapper.unsupported { display: flex; }
}
/*? ----------     GLOBAL     ---------- */




/* ----------     BASIS LAYOUT     ---------- */
.wrapper .container .top-menu { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.wrapper .container .top-menu .links { display: flex; align-items: center; }
.wrapper .container .top-menu .links .link { display: flex; align-items: center; position: relative; height: 100%; font-weight: 400; font-size: 15px; cursor: pointer; margin: 0 5px; padding: 10px 5px; }
.wrapper .container .top-menu .links .link::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; transition: transform 300ms ease; }
.wrapper .container .top-menu .links .link:hover::after { transform-origin: left; transform: scaleX(1); }
.wrapper .container .top-menu .links .link.active::after { transform-origin: left; transform: scaleX(1); transition: none; }
.wrapper .container .top-menu .links .link i { display: none; font-size: 20px; font-weight: normal; margin-right: 5px; }

.wrapper .container .content.sub { display: flex; margin-top: 50px; }
.wrapper .container .content .blocks { width: 100%; }
.wrapper .container .content .blocks.margin:first-child { margin-right: 25px; }
.wrapper .container .content .blocks.margin:last-child { margin-left: 25px; }
.wrapper .container .content .blocks .block-wrapper { margin-bottom: 50px; }
.wrapper .container .content .blocks .block-wrapper.half { width: 100%; max-width: 50%; }
.wrapper .container .content .blocks .block-wrapper .top { display: flex; align-items: center; justify-content: space-between; }
.wrapper .container .content .blocks .block-wrapper .top .select { margin: 0 10px 10px 0; }

.title { margin-bottom: 0; }
.wrapper .container .content .blocks .block-wrapper .title { display: flex; align-items: center; justify-content: space-between; font-size: 16px; margin-bottom: 20px; }
.wrapper .container .content .blocks .block-wrapper .title.edit { cursor: pointer; justify-content: start; width: fit-content; }
.wrapper .container .content .blocks .block-wrapper .title.edit i { margin-left: 3px; }
.wrapper .container .content .blocks .block-wrapper .line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.wrapper .container .content .blocks .block-wrapper .line .title { margin: 0; }

.wrapper .container .content .blocks .block-wrapper .line .btns { display: flex; margin: 20px 0; }
.wrapper .container .content .blocks .block-wrapper .line .btns .toggle { padding: 10px 13px; margin-right: 8px; font-size: 14px; cursor: pointer; }
.wrapper .container .content .blocks .block-wrapper .line .btns .toggle .number { padding: 4px 8px; font-weight: 600; font-size: 13px; margin-right: 6px;}


.wrapper .container .content .blocks .block-wrapper .block { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; padding: 25px 30px; border-radius: 10px; }
.wrapper .container .content .blocks .block-wrapper .block.ua { padding: 0; }
.wrapper .container .content .blocks .block-wrapper .block.ua .block-inner.link { cursor: pointer; }
.wrapper .container .content .blocks .block-wrapper .block.ua .block-inner { padding: 25px !important; }
.wrapper .container .content .blocks .block-wrapper .block.table { padding: 0; }
.wrapper .container .content .blocks .block-wrapper .block.table .table-rows.one-cell { --col-1: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(1),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(1) { flex: var(--col-1); justify-content: flex-start; text-align: left; }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(2),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(2) { flex: var(--col-2); }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(3),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(3) { flex: var(--col-3); }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(4),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(4) { flex: var(--col-4); }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(5),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(5) { flex: var(--col-5); }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(6),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(6) { flex: var(--col-6); }
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-header>div:nth-child(7),
.wrapper .container .content .blocks .block-wrapper .block.table.custom-cols .table-rows>div:nth-child(7) { flex: var(--col-7); }
.wrapper .container .content .blocks .block-wrapper .block.table.users { --col-1: 0 1 500px; --col-2: 1 1 0; --col-3: 1 1 0; --col-4: 1 1 0; --col-5: 1 1 0; --col-6: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.users .value { font-size: 13px; }
.wrapper .container .content .blocks .block-wrapper .block.table.geo { --col-1: 0 1 320px; --col-2: 0 1 120px; --col-3: 0 1 400px; --col-4: 0 1 140px; --col-5: 0 1 170px; --col-6: 1 1 170px; --col-7: 0 1 60px; }
.wrapper .container .content .blocks .block-wrapper .block.table.feed { --col-1: 0 1 320px; --col-2: 0 1 300px; --col-3: 0 1 500px; --col-4: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.access { --col-1: 0 1 450px; --col-2: 1 1 0; --col-3: 1 1 0; --col-4: 0 1 140px; --col-5: 0 1 170px; --col-6: 0 1 170px; --col-7: 0 1 60px; }
.wrapper .container .content .blocks .block-wrapper .block.table.ots { --col-1: 0 1 450px; --col-2: 0 1 400px; --col-3: 1 1 0; --col-4: 1 1 0; --col-5: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.shorter { --col-1: 0 1 230px; --col-2: 0 1 750px; --col-3: 1 1 0; --col-4: 1 1 0; --col-5: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.stats { --col-1: 0 1 40px; --col-2: 0 1 40px; --col-3: 0 1 200px; --col-4: 0 1 200px; --col-5: 1 1 0; --col-6: 1 1 0; --col-7: 1 1 0; --col-8: 1 1 0; --col-9: 1 1 0; --col-10: 1 1 0; --col-11: 1 1 0; --col-12: 1 1 0; --col-13: 1 1 0; --col-14: 1 1 0; --col-15: 1 1 0; }
.wrapper .container .content .blocks .block-wrapper .block.table.stats .table-rows .rank-number { font-family: monospace; }

.wrapper .container .content .blocks .block-wrapper .block .label { flex: 0 0 34%; font-size: 14px; font-weight: 600; margin-right: 10px; }
.wrapper .container .content .blocks .block-wrapper .block .value { font-size: 14px; }
.wrapper .container .content .blocks .block-wrapper .block .country { height: 14px; width: 21px; }
.wrapper .container .content .blocks .block-wrapper .block .country { height: 14px; width: 21px; }

.wrapper .container .content .blocks .block-wrapper .block .top { display: flex; flex-direction: row; align-items: center; width: 100%; }
.wrapper .container .content .blocks .block-wrapper .block .top.col { flex-direction: column; align-items: start; margin-bottom: 10px; }
.wrapper .container .content .blocks .block-wrapper .block .top .icon { font-size: 72px; margin-right: 25px; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .inner-wrapper { display: flex; align-items: center; justify-content: space-between; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .inner-wrapper .text { font-size: 15px; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .inner-wrapper .status { min-width: 200px; margin-left: 50px; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .inner-wrapper .status .title { font-size: 16px; font-weight: 400; margin-bottom: 5px; }
.wrapper .container .content .blocks .block-wrapper .block .top .wrapper .inner-wrapper .status .text { font-size: 15px; }

.wrapper .container .content .blocks .block-wrapper .block .bottom { margin-top: 20px; }

.wrapper .container .content .blocks .block-wrapper .block .table-header { display: flex; flex-flow: row nowrap; font-size: 12px; padding: 30px 30px 15px 30px; width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.wrapper .container .content .blocks .block-wrapper .block .table-header>div { display: flex; flex: 1 0; flex-flow: row nowrap; justify-content: flex-start; word-break: break-word; }
.wrapper .container .content .blocks .block-wrapper .block .table-header>div:last-child { justify-content: flex-end; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows { display: flex; flex-flow: row nowrap; width: 100%; padding: 20px 30px; box-sizing: border-box; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows.action { cursor: pointer; box-sizing: border-box; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows.small { padding: 15px 30px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .action:hover { cursor: pointer; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .action .ots-revoke:hover { text-decoration: underline; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div { display: flex; flex: 1 0; flex-flow: row nowrap; justify-content: flex-start; align-items: center; word-break: break-word; gap: 5px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div.limit { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div:last-child { justify-content: flex-end; text-align: right; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div i { margin-right: 5px; font-size: 20px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div img { margin-right: 5px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div:first-child { justify-content: flex-start; text-align: left; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows>div .tag { padding: 5px 10px; border-radius: 8px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .img { height: 35px; width: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 600; margin-right: 6px; flex-shrink: 0; }

.wrapper .container .content .blocks .block-wrapper .block .block-outer { width: 100%; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner { display: flex; align-items: center; width: 100%; padding: 25px 0; box-sizing: border-box; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner.non-bb { border-bottom: none; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner:first-child { padding-top: 0; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner:last-child { padding-bottom: 0; border-bottom: none; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner .block-info { display: flex; flex-direction: column; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner .block-info .label { margin-bottom: 5px; }
.wrapper .container .content .blocks .block-wrapper .block .block-inner .value { display: flex; justify-content: end; flex: 1 0 25%; }

.wrapper .container .content .blocks .block-wrapper .block .maintenance { display: none; }
.wrapper .container .content .blocks .block-wrapper .block .maintenance.active { display: flex; }

.wrapper .container .content .blocks .sort { display: flex; align-items: center; justify-content: space-between; margin: 10px 20px; }
.wrapper .container .content .blocks .sort .select { display: flex; align-items: center; gap: 10px; position: relative; }
.wrapper .container .content .blocks .sort .select .input-select { width: 100%; min-width: 100px; height: 35px; padding: 0 30px 0 10px; border-radius: 4px; box-sizing: border-box; outline: none; font-size: 14px; background: transparent; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none;  }
.wrapper .container .content .blocks .sort .select .select-arrow { position: absolute; top: 0; bottom: 0; right: 10px; display: flex; align-items: center; pointer-events: none; }
.wrapper .container .content .blocks .sort .filter-group { display: flex; gap: 10px; font-size: 15px; cursor: pointer; }
.wrapper .container .content .blocks .sort .filter-group .period-btn { display: flex; align-items: center; position: relative; height: 100%; font-weight: 400; font-size: 15px; cursor: pointer; padding: 10px 2px; }
.wrapper .container .content .blocks .sort .filter-group .period-btn::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; transition: transform 300ms ease; }
.wrapper .container .content .blocks .sort .filter-group .period-btn:hover::after { transform-origin: left; transform: scaleX(1); }
.wrapper .container .content .blocks .sort .filter-group .period-btn.active::after { transform-origin: left; transform: scaleX(1); transition: none; }

.wrapper .container .content .blocks .block-wrapper .hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 25px 10px; }
.wrapper .container .content .blocks .block-wrapper .hero .start { display: flex; align-items: center; }
.wrapper .container .content .blocks .block-wrapper .hero .start .img { display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 150px; height: 150px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .img img { width: 100px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .acc-img .img { height: 50px; width: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 600; margin-right: 15px; flex-shrink: 0; font-size: 20px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .info { display: flex; flex-direction: column; gap: 3px; }
.wrapper .container .content .blocks .block-wrapper .hero .start .info .title-hero { font-size: 24px; font-weight: 600; }
.wrapper .container .content .blocks .block-wrapper .hero .start .info .category { font-size: 16px; }
.wrapper .container .content .blocks .block-wrapper .hero .back { font-size: 14px; cursor: pointer; padding: 10px 20px; }

.wrapper .container .content .blocks .block-wrapper .card { display: flex; flex-direction: column; margin-bottom: 25px; padding: 30px; border-radius: 10px; width: 100%; box-sizing: border-box; }
.wrapper .container .content .blocks .block-wrapper .card .title { font-size: 16px; font-weight: 400; }
.wrapper .container .content .blocks .block-wrapper .card .details { display: flex; flex-wrap: wrap; gap: 35px; }
.wrapper .container .content .blocks .block-wrapper .card .details .item { min-width: 200px; font-size: 14px; }
.wrapper .container .content .blocks .block-wrapper .card .details .item.bg { padding: 20px; border-radius: 5px; }
.wrapper .container .content .blocks .block-wrapper .card .details .item .key { margin-bottom: 5px; font-size: 12px; }
.wrapper .container .content .blocks .block-wrapper .card .details .item .icon { display: flex; align-items: center; margin-bottom: 15px; font-size: 15px; gap: 5px; }

.wrapper .container .content .blocks .block-wrapper .card .list { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; margin: 15px 0; }
.wrapper .container .content .blocks .block-wrapper .card .list .label { flex: 0 0 30%; margin-right: 10px; }
.wrapper .container .content .blocks .block-wrapper .card .list .value { min-width: 100px; }

.wrapper .container .pagination { display: flex; justify-content: end; margin: 20px 0; cursor: pointer; }
.wrapper .container .pagination .page-item { display: flex; justify-content: center; align-items: center; padding: 10px; min-width: 20px; }
/*? ----------     BASIS LAYOUT     ---------- */




/* ----------     START     ---------- */
.wrapper.start { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
.wrapper.start .content { display: flex; height: 100%; }
.wrapper.start .content .container-info { display: flex; justify-content: center; width: 100%; height: 100%; }
.wrapper.start .content .container-info .logo { width: 30%; min-width: 250px; height: auto; }
.wrapper.start .content .container-info .info { display: flex; flex-direction: column; justify-content: center; }
.wrapper.start .content .container-info .info .title { font-size: 56px; font-weight: 600; line-height: 1.3; }
.wrapper.start .content .container-info .info .text { font-size: 16px; max-width: 550px; line-height: 1.8; margin-top: 40px; }
.wrapper.start .content .container-app { display: flex; justify-content: space-between; width: 100%; min-width: 58%;  overflow-y: auto; align-items: center; flex-direction: column; flex-grow: 1; }
.wrapper.start .content .container-app .app { width: 100%; flex: 1; min-height: min-content; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.wrapper.start .content .container-app .app .title {font-size: 38px; font-weight: 600; margin-bottom: 20px; }
.wrapper.start .content .container-app .app .title.small { font-size: 16px; font-weight: 400; }
.wrapper.start .content .container-app .app .form { max-width: 650px; margin: 0 75px; }
.wrapper.start .content .container-app .app .form .inner { height: fit-content; margin-bottom: 20px; }
.wrapper.start .content .container-app .app .form .inner .text { font-size: 16px; margin-bottom: 20px; }

.wrapper.start .content .container-app .app .form .app-microsoft { display: flex; justify-content: center; align-items: center; padding: 7px 10px; font-size: 16px; margin-bottom: 12px; }
.wrapper.start .content .container-app .app .form .app-microsoft .microsoft-logo { display: flex; }

@media screen and (max-width: 992px) {
    .wrapper.start .content .container-info { display: none; }
    .wrapper.start .content .container-info .logo { width: auto; height: 80%; margin: auto; }
    .wrapper.start .content .container-app .app .form { margin: 0 25px; }
}
/*? ----------     START     ---------- */

/* ----------     HEADER     ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 25px; margin-right: 10px; z-index: 1000; }
.header .logo { display: flex; }
.header .logo .svg { width: 85px; }

.header .menu { display: flex; align-items: center; justify-content: center; height: 100%; width: 800px; }
.header .menu .link { display: flex; align-items: center; position: relative; padding: 0 10px; height: 100%; font-weight: 600; font-size: 14px; cursor: pointer; }
.header .menu .link:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; transition: transform 300ms ease; }
.header .menu .link:hover:after { transform-origin: left; transform: scaleX(1); }
.header .menu .link.active:after { transform-origin: left; transform: scaleX(1); transition: none; }

.header .user { display: flex; align-items: center; position: relative; height: 100%;}
.header .user .link { display: flex; align-items: center; cursor: pointer; height: 100%; font-size: 14px; font-weight: 500; line-height: 130%; padding: 14px 24px; }
.header .user .link.center { justify-content: center; }
.header .user .link i { padding: 8px; }
.header .user .link .name { margin-right: 8px; }
.header .user .link .img { height: 35px; width: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 600; }

.header .user .link .notifications { display: flex; flex-direction: column; max-width: 475px; height: 100%; }
.header .user .link .notifications .top { display: flex; align-items: center; justify-content: space-between; height: 70px; min-height: 70px; padding: 0 20px; }
.header .user .link .notifications .top .title { font-size: 16px; font-weight: 500; }
.header .user .link .notifications .top i { border-radius: 10px; cursor: pointer; }

.header .user .link .notifications .content .notification-btn { display: flex; justify-content: end; align-items: center; margin: 20px; }
.header .user .link .notifications .content .notification-btn span { cursor: pointer; }
.header .user .link .notifications .content .notification-btn i { font-size: 20px; margin-left: 10px; }
.header .user .link .notifications .content .notification-list { font-weight: 400; }
.header .user .link .notifications .content .notification-list .notification-group-header { font-size: 16px; margin: 20px; }
.header .user .link .notifications .content .notification-list .notification-item { position: relative; display: flex; flex-direction: row; align-items: center; margin: 20px 15px; padding: 20px 15px; font-size: 13px; font-weight: 400; border-radius: 10px; }
.header .user .link .notifications .content .notification-list .notification-item .notification-icon {display: flex; justify-content: center; align-items: center; min-width: 40px; width: 40px; height: 40px; border-radius: 50%; margin-right: 20px; }
.header .user .link .notifications .content .notification-list .notification-item .notification-body { white-space: normal; }
.header .user .link .notifications .content .notification-list .notification-item .notification-body .notification-title { font-size: 14px; font-weight: 500; margin-bottom: 5px; }
.header .user .link .notifications .content .notification-list .notification-item .notification-body .notification-meta { font-size: 12px; }
.header .user .link .notifications .content .notification-list .notification-empty { text-align: center; }
.header .user .link .notifications .content .notification-list .notification-divider { width: 100%; height: 1px; margin: 10px 0; }

.header .user .link .user-info { display: flex; flex-direction: column; align-items: normal; position: relative; height: 100%; }
.header .user .link .user-info .user-name { display: flex; flex-direction: row; margin-bottom: 6px; }
.header .user .link .user-info .user-name .img { margin-right: 6px; }
.header .user .link .user-info .user-name .name { font-size: 20px; font-weight: 600; line-height: 130%; margin-top: 8px; }
.header .user .link .user-info .user-link { font-size: 13px; }

.header .user .link .rank { display: flex; flex-direction: column; font-size: 13px; padding: 0 24px; font-size: 12px; font-weight: 600; cursor: pointer; }
.header .user .link .rank .card { display: flex; align-items: center; margin-bottom: 2px; }
.header .user .link .rank .card img { width: 50px; }
.header .user .link .rank .card img.small { width: 30px; }
.header .user .link .rank .card .meta { padding-left: 10px; }
.header .user .link .rank .season { font-size: 10px; }
.header .user .link .rank .info { display: flex; align-items: center; gap: 3px; }
.header .user .link .rank .info.small { font-size: 9px; }
.header .user .link .rank .progress .track { position: relative; height: 4px; width: 100%; }
.header .user .link .rank .progress .track .fill { width: 0%; height: 100%; -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; }

.header .user .link .separator { margin: 12px 0; }

.header .link.has-menu .sub { display: none; position: fixed; top: 70px; left: 0; right: 0; justify-content: center; padding: 20px; z-index: 1001; cursor: default; }
.header .link.has-submenu .sub.full { position: fixed; top: 0; right: 0; bottom: 0; border-radius: 0; min-width: 480px; }
.header .link.has-menu:hover .sub:not(.small) { display: flex; }
.header .link.has-menu .sub .content { display: flex; width: 730px; justify-content: flex-start; }
.header .link.has-menu .sub .content .sites { display: flex; gap: 24px; flex-flow: wrap; flex-direction: column; margin: 40px 0; }
.header .link.has-menu .sub .content .sites.h { flex: 0 0 30%; }
.header .link.has-menu .sub .content .sites .site { width: fit-content; }
.header .link.has-menu .sub .content .separator { margin: 20px 50px 20px; }

.header .link.has-submenu { position: relative; padding: 0 5px; }
.header .link.has-submenu .sub { display: none; flex-direction: column; position: absolute; min-width: max-content; top: 75px; right: 0; left: auto; z-index: 1001; white-space: nowrap; cursor: default; border-radius: 10px; }
.header .link.has-submenu.min .sub { min-width: 280px; }
.header .link.has-submenu .sub.open { display: flex; }

.sub .link { padding: 20px; }
.sub .link:last-child { margin-bottom: 12px; }
.sub .link.user-info { padding: 15px 20px 5px; }
/*? ----------     HEADER     ---------- */

/* ----------     REQUESTS     ---------- */
.wrapper .container .content.requests .top { display: flex; justify-content: space-between; align-items: center; }
.wrapper .container .content.requests { display: flex; }
.wrapper .container .content.requests .main { width: 100%; }
.wrapper .container .content.requests .main .top { margin: 15px 0 30px 0; }
.wrapper .container .content.requests .main .top .links { display: flex; }
.wrapper .container .content.requests .main .top .links .link:first-of-type { padding-left: 0; margin-left: 0; }
.wrapper .container .content.requests .main .top .links .link { position: relative; display: flex; align-items: center; margin: 0 10px; padding: 20px 10px; font-size: 18px; cursor: pointer; }
.wrapper .container .content.requests .main .top .links .link:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 300ms ease; transition: -webkit-transform 300ms ease; -o-transition: transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; }
.wrapper .container .content.requests .main .top .links .link:hover:after { -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
.wrapper .container .content.requests .main .top .links .link.active:after { -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
.wrapper .container .content.requests .main .top .links .link.searching { display: none; }
.wrapper .container .content.requests .main .top .links .link.search.searching { display: flex !important; }
.wrapper .container .content.requests .main .top .links .link .count { font-size: 20px; font-weight: 600; margin-left: 5px; }

.wrapper .container .topbar { display: flex; justify-content: space-between; align-items: center; }

.wrapper .container .content.requests .main .table { border-radius: 6px; }
.wrapper .container .content.requests .main .table .row { display: flex; align-items: center; min-height: 70px; padding: 14px 24px; cursor: pointer; }
.wrapper .container .content.requests .main .table .row.non { font-size: 24px; font-weight: 600; }

.wrapper .container .content.requests .main .table .row .delimiter { width: 5px; height: 5px; border-radius: 50%; margin: 0 8px; }

.wrapper .container .content.requests .main .table .row .user { display: flex; flex-direction: column; width: 100%; }
.wrapper .container .content.requests .main .table .row .user .outer-user { display: flex; align-items: center; margin: 0 0 12px 0; }
.wrapper .container .content.requests .main .table .row .user .outer-user .tag { padding: 3px 6px; border-radius: 3px; margin-right: 8px; font-size: 11px; }
.wrapper .container .content.requests .main .table .row .user .inner-user { display: flex; }
.wrapper .container .content.requests .main .table .row .user .inner-user .img { height: 35px; width: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 600; margin-right: 12px; flex-shrink: 0; }
.wrapper .container .content.requests .main .table .row .user .inner-user .request { display: flex; flex-direction: column; }
.wrapper .container .content.requests .main .table .row .user .inner-user .subject { display: flex; flex-direction: row; align-items: center; font-size: 17px; font-weight: 600; }
.wrapper .container .content.requests .main .table .row .user .inner-user .subject .number { font-size: 13px; font-weight: 400; margin-left: 4px; }
.wrapper .container .content.requests .main .table .row .user .inner-user .subject .time { font-size: 13px; }
.wrapper .container .content.requests .main .table .row .user .inner-user .user { display: flex; flex-direction: row; align-items: center; }
.wrapper .container .content.requests .main .table .row .inner-values { max-width: 240px; width: 100%; }
.wrapper .container .content.requests .main .table .row .inner-values .value { display: flex; align-items: center; font-weight: 600; }
.wrapper .container .content.requests .main .table .row .inner-values .value .status { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.wrapper .container .content.requests .sidebar { max-width: 460px; width: 100%; }
.wrapper .container .content.requests .sidebar .inner { margin: 10px 30px; border-radius: 6px; }
.wrapper .container .content.requests .sidebar .inner .wrapper { margin-bottom: 30px; padding: 15px 30px; border-radius: 10px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .title { font-size: 26px; font-weight: 600; margin-bottom: 18px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item { position: relative; display: flex; flex-direction: column; font-size: 16px; margin-bottom: 14px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .disruptions .item { font-size: 14px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item .workpool { font-size: 14px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item .workpool { font-size: 13px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item .workpool .count { font-weight: 600; font-size: 14px; margin-left: 6px; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item .seen { display: flex; align-items: center; font-size: 11px; margin: 3px 0; }
.wrapper .container .content.requests .sidebar .inner .wrapper .item .seen .status { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
/*? ----------     REQUESTS     ---------- */

/* ----------     KNOWLEDGEBASE     ---------- */
.wrapper .container .content.knowledgebase .blocks .block-wrapper .block .wrapper .content { display: flex; flex-direction: column; gap: 10px; }
.wrapper .container .content.knowledgebase .blocks .block-wrapper .block .wrapper .content .split { display: flex; gap: 10px; }
.wrapper .container .content.knowledgebase .blocks .split .block-wrapper .block { min-height: 180px; }
/*? ----------     KNOWLEDGEBASE     ---------- */

/* ----------     REQUESTS TYPE     ---------- */
.wrapper .container .content .type-wrapper { display: flex; flex-direction: column; align-items: center; margin: auto; }
.wrapper .container .content .type-wrapper .type { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.wrapper .container .content .type-wrapper .type .type-card { display: flex; flex-direction: column; flex: 0 0 50%; max-width: 450px; border-radius: 10px; padding: 14px 16px; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, background .15s ease; cursor: pointer; }
.wrapper .container .content .type-wrapper .type .type-card:hover { transform: translateY(-1px); }
.wrapper .container .content .type-wrapper .type .type-card .type-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.wrapper .container .content .type-wrapper .type .type-card .type-info { font-size: 12px; }
.wrapper .container .content .type-wrapper .type-back { margin-top: 18px; }
.wrapper .container .content .type-wrapper .type-back .type-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-decoration: none; }
.wrapper .container .content .type-wrapper .type-back .type-back-link i { font-size: 14px; }
/*? ----------     REQUESTS TYPE     ---------- */

/* ----------     STATS     ---------- */
.wrapper .container .content .blocks .block-wrapper .block .table-rows { font-size: 14px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .delta { font-size: 11px; display: flex; align-items: center; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .name { font-weight: 600; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .avatar-cell .img { height: 30px; width: 30px; font-size: 14px; border-radius: 50%; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .avatar-cell .img.non { display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 12px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .level-info { gap: 3px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .level-info img { margin-right: 0; width: 30px; }
.wrapper .container .content .blocks .block-wrapper .block .table-rows .score { font-weight: 600; }

.wrapper .container .content.stats { display: flex; flex-direction: column; gap: 20px; margin-bottom: 50px; }
.wrapper .container .content.stats .section { border-radius: 10px; padding: 30px; }
.wrapper .container .content.stats .section .section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.wrapper .container .content.stats .section .section-header .section-title { font-size: 16px; font-weight: 400; }
.wrapper .container .content.stats .section .section-header .section-subtitle { font-size: 12px; }

.wrapper .container .content.stats .section .kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.wrapper .container .content.stats .section .kpi-row .kpi-card { border-radius: 10px; padding: 10px 15px; display: flex; flex-direction: column; gap: 5px; position: relative; overflow: hidden; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-header { display: flex; justify-content: space-between; align-items: center; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-header .kpi-label { font-size: 13px; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-header .kpi-trend { font-size: 10px; font-weight: 500; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-main { display: flex; flex-direction: column; gap: 1px; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-main .kpi-value { font-size: 20px; font-weight: 600; font-family: monospace; }
.wrapper .container .content.stats .section .kpi-row .kpi-card .kpi-main .kpi-sublabel { font-size: 10px; }

.wrapper .container .content.stats .section .charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.wrapper .container .content.stats .section .charts-row .chart-card { display: flex; flex-direction: column; gap: 10px; border-radius: 10px; padding: 10px 15px; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-header { display: flex; justify-content: space-between; align-items: baseline; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-header .left { display: flex; align-items: baseline; gap: 8px; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-header .left .chart-title { font-size: 13px; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-header .left .chart-subtitle { font-size: 10px; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-header .chart-meta { font-size: 10px; font-weight: 500; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-body {position: relative; width: 100%; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-body.large { height: 260px; }
.wrapper .container .content.stats .section .charts-row .chart-card .chart-body.medium { height: 210px; }
/*? ----------     STATS     ---------- */

/* ----------     SERVICES     ---------- */
.wrapper .container .content.services { display: flex; margin-top: 50px; }
.wrapper .container .content.services .blocks .block-wrapper .top .title { margin-bottom: 10px; }

.wrapper .container .content.services .blocks .block-wrapper .wrapper { width: 100%; margin-top: 25px; }
.wrapper .container .content.services .blocks .block-wrapper .wrapper .content label { margin-bottom: 5px; }
.wrapper .container .content.services .blocks .block-wrapper .wrapper .content form { display: flex; flex-direction: column; }
.wrapper .container .content.services .blocks .block-wrapper .wrapper .content .output { margin-top: 20px; }
.wrapper .container .content.services .blocks .block-wrapper .wrapper .content .hint { margin-top: 8px; }
/*? ----------     SERVICES     ---------- */

/* ----------     FORM     ---------- */
.wrapper.content.form .logo { position: absolute; top: 25px; left: 25px; width: 120px; }
.wrapper.content.form .content { display: flex; justify-content: center; align-items: center; height: 100%; }
.wrapper.content.form .content .blocks { width: fit-content; max-width: 650px; }
.wrapper.content.form.large .content .blocks { max-width: 900px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .title i { font-size: 14px; cursor: pointer; padding: 10px 20px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .info { margin-bottom: 20px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .select-display { margin-bottom: 6px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .priority-group { display: flex; gap: 8px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .priority-group .priority-btn { flex: 1; border-radius: 6px; padding: 8px 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all .15s ease; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .priority-group .priority-btn .priority-dot { width: 8px; height: 8px; border-radius: 50%; display: flex; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline { border-radius: 8px; overflow: hidden; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-search-input { width: 100%; border: none !important; padding: 8px 12px; outline: none; box-sizing: border-box; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-inline-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; font-size: 12px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-divider { height: 1px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list { max-height: 220px; overflow-y: auto; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; cursor: pointer; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left { display: flex; align-items: center; gap: 10px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left .access-avatar { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 13px; overflow: hidden; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left .access-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left .access-namewrap { display: flex; flex-direction: column; gap: 2px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left .access-namewrap .access-name { font-size: 14px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-left .access-namewrap .access-email { font-size: 12px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-right { display: flex; align-items: center; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-right .access-checkbox { width: 14px; height: 14px; cursor: pointer; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .access-inline .access-list .access-row .access-right .access-count { font-size: 12px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .message-editor .message-input { width: 100%; border: none; resize: vertical; padding: 10px 12px; outline: none; box-sizing: border-box; border-radius: 8px; overflow: hidden; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone { border-radius: 8px; padding: 18px 12px; text-align: center; position: relative; transition: background .15s ease, border-color .15s ease; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .file-input { position: absolute; height: auto; inset: 0; opacity: 0; pointer-events: none; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .dropzone-inner { pointer-events: none; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .dropzone-inner .dropzone-icon { font-size: 28px; margin-bottom: 6px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .dropzone-inner .dropzone-text { font-size: 13px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .dropzone-inner .dropzone-text .dropzone-link { margin-top: 4px; font-size: 12px; background: none; border: none; cursor: pointer; text-decoration: underline; pointer-events: auto; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .dropzone .dropzone-inner .dropzone-info { font-size: 11px; margin-top: 8px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 6px; font-size: 12px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left { display: flex; align-items: center; gap: 8px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left .attachment-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left .attachment-icon .attachment-icon-img { width: 100%; height: 100%; object-fit: contain; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left .attachment-meta { display: flex; flex-direction: column; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left .attachment-meta .attachment-name { font-size: 12px; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-left .attachment-meta .attachment-info { font-size: 11px; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-right { display: flex; align-items: center; }
.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .input-group .attachments .attachments-list .attachment-row .attachment-right .attachment-remove { border: none; font-size: 16px; cursor: pointer; }

.wrapper.content.form .container .content .blocks .block-wrapper .block .block-inner .block-info .actions { display: flex; justify-content: flex-end; gap: 8px; }
/*? ----------     FORM     ---------- */

/* ----------     SERVICE/CODE PAGE     ---------- */
.wrapper.service { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
.wrapper.service .service-header { display: flex; height: 70px; padding: 0 25px; }
.wrapper.service .service-header .logo { display: flex; }
.wrapper.service .service-header .logo svg { width: 85px; }
.wrapper.service .service-inner { display: flex; flex-direction: column; margin: auto; }
.wrapper.service .service-inner .service-stage { position: relative; width: 100%; margin: 20px; display: flex; justify-content: center; align-items: flex-end; }
.wrapper.service .service-inner .service-stage .service-code { position: absolute; display: flex; justify-content: space-between; align-items: center; pointer-events: none; font-weight: 700; font-size: 55vh; letter-spacing: 8px; padding: 0 32px; box-sizing: border-box; }
.wrapper.service .service-inner .service-stage .service-monster { position: relative; z-index:1; display: flex; justify-content: center; align-items: flex-end; }
.wrapper.service .service-inner .service-stage .service-monster img { max-height: 40vh; width: auto; object-fit: contain; }
.wrapper.service .service-inner .service-text { text-align: center; margin: 20px; }
.wrapper.service .service-inner .service-text .service-title { font-size: 28px; font-weight: 600; margin-bottom: 8px; }
.wrapper.service .service-inner .service-text .service-sub { font-size: 14px; line-height: 1.5; margin-bottom: 24px; }
.wrapper.service .service-inner .service-text .service-actions { display: flex; justify-content: center; }
.wrapper.service .service-inner .service-text .service-actions .service-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.wrapper.service .service-inner .service-text .service-actions .service-btn:hover { transform: translateY(-1px); }
.wrapper.service .service-inner .service-text .service-actions .service-btn i { margin-right: 6px; font-size: 14px; }
/*? ----------     SERVICE/CODE PAGE     ---------- */

/* ----------     SYSTEM     ---------- */
.wrapper .container .content.system { display: flex; margin-top: 50px; }
/*? ----------     SYSTEM     ---------- */