/*** RESET ***/ *, ::after, ::before {-webkit-box-sizing: border-box; box-sizing: border-box;} @media (prefers-reduced-motion: no-preference) {:root {scroll-behavior: smooth;}} body { margin: 0; font-family: var(--pandacss-body-font-family); font-size: var(--pandacss-body-font-size); font-weight: var(--pandacss-body-font-weight); line-height: var(--pandacss-body-line-height); color: var(--pandacss-body-color); text-align: var(--pandacss-body-text-align); background-color: var(--pandacss-body-bg);} body.mobile {scrollbar-width: thin;} hr {margin: 1rem 0; color: inherit; background-color: currentColor; border: 0; opacity: 0.25;} hr:not([size]) {height: 1px;} .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2;} .h1, h1 {color:#767676; font:400 20px/20px 'Oswald'; margin: 0px 0px 20px 0px;} @media (min-width: 1200px) {.h1, h1 {font:400 30px/30px 'Oswald'; }} .h2, h2 {font-size: calc(1.325rem + 0.9vw);} @media (min-width: 1200px) {.h2, h2 {font-size: 2rem;}} .h3, h3 {font-size: calc(1.3rem + 0.6vw);} @media (min-width: 1200px) {.h3, h3 {font-size: 1.75rem;}} .h4, h4 {font-size: calc(1.275rem + 0.3vw);} @media (min-width: 1200px) {.h4, h4 {font-size: 1.5rem;}} .h5, h5 {font-size: 1.25rem;} .h6, h6 {font-size: 1rem;} p {margin-top: 0; margin-bottom: 1rem;} abbr[title] {-webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none;} address {margin-bottom: 1rem; font-style: normal; line-height: inherit;} ol, ul {padding-left: 2rem;} dl, ol, ul {margin-top: 0; margin-bottom: 1rem;} ol ol, ol ul, ul ol, ul ul {margin-bottom: 0;} dt {font-weight: 700;} dd {margin-bottom: 0.5rem; margin-left: 0;} blockquote {margin: 0 0 1rem;} b, strong {font-weight: bolder;} .small, small {font-size: 0.875em;} .mark, mark {padding: 0.2em; background-color: #fcf8e3;} sub, sup {position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline;} sub {bottom: 0em;} sup {top: 0em;} a {color: #0d6efd; text-decoration: underline;} a:hover {color: #0a58ca;} a:not([href]):not([class]), a:not([href]):not([class]):hover {color: inherit; text-decoration: none;} code, kbd, pre, samp {font-family: var(--pandacss-font-monospace); font-size: 1em; direction: ltr; unicode-bidi: bidi-override;} pre {display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: 0.875em;} pre code {font-size: inherit; color: inherit; word-break: normal;} code {font-size: 0.875em; color: #d63384; word-wrap: break-word;} a > code {color: inherit;} kbd {padding: 0.2rem 0.4rem; font-size: 0.875em; color: #fff; background-color: #212529; border-radius: 0.2rem;} kbd kbd {padding: 0; font-size: 1em; font-weight: 700;} figure {margin: 0 0 1rem;} img, svg {vertical-align: middle;} table {caption-side: bottom; border-collapse: collapse;} caption {padding-top: 0.5rem; padding-bottom: 0.5rem; color: #6c757d; text-align: left;} th {text-align: inherit; text-align: -webkit-match-parent;} tbody, td, tfoot, th, thead, tr {border-color: inherit; border-style: solid; border-width: 0;} label {display: inline-block;} button {border-radius: 0;} button:focus:not(:focus-visible) {outline: 0;} button, input, optgroup, select, textarea {margin: 0; font-family: inherit; font-size: inherit; line-height: inherit;} button, select {text-transform: none;} [role="button"] {cursor: pointer;} select {word-wrap: normal;} select:disabled {opacity: 1;} [list]::-webkit-calendar-picker-indicator {display: none;} [type="button"], [type="reset"], [type="submit"], button {-webkit-appearance: button;} [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {cursor: pointer;} textarea {resize: vertical;} fieldset {min-width: 0; padding: 0; margin: 0; border: 0;} legend {float: left; width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: calc(1.275rem + 0.3vw); line-height: inherit;} @media (min-width: 1200px) {legend {font-size: 1.5rem;}} legend + * {clear: left;} output {display: inline-block;} iframe {border: 0;} summary {display: list-item; cursor: pointer;} progress {vertical-align: baseline;} [hidden] {display: none !important;} .lead {font-size: 1.25rem; font-weight: 300;} .blockquote {margin-bottom: 1rem; font-size: 1.25rem;} .blockquote > :last-child {margin-bottom: 0;} .blockquote-footer {margin-top: -1rem; margin-bottom: 1rem; font-size: 0.875em; color: #6c757d;} .blockquote-footer::before {content: "— ";} .figure {display: inline-block;} /*** LIST ***/ .list-none, .list-circle, .list-disc, .list-square, .list-triangle, .list-check, .list-rhomb, .list-arrow, .list-arrow2, .list-arrow-circle, .list-star-circle {list-style:none !important;} .list-none li, .list-circle li, .list-disc li, .list-square li, .list-triangle li, .list-check li, .list-rhomb li, .list-arrow li, .list-arrow2 li, .list-arrow-circle li, .list-star-circle li {text-align:justify;} .list-circle li:before {content:"\25E6"; color:#945FCB; margin-right:10px;} .list-disc li:before {content:"\2022"; color:#945FCB; margin-right:10px;} .list-square li:before {content:"\2BC0"; color:#945FCB; margin-right:10px;} .list-triangle li:before {content:"\2023"; color:#945FCB; margin-right:10px;} .list-check li:before {content:"\2713"; color:#945FCB; margin-right:10px;} .list-arrow li:before {content:"\2B95"; color:#945FCB; margin-right:10px;} .list-arrow2 li:before {content:"\2B9E"; color:#945FCB; margin-right:10px;} .list-arrow-circle li:before {content:"\2B8A"; color:#945FCB; margin-right:10px;} .list-rhomb li:before {content:"\2B27"; color:#945FCB; margin-right:10px;} .list-star li:before {content:"\2605"; color:#945FCB; margin-right:10px;} /*** BACKGROUND ***/ .bkg-primary {background: var(--pandacss-primary) !important;} .bkg-secondary {background: var(--pandacss-secondary) !important;} .bkg-success {background: var(--pandacss-success) !important;} .bkg-primary {background: var(--pandacss-info) !important;} .bkg-primary {background: var(--pandacss-warning) !important;} .bkg-danger {background: var(--pandacss-danger) !important;} .bkg-light {background: var(--pandacss-light) !important;} .bkg-dark {background: var(--pandacss-dark) !important;} /*** COLORS ***/ .color-primary {color: var(--pandacss-primary) !important;} .color-secondary {color: var(--pandacss-secondary) !important;} .color-success {color: var(--pandacss-success) !important;} .color-primary {color: var(--pandacss-info) !important;} .color-primary {color: var(--pandacss-warning) !important;} .color-danger {color: var(--pandacss-danger) !important;} .color-light {color: var(--pandacss-light) !important;} .color-dark {color: var(--pandacss-dark) !important;} /*** Animation CSS ***/ @-webkit-keyframes spin {0% {-webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(359deg); transform: rotate(359deg);}} @keyframes spin {0% {-webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(359deg); transform: rotate(359deg);}} @-webkit-keyframes flashing {0%, 90% {opacity: 1;} 45% {opacity: 0;}} @keyframes flashing {0%, 90% {opacity: 1;} 45% {opacity: 0;}} @-webkit-keyframes circlebig {100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}} @keyframes circlebig {100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}} @-webkit-keyframes dotloader {50% {-webkit-transform: scale(1.8); transform: scale(1.8);}} @keyframes dotloader {50% {-webkit-transform: scale(1.8); transform: scale(1.8);}} @-webkit-keyframes circleloader2 {0% {width: 0%; height: 0%;} 40% {width: 100%; height: 100%; opacity: 0.7;} 100% {width: 240%; height: 240%; opacity: 0;}} @keyframes circleloader2 {0% {width: 0%; height: 0%;} 40% {width: 100%; height: 100%; opacity: 0.7;} 100% {width: 240%; height: 240%; opacity: 0;}} @-webkit-keyframes toast-animation {0% {width: 100%;} 100% {width: 0%;}} @keyframes toast-animation {0% {width: 100%;} 100% {width: 0%;}} @-webkit-keyframes typingg {0% {top: 0;} 50% {top: -6px;} 100% {top: 0;}} @keyframes typingg {0% {top: 0;} 50% {top: -6px;} 100% {top: 0;}} @keyframes fadeIn {from { opacity: 0; transform: translateY(5px);} to {opacity: 1; transform: translateY(0);}} /*** FLYOUT CSS ***/ .flyout-clone {position: fixed; z-index: 10000; pointer-events: none; transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s ease, width 1s ease, height 1s ease; opacity: 1;} .flyout-animating {opacity: 0.8;} /*** RESOLUTION [ xxs => 0-479 xs => 480-767 sm => 768-991 md => 992-1199 lg => 1200-1399 xl => 1400-1799 xxl => 1800-... ] ***/ /*** COLUMNS ***/ [class *= "col-"] {-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto;} @media only screen and (min-width:1800px) {.col-xxl-1 {width:8.33% !important;} .col-xxl-2 {width:16.66% !important;} .col-xxl-3 {width:25% !important;} .col-xxl-4 {width:33.33% !important;} .col-xxl-5 {width:41.66% !important;} .col-xxl-6 {width:50% !important;} .col-xxl-7 {width:58.33% !important;} .col-xxl-8 {width:66.66% !important;} .col-xxl-9 {width:75% !important;} .col-xxl-10 {width:83.33% !important;} .col-xxl-11 {width:91.66% !important;} .col-xxl-12 {width:100% !important;}} @media only screen and (min-width:1400px) and (max-width:1799px) {.col-xl-1 {width:8.33% !important;} .col-xl-2 {width:16.66% !important;} .col-xl-3 {width:25% !important;} .col-xl-4 {width:33.33% !important;} .col-xl-5 {width:41.66% !important;} .col-xl-6 {width:50% !important;} .col-xl-7 {width:58.33% !important;} .col-xl-8 {width:66.66% !important;} .col-xl-9 {width:75% !important;} .col-xl-10 {width:83.33% !important;} .col-xl-11 {width:91.66% !important;} .col-xl-12 {width:100% !important;}} @media only screen and (min-width:1200px) and (max-width:1399px) {.col-lg-1 {width:8.33% !important;} .col-lg-2 {width:16.66% !important;} .col-lg-3 {width:25% !important;} .col-lg-4 {width:33.33% !important;} .col-lg-5 {width:41.66% !important;} .col-lg-6 {width:50% !important;} .col-lg-7 {width:58.33% !important;} .col-lg-8 {width:66.66% !important;} .col-lg-9 {width:75% !important;} .col-lg-10 {width:83.33% !important;} .col-lg-11 {width:91.66% !important;} .col-lg-12 {width:100% !important;}} @media only screen and (min-width:992px) and (max-width:1199px) {.col-md-1 {width:8.33% !important;} .col-md-2 {width:16.66% !important;} .col-md-3 {width:25% !important;} .col-md-4 {width:33.33% !important;} .col-md-5 {width:41.66% !important;} .col-md-6 {width:50% !important;} .col-md-7 {width:58.33% !important;} .col-md-8 {width:66.66% !important;} .col-md-9 {width:75% !important;} .col-md-10 {width:83.33% !important;} .col-md-11 {width:91.66% !important;} .col-md-12 {width:100% !important;}} @media only screen and (min-width:768px) and (max-width:991px) {.col-sm-1 {width:8.33% !important;} .col-sm-2 {width:16.66% !important;} .col-sm-3 {width:25% !important;} .col-sm-4 {width:33.33% !important;} .col-sm-5 {width:41.66% !important;} .col-sm-6 {width:50% !important;} .col-sm-7 {width:58.33% !important;} .col-sm-8 {width:66.66% !important;} .col-sm-9 {width:75% !important;} .col-sm-10 {width:83.33% !important;} .col-sm-11 {width:91.66% !important;} .col-sm-12 {width:100% !important;}} @media only screen and (min-width:480px) and (max-width:767px) {.col-xs-1 {width:8.33% !important;} .col-xs-2 {width:16.66% !important;} .col-xs-3 {width:25% !important;} .col-xs-4 {width:33.33% !important;} .col-xs-5 {width:41.66% !important;} .col-xs-6 {width:50% !important;} .col-xs-7 {width:58.33% !important;} .col-xs-8 {width:66.66% !important;} .col-xs-9 {width:75% !important;} .col-xs-10 {width:83.33% !important;} .col-xs-11 {width:91.66% !important;} .col-xs-12 {width:100% !important;}} @media only screen and (max-width:479px) {.col-xxs-1 {width:8.33% !important;} .col-xxs-2 {width:16.66% !important;} .col-xxs-3 {width:25% !important;} .col-xxs-4 {width:33.33% !important;} .col-xxs-5 {width:41.66% !important;} .col-xxs-6 {width:50% !important;} .col-xxs-7 {width:58.33% !important;} .col-xxs-8 {width:66.66% !important;} .col-xxs-9 {width:75% !important;} .col-xxs-10 {width:83.33% !important;} .col-xxs-11 {width:91.66% !important;} .col-xxs-12 {width:100% !important;}} /*** FONT-WEIGHT ***/ @media only screen and (min-width:1800px) {.font-weight-xxl-normal {font-weight: normal !important;} .font-weight-xxl-bold {font-weight: bold !important;} .font-weight-xxl-100 {font-weight: 100 !important;} .font-weight-xxl-200 {font-weight: 200 !important;} .font-weight-xxl-300 {font-weight: 300 !important;} .font-weight-xxl-400 {font-weight: 400 !important;} .font-weight-xxl-500 {font-weight: 500 !important;} .font-weight-xxl-600 {font-weight: 600 !important;} .font-weight-xxl-700 {font-weight: 700 !important;} .font-weight-xxl-800 {font-weight: 800 !important;} .font-weight-xxl-900 {font-weight: 900 !important;} .font-weight-xxl-lighter {font-weight: lighter !important;} .font-weight-xxl-bolder {font-weight: bolder !important;} .font-weight-xxl-inherit {font-weight: inherit !important;} .font-weight-xxl-initial {font-weight: initial !important;} .font-weight-xxl-revert {font-weight: revert !important;} .font-weight-xxl-unset {font-weight: unset !important;}} @media only screen and (min-width:1400px) and (max-width:1799px) {.font-weight-xl-normal {font-weight: normal !important;} .font-weight-xl-bold {font-weight: bold !important;} .font-weight-xl-100 {font-weight: 100 !important;} .font-weight-xl-200 {font-weight: 200 !important;} .font-weight-xl-300 {font-weight: 300 !important;} .font-weight-xl-400 {font-weight: 400 !important;} .font-weight-xl-500 {font-weight: 500 !important;} .font-weight-xl-600 {font-weight: 600 !important;} .font-weight-xl-700 {font-weight: 700 !important;} .font-weight-xl-800 {font-weight: 800 !important;} .font-weight-xl-900 {font-weight: 900 !important;} .font-weight-xl-lighter {font-weight: lighter !important;} .font-weight-xl-bolder {font-weight: bolder !important;} .font-weight-xl-inherit {font-weight: inherit !important;} .font-weight-xl-initial {font-weight: initial !important;} .font-weight-xl-revert {font-weight: revert !important;} .font-weight-xl-unset {font-weight: unset !important;}} @media only screen and (min-width:1200px) and (max-width:1399px) {.font-weight-lg-normal {font-weight: normal !important;} .font-weight-lg-bold {font-weight: bold !important;} .font-weight-lg-100 {font-weight: 100 !important;} .font-weight-lg-200 {font-weight: 200 !important;} .font-weight-lg-300 {font-weight: 300 !important;} .font-weight-lg-400 {font-weight: 400 !important;} .font-weight-lg-500 {font-weight: 500 !important;} .font-weight-lg-600 {font-weight: 600 !important;} .font-weight-lg-700 {font-weight: 700 !important;} .font-weight-lg-800 {font-weight: 800 !important;} .font-weight-lg-900 {font-weight: 900 !important;} .font-weight-lg-lighter {font-weight: lighter !important;} .font-weight-lg-bolder {font-weight: bolder !important;} .font-weight-lg-inherit {font-weight: inherit !important;} .font-weight-lg-initial {font-weight: initial !important;} .font-weight-lg-revert {font-weight: revert !important;} .font-weight-lg-unset {font-weight: unset !important;}} @media only screen and (min-width:992px) and (max-width:1199px) {.font-weight-md-normal {font-weight: normal !important;} .font-weight-md-bold {font-weight: bold !important;} .font-weight-md-100 {font-weight: 100 !important;} .font-weight-md-200 {font-weight: 200 !important;} .font-weight-md-300 {font-weight: 300 !important;} .font-weight-md-400 {font-weight: 400 !important;} .font-weight-md-500 {font-weight: 500 !important;} .font-weight-md-600 {font-weight: 600 !important;} .font-weight-md-700 {font-weight: 700 !important;} .font-weight-md-800 {font-weight: 800 !important;} .font-weight-md-900 {font-weight: 900 !important;} .font-weight-md-lighter {font-weight: lighter !important;} .font-weight-md-bolder {font-weight: bolder !important;} .font-weight-md-inherit {font-weight: inherit !important;} .font-weight-md-initial {font-weight: initial !important;} .font-weight-md-revert {font-weight: revert !important;} .font-weight-md-unset {font-weight: unset !important;}} @media only screen and (min-width:768px) and (max-width:991px) {.font-weight-sm-normal {font-weight: normal !important;} .font-weight-sm-bold {font-weight: bold !important;} .font-weight-sm-100 {font-weight: 100 !important;} .font-weight-sm-200 {font-weight: 200 !important;} .font-weight-sm-300 {font-weight: 300 !important;} .font-weight-sm-400 {font-weight: 400 !important;} .font-weight-sm-500 {font-weight: 500 !important;} .font-weight-sm-600 {font-weight: 600 !important;} .font-weight-sm-700 {font-weight: 700 !important;} .font-weight-sm-800 {font-weight: 800 !important;} .font-weight-sm-900 {font-weight: 900 !important;} .font-weight-sm-lighter {font-weight: lighter !important;} .font-weight-sm-bolder {font-weight: bolder !important;} .font-weight-sm-inherit {font-weight: inherit !important;} .font-weight-sm-initial {font-weight: initial !important;} .font-weight-sm-revert {font-weight: revert !important;} .font-weight-sm-unset {font-weight: unset !important;}} @media only screen and (min-width:480px) and (max-width:767px) {.font-weight-xs-normal {font-weight: normal !important;} .font-weight-xs-bold {font-weight: bold !important;} .font-weight-xs-100 {font-weight: 100 !important;} .font-weight-xs-200 {font-weight: 200 !important;} .font-weight-xs-300 {font-weight: 300 !important;} .font-weight-xs-400 {font-weight: 400 !important;} .font-weight-xs-500 {font-weight: 500 !important;} .font-weight-xs-600 {font-weight: 600 !important;} .font-weight-xs-700 {font-weight: 700 !important;} .font-weight-xs-800 {font-weight: 800 !important;} .font-weight-xs-900 {font-weight: 900 !important;} .font-weight-xs-lighter {font-weight: lighter !important;} .font-weight-xs-bolder {font-weight: bolder !important;} .font-weight-xs-inherit {font-weight: inherit !important;} .font-weight-xs-initial {font-weight: initial !important;} .font-weight-xs-revert {font-weight: revert !important;} .font-weight-xs-unset {font-weight: unset !important;}} @media only screen and (max-width:479px) {.font-weight-xxs-normal {font-weight: normal !important;} .font-weight-xxs-bold {font-weight: bold !important;} .font-weight-xxs-100 {font-weight: 100 !important;} .font-weight-xxs-200 {font-weight: 200 !important;} .font-weight-xxs-300 {font-weight: 300 !important;} .font-weight-xxs-400 {font-weight: 400 !important;} .font-weight-xxs-500 {font-weight: 500 !important;} .font-weight-xxs-600 {font-weight: 600 !important;} .font-weight-xxs-700 {font-weight: 700 !important;} .font-weight-xxs-800 {font-weight: 800 !important;} .font-weight-xxs-900 {font-weight: 900 !important;} .font-weight-xxs-lighter {font-weight: lighter !important;} .font-weight-xxs-bolder {font-weight: bolder !important;} .font-weight-xxs-inherit {font-weight: inherit !important;} .font-weight-xxs-initial {font-weight: initial !important;} .font-weight-xxs-revert {font-weight: revert !important;} .font-weight-xxs-unset {font-weight: unset !important;}} /*** TEXT-ALIGN ***/ @media only screen and (min-width:1800px) {.text-align-xxl-start {text-align: start !important;} .text-align-xxl-end {text-align: end !important;} .text-align-xxl-left {text-align: left !important;} .text-align-xxl-right {text-align: right !important;} .text-align-xxl-center {text-align: center !important;} .text-align-xxl-justify {text-align: justify !important;} .text-align-xxl-match-parent {text-align: match-parent !important;} .text-align-xxl-inherit {text-align: inherit !important;} .text-align-xxl-initial {text-align: initial !important;} .text-align-xxl-revert {text-align: revert !important;} .text-align-xxl-unset {text-align: unset !important;}} @media only screen and (min-width:1400px) and (max-width:1799px) {.text-align-xl-start {text-align: start !important;} .text-align-xl-end {text-align: end !important;} .text-align-xl-left {text-align: left !important;} .text-align-xl-right {text-align: right !important;} .text-align-xl-center {text-align: center !important;} .text-align-xl-justify {text-align: justify !important;} .text-align-xl-match-parent {text-align: match-parent !important;} .text-align-xl-inherit {text-align: inherit !important;} .text-align-xl-initial {text-align: initial !important;} .text-align-xl-revert {text-align: revert !important;} .text-align-xl-unset {text-align: unset !important;}} @media only screen and (min-width:1200px) and (max-width:1399px) {.text-align-lg-start {text-align: start !important;} .text-align-lg-end {text-align: end !important;} .text-align-lg-left {text-align: left !important;} .text-align-lg-right {text-align: right !important;} .text-align-lg-center {text-align: center !important;} .text-align-lg-justify {text-align: justify !important;} .text-align-lg-match-parent {text-align: match-parent !important;} .text-align-lg-inherit {text-align: inherit !important;} .text-align-lg-initial {text-align: initial !important;} .text-align-lg-revert {text-align: revert !important;} .text-align-lg-unset {text-align: unset !important;}} @media only screen and (min-width:992px) and (max-width:1199px) {.text-align-md-start {text-align: start !important;} .text-align-md-end {text-align: end !important;} .text-align-md-left {text-align: left !important;} .text-align-md-right {text-align: right !important;} .text-align-md-center {text-align: center !important;} .text-align-md-justify {text-align: justify !important;} .text-align-md-match-parent {text-align: match-parent !important;} .text-align-md-inherit {text-align: inherit !important;} .text-align-md-initial {text-align: initial !important;} .text-align-md-revert {text-align: revert !important;} .text-align-md-unset {text-align: unset !important;}} @media only screen and (min-width:768px) and (max-width:991px) {.text-align-sm-start {text-align: start !important;} .text-align-sm-end {text-align: end !important;} .text-align-sm-left {text-align: left !important;} .text-align-sm-right {text-align: right !important;} .text-align-sm-center {text-align: center !important;} .text-align-sm-justify {text-align: justify !important;} .text-align-sm-match-parent {text-align: match-parent !important;} .text-align-sm-inherit {text-align: inherit !important;} .text-align-sm-initial {text-align: initial !important;} .text-align-sm-revert {text-align: revert !important;} .text-align-sm-unset {text-align: unset !important;}} @media only screen and (min-width:480px) and (max-width:767px) {.text-align-xs-start {text-align: start !important;} .text-align-xs-end {text-align: end !important;} .text-align-xs-left {text-align: left !important;} .text-align-xs-right {text-align: right !important;} .text-align-xs-center {text-align: center !important;} .text-align-xs-justify {text-align: justify !important;} .text-align-xs-match-parent {text-align: match-parent !important;} .text-align-xs-inherit {text-align: inherit !important;} .text-align-xs-initial {text-align: initial !important;} .text-align-xs-revert {text-align: revert !important;} .text-align-xs-unset {text-align: unset !important;}} @media only screen and (max-width:479px) {.text-align-xxs-start {text-align: start !important;} .text-align-xxs-end {text-align: end !important;} .text-align-xxs-left {text-align: left !important;} .text-align-xxs-right {text-align: right !important;} .text-align-xxs-center {text-align: center !important;} .text-align-xxs-justify {text-align: justify !important;} .text-align-xxs-match-parent {text-align: match-parent !important;} .text-align-xxs-inherit {text-align: inherit !important;} .text-align-xxs-initial {text-align: initial !important;} .text-align-xxs-revert {text-align: revert !important;} .text-align-xxs-unset {text-align: unset !important;}} /*** TEXT-INDENT ***/ @media only screen and (min-width:1800px) {.text-indent-xxl-1rem {text-indent: 1rem !important;} .text-indent-xxl-2rem {text-indent: 2rem !important;} .text-indent-xxl-3rem {text-indent: 3rem !important;} .text-indent-xxl-4rem {text-indent: 4rem !important;} .text-indent-xxl-5rem {text-indent: 5rem !important;} .text-indent-xxl--1rem {text-indent: -1rem !important;} .text-indent-xxl--2rem {text-indent: -2rem !important;} .text-indent-xxl--3rem {text-indent: -3rem !important;} .text-indent-xxl--4rem {text-indent: -4rem !important;} .text-indent-xxl--5rem {text-indent: -5rem !important;} .text-indent-xxl-1em {text-indent: 1em !important;} .text-indent-xxl-2em {text-indent: 2em !important;} .text-indent-xxl-3em {text-indent: 3em !important;} .text-indent-xxl-4em {text-indent: 4em !important;} .text-indent-xxl-5em {text-indent: 5em !important;} .text-indent-xxl--1em {text-indent: -1em !important;} .text-indent-xxl--2em {text-indent: -2em !important;} .text-indent-xxl--3em {text-indent: -3em !important;} .text-indent-xxl--4em {text-indent: -4em !important;} .text-indent-xxl--5em {text-indent: -5em !important;} .text-indent-xxl-none {text-indent: 0 !important;} .text-indent-xxl-inherit {text-indent: inherit !important;} .text-indent-xxl-initial {text-indent: initial !important;} .text-indent-xxl-revert {text-indent: revert !important;} .text-indent-xxl-unset {text-indent: unset !important;}} @media only screen and (min-width:1400px) and (max-width:1799px) {.text-indent-xl-1rem {text-indent: 1rem !important;} .text-indent-xl-2rem {text-indent: 2rem !important;} .text-indent-xl-3rem {text-indent: 3rem !important;} .text-indent-xl-4rem {text-indent: 4rem !important;} .text-indent-xl-5rem {text-indent: 5rem !important;} .text-indent-xl--1rem {text-indent: -1rem !important;} .text-indent-xl--2rem {text-indent: -2rem !important;} .text-indent-xl--3rem {text-indent: -3rem !important;} .text-indent-xl--4rem {text-indent: -4rem !important;} .text-indent-xl--5rem {text-indent: -5rem !important;} .text-indent-xl-1em {text-indent: 1em !important;} .text-indent-xl-2em {text-indent: 2em !important;} .text-indent-xl-3em {text-indent: 3em !important;} .text-indent-xl-4em {text-indent: 4em !important;} .text-indent-xl-5em {text-indent: 5em !important;} .text-indent-xl--1em {text-indent: -1em !important;} .text-indent-xl--2em {text-indent: -2em !important;} .text-indent-xl--3em {text-indent: -3em !important;} .text-indent-xl--4em {text-indent: -4em !important;} .text-indent-xl--5em {text-indent: -5em !important;} .text-indent-xl-none {text-indent: 0 !important;} .text-indent-xl-inherit {text-indent: inherit !important;} .text-indent-xl-initial {text-indent: initial !important;} .text-indent-xl-revert {text-indent: revert !important;} .text-indent-xl-unset {text-indent: unset !important;}} @media only screen and (min-width:1200px) and (max-width:1399px) {.text-indent-lg-1rem {text-indent: 1rem !important;} .text-indent-lg-2rem {text-indent: 2rem !important;} .text-indent-lg-3rem {text-indent: 3rem !important;} .text-indent-lg-4rem {text-indent: 4rem !important;} .text-indent-lg-5rem {text-indent: 5rem !important;} .text-indent-lg--1rem {text-indent: -1rem !important;} .text-indent-lg--2rem {text-indent: -2rem !important;} .text-indent-lg--3rem {text-indent: -3rem !important;} .text-indent-lg--4rem {text-indent: -4rem !important;} .text-indent-lg--5rem {text-indent: -5rem !important;} .text-indent-lg-1em {text-indent: 1em !important;} .text-indent-lg-2em {text-indent: 2em !important;} .text-indent-lg-3em {text-indent: 3em !important;} .text-indent-lg-4em {text-indent: 4em !important;} .text-indent-lg-5em {text-indent: 5em !important;} .text-indent-lg--1em {text-indent: -1em !important;} .text-indent-lg--2em {text-indent: -2em !important;} .text-indent-lg--3em {text-indent: -3em !important;} .text-indent-lg--4em {text-indent: -4em !important;} .text-indent-lg--5em {text-indent: -5em !important;} .text-indent-lg-none {text-indent: 0 !important;} .text-indent-lg-inherit {text-indent: inherit !important;} .text-indent-lg-initial {text-indent: initial !important;} .text-indent-lg-revert {text-indent: revert !important;} .text-indent-lg-unset {text-indent: unset !important;}} @media only screen and (min-width:992px) and (max-width:1199px) {.text-indent-md-1rem {text-indent: 1rem !important;} .text-indent-md-2rem {text-indent: 2rem !important;} .text-indent-md-3rem {text-indent: 3rem !important;} .text-indent-md-4rem {text-indent: 4rem !important;} .text-indent-md-5rem {text-indent: 5rem !important;} .text-indent-md--1rem {text-indent: -1rem !important;} .text-indent-md--2rem {text-indent: -2rem !important;} .text-indent-md--3rem {text-indent: -3rem !important;} .text-indent-md--4rem {text-indent: -4rem !important;} .text-indent-md--5rem {text-indent: -5rem !important;} .text-indent-md-1em {text-indent: 1em !important;} .text-indent-md-2em {text-indent: 2em !important;} .text-indent-md-3em {text-indent: 3em !important;} .text-indent-md-4em {text-indent: 4em !important;} .text-indent-md-5em {text-indent: 5em !important;} .text-indent-md--1em {text-indent: -1em !important;} .text-indent-md--2em {text-indent: -2em !important;} .text-indent-md--3em {text-indent: -3em !important;} .text-indent-md--4em {text-indent: -4em !important;} .text-indent-md--5em {text-indent: -5em !important;} .text-indent-md-none {text-indent: 0 !important;} .text-indent-md-inherit {text-indent: inherit !important;} .text-indent-md-initial {text-indent: initial !important;} .text-indent-md-revert {text-indent: revert !important;} .text-indent-md-unset {text-indent: unset !important;}} @media only screen and (min-width:768px) and (max-width:991px) {.text-indent-sm-1rem {text-indent: 1rem !important;} .text-indent-sm-2rem {text-indent: 2rem !important;} .text-indent-sm-3rem {text-indent: 3rem !important;} .text-indent-sm-4rem {text-indent: 4rem !important;} .text-indent-sm-5rem {text-indent: 5rem !important;} .text-indent-sm--1rem {text-indent: -1rem !important;} .text-indent-sm--2rem {text-indent: -2rem !important;} .text-indent-sm--3rem {text-indent: -3rem !important;} .text-indent-sm--4rem {text-indent: -4rem !important;} .text-indent-sm--5rem {text-indent: -5rem !important;} .text-indent-sm-1em {text-indent: 1em !important;} .text-indent-sm-2em {text-indent: 2em !important;} .text-indent-sm-3em {text-indent: 3em !important;} .text-indent-sm-4em {text-indent: 4em !important;} .text-indent-sm-5em {text-indent: 5em !important;} .text-indent-sm--1em {text-indent: -1em !important;} .text-indent-sm--2em {text-indent: -2em !important;} .text-indent-sm--3em {text-indent: -3em !important;} .text-indent-sm--4em {text-indent: -4em !important;} .text-indent-sm--5em {text-indent: -5em !important;} .text-indent-sm-none {text-indent: 0 !important;} .text-indent-sm-inherit {text-indent: inherit !important;} .text-indent-sm-initial {text-indent: initial !important;} .text-indent-sm-revert {text-indent: revert !important;} .text-indent-sm-unset {text-indent: unset !important;}} @media only screen and (min-width:480px) and (max-width:767px) {.text-indent-xs-1rem {text-indent: 1rem !important;} .text-indent-xs-2rem {text-indent: 2rem !important;} .text-indent-xs-3rem {text-indent: 3rem !important;} .text-indent-xs-4rem {text-indent: 4rem !important;} .text-indent-xs-5rem {text-indent: 5rem !important;} .text-indent-xs--1rem {text-indent: -1rem !important;} .text-indent-xs--2rem {text-indent: -2rem !important;} .text-indent-xs--3rem {text-indent: -3rem !important;} .text-indent-xs--4rem {text-indent: -4rem !important;} .text-indent-xs--5rem {text-indent: -5rem !important;} .text-indent-xs-1em {text-indent: 1em !important;} .text-indent-xs-2em {text-indent: 2em !important;} .text-indent-xs-3em {text-indent: 3em !important;} .text-indent-xs-4em {text-indent: 4em !important;} .text-indent-xs-5em {text-indent: 5em !important;} .text-indent-xs--1em {text-indent: -1em !important;} .text-indent-xs--2em {text-indent: -2em !important;} .text-indent-xs--3em {text-indent: -3em !important;} .text-indent-xs--4em {text-indent: -4em !important;} .text-indent-xs--5em {text-indent: -5em !important;} .text-indent-xs-none {text-indent: 0 !important;} .text-indent-xs-inherit {text-indent: inherit !important;} .text-indent-xs-initial {text-indent: initial !important;} .text-indent-xs-revert {text-indent: revert !important;} .text-indent-xs-unset {text-indent: unset !important;}} @media only screen and (max-width:479px) {.text-indent-xxs-1rem {text-indent: 1rem !important;} .text-indent-xxs-2rem {text-indent: 2rem !important;} .text-indent-xxs-3rem {text-indent: 3rem !important;} .text-indent-xxs-4rem {text-indent: 4rem !important;} .text-indent-xxs-5rem {text-indent: 5rem !important;} .text-indent-xxs--1rem {text-indent: -1rem !important;} .text-indent-xxs--2rem {text-indent: -2rem !important;} .text-indent-xxs--3rem {text-indent: -3rem !important;} .text-indent-xxs--4rem {text-indent: -4rem !important;} .text-indent-xxs--5rem {text-indent: -5rem !important;} .text-indent-xxs-1em {text-indent: 1em !important;} .text-indent-xxs-2em {text-indent: 2em !important;} .text-indent-xxs-3em {text-indent: 3em !important;} .text-indent-xxs-4em {text-indent: 4em !important;} .text-indent-xxs-5em {text-indent: 5em !important;} .text-indent-xxs--1em {text-indent: -1em !important;} .text-indent-xxs--2em {text-indent: -2em !important;} .text-indent-xxs--3em {text-indent: -3em !important;} .text-indent-xxs--4em {text-indent: -4em !important;} .text-indent-xxs--5em {text-indent: -5em !important;} .text-indent-xxs-none {text-indent: 0 !important;} .text-indent-xxs-inherit {text-indent: inherit !important;} .text-indent-xxs-initial {text-indent: initial !important;} .text-indent-xxs-revert {text-indent: revert !important;} .text-indent-xxs-unset {text-indent: unset !important;}} /*** FONT-STYLE ***/ @media only screen and (min-width:1800px) {.font-style-xxl-normal {font-style: normal !important;} .font-style-xxl-italic {font-style: italic !important;} .font-style-xxl-oblique {font-style: oblique !important;} .font-style-xxl-inherit {font-style: inherit !important;} .font-style-xxl-initial {font-style: initial !important;} .font-style-xxl-revert {font-style: revert !important;} .font-style-xxl-unset {font-style: unset !important;}} @media only screen and (min-width:1400px) and (max-width:1799px) {.font-style-xl-normal {font-style: normal !important;} .font-style-xl-italic {font-style: italic !important;} .font-style-xl-oblique {font-style: oblique !important;} .font-style-xl-inherit {font-style: inherit !important;} .font-style-xl-initial {font-style: initial !important;} .font-style-xl-revert {font-style: revert !important;} .font-style-xl-unset {font-style: unset !important;}} @media only screen and (min-width:1200px) and (max-width:1399px) {.font-style-lg-normal {font-style: normal !important;} .font-style-lg-italic {font-style: italic !important;} .font-style-lg-oblique {font-style: oblique !important;} .font-style-lg-inherit {font-style: inherit !important;} .font-style-lg-initial {font-style: initial !important;} .font-style-lg-revert {font-style: revert !important;} .font-style-lg-unset {font-style: unset !important;}} @media only screen and (min-width:992px) and (max-width:1199px) {.font-style-md-normal {font-style: normal !important;} .font-style-md-italic {font-style: italic !important;} .font-style-md-oblique {font-style: oblique !important;} .font-style-md-inherit {font-style: inherit !important;} .font-style-md-initial {font-style: initial !important;} .font-style-md-revert {font-style: revert !important;} .font-style-md-unset {font-style: unset !important;}} @media only screen and (min-width:768px) and (max-width:991px) {.font-style-sm-normal {font-style: normal !important;} .font-style-sm-italic {font-style: italic !important;} .font-style-sm-oblique {font-style: oblique !important;} .font-style-sm-inherit {font-style: inherit !important;} .font-style-sm-initial {font-style: initial !important;} .font-style-sm-revert {font-style: revert !important;} .font-style-sm-unset {font-style: unset !important;}} @media only screen and (min-width:480px) and (max-width:767px) {.font-style-xs-normal {font-style: normal !important;} .font-style-xs-italic {font-style: italic !important;} .font-style-xs-oblique {font-style: oblique !important;} .font-style-xs-inherit {font-style: inherit !important;} .font-style-xs-initial {font-style: initial !important;} .font-style-xs-revert {font-style: revert !important;} .font-style-xs-unset {font-style: unset !important;}} @media only screen and (max-width:479px) {.font-style-xxs-normal {font-style: normal !important;} .font-style-xxs-italic {font-style: italic !important;} .font-style-xxs-oblique {font-style: oblique !important;} .font-style-xxs-inherit {font-style: inherit !important;} .font-style-xxs-initial {font-style: initial !important;} .font-style-xxs-revert {font-style: revert !important;} .font-style-xxs-unset {font-style: unset !important;}} /*** DIRECTION ***/ @media only screen and (min-width:1800px) {.direction-xxl-ltr {direction: ltr !important;} .direction-xxl-rtl {direction: rtl !important;} .direction-xxl-inherit {direction: inherit !important;} .direction-xxl-imitial {direction: initial !important;} .direction-xxl-revert {direction: revert !important;} .direction-xxl-unset {direction: unset !important;}} @media only screen and (min-width:1400px) and (max-width:1799px) {.direction-xl-ltr {direction: ltr !important;} .direction-xl-rtl {direction: rtl !important;} .direction-xl-inherit {direction: inherit !important;} .direction-xl-imitial {direction: initial !important;} .direction-xl-revert {direction: revert !important;} .direction-xl-unset {direction: unset !important;}} @media only screen and (min-width:1200px) and (max-width:1399px) {.direction-lg-ltr {direction: ltr !important;} .direction-lg-rtl {direction: rtl !important;} .direction-lg-inherit {direction: inherit !important;} .direction-lg-imitial {direction: initial !important;} .direction-lg-revert {direction: revert !important;} .direction-lg-unset {direction: unset !important;}} @media only screen and (min-width:992px) and (max-width:1199px) {.direction-md-ltr {direction: ltr !important;} .direction-md-rtl {direction: rtl !important;} .direction-md-inherit {direction: inherit !important;} .direction-md-imitial {direction: initial !important;} .direction-md-revert {direction: revert !important;} .direction-md-unset {direction: unset !important;}} @media only screen and (min-width:768px) and (max-width:991px) {.direction-sm-ltr {direction: ltr !important;} .direction-sm-rtl {direction: rtl !important;} .direction-sm-inherit {direction: inherit !important;} .direction-sm-imitial {direction: initial !important;} .direction-sm-revert {direction: revert !important;} .direction-sm-unset {direction: unset !important;}} @media only screen and (min-width:480px) and (max-width:767px) {.direction-xs-ltr {direction: ltr !important;} .direction-xs-rtl {direction: rtl !important;} .direction-xs-inherit {direction: inherit !important;} .direction-xs-imitial {direction: initial !important;} .direction-xs-revert {direction: revert !important;} .direction-xs-unset {direction: unset !important;}} @media only screen and (max-width:479px) {.direction-xxs-ltr {direction: ltr !important;} .direction-xxs-rtl {direction: rtl !important;} .direction-xxs-inherit {direction: inherit !important;} .direction-xxs-imitial {direction: initial !important;} .direction-xxs-revert {direction: revert !important;} .direction-xxs-unset {direction: unset !important;}} /*** DISPLAY ***/ @media only screen and (min-width:1800px) {.display-xxl-block {display: block !important;} .display-xxl-inline {display: inline !important;} .display-xxl-inline-block {display: inline-block !important;} .display-xxl-flex {display: flex !important;} .display-xxl-inline-flex {display: inline-flex !important;} .display-xxl-grid {display: grid !important;} .display-xxl-inline-grid {display: inline-grid !important;} .display-xxl-flow-root {display: flow-root !important;} .display-xxl-none {display: none !important;} .display-xxl-contents {display: contents !important;} .display-xxl-block-flex {display: block flex !important;} .display-xxl-block-flow {display: block flow !important;} .display-xxl-block-flow-root {display: block flow-root !important;} .display-xxl-block-grid {display: block grid !important;} .display-xxl-inline-flex {display: inline flex !important;} .display-xxl-inline-flow {display: inline flow !important;} .display-xxl-inline-flow-root {display: inline flow-root !important;} .display-xxl-table {display: table !important;} .display-xxl-table-row {display: table-row !important;} .display-xxl-table-cell {display: table-cell !important;} .display-xxl-list-item {display: list-item !important;} .display-xxl-inherit {display: inherit !important;} .display-xxl-initial {display: initial !important;} .display-xxl-revert {display: revert !important;} .display-xxl-unset {display: unset !important;}} @media only screen and (min-width:1400px) and (max-width:1799px) {.display-xl-block {display: block !important;} .display-xl-inline {display: inline !important;} .display-xl-inline-block {display: inline-block !important;} .display-xl-flex {display: flex !important;} .display-xl-inline-flex {display: inline-flex !important;} .display-xl-grid {display: grid !important;} .display-xl-inline-grid {display: inline-grid !important;} .display-xl-flow-root {display: flow-root !important;} .display-xl-none {display: none !important;} .display-xl-contents {display: contents !important;} .display-xl-block-flex {display: block flex !important;} .display-xl-block-flow {display: block flow !important;} .display-xl-block-flow-root {display: block flow-root !important;} .display-xl-block-grid {display: block grid !important;} .display-xl-inline-flex {display: inline flex !important;} .display-xl-inline-flow {display: inline flow !important;} .display-xl-inline-flow-root {display: inline flow-root !important;} .display-xl-table {display: table !important;} .display-xl-table-row {display: table-row !important;} .display-xl-table-cell {display: table-cell !important;} .display-xl-list-item {display: list-item !important;} .display-xl-inherit {display: inherit !important;} .display-xl-initial {display: initial !important;} .display-xl-revert {display: revert !important;} .display-xl-unset {display: unset !important;}} @media only screen and (min-width:1200px) and (max-width:1399px) {.display-lg-block {display: block !important;} .display-lg-inline {display: inline !important;} .display-lg-inline-block {display: inline-block !important;} .display-lg-flex {display: flex !important;} .display-lg-inline-flex {display: inline-flex !important;} .display-lg-grid {display: grid !important;} .display-lg-inline-grid {display: inline-grid !important;} .display-lg-flow-root {display: flow-root !important;} .display-lg-none {display: none !important;} .display-lg-contents {display: contents !important;} .display-lg-block-flex {display: block flex !important;} .display-lg-block-flow {display: block flow !important;} .display-lg-block-flow-root {display: block flow-root !important;} .display-lg-block-grid {display: block grid !important;} .display-lg-inline-flex {display: inline flex !important;} .display-lg-inline-flow {display: inline flow !important;} .display-lg-inline-flow-root {display: inline flow-root !important;} .display-lg-table {display: table !important;} .display-lg-table-row {display: table-row !important;} .display-lg-table-cell {display: table-cell !important;} .display-lg-list-item {display: list-item !important;} .display-lg-inherit {display: inherit !important;} .display-lg-initial {display: initial !important;} .display-lg-revert {display: revert !important;} .display-lg-unset {display: unset !important;}} @media only screen and (min-width:992px) and (max-width:1199px) {.display-md-block {display: block !important;} .display-md-inline {display: inline !important;} .display-md-inline-block {display: inline-block !important;} .display-md-flex {display: flex !important;} .display-md-inline-flex {display: inline-flex !important;} .display-md-grid {display: grid !important;} .display-md-inline-grid {display: inline-grid !important;} .display-md-flow-root {display: flow-root !important;} .display-md-none {display: none !important;} .display-md-contents {display: contents !important;} .display-md-block-flex {display: block flex !important;} .display-md-block-flow {display: block flow !important;} .display-md-block-flow-root {display: block flow-root !important;} .display-md-block-grid {display: block grid !important;} .display-md-inline-flex {display: inline flex !important;} .display-md-inline-flow {display: inline flow !important;} .display-md-inline-flow-root {display: inline flow-root !important;} .display-md-table {display: table !important;} .display-md-table-row {display: table-row !important;} .display-md-table-cell {display: table-cell !important;} .display-md-list-item {display: list-item !important;} .display-md-inherit {display: inherit !important;} .display-md-initial {display: initial !important;} .display-md-revert {display: revert !important;} .display-md-unset {display: unset !important;}} @media only screen and (min-width:768px) and (max-width:991px) {.display-sm-block {display: block !important;} .display-sm-inline {display: inline !important;} .display-sm-inline-block {display: inline-block !important;} .display-sm-flex {display: flex !important;} .display-sm-inline-flex {display: inline-flex !important;} .display-sm-grid {display: grid !important;} .display-sm-inline-grid {display: inline-grid !important;} .display-sm-flow-root {display: flow-root !important;} .display-sm-none {display: none !important;} .display-sm-contents {display: contents !important;} .display-sm-block-flex {display: block flex !important;} .display-sm-block-flow {display: block flow !important;} .display-sm-block-flow-root {display: block flow-root !important;} .display-sm-block-grid {display: block grid !important;} .display-sm-inline-flex {display: inline flex !important;} .display-sm-inline-flow {display: inline flow !important;} .display-sm-inline-flow-root {display: inline flow-root !important;} .display-sm-table {display: table !important;} .display-sm-table-row {display: table-row !important;} .display-sm-table-cell {display: table-cell !important;} .display-sm-list-item {display: list-item !important;} .display-sm-inherit {display: inherit !important;} .display-sm-initial {display: initial !important;} .display-sm-revert {display: revert !important;} .display-sm-unset {display: unset !important;}} @media only screen and (min-width:480px) and (max-width:767px) {.display-xs-block {display: block !important;} .display-xs-inline {display: inline !important;} .display-xs-inline-block {display: inline-block !important;} .display-xs-flex {display: flex !important;} .display-xs-inline-flex {display: inline-flex !important;} .display-xs-grid {display: grid !important;} .display-xs-inline-grid {display: inline-grid !important;} .display-xs-flow-root {display: flow-root !important;} .display-xs-none {display: none !important;} .display-xs-contents {display: contents !important;} .display-xs-block-flex {display: block flex !important;} .display-xs-block-flow {display: block flow !important;} .display-xs-block-flow-root {display: block flow-root !important;} .display-xs-block-grid {display: block grid !important;} .display-xs-inline-flex {display: inline flex !important;} .display-xs-inline-flow {display: inline flow !important;} .display-xs-inline-flow-root {display: inline flow-root !important;} .display-xs-table {display: table !important;} .display-xs-table-row {display: table-row !important;} .display-xs-table-cell {display: table-cell !important;} .display-xs-list-item {display: list-item !important;} .display-xs-inherit {display: inherit !important;} .display-xs-initial {display: initial !important;} .display-xs-revert {display: revert !important;} .display-xs-unset {display: unset !important;}} @media only screen and (max-width:479px) {.display-xxs-block {display: block !important;} .display-xxs-inline {display: inline !important;} .display-xxs-inline-block {display: inline-block !important;} .display-xxs-flex {display: flex !important;} .display-xxs-inline-flex {display: inline-flex !important;} .display-xxs-grid {display: grid !important;} .display-xxs-inline-grid {display: inline-grid !important;} .display-xxs-flow-root {display: flow-root !important;} .display-xxs-none {display: none !important;} .display-xxs-contents {display: contents !important;} .display-xxs-block-flex {display: block flex !important;} .display-xxs-block-flow {display: block flow !important;} .display-xxs-block-flow-root {display: block flow-root !important;} .display-xxs-block-grid {display: block grid !important;} .display-xxs-inline-flex {display: inline flex !important;} .display-xxs-inline-flow {display: inline flow !important;} .display-xxs-inline-flow-root {display: inline flow-root !important;} .display-xxs-table {display: table !important;} .display-xxs-table-row {display: table-row !important;} .display-xxs-table-cell {display: table-cell !important;} .display-xxs-list-item {display: list-item !important;} .display-xxs-inherit {display: inherit !important;} .display-xxs-initial {display: initial !important;} .display-xxs-revert {display: revert !important;} .display-xxs-unset {display: unset !important;}} /*** FLOAT ***/ @media only screen and (min-width:1800px) {.float-xxl-left {float: left !important;} .float-xxl-right {float: right !important;} .float-xxl-none {float: none !important;} .float-xxl-inline-start {float: inline-start !important;} .float-xxl-inline-end {float: inline-end !important;} .float-xxl-inherit {float: inherit !important;} .float-xxl-initial {float: initial !important;} .float-xxl-revert {float: revert !important;} .float-xxl-unset {float: unset !important;}} @media only screen and (min-width:1400px) and (max-width:1799px) {.float-xl-left {float: left !important;} .float-xl-right {float: right !important;} .float-xl-none {float: none !important;} .float-xl-inline-start {float: inline-start !important;} .float-xl-inline-end {float: inline-end !important;} .float-xl-inherit {float: inherit !important;} .float-xl-initial {float: initial !important;} .float-xl-revert {float: revert !important;} .float-xl-unset {float: unset !important;}} @media only screen and (min-width:1200px) and (max-width:1399px) {.float-lg-left {float: left !important;} .float-lg-right {float: right !important;} .float-lg-none {float: none !important;} .float-lg-inline-start {float: inline-start !important;} .float-lg-inline-end {float: inline-end !important;} .float-lg-inherit {float: inherit !important;} .float-lg-initial {float: initial !important;} .float-lg-revert {float: revert !important;} .float-lg-unset {float: unset !important;}} @media only screen and (min-width:992px) and (max-width:1199px) {.float-md-left {float: left !important;} .float-md-right {float: right !important;} .float-md-none {float: none !important;} .float-md-inline-start {float: inline-start !important;} .float-md-inline-end {float: inline-end !important;} .float-md-inherit {float: inherit !important;} .float-md-initial {float: initial !important;} .float-md-revert {float: revert !important;} .float-md-unset {float: unset !important;}} @media only screen and (min-width:768px) and (max-width:991px) {.float-sm-left {float: left !important;} .float-sm-right {float: right !important;} .float-sm-none {float: none !important;} .float-sm-inline-start {float: inline-start !important;} .float-sm-inline-end {float: inline-end !important;} .float-sm-inherit {float: inherit !important;} .float-sm-initial {float: initial !important;} .float-sm-revert {float: revert !important;} .float-sm-unset {float: unset !important;}} @media only screen and (min-width:480px) and (max-width:767px) {.float-xs-left {float: left !important;} .float-xs-right {float: right !important;} .float-xs-none {float: none !important;} .float-xs-inline-start {float: inline-start !important;} .float-xs-inline-end {float: inline-end !important;} .float-xs-inherit {float: inherit !important;} .float-xs-initial {float: initial !important;} .float-xs-revert {float: revert !important;} .float-xs-unset {float: unset !important;}} @media only screen and (max-width:479px) {.float-xxs-left {float: left !important;} .float-xxs-right {float: right !important;} .float-xxs-none {float: none !important;} .float-xxs-inline-start {float: inline-start !important;} .float-xxs-inline-end {float: inline-end !important;} .float-xxs-inherit {float: inherit !important;} .float-xxs-initial {float: initial !important;} .float-xxs-revert {float: revert !important;} .float-xxs-unset {float: unset !important;}} /*** TEXT-ALIGN ***/ @media only screen and (min-width:1800px) { } @media only screen and (min-width:1400px) and (max-width:1799px) { } @media only screen and (min-width:1200px) and (max-width:1399px) { } @media only screen and (min-width:992px) and (max-width:1199px) { } @media only screen and (min-width:768px) and (max-width:991px) { } @media only screen and (min-width:480px) and (max-width:767px) { } @media only screen and (max-width:479px) { } .console-view {width:100%; min-height:400px; padding:10px; margin:10px 0px; background:#000; color:#fff; display:inline-block; height:auto;} .console-view .typeText{margin:0px 0px 5px 0px !important;} .desktop .console-view .typeText{font:400 12px/16px 'Lucida Console','Sans Serif','Arial','Helvetica' !important;} .mobile .console-view .typeText{font:400 10px/16px 'Lucida Console','Sans Serif','Arial','Helvetica' !important;} /* :: LOADING BAR */ .phpandajs-bar {pointer-events: none; background: #FFCC33; position: fixed; z-index: 100000000; top: 0; left: 0; width: 100%; height: 4px;} .phpandajs-peg {display: block; position: absolute; right: 0px; width: 4px; height: 4px; background: #FFCC33; border-radius:50%; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px);} .phpandajs-spinner {display: none; position: fixed; z-index: 1031; top: 15px; right: 15px;} .phpandajs-spinner-icon {width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-top-color: #FFCC33; border-left-color: #FFCC33; border-radius: 50%; -webkit-animation: loadpagebar-spinner 400ms linear infinite; animation: loadpagebar-spinner 400ms linear infinite;} @-webkit-keyframes loadpagebar-spinner {0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg);}} @keyframes loadpagebar-spinner {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }} /* :: CONNECTION STATUS CSS */ #internet-connection-status {position: fixed; top: 0; left: 0; right: 0; background-color: #ff4444; color: white; padding: 15px; text-align: center; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; z-index: 9999; display: none;} /* :: MODAL WINDOW CSS */ #ModalWindow {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 1000;} .modal-container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; min-width: 300px; max-width: 95%; display:inline-block;} .modal-header {padding-left:10px;padding-right:10px; display: flex; justify-content: space-between; align-items: center;} .modal-title {display: inline-block; width:auto; font:400 20px/50px 'Arial';} .modal-content {padding: 0px 10px; height: calc(100% - 50px); overflow-y: auto;} .modal-content .content {padding: 0px !important;} .modal-close-btn {background: none; border: none; font-size: 24px; cursor: pointer; color: #6c757d; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;} .modal-close-btn:hover {color: #495057;} /* :: TABS CSS */ .tabs-container {border: 1px solid #ccc; margin: 20px 0;} .tabs-buttons {display: flex; background-color: #f5f5f5; border-bottom: 1px solid #ccc;} .tabs-buttons.left {flex-direction: column; float: left; width: 150px; border-bottom: none; border-right: 1px solid #ccc;} .tabs-buttons.right {flex-direction: column; float: right; width: 150px; border-bottom: none; border-left: 1px solid #ccc;} .tabs-buttons.top {flex-direction: row;} .tabs-buttons.bottom {flex-direction: row; order: 2; border-top: 1px solid #ccc; border-bottom: none;} .tab-button {padding: 10px 15px; cursor: pointer; border: none; background: none; transition: background-color 0.3s;} .tab-button:hover {background-color: #e0e0e0;} .tab-button.active {background-color: #007bff; color: white;} .tabs-content {padding: 15px; clear: both;} .tab-panel {display: none;} .tab-panel.active {display: block;} .tabs-container .tabs-buttons.left + .tabs-content {margin-left: 150px;} .tabs-container .tabs-buttons.right + .tabs-content {margin-right: 150px;} .tabs-container.bottom-layout {display: flex; flex-direction: column;} .tabs-container.bottom-layout .tabs-buttons.bottom {order: 2;} .tabs-container.bottom-layout .tabs-content {order: 1;} .tabs-container { position: relative; width: 100%; } .tabs-buttons-wrapper { position: relative; overflow: hidden; width: 100%; } .tabs-buttons { display: flex; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; width: 100%; } .tabs-buttons::-webkit-scrollbar { display: none; } .tabs-navigation { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; align-items: center; background: linear-gradient(90deg, transparent 0%, #fff 20%); padding-left: 20px; z-index: 10; height: 100%; } .tab-nav-btn { background: #f0f0f0; border: 1px solid #ddd; border-radius: 3px; padding: 5px 10px; margin: 0 2px; cursor: pointer; font-size: 16px; line-height: 1; } .tab-nav-btn:hover:not(.disabled) { background: #e0e0e0; } .tab-nav-btn.disabled { opacity: 0.3; cursor: not-allowed; } .tab-button { white-space: nowrap; flex-shrink: 0; padding: 10px 15px; border: 1px solid #ddd; background: #f8f8f8; cursor: pointer; } .tab-button.active { background: #fff; border-bottom-color: #fff; } .tabs-content { border: 1px solid #ddd; padding: 15px; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* Для bottom позиции */ .tabs-container.bottom-layout .tabs-navigation { top: auto; bottom: 0; transform: none; } /* Мобильные стили */ @media (max-width: 768px) { .tabs-navigation { display: none !important; /* Всегда скрываем стрелки на мобильных */ } .tabs-buttons { overflow-x: auto; /* Разрешаем скролл на мобильных */ -webkit-overflow-scrolling: touch; } .tabs-container .tabs-buttons { position: relative; /* Убираем абсолютное позиционирование */ } } /* :: ACCORDION CSS */ .accordion {border: 1px solid #ddd; border-radius: 4px; margin: 10px 0; overflow: hidden;} .accordion-header {background-color: #f8f9fa; padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #ddd; font-weight: bold; position: relative; transition: background-color 0.2s ease;} .accordion-header:hover {background-color: #e9ecef;} .accordion-header.active {background-color: #945FCB; color: white;} .accordion-header::after {content: '▼'; position: absolute; right: 15px; transition: transform 0.3s ease;} .accordion-header.active::after {content: '▲'; transform: rotate(0deg);} .accordion-content {padding: 0 15px; height: 0; overflow: hidden; transition: height 0.3s ease; background-color: white;} .accordion-content.active {height: auto; padding: 15px; border-bottom: 1px solid #ddd;} .accordion-content:last-child.active {border-bottom: none;} .accordion-content-inner {opacity: 0; transition: opacity 0.2s ease 0.1s;} .accordion-content.active .accordion-content-inner {opacity: 1;} /* :: DATEPICKER CSS */ .datepicker-container {position: relative; width:250px;} .datepicker-calendar {position: absolute; top: 100%; left: 0; z-index: 1000; width:100%; background: white; border: 1px solid #ccc; border-radius: 4px; padding: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);} .datepicker-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;} .datepicker-nav {background: none; border: none; cursor: pointer; font-size: 16px; padding: 5px;} .datepicker-nav.prev, .datepicker-nav.next {color:#4a4a4a;} .datepicker-nav.prev:hover, .datepicker-nav.next:hover {color:#945FCB;} .datepicker-title {cursor: pointer; font-weight: bold;} .datepicker-title span {margin: 0 2px;} .datepicker-title span:hover {color:#945FCB;} .datepicker-days {display: grid; grid-template-columns: repeat(7, 30px); gap: 2px;} .datepicker-day {width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 3px;} .datepicker-day:hover {background-color: #f0f0f0;} .datepicker-day.selected {background-color: #945FCB; color: white;} .datepicker-day.disabled {color: #ccc; cursor: not-allowed;} .datepicker-day.other-month {color: #999;} .datepicker-months {display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;} .datepicker-month {padding: 10px; text-align: center; cursor: pointer; border-radius: 3px;} .datepicker-month:hover {background-color: #f0f0f0;} .datepicker-month.disabled {color: #ccc; cursor: not-allowed;} .datepicker-years {display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; max-height: 200px; overflow-y: auto;} .datepicker-year {padding: 10px; text-align: center; cursor: pointer; border-radius: 3px;} .datepicker-year:hover {background-color: #f0f0f0;} .datepicker-year.disabled {color: #ccc; cursor: not-allowed;} .datepicker-weekdays {display: grid; grid-template-columns: repeat(7, 30px); gap: 2px; margin-bottom: 5px;} .datepicker-weekday {width: 30px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold;} /* Стили для INPUT */ .input-container {position: relative; margin: 0px;} .custom-input {width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; color: #333; background-color: #fff; transition: border-color 0.3s, box-shadow 0.3s;} .custom-input:focus {outline: none; border-color: #945FCB;} .input-label {position: absolute; left: 12px; top: 8px; color: #4a4a4a; font-size: 12px; pointer-events: none; transition: 0.2s ease all; background-color: white; padding: 0 5px;} .custom-input:focus ~ .input-label, .custom-input:not(:placeholder-shown) ~ .input-label {top: -10px; left: 12px; font-size: 12px; color: #4a4a4a; font-weight: 400;} .custom-input:focus ~ .input-label {color: #4a4a4a;} /* Стили для COLOR */ .color-container {width:auto; position: relative; margin: 20px 0;} .custom-color {width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; color: #333; background-color: #fff; transition: border-color 0.3s, box-shadow 0.3s; height:39px;} .custom-color:focus {outline: none; border-color: #945FCB;} .color-label {position: absolute; left: 12px; top: 8px; color: #999; font-size: 12px; pointer-events: none; transition: 0.2s ease all; background-color: white; height:16px; padding: 0 5px;} .custom-color:focus ~ .color-label, .custom-color:not(:placeholder-shown) ~ .color-label {top: -10px; left: 12px; font-size: 12px; color: #4a4a4a; font-weight: 400;} .custom-color:focus ~ .color-label {color: #4a4a4a;} /* Стили для чекбоксов и радиокнопок */ .checkbox-container, .radio-container {display: inline-block; align-items: center; margin: 5px 0px 0px 0px; position: relative; padding-left: 35px; cursor: pointer; font-size: 14px; color: #555;} .checkbox-container input, .radio-container input {position: absolute; opacity: 0; cursor: pointer;} .checkmark {position: absolute; left: 0; height: 24px; width: 24px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; transition: all 0.3s;} .radiomark {position: absolute; left: 0; height: 24px; width: 24px; background-color: #fff; border: 1px solid #ddd; border-radius: 50%; transition: all 0.3s;} .checkbox-container:hover input ~ .checkmark, .radio-container:hover input ~ .radiomark {border-color: #945FCB;} .checkbox-container input:checked ~ .checkmark {background-color: #945FCB; border-color: #945FCB;} .radio-container input:checked ~ .radiomark {background-color: #945FCB; border-color: #945FCB;} .checkmark:after {content: ""; position: absolute; display: none;} .checkbox-container input:checked ~ .checkmark:after {display: block;} .checkbox-container .checkmark:after {left: 8px; top: 4px; width: 6px; height: 12px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);} .radiomark:after {content: ""; position: absolute; display: none; top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%; background: white;} .radio-container input:checked ~ .radiomark:after {display: block;} .checkbox-text, .radio-text {margin-left: 8px; vertical-align: middle; line-height:24px;} .checkbox-container .required-asterisk, .radio-container .required-asterisk {color: #ff0000; font-size: 14px; margin-left: 4px; font-weight: bold; vertical-align: super;} .checkbox-color-black {background-color: #000; border: 1px solid #000;} .checkbox-container input:checked ~ .checkmark {background-color: #945FCB; border-color: #945FCB;} .checkmark-color-black {padding-left:25px;} .checkmark-color-black .checkmark {background-color: #000 !important; border: 1px solid #000 !important; opacity:0.75;} .checkmark-color-black :hover input ~ .checkmark {border-color: #000 !important; opacity:1.0;} .checkmark-color-black input:checked ~ .checkmark {opacity:1.0;} .checkmark-color-grey {padding-left:25px;} .checkmark-color-grey .checkmark {background-color: #412A32 !important; border: 1px solid #412A32 !important; opacity:0.75;} .checkmark-color-grey :hover input ~ .checkmark {border-color: #412A32 !important; opacity:1.0;} .checkmark-color-grey input:checked ~ .checkmark {opacity:1.0;} .checkmark-color-lightbrown {padding-left:25px;} .checkmark-color-lightbrown .checkmark {background-color: #815B36 !important; border: 1px solid #815B36 !important; opacity:0.75;} .checkmark-color-lightbrown :hover input ~ .checkmark {border-color: #815B36 !important; opacity:1.0;} .checkmark-color-lightbrown input:checked ~ .checkmark {opacity:1.0;} /* Стили для поля загрузки файлов */ .file-input-container {position: relative; margin: 20px 0;} .file-input-wrapper {position: relative; display: flex; align-items: center;} .file-input-display {width: 100%; padding: 8px 50px 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 146px; color: #777; background-color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color 0.3s, box-shadow 0.3s; height:39px;} .file-input-display.has-file {color: #333;} .file-input-wrapper:hover .file-input-display, .file-input-container:focus-within .file-input-display {border-color: #3498db;} .file-input-container:focus-within .file-input-display {box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);} .file-input-icon {position: absolute; top:5px; right: 16px; color: #3498db; pointer-events: none; width:20px; height:20px; display:block;} .file-input-icon:before {content: "\f603"; font-family: bootstrap-icons !important; font-size: 20px;} .file-input-real {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10;} .file-input-label {position: absolute; left: 16px; top: 8px; color: #4a4a4a; font-size: 12px; pointer-events: none; transition: 0.2s ease all; background-color: white; padding: 0 5px;} .file-input-container:focus-within .file-input-label, .file-input-display.has-file ~ .file-input-label {top: -10px; left: 12px; font-size: 12px; color: #4a4a4a; font-weight: 500;} /* Стили для поля SEARCH */ .search-container {position: relative;} input[type="search"] {padding-right:50px;} .search-label {position: absolute; z-index:1000; cursor: pointer; background-color:transparent; display:block; right: 10px; top: 10px; width:37px; height:37px; font-size: 16px; transition: 0.2s ease all; padding: 0 5px;} /* Стили для PIN-полей */ .pin-container {display: flex; gap: 10px; margin: 20px 0;} .pin-input {width: 50px; height: 50px; text-align: center; font-size: 20px; border: 2px solid #ddd; border-radius: 8px; transition: border-color 0.3s;} .pin-input:focus {outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);} /* Стили для КНОПОК */ .btn {background-color: #945FCB; color: white; border: none; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.3s; margin-right: 10px; margin-bottom: 10px; opacity:0.8;} .btn:hover {background-color: #945FCB; opacity:1.0;} .btn:disabled, .btn[disabled]{border: 1px solid #999999; background-color: #cccccc; color: #666666; cursor: not-allowed;} .auto-resize {resize: none; min-height: 120px; overflow-y: hidden;} /* Стили для selectbox */ .selectbox-container {position: relative; margin: 20px 0; display: block; width: 100%;} .selectbox-legend {position: absolute; top: -10px; left: 12px; background: white; padding: 0px 8px; font-size: 12px; color: #666; z-index: 1;} .selectbox-wrapper {position: relative; border: 1px solid #dddddd; border-radius: 8px; padding: 8px 12px; background: white; margin-top: 5px;} .selectbox-display {cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 4px;} .selectbox-display:after {content: "▼"; font-size: 10px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);} .selectbox-dropdown {position: absolute; top: calc(100% - 1px); left: -1px; right: -1px; background: white; border: 1px solid #ccc; border-radius: 0px; max-height: 200px; overflow-y: auto; z-index: 100; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.1);} .selectbox-option {padding: 5px 10px; cursor: pointer; display: flex; align-items: center; gap: 8px;} .selectbox-option:hover {background-color: #f5f5f5;} .selectbox-image {width: 20px; height: 20px; object-fit: contain;} .selectbox-chips {display: inline-flex; align-items: center; background: #e9ecef; border-radius: 16px; padding: 4px 8px; margin: 2px; font-size: 14px;} .selectbox-chips-remove { margin-left: 4px; cursor: pointer; font-weight: bold; color: #6c757d;} .selectbox-chips-remove:hover {color: #dc3545;} .selectbox-placeholder {color: #6c757d; font-size:12px;} .selectbox-hidden {display: none;} .selectbox-search {width: calc(100% - 20px); margin: 10px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .selectbox-search:focus { outline: none; border-color: #007bff; } .selectbox-no-results { padding: 10px; text-align: center; color: #999; font-style: italic; border-top: 1px solid #eee; } .selectbox-add-new { padding: 10px; text-align: center; color: #007bff; cursor: pointer; border-top: 1px solid #eee; display: flex; align-items: center; justify-content: center; gap: 8px; } .selectbox-add-new:hover { background-color: #f8f9fa; } .selectbox-add-icon { font-weight: bold; font-size: 16px; } .selectbox-temp-message { padding: 8px 12px; background-color: #d4edda; color: #155724; border-radius: 4px; margin: 5px 10px; font-size: 12px; text-align: center; } .input-label sup, .color-label sup, .selectbox-legend sup, .file-input-label sup, .required-asterisk { color: #ff0000; font-size: 12px; margin: 0px 0px 0px 5px; font-weight: bold; } /* Стиль для контейнера при фокусе */ .selectbox-wrapper.focused {border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);} .selectbox-wrapper.focused .selectbox-legend {color: #007bff;} input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;} input[type=number] {-moz-appearance:textfield;} .custom-input.invalid, .custom-color.invalid {border-color: #e74c3c !important; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2) !important;} .input-label.invalid, .color-label.invalid {color: #e74c3c !important;} .custom-input.invalid ~ .input-label, .custom-color.invalid ~ .color-label {color: #e74c3c !important;} /* :: SHOW MORE CSS */ [data-showmore] {position: relative; overflow: hidden; transition: max-height 0.3s ease;} .showmore-button {background: none; border: none; color: #945FCB; background-color: #ffffff; cursor: pointer; padding: 3px 10px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; border-radius: 4px; border: 1px solid #945FCB; transition: all 0.2s ease; font-family: inherit; font-weight: 500; text-transform: uppercase; float:right;} .showmore-button:hover {color: #ffffff; background-color: #945FCB;} .showmore-button.hidden {display: none !important;} /* :: SIMPLE SPINNER CSS */ .spinner {display: inline-block; position: relative;} .spinner-vertical {width: 20px; height: 40px;} .spinner-vertical .spinner-bar {width: 100%; height: 4px; background: #333; margin: 2px 0; animation: vertical-spin 1s infinite;} .spinner-vertical .spinner-bar:nth-child(1) { animation-delay: 0s; } .spinner-vertical .spinner-bar:nth-child(2) { animation-delay: 0.1s; } .spinner-vertical .spinner-bar:nth-child(3) { animation-delay: 0.2s; } .spinner-vertical .spinner-bar:nth-child(4) { animation-delay: 0.3s; } @keyframes vertical-spin {0%, 100% { opacity: 0.3; transform: scaleY(0.5); } 50% { opacity: 1; transform: scaleY(1); }} .spinner-horizontal {width: 40px; height: 20px;} .spinner-horizontal .spinner-bar {width: 4px; height: 100%; background: #333; margin: 0 2px; display: inline-block; animation: horizontal-spin 1s infinite;} .spinner-horizontal .spinner-bar:nth-child(1) { animation-delay: 0s; } .spinner-horizontal .spinner-bar:nth-child(2) { animation-delay: 0.1s; } .spinner-horizontal .spinner-bar:nth-child(3) { animation-delay: 0.2s; } .spinner-horizontal .spinner-bar:nth-child(4) { animation-delay: 0.3s; } @keyframes horizontal-spin {0%, 100% { opacity: 0.3; transform: scaleX(0.5); } 50% { opacity: 1; transform: scaleX(1); }} .spinner-circle {width: 40px; height: 40px; border: 3px solid #f3f3f3; border-top: 3px solid #333; border-radius: 50%; animation: circle-spin 1s linear infinite;} @keyframes circle-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }} .spinner-square {width: 40px; height: 40px; background: #333; animation: square-spin 1.5s infinite ease-in-out;} @keyframes square-spin {0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(180deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(180deg) rotateY(180deg); }} /* :: DIGIT SPINNER CSS */ [data-digitspinner="true"] {position:relative;} .digit-spinner-container {position: relative; display: inline-block; width: 120px; vertical-align: middle;} .digit-spinner-input {width: 100%; padding: 3px 30px; text-align: center; border: none; border-radius: 4px; font-size: 20px; font-weight:bold; box-sizing: border-box;} .digit-spinner-buttons-updown {position: absolute; right: 1px; top: 1px; bottom: 1px; width: 20px; display: flex; flex-direction: column;} .digit-spinner-btn-up, .digit-spinner-btn-down {flex: 1; border: none; background: #f5f5f5; cursor: pointer; font-size: 8px; display: flex; align-items: center; justify-content: center; padding: 0; border-left: 1px solid #ddd;} .digit-spinner-btn-up {border-bottom: 1px solid #ddd; border-radius: 0 3px 0 0;} .digit-spinner-btn-down {border-radius: 0 0 3px 0;} .digit-spinner-btn-up:hover, .digit-spinner-btn-down:hover {background: #e0e0e0;} .digit-spinner-btn-up:active, .digit-spinner-btn-down:active {background: #d0d0d0;} .digit-spinner-buttons-arrows {position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;} .digit-spinner-btn-left, .digit-spinner-btn-right {position: absolute; top: 1px; bottom: 1px; width: 20px; border: none; background: #f5f5f5; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0; pointer-events: auto;} .digit-spinner-btn-left {left: 1px; border-right: 1px solid #ddd; border-radius: 3px 0 0 3px;} .digit-spinner-btn-right {right: 1px; border-left: 1px solid #ddd; border-radius: 0 3px 3px 0;} .digit-spinner-btn-left:hover, .digit-spinner-btn-right:hover {background: #e0e0e0;} .digit-spinner-buttons-plusminus {position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;} .digit-spinner-btn-minus, .digit-spinner-btn-plus {position: absolute; top: 1px; bottom: 1px; width: 33px; border: none; background: #945FCB; opacity:0.8; cursor: pointer; font-size: 20px; font-weight: bold; display: flex; align-items: center; justify-content: center; padding: 0; pointer-events: auto; color:#ffffff;} .digit-spinner-btn-minus {left: 1px; border-radius: 15px;} .digit-spinner-btn-plus {right: 1px; border-radius: 155px;} .digit-spinner-btn-minus:hover, .digit-spinner-btn-plus:hover {opacity:1.0;} .digit-spinner-input::-webkit-outer-spin-button, .digit-spinner-input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;} .digit-spinner-input[type=number] {-moz-appearance: textfield;} /* :: TOOLTIPS CSS */ .tooltip-container {position: relative; display: inline-block;} .tooltip {position: absolute; background: #333; color: white; padding: 8px 12px; border-radius: 4px; font-size: 14px; line-height: 1.4; z-index: 1000; max-width: 300px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); pointer-events: none; opacity: 0; transition: opacity 0.3s ease;} .tooltip.visible {opacity: 1;} .tooltip::after {content: ''; position: absolute; width: 0; height: 0; border: 6px solid transparent;} .tooltip.center-top, .tooltip.top-center {bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px;} .tooltip.center-top::after, .tooltip.top-center::after {top: 100%; left: 50%; transform: translateX(-50%); border-top-color: #333;} .tooltip.center-bottom, .tooltip.bottom-center {top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px;} .tooltip.center-bottom::after, .tooltip.bottom-center::after {bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #333;} .tooltip.center-left, .tooltip.left-center {right: 100%; top: 50%; transform: translateY(-50%); margin-right: 10px;} .tooltip.center-left::after, .tooltip.left-center::after {left: 100%; top: 50%; transform: translateY(-50%); border-left-color: #333;} .tooltip.center-right, .tooltip.right-center {left: 100%; top: 50%; transform: translateY(-50%); margin-left: 10px;} .tooltip.center-right::after, .tooltip.right-center::after {right: 100%; top: 50%; transform: translateY(-50%); border-right-color: #333;} .tooltip.top-left, .tooltip.left-top {right: calc(100% - 20px); bottom: 100%; margin-right: 0px; margin-bottom: 10px;} .tooltip.top-left::after, .tooltip.left-top::after {left: 100%; bottom: 10px; border-left-color: #333;} .tooltip.top-right, .tooltip.right-top {bottom: 100%; left: calc(100% - 20px); margin-bottom: 10px; margin-left: 0px;} .tooltip.top-right::after, .tooltip.right-top::after {top: 100%; left: 10px; border-top-color: #333;} .tooltip.bottom-right, .tooltip.right-bottom {top: 100%; left: calc(100% - 20px); margin-top: 10px; margin-left: 0px;} .tooltip.bottom-right::after, .tooltip.right-bottom::after {bottom: 100%; left: 10px; border-bottom-color: #333;} .tooltip.bottom-left, .tooltip.left-bottom {right: calc(100% - 20px); top: 100%; margin-right: 10px; margin-top: 10px;} .tooltip.bottom-left::after, .tooltip.left-bottom::after {left: 100%; top: 10px; border-left-color: #333;} /* :: GALLERY CSS */ .gallery-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: none; z-index: 10000; opacity: 0; transition: opacity 0.3s ease;} .gallery-overlay.active {opacity: 1;} .gallery-container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:95%; max-width: 95%; max-height: 95%; display: flex; align-items: center; justify-content: center;} .gallery-image {width: 100%; height: 100%; max-width:98vw; max-height:98vh; position:relative; display:inline-block; border-radius: 0px; transition: opacity 0.3s ease; background: url('https://cdn.phpanda.ru/images/transparent_bkg.png') center center;}} .gallery-close {position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; color: rgba(255, 255, 255, 0.7); border: none; font-size: 24px; line-height:24px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10001; transition: all 0.3s ease;} .gallery-close:hover {color: rgba(255, 255, 255, 1.0);} .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; color: rgba(255, 255, 255, 0.7); border: none; font-size: 20px; line-height:25px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10001; transition: all 0.3s ease; opacity: 0; visibility: hidden;} .gallery-overlay.active .gallery-nav {opacity: 1; visibility: visible;} .gallery-nav:hover {color: rgba(255, 255, 255, 1.0);} .gallery-prev {left: 10px;} .gallery-next {right: 10px;} .gallery-thumbnails {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; padding: 10px; border-radius: 10px; max-width: 90%; overflow-x: auto; opacity: 0; visibility: hidden; transition: all 0.3s ease;} .gallery-overlay.active .gallery-thumbnails {opacity: 1; visibility: visible;} .gallery-thumbnail {width: 55px; height: 55px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.6; transition: all 0.3s ease; border: 2px solid transparent;} .gallery-thumbnail:hover, .gallery-thumbnail.active {opacity: 1; border-color: #ff4444; transform: scale(1.1);} .gallery-counter {position: absolute; top: 10px; left: 10px; color: white; font-family: Arial, sans-serif; font-size: 12px; padding: 0px; opacity: 0; visibility: hidden; transition: all 0.3s ease;} .gallery-overlay.active .gallery-counter {opacity: 1; visibility: visible;} .gallery-loading {display:none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 14px;} .gallery-caption {position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); color: white; font-family: Arial, sans-serif; font-size: 14px; text-align: center; padding: 10px 15px; border-radius: 8px; max-width: 80%; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10001;} .gallery-overlay.active .gallery-caption {opacity: 1; visibility: visible;} /* Основные стили карусели */ .slideshow-container { position: relative; width: 100%; height: calc(100vw / 4); overflow: hidden; margin: 0px 0px 10px 0px; } .mobile .slideshow-container {margin: 0px 0px 0px 0px;} .slideshow-wrapper { display: flex; transition: transform 0.5s ease; width: 100%; } .slideshow-slide { flex: 0 0 auto; box-sizing: border-box; padding: 10px; position: relative; } .slideshow-item { position: relative; width: 100%; height: calc(100vw / 4); background-size: contain; background-position: top; background-repeat: no-repeat; border-radius: 0px; overflow: hidden; cursor: pointer; transition: transform 0.3s ease; } .slideshow-item:hover { transform: scale(1.01); } .slideshow-content { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: white; padding: 15px; /* Убрана анимация выезда - подписи всегда видны */ } .slideshow-content h1, .slideshow-content h2, .slideshow-content h3 { margin: 0 0 5px 0; font-size: 1.2em; } .slideshow-content p { margin: 0; font-size: 0.9em; opacity: 0.9; } /* Стили управления */ .slideshow-controls { display: flex; justify-content: center; align-items: center; margin-top: 20px; gap: 20px; } .slideshow-arrow { background: rgba(0,0,0,0.7); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; } .slideshow-arrow:hover { background: rgba(0,0,0,0.9); } .slideshow-dots { display: flex; gap: 10px; } .slideshow-dot { width: 12px; height: 12px; border-radius: 50%; background: #ccc; border: none; cursor: pointer; transition: background 0.3s ease; } .slideshow-dot.active { background: #333; } /* Стили для fade-анимации */ .slideshow-fade .slideshow-wrapper { display: flex; transition: opacity 0.5s ease; } .slideshow-fade .slideshow-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.5s ease; padding: 0px; } .slideshow-fade .slideshow-slide.active { opacity: 1; position: relative; } /* :: SORTABLE CSS */ .sortable-list {list-style-type: none; padding: 0; max-width: 100%; margin: 20px auto;} .sortable-item {background-color: #f8f9fa;border: 1px solid #dee2e6;border-radius: 4px;padding: 5px 15px; margin-bottom: 8px;cursor: grab;transition: all 0.2s ease;position: relative;user-select: none;} .sortable-item:hover {background-color: #e9ecef;border-color: #adb5bd;} .sortable-item:active {cursor: grabbing;} .sortable-item.dragging {opacity: 0.6; background-color: #007bff;color: white;z-index: 1000;box-shadow: 0 4px 8px rgba(0,0,0,0.2);} .sortable-item.dragging img {filter: invert(100%);} .sortable-item.dragging a {color: white !important;} .sortable-item.placeholder {background-color: #dee2e6;border: 2px dashed #6c757d; height: 42px;} .sortable-itemffff::before {content: "≡";margin-right: 10px;color: #6c757d;font-weight: bold;} .sortable-item.dragging::before {color: white;} /* :: GRID SORTABLE CSS */ .grid-sortable {padding:0px;} .mobile .grid-sortable {margin:0px 30px 0px 0px; width: calc(100% - 6px);} .grid-item {background-color: white; width: 100%; display:inline-block; border: 1px solid #ddd; border-radius: 4px; padding: 5px 10px; margin: 3px; cursor: grab; transition: all 0.2s; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); user-select: none;} .grid-item:hover {background-color: #f0f7ff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);} .grid-item.dragging {opacity: 0.5; cursor: grabbing; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);} .grid-item.placeholder {background-color: #e8f4fc; border: 2px dashed #3498db; border-radius: 4px; height: 50px; visibility: visible;} .grid-item.locked {cursor: not-allowed; background-color: #f9f9f9;} .grid-item.locked:hover {transform: none; background-color: #f9f9f9;} .grid-item.touch-enabled {cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none;} .grid-item.touch-enabled.touch-pressed {opacity: 0.7; transform: scale(0.98); transition: none;} .grid-item.touch-enabled.dragging {opacity: 0.4 !important;} .grid-item.touch-ghost {z-index: 10000 !important;} .grid-item.touch-hover {position: relative;} .grid-item.touch-hover::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px dashed #945FCB; border-radius: 4px; pointer-events: none; z-index: 1;} .grid-sortable[data-grid-sortable="true"] {touch-action: none;} .grid-sortable, .grid-item {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .grid-item {will-change: transform; transform: translateZ(0); -webkit-transform: translateZ(0);} .grid-item.drag-over {background-color: #945FCB !important; color:white !important;} /* :: DATATABLE CSS */ .datatable-wrapper { display:block; clear:both; max-width: 100%; margin: 0 auto;} .datatable-container {background: white; border: none; margin-bottom: 20px; overflow: hidden; width:100%;} .datatable-container .datatable-scroll-wrapper {padding:3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; position: relative; width:100%; max-width: 100%; display:block; clear:both;} .datatable-container .datatable-controls {padding: 5px; background-color: none;} .datatable-container .datatable-filters-row {display: block; width: calc(100% - 300px); flex-wrap: wrap; gap: 15px; margin-bottom: 15px;} .datatable-container .datatable-filters-row button {margin:18px 10px 0px 0px; float:left;} .datatable-container .filter-group {float:left; width: 200px; margin-right:10px;} .datatable-container .datatable-search {width:300px; float:right; margin:5px 0px;} .datatable-container .datatable-search input {width: 300px;} .datatable-container .datatable-table {width: 100%; border-collapse: collapse;} .datatable-table th {background-color: #f8f9fa; padding: 5px 5px; text-align: center; border-bottom: 1px solid #dee2e6; cursor: pointer; user-select: none; position: sticky; top: 0px; z-index: 10;} .datatable-table thead[data-datatable-thead="sticky"] th {position: sticky; top: 0px; z-index: 10; background-color: #f8f9fa;} .datatable-table th.sort-asc::after {content: " ↑"; color: #4A4A4A; font-weight: bold;} .datatable-table th.sort-desc::after {content: " ↓"; color: #4A4A4A; font-weight: bold;} .datatable-table td {padding: 10px 15px; border-bottom: 1px solid #dee2e6;} .multi-value {position: relative;} .multi-value .value-display {cursor: pointer; color: #945FCB; text-decoration: underline dotted;} .multi-value .value-display:hover {color: #945FCB;} .multi-value .all-values {display: none; position: absolute; background: white; border: 1px solid #ddd; border-radius: 4px; padding: 8px; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.1); min-width: 200px; max-width: 300px;} .multi-value:hover .all-values {display: block;} .multi-value .value-item {padding: 2px 0;} .multi-value .value-item.active {font-weight: bold; color: #28a745;} .datatable-pagination {padding: 15px 0px; display: flex; justify-content: space-between; align-items: center; background-color: white;} .datatable-pagination button {padding: 6px 12px; margin: 0 2px; border: 1px solid #ddd; background-color: white; border-radius: 4px; cursor: pointer; color:#4A4A4A;} .datatable-pagination button.active {background-color: #945FCB; color: white; border-color: #945FCB;} .datatable-info {font-size: 14px; color: #666;} .hidden-column {display: none;} .scroll-indicator {position: absolute; right: 0; top: 0; width: 20px; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.3s;} .datatable-scroll-wrapper.scrolling .scroll-indicator {opacity: 1;} .info-badge {background: #17a2b8; color: white; padding: 3px 8px; border-radius: 10px; font-size: 12px; margin-left: 5px;} select[data-filter-column] {width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; color: #666; background-color: white;} select[data-filter-column] option[disabled] {color: #999; font-style: italic;} select[data-filter-column] option:not([disabled]) { color: #333;} @media only screen and (max-width:980px) { .datatable-container .datatable-filters-row {width:100%;} .datatable-container .filter-group {float:left; width: 200px; margin-right:10px;} .datatable-container .datatable-search {position:block; clear: both; width:100%; float:none; margin:10px 0px;} .datatable-container .datatable-search input {width: 100%;} } @media only screen and (max-width:768px) { .datatable-container .datatable-filters-row {text-align:center;} .datatable-container .datatable-filters-row a{display:inline- block; text-decoration:none; margin:0px auto 5px auto; width:auto; clear:both;} .datatable-container .datatable-filters-row button {float:none;} .datatable-container .filter-group {width: 100%;} .datatable-container .filter-group .selectbox-container {margin:10px 0px;} } @media only screen and (max-width:580px) { .datatable-pagination {justify-content: normal; display:block;} .datatable-info, .datatable-paginator {display:штдшту-block; width:100%; text-align:center; margin:0px 0px 10px 0px; clear:both;} } // FILEMANAGER .filemanager {width: 95%;} .filemanager .datatable-container .datatable-scroll-wrapper{overflow-x: hidden; overflow-y: hidden; } .filemanagerpath {text-decoration:none;color:#4a4a4a;} .filemanagerpath:hover {color:red;} .filemanagerpath.active {color:red;} .filemanagerpath small {line-height:10px;} .filemanagertopicon {float:right; display:inline-block; width:auto; margin-top:-20px; text-align:center;} .filemanagertopicon .bi {font-size:26px; line-height:39px; margin:0px 5px; cursor:pointer;} @media only screen and (max-width:600px) {.filemanagertopicon {width:100%; margin-top:0px;} .filemanagertopicon .bi {float:none; margin:0px 10px;}} .filemanagerdata-block td {border-bottom: none; text-align:center; width:100%; display:block; border-radius:4px;} .filemanagerdata-block {position:relative; display:inline-block; text-align:center; margin:4px; border-radius:4px; padding:3px;} .filemanagerdata-block a {width:100%; display:inline-block; text-decoration:none;} .filemanagerdata-block .bi {font-size:50px;} .filemanagerdata-block .name {line-height:16px; height:20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .filemanagerdata-block i.bi-info-circle-fill {position:absolute; top:0px; right:5px; font-size:20px; cursor:pointer;} @media only screen and (min-width:1800px) {.filemanagerdata-block {width: calc(12.5% - 8px);}} @media only screen and (min-width:1400px) and (max-width:1799px) {.filemanagerdata-block {width: calc(12.5% - 8px);}} @media only screen and (min-width:1200px) and (max-width:1399px) {.filemanagerdata-block {width: calc(14.28% - 8px);}} @media only screen and (min-width:992px) and (max-width:1199px) {.filemanagerdata-block {width: calc(16.66% - 8px);}} @media only screen and (min-width:768px) and (max-width:991px) {.filemanagerdata-block {width: calc(20% - 8px);}} @media only screen and (min-width:530px) and (max-width:767px) {.filemanagerdata-block {width: calc(25% - 8px);}} @media only screen and (min-width:480px) and (max-width:529px) {.filemanagerdata-block {width: calc(33% - 8px);}} @media only screen and (max-width:479px) {.filemanagerdata-block {width: calc(50% - 8px);}} .filemanagerdata-table {width: 100%;} #filemanagertable tbody tr.filemanagerdata-table:first-child {border-top: 1px solid #dddddd;} .filemanagerdata-table td {text-align:left; width:100%; display:block; padding:3px; margin:1px; height:36px; line-height:30px;} .filemanagerdata-table {position:relative; display:inline-block; text-align:center;} .filemanagerdata-table a {width:100%; display:inline-block; text-decoration:none;} .filemanagerdata-table .bi {font-size:30px; margin-right:10px; width:30px; float:left; line-height:30px;} .filemanagerdata-table .name {line-height:30px; height:30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .filemanagerdata-table i.bi-info-circle-fill {position:absolute; top:3px; right:0px; font-size:20px; cursor:pointer;} .filemanagerdataicon {display:block; text-align:center;} .filemanagerdataicon .bi{display:inline-block; font-size:30px; margin:10px; cursor:pointer;} .filemanagerdata-block {border: 1px solid #cccccc;} .filemanagerdata-block .bi, .filemanagerdata-table .bi {color:#945FCB;} .filemanagerdata-block .name {color: #4A4A4A;} .filemanagerdata-block i.bi-info-circle-fill, .filemanagerdata-table i.bi-info-circle-fill, filemanagertopicon .bi {color: #bbbbbb;} .filemanagerdata-block a:hover .bi, .filemanagerdata-block a:hover .name, .filemanagerdata-block i.bi-info-circle-fill:hover, .filemanagerdata-table a:hover .bi, .filemanagerdata-table a:hover .name, .filemanagerdata-table i.bi-info-circle-fill:hover{color:#FF455B;} .filemanagerdata-block:hover {border:1px #FF455B solid;} .filemanagerdataicon .bi, .filemanagertopicon .bi.filemanagerviewactive {color:#945FCB;} .filemanagerdataicon .bi:hover, .filemanagertopicon .bi:hover{color:#FF455B;} /* :: SLIDER CSS */ .slider-container {position: relative; margin: 20px 0;} .slider-track {position: relative; background: #ddd; border-radius: 3px;} .slider-track.horizontal {height: 6px; width: 100%; margin: 15px 0;} .slider-track.vertical {width: 6px; height: 200px; margin: 0 15px;} .slider-fill {position: absolute; background: #007bff; border-radius: 3px;} .slider-fill.horizontal {height: 100%; top: 0; left: 0;} .slider-fill.vertical {width: 100%; bottom: 0; left: 0;} .slider-handle {position: absolute; width: 30px; height: 30px; background: #fff; border: 2px solid #007bff; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); z-index: 2; transition: transform 0.1s ease; display: flex;} .slider-handle:hover {transform: translate(-50%, -50%) scale(1.1);} .slider-handle.active {transform: translate(-50%, -50%) scale(1.2);} .slider-value {position: absolute; background: #333; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; white-space: nowrap; pointer-events: none; transform: translateY(-100%); top: -5px;} .slider-value.horizontal {transform: translateY(-100%); top: -5px; left: 50%; transform: translateX(-50%) translateY(-100%);} .slider-value.vertical {transform: translateX(100%); left: 100%; top: 50%; transform: translateY(-50%) translateX(10px);} /* :: RANGESLIDER CSS */ .rangeslider-container {position: relative; margin: 20px 0;} .rangeslider-track {position: relative; background: #ddd; border-radius: 3px;} .rangeslider-track.horizontal {height: 6px; width: 100%; margin: 25px 0;} .rangeslider-track.vertical {width: 6px; height: 200px; margin: 0 25px;} .rangeslider-fill {position: absolute; background: #945FCB; border-radius: 3px;} .rangeslider-fill.horizontal {height: 100%; top: 0;} .rangeslider-fill.vertical {width: 100%; left: 0;} .rangeslider-handle {position: absolute; width: 20px; height: 20px; background: #fff; border: 3px solid #945FCB; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); z-index: 2; transition: transform 0.1s ease; display: flex; align-items: center; justify-content: center;} .rangeslider-handle.min-handle {border-color: #945FCB;} .rangeslider-handle.max-handle {border-color: #945FCB;} .rangeslider-handle:hover {transform: translate(-50%, -50%) scale(1.1);} .rangeslider-handle.active {transform: translate(-50%, -50%) scale(1.2);} .rangeslider-value {position: absolute; background: #333; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; white-space: nowrap; pointer-events: none;} .rangeslider-value.horizontal {top: -25px; left: 50%; transform: translateX(-50%);} .rangeslider-value.vertical {left: 25px; top: 50%; transform: translateY(-50%);} /* :: TREEVIEW CSS */ .treeview {list-style-type: none; padding-left: 20px;} .treeview ul {list-style-type: none; padding-left: 20px; display: none;} .treeview-item {position: relative; margin: 5px 0;} .treeview-toggle {cursor: pointer; position: absolute; left: -20px; top: 20px; transform: translateY(-50%); width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 14px; user-select: none;} .treeview-toggle::before { content: '+'; transition: transform 0.2s ease; display: block;} .treeview-expanded > .treeview-toggle::before {content: '-'; } .treeview-expanded > ul {display: block;} .treeview-leaf > .treeview-toggle {visibility: hidden;} .treeview-leaf > .treeview-toggle::before {content: '';} .treeview-content {padding: 5px 10px; border-radius: 4px; transition: background-color 0.2s ease; display: inline-block;} .treeview-content:hover {background-color: #f0f0f0;} .treeview-active > .treeview-content {background-color: #e3f2fd;} /* :: PANEL CSS */ .panel-overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 9998; opacity: 0; visibility: hidden;} .panel-overlay.active {opacity: 1; visibility: visible;} [data-panel] {position: fixed; background: #fff; z-index: 9999; overflow: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);} .panel-close-btn {position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; font-weight:bold; line-height:10px; cursor: pointer; padding: 0px; z-index: 1000; color:red;} .panel-top {top: 0; left: 0; right: 0; transform: translateY(-100%); display:none;} .panel-top.active {transform: translateY(0%); display:block; transition: all 0.3s ease;} .panel-bottom {bottom: 0; left: 0; right: 0; transform: translateY(100%);} .panel-bottom.active {transform: translateY(0);} .panel-left {top: 0; left: 0; bottom: 0; display:none;} .panel-left.active {display:block;} .panel-right {top: 0; right: 0; bottom: 0; transform: translateX(100%); display:none;} .panel-right.active {transform: translateX(0); display:block; transition: all 0.3s ease;} /* :: ADMIN MENU CSS */ #AdminMenuButton {color:#ffffff; font-size:30px;} #AdminMenu {padding:30px 10px 20px 10px; text-align:left; z-index:1000000;} .desktop #AdminMenu {width:300px;} .mobile #AdminMenu {width:100%;} #AdminMenu .accordion {border:none; margin:0px;} #AdminMenu .accordion-header {background-color:transparent; padding:5px 10px; border-bottom:none; font-weight: normal; color: #4A4A4A;} #AdminMenu .accordion-header.active {background-color: trsansparent; color: #945FCB;} #AdminMenu .accordion-header1::after {content:'' !importabnt;} #AdminMenu .accordion-content.active {border:none; padding:0px;} #AdminMenu a {display:block; width:100%; text-decoration:none; border-radius:4px; margin:3px 0px; padding:5px 10px; color: #4A4A4A;} #AdminMenu .accordion a:hover {color:#ffffff; background-color: #945FCB;} #AdminMenu .accordion a.active {color:#ffffff; background-color: #ff4444;} #AdminMenu a.accordion-header1 {background-color:transparent; padding:5px 10px; border-bottom:none; font-weight: normal; color: #4A4A4A;} * :: REBOOT CSS */ * {margin: 0; padding: 0;} body, html {font-size:14px; font-family: "Open Sans", sans-serif; overflow-x: hidden; background-color: #ffffff; color: #4A4A4A; width:100%; height:100%; min-height:100vh;} .container {display:inline-block; text-align:left; width:100%; max-width:1400px; height:auto;} [data-theme=dark] body, [data-theme=dark] html {color: #e5e5e5; background-color:#0C153B;} .desktop {text-align:center; margin:0px 0px 0px 0px;} .desktop #contentpage {max-width:1200px; width:100%; display:inline-block; text-align:left; scroll-margin-top: 1em;} body.mobile {scrollbar-width: thin;} .mobile #contentpage {margin-top:60px;} h2, h3, h4, h5, h6 {color: #495057;} h1 {display:block;} .mobile h1 {text-align:center; margin: 10px 0px 25px 0px;} p {font-size: 14px; text-align:justify} [data-theme=dark] body p {color: #e5e5e5;} .bordered {border:1px #767676 solid; border-radius:5px;}