/* Add your custom css style here */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  /* Colours */
  --clr-accent-1: #0034c1;
  --clr-accent-2: #002ca4;
  --clr-accent-3: #8e2de2;
  --clr-light-1: #cfcfcf;
  --clr-light-2: #a9a9a9;
  --clr-success: #30a528;
  --clr-warning: #a56228;
  --clr-danger: #a52828;
  --clr-danger-hover: #6e1b1b;
  --clr-bg: #3e3e3e66;
  --clr-bg-hover: #14141466;
  --clr-backdrop: #0a0a0adb;
  --clr-bg-fallback: #1c1c1c;

  /* Transitions */
  --tsn-1: 250ms ease;

  /* Borders */
  --brdr-1: 1.5px solid var(--clr-light-1);

  /* Filters */
  --fltr-blur-1: blur(5px);

  /* Fonts */
  --ff-poppins: "Poppins", "Segoe UI", sans-serif;
  --ff-mono: "Consolas", monospace;
}

*:not(.vue-codemirror *) {
  font-family: var(--ff-mono) !important;
  color: var(--clr-light-1) !important;
  transition: var(--tsn-1) !important;
}

.file-dropdown.dropdown-menu-animation.dropdown.is-active.is-mobile-modal {
  left: 7px !important;
}

::selection {
  background: var(--clr-accent-3) !important;
  color: var(--clr-light-1) !important;
}

body {
  color-scheme: dark !important;
}

#background {
  background: url("/img/wallpaper/nyc_1.jpg") !important;
  background-size: cover !important;
}

.p-0.dropdown-item .modal-card,
.taginput .taginput-container.is-focusable,
.textarea,
.modal-card .tab-item input,
.fullScreen.flight-bg,
.v-md-editor.v-md-editor--edit,
.node-card:has(.is-size-14px.mt-5.mb-5):hover,
.node-card:has(.is-size-14px.mt-5.mb-5),
.b-sidebar .sidebar-content,
.notification,
.content
  .content-components
  .card-container
  .grid-card
  .file-card
  .file-card-item
  .node-card-container
  .outer-wrapper
  .action-btn,
.content
  .content-components
  .card-container
  .grid-card
  .file-card
  .file-card-item
  .node-card-container
  .outer-wrapper
  .checkbox-container,
.modal.is-active.is-full-screen.file-panel .modal-card,
.modal.is-active.is-full-screen.file-panel .animation-content,
.app-panel .modal-card-head,
.select select,
div.navbar {
  background: transparent !important;
}

.b-sidebar .sidebar-content {
  backdrop-filter: var(--fltr-blur-1) !important;
}

div.base-bar,
.in-card.b-tooltip.is-top .tooltip-content {
  display: none !important;
}

.modal-card:not(.p-0.dropdown-item .modal-card),
.background-item.is-flex.is-flex-direction-column {
  background: var(--clr-bg) !important;
}

.background-item.is-flex.is-flex-direction-column * {
  color: var(--clr-light-1) !important;
}

.button.is-link.is-light {
  background: var(--clr-bg) !important;
  color: var(--clr-light-1) !important;
  border: var(--brdr-1) !important;
}

.button.is-link.is-light:hover {
  background: var(--clr-bg-hover) !important;
}

.button.width.is-link.is-rounded {
  background: var(--clr-accent-1) !important;
}

.button.is-small.is-rounded,
.button.is-rounded {
  background: var(--clr-bg) !important;
  color: var(--clr-light-1) !important;
  border: var(--brdr-1) !important;
}

.button.is-small.is-rounded:hover,
.button.is-rounded:hover {
  background: var(--clr-bg-hover) !important;
}

.img-c:hover .image {
  transform: none !important;
}

.blur-background {
  box-shadow: none;
  border: var(--brdr-1) !important;
}

.home-section.has-text-left .handle {
  cursor: pointer !important;
}

.home-section.has-text-left .handle:hover .blur-background {
  background: var(--clr-bg-hover) !important;
}

.switch input[type="checkbox"]:checked + .check {
  background: var(--clr-accent-1) !important;
}

.switch input[type="checkbox"]:focus:checked + .check,
.switch input[type="checkbox"]:focus + .check {
  box-shadow: none !important;
}

.search-bar input {
  background: var(--clr-bg) !important;
  border: var(--brdr-1) !important;
}

.dialog .modal-card-head {
  border: none !important;
  border-bottom: var(--brdr-1) !important;
}

.dialog .modal-card {
  border: var(--brdr-1) !important;
}

.dialog .modal-card .button {
  border: var(--brdr-1) !important;
}

.dialog .modal-card .button:first-of-type {
  background: var(--clr-bg) !important;
}

.dialog .modal-card .button:first-of-type:hover {
  background: var(--clr-bg-hover) !important;
}

.dialog .modal-card .button:last-of-type {
  background: var(--clr-accent-1) !important;
}

.dialog .modal-card .button:last-of-type:hover {
  background: var(--clr-accent-2) !important;
}

.modal-card {
  background-color: var(--clr-bg) !important;
}

.modal-card input {
  background: var(--clr-bg) !important;
}

.button.is-danger {
  background: var(--clr-bg) !important;
  border: 1.5px solid var(--clr-danger) !important;
}

.button.is-danger:hover {
  background: var(--clr-bg-hover) !important;
}

.button.is-danger span {
  color: var(--clr-danger) !important;
}

.select.is-small.select.is-small select,
.select.is-small.select.is-small::after {
  border: var(--brdr-1) !important;
}

.button.is-text.is-fullwidth.button.is-text.is-fullwidth:hover {
  background-color: var(--clr-bg-hover) !important;
}

.background,
.modal-background {
  background-color: var(--clr-backdrop) !important;
  backdrop-filter: var(--fltr-blur-1) !important;
}

.terminal-modal .card {
  background: var(--clr-bg) !important;
  box-shadow: none !important;
}

#login-page .login-panel {
  background: var(--clr-bg) !important;
  backdrop-filter: var(--fltr-blur-1) !important;
}

.button.mt-5.is-primary.is-rounded.is-fullwidth {
  background: var(--clr-accent-1) !important;
}

.button.mt-5.is-primary.is-rounded.is-fullwidth:hover {
  background: var(--clr-accent-2) !important;
}

#terminal input.input {
  background: var(--clr-bg-hover) !important;
  color: var(--clr-light-1) !important;
}

#terminal .card.card-shadow:has(div.card-content) {
  box-shadow: none !important;
}

#terminal .card.card-shadow div.card-content *:not(i) {
  color: var(--clr-light-1) !important;
}

body .tabs ul li.is-active a {
  border-bottom: 3px solid var(--clr-accent-1) !important;
}

:not(.dropdown-trigger) > .button.is-primary,
:not(.dropdown-trigger) > .button.width.is-link.is-rounded {
  background: var(--clr-accent-1) !important;
  border: var(--brdr-1) !important;
}

.modal-card .delete::before,
.modal-card .delete::after {
  background: var(--clr-light-1) !important;
}

:not(.dropdown-trigger) > .button.is-primary:hover,
:not(.dropdown-trigger) > .button.width.is-link.is-rounded:hover {
  background: var(--clr-accent-2) !important;
}

.tag.ml-2.has-text-full-04 {
  background: var(--clr-accent-1) !important;
  border: var(--brdr-1) !important;
}

.b-tooltip.is-primary .tooltip-content {
  background: var(--clr-bg-hover) !important;
  border: var(--brdr-1) !important;
  backdrop-filter: var(--fltr-blur-1) !important;
}

.b-checkbox.checkbox input[type="checkbox"]:checked + .check {
  background: var(--clr-accent-1)
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1 1%27%3E%3Cpath style=%27fill:%23fff%27 d=%27M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z%27%3E%3C/path%3E%3C/svg%3E")
    no-repeat center center !important;
  border-color: var(--clr-accent-1) !important;
}

body ._has-background-red-default {
  background: var(--clr-danger) !important;
}

body ._has-background-yellow-default {
  background: var(--clr-accent-1) !important;
}

.media-content .control input {
  background: var(--clr-bg) !important;
  border: var(--brdr-1) !important;
  color: var(--clr-light-1) !important;
}

.notification.is-danger {
  background: var(--clr-danger) !important;
}

.icon.is-right i.mdi-eye {
  color: var(--clr-light-1) !important;
}

.icon.is-right i.mdi-eye-off {
  color: var(--clr-light-2) !important;
}

span.icon.is-right:is(.has-text-success, .has-text-danger) {
  right: 15px !important;
}

.icon.is-right:is(.has-text-danger) i.mdi-alert-circle,
.help.is-danger,
i.casa.casa-shutdown-outline {
  color: var(--clr-danger) !important;
}

.icon.is-right:is(.has-text-success) i.mdi-check,
i.casa.casa-restart-outline,
div .has-text-success {
  color: var(--clr-success) !important;
}

span._has-background-green._tooltip-right-block,
span._has-background-green._tooltip-right-inline {
  background: var(--clr-success) !important;
}

.taginput .is-danger.taginput-container.is-focusable,
.is-danger.textarea,
.is-danger.input {
  border: 1.5px solid var(--clr-danger) !important;
}

.taginput .is-success.taginput-container.is-focusable,
.is-success.textarea,
.is-success.input,
span.tag.is-success.is-success {
  border: 1.5px solid var(--clr-success) !important;
}

#login-page .login-panel .input {
  background: var(--clr-bg) !important;
}

.circle-container linearGradient stop:nth-of-type(1) {
  stop-color: var(--clr-accent-3) !important;
}

.circle-container linearGradient stop:nth-of-type(2) {
  stop-color: var(--clr-accent-1) !important;
}

.progress.is-small.is-primary::-webkit-progress-value {
  background: linear-gradient(
    90deg,
    var(--clr-accent-1) 0%,
    var(--clr-accent-3) 100%
  ) !important;
}

.v-md-editor.v-md-editor--preview {
  background: var(--clr-bg) !important;
  color: var(--clr-light-1) !important;
}

div.v-md-textarea-editor textarea {
  background: transparent !important;
  color: var(--clr-light-1) !important;
}

div.v-md-textarea-editor textarea::placeholder {
  color: var(--clr-light-1) !important;
}

.modal-card .modal-card-body .v-md-editor.v-md-editor--edit .scrollbar__wrap {
  border: var(--brdr-1) !important;
}

div.toast.is-success.is-top {
  border: 1.5px solid var(--clr-success) !important;
  background: var(--clr-bg) !important;
  backdrop-filter: var(--fltr-blur-1) !important;
}

div.toast.is-success.is-top div {
  color: var(--clr-light-1) !important;
}

div.toast.is-warning.is-top {
  border: 1.5px solid var(--clr-warning) !important;
  background: var(--clr-bg) !important;
  backdrop-filter: var(--fltr-blur-1) !important;
}
div.toast.is-warning.is-top div {
  color: var(--clr-light-1) !important;
}

div.toast.is-danger.is-top {
  border: 1.5px solid var(--clr-danger) !important;
  background: var(--clr-bg) !important;
  backdrop-filter: var(--fltr-blur-1) !important;
}

div.toast.is-danger.is-top div {
  color: var(--clr-light-1) !important;
}

.input:active,
.input:focus,
.select select:active,
.select select:focus,
.taginput .is-focused.taginput-container.is-focusable {
  border: 2px solid var(--clr-light-2) !important;
  box-shadow: none !important;
}

.select select option,
.select select optgroup {
  background: var(--clr-bg-fallback) !important;
}

.select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--clr-light-1) !important;
}

input::placeholder {
  color: var(--clr-light-2) !important;
}

div.vue-slider-process,
div.vue-slider-dot-tooltip-inner {
  background: var(--clr-accent-1) !important;
  border-color: var(--clr-accent-1) !important;
}

div.ficon.active,
div.ficon:hover {
  background: var(--clr-bg-hover) !important;
}

.upload-button-container .upload-button {
  background: var(--clr-bg) !important;
}

a.dropdown-item:hover {
  background: var(--clr-bg-hover) !important;
}

.button.is-static {
  background: var(--clr-bg) !important;
}

.common-card {
  margin-right: 1.52px !important;
}

.image.is-80x80 img {
  border: var(--brdr-1) !important;
}

.modal.is-active.is-full-screen.file-panel {
  background: var(--clr-bg) !important;
}

.modal.is-active.is-full-screen.file-panel .modal-background {
  background-color: var(--clr-bg-hover) !important;
}

.node-card {
  background: var(--clr-bg) !important;
}

.node-card:hover {
  background: var(--clr-bg-hover) !important;
}

.b-checkbox.checkbox input[type="checkbox"]:checked + .check {
  background: var(--clr-accent-1)
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1 1%27%3E%3Cpath style=%27fill:%23fff%27 d=%27M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z%27%3E%3C/path%3E%3C/svg%3E")
    no-repeat center center !important;
  border-color: var(--clr-accent-1) !important;
}

.b-checkbox.checkbox:hover input[type="checkbox"]:not(:disabled) + .check {
  border-color: var(--clr-accent-1) !important;
}

.modal-card-body .node-card {
  background: var(--clr-bg) !important;
}

.modal-card-body .file-card-item:hover .node-card {
  background: var(--clr-bg-hover) !important;
}

.close-button:active {
  background: var(--clr-bg) !important;
}

.file-panel .modal-card .modal-card-body .nav-bar {
  background: var(--clr-bg) !important;
}

.file-panel
  .modal-card
  .modal-card-body
  .nav-bar
  .list-container
  .ul
  .li
  .list-item.active,
.file-panel
  .modal-card
  .modal-card-body
  .nav-bar
  .list-container
  .ul
  .li
  .list-item:hover {
  background: var(--clr-bg-hover) !important;
}

.tbody .tr-wrapper .tr {
  background: var(--clr-bg) !important;
}

.tbody .tr-wrapper .tr:hover,
.tbody .tr-wrapper div.tr.active {
  background: var(--clr-bg-hover) !important;
}

.table-thead {
  background: var(--clr-bg-hover) !important;
  backdrop-filter: var(--fltr-blur-1) !important;
}

.content .part input[type="checkbox"] + span.check {
  border: 2px solid var(--clr-accent-1) !important;
  background: var(--clr-accent-1)
    url("data:image/svg+xml;utf8,%3C?xml%20version=%271.0%27%20encoding=%27UTF-8%27?%3E%3C%21DOCTYPE%20svg%20PUBLIC%20%27-//W3C//DTD%20SVG%201.1//EN%27%20%27http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%27%3E%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20xmlns:xlink=%27http://www.w3.org/1999/xlink%27%20version=%271.1%27%20width=%2715%27%20height=%2715%27%20viewBox=%270%200%2024%2024%27%3E%20%3Cpath%20fill=%27%23ffffff%27%20d=%27M19,13H5V11H19V13Z%27%20/%3E%3C/svg%3E")
    no-repeat center center !important;
}

div.has-text-centered .image.is-80x80 img {
  border: none !important;
}

.b-tooltip.is-right .tooltip-content::before {
  border-right-color: var(--clr-light-1) !important;
}

.file-panel
  .modal-card
  .modal-card-body
  .nav-bar
  .bottom-area
  .list-item.active,
.file-panel
  .modal-card
  .modal-card-body
  .nav-bar
  .bottom-area
  .list-item:hover {
  background: var(--clr-bg-hover) !important;
}

div.popper {
  background: var(--clr-bg) !important;
}

div.popper:hover {
  background: var(--clr-bg-hover) !important;
}

.action-btn {
  visibility: visible !important;
  opacity: 1 !important;
}

.action-btn:hover {
  background: var(--clr-bg-hover) !important;
}

div.loading-overlay .loading-background {
  background: var(--clr-bg) !important;
}

.file-panel .upload-btns li {
  background: var(--clr-bg) !important;
}

.icon.share-icon i,
.casa.casa-share {
  color: var(--clr-success) !important;
}

.casa.casa-drop {
  color: var(--clr-accent-1) !important;
}

.casa-shape-rounded {
  background: var(--clr-bg-hover) !important;
}

.dropdown-menu div:is(.hover-effect, .hover-effect-attention):hover {
  background-color: var(--clr-bg-hover) !important;
}

.dropdown-menu * {
  color: var(--clr-light-1) !important;
}

.drop-button .drop-tips .drop-grey-bg,
.b-tooltip.is-grey .tooltip-content,
.drop-button .drop-tips .dropdown-menu .dropdown-content {
  background: var(--clr-bg-hover) !important;
  border: var(--brdr-1) !important;
  backdrop-filter: none !important;
}

.drop-button
  .drop-tips.is-bottom-right
  .dropdown-menu
  .dropdown-content::before,
.drop-button
  .drop-tips.is-bottom-right
  .dropdown-menu
  .dropdown-content::after {
  border-bottom-color: var(--clr-light-1) !important;
}

.dropdown-content {
  background-color: var(--clr-bg) !important;
  backdrop-filter: var(--fltr-blur-1) !important;
}

.file-panel .modal-card .overlay {
  background-color: var(--clr-bg) !important;
  backdrop-filter: var(--fltr-blur-1) !important;
}

.CodeMirror-gutters {
  background: transparent !important;
}

div.CodeMirror-lint-tooltip {
  background: var(--clr-bg) !important;
  backdrop-filter: var(--fltr-blur-1) !important;
}

span.tag:not(body) {
  background: var(--clr-accent-1) !important;
}