:root {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-50: oklch(.971 .013 17.38);
    --color-red-200: oklch(.885 .062 18.334);
    --color-red-500: oklch(.637 .237 25.331);
    --color-red-600: oklch(.577 .245 27.325);
    --color-red-700: oklch(.505 .213 27.518);
    --color-blue-50: oklch(.97 .014 254.604);
    --color-blue-200: oklch(.882 .059 254.128);
    --color-blue-500: oklch(.623 .214 259.815);
    --color-gray-50: oklch(.985 .002 247.839);
    --color-gray-100: oklch(.967 .003 264.542);
    --color-gray-200: oklch(.928 .006 264.531);
    --color-gray-300: oklch(.872 .01 258.338);
    --color-gray-400: oklch(.707 .022 261.325);
    --color-gray-500: oklch(.551 .027 264.364);
    --color-gray-600: oklch(.446 .03 256.802);
    --color-gray-700: oklch(.373 .034 259.733);
    --color-gray-800: oklch(.278 .033 256.848);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-lg: 32rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-widest: .1em;
    --leading-relaxed: 1.625;
    --radius-xs: .125rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(--font-sans--font-variation-settings);
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
    --color-border: var(--border);

    --font-size: 14px;
    --background: #fff;
    --foreground: oklch(.145 0 0);
    --card: #fff;
    --card-foreground: oklch(.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(.145 0 0);
    --primary: #030213;
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(.95 .0058 264.53);
    --secondary-foreground: #030213;
    --muted: #ececf0;
    --muted-foreground: #717182;
    --accent: #e9ebef;
    --accent-foreground: #030213;
    --destructive: #d4183d;
    --destructive-foreground: #fff;
    --border: #0000001a;
    --input: transparent;
    --input-background: #f3f3f5;
    --switch-background: #cbced4;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --ring: oklch(.708 0 0);
    --chart-1: oklch(.646 .222 41.116);
    --chart-2: oklch(.6 .118 184.704);
    --chart-3: oklch(.398 .07 227.392);
    --chart-4: oklch(.828 .189 84.429);
    --chart-5: oklch(.769 .188 70.08);
    --radius: .625rem;
    --sidebar: oklch(.985 0 0);
    --sidebar-foreground: oklch(.145 0 0);
    --sidebar-primary: #030213;
    --sidebar-primary-foreground: oklch(.985 0 0);
    --sidebar-accent: oklch(.97 0 0);
    --sidebar-accent-foreground: oklch(.205 0 0);
    --sidebar-border: oklch(.922 0 0);
    --sidebar-ring: oklch(.708 0 0);
}

html, body {
/*    width: 100%;
    height: 100%;*/
}
/*=======================
    FONT COMMON CLASSES
========================*/
.font-sm,
.font-small {
    font-size: 0.8rem;
}

.font-md,
.font-medium,
.font-root {
    font-size: 1rem;
}

.font-lg,
.font-large {
    font-size: 1.5rem;
}

.font-2x {
    font-size: 2rem;
}

.font-3x {
    font-size: 3rem;
}

.bold,
.font-bold {
    font-weight: bold;
}

.ks-font-12 {
    font-size: 12px;
}

.ks-font-14 {
    font-size: 14px;
}

.ks-font-16 {
    font-size: 16px;
}

.ks-font-18 {
    font-size: 18px;
}

.ks-font-20 {
    font-size: 20px;
}

.ks-font-22 {
    font-size: 22px;
}

.ks-font-24 {
    font-size: 24px;
}

.ks-font-26 {
    font-size: 26px;
}

.ks-font-28 {
    font-size: 28px;
}

.ks-font-30 {
    font-size: 30px;
}

.ks-font-32 {
    font-size: 32px;
}

.underline {
    text-decoration: underline;
}

.h-line {
    border-bottom: #525256 dashed 1px;
    width: 100%;
    margin: 20px 0px;
}

.ks-text-uc,
.ks-text-uppercase {
    text-transform: uppercase;
}

.ks-text-cc,
.ks-text-capitalize {
    text-transform: capitalize;
}

input,
input.form-control {
  border: 0;
  outline: none;
}

:focus-visible {
    outline: none!important;
}

.input-search {
    width: 338px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 5px;
    background: #FFF;
    padding: 8.01px 46.6px 7.72px 13.53px;
}

    .input-search input[type="text"] {
        width: 100%;
        font-size: 20px;
        color: black;
    }

button.indicator,
span.indicator,
label.indicator {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 0;
    cursor: pointer;
    box-shadow: inset #525256 0px 0px 0px 1px;
}

.indicator.low {
    background-color: #B4E7C7;
}

.indicator.high {
    background-color: #B4C7E7;
}

.indicator.asap {
    background-color: #DD756D;
}
/*Icon Style*/
span.icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/*Snippet UI*/
.ribbon-group {
    display: flex;
    justify-content: end;
    gap: 12px;
}


[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

[type="date"]::-webkit-inner-spin-button {
    display: none;
}


/*=======================
    COMMON LAYOUT CLASSES
========================*/
.page-wrap {
    position: relative;
    /*z-index: 9;*/
    flex: 1;
}

.header-controlls {
    width: 100%;
    display: flex;
    justify-content: center;
}

.header-action-controller {
    display: flex;
    justify-content: space-between;
}

    .header-action-controller .nav-col {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

        .header-action-controller .nav-col a {
            text-decoration: none;
            display: flex;
        }


button.menu-toggle {
    width: 35px;
    height: 22px;
    background-color: transparent;
    margin: initial;
    display: block;
    background-image: url('assets/icons/toogle-menu.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    outline: none;
    border: unset;
}

.full-width {
    flex: 0 0 100%;
}

.row {
    display: flex;
}

.space-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.section-header {
    padding: 12px 0px;
}

label.label {
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
}
/* Container */
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

/* Direction */
.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

/* Wrap */
.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Justify Content */
.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-center {
    align-items: center;
}

.align-baseline {
    align-items: baseline;
}

.align-stretch {
    align-items: stretch;
}
.align-self {
    align-self: anchor-center;
}
/* Align Content */
.content-start {
    align-content: flex-start;
}

.content-end {
    align-content: flex-end;
}

.content-center {
    align-content: center;
}

.content-between {
    align-content: space-between;
}

.content-around {
    align-content: space-around;
}

.content-evenly {
    align-content: space-evenly;
}
/* Gap (spacing between items) */
.gap-0 {
    gap: 0;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-10 {
    gap: 2.5rem;
}

.gap-12 {
    gap: 3rem;
}

.gap-16 {
    gap: 4rem;
}

.gap-20 {
    gap: 5rem;
}

.gap-24 {
    gap: 6rem;
}

.gap-32 {
    gap: 8rem;
}

.gap-40 {
    gap: 10rem;
}

.gap-48 {
    gap: 12rem;
}

.gap-56 {
    gap: 14rem;
}

.gap-64 {
    gap: 16rem;
}
/*=============================
    COMMON INTERACTION CLASSES
=============================*/

.pointer {
    cursor: pointer;
}
/*========================================
  COMMON CHECKBOX & RADIO BUtton CLASSES
=======================================*/
label.checkbox-row {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    gap: 8px;
}

    label.checkbox-row input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        width: 0;
        height: 0;
    }

    label.checkbox-row span.checkmark {
        display: block !important;
        border: #BFBEBE solid 1px;
        border-radius: 2px;
        width: 24px;
        height: 24px;
        min-height: initial !important;
        position: relative;
    }

        label.checkbox-row span.checkmark img {
            opacity: 0;
            user-select: none;
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 3px;
        }


label input.checkbox-row ~ span.checkmark {
    background-color: transparent;
}

label.checkbox-row input:checked ~ span.checkmark {
    background-color: transparent;
}

    label.checkbox-row input:checked ~ span.checkmark > img {
        opacity: 1;
    }

label.radio-btn {
    display: flex;
    align-items: center;
}

    label.radio-btn input {
        position: absolute;
        z-index: -1;
    }

    label.radio-btn span.radio {
        position: relative;
        display: flex;
        background-color: #fff;
        width: 24px;
        min-width: 24px;
        height: 24px;
        min-height: 24px;
        border-radius: 50%;
        border: #BFBEBE solid 1px;
        overflow: hidden;
        justify-content: center;
        align-items: center;
    }

    label.radio-btn input ~ span.radio::before {
        content: '';
        width: 12px;
        height: 12px;
        min-width: 12px;
        min-height: 12px;
        position: absolute;
        background-color: #5BBA47;
        border-radius: 50%;
        transform: scale(0);
        transition: transform 0.2s;
    }

    label.radio-btn input:checked ~ span.radio::before {
        transform: scale(1);
    }

    label.radio-btn input:checked ~ span.radio::after {
        content: '';
    }

/*Dynamic Header Styles*/
.dynmic-header-context {
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dynmic-header-context .dynamic-col-2 .ribbon-group {
        position: relative;
        top: 0px;
    }


/*Editor Custom Font Sizes*/
.ql-size-huge {
    font-size: 34px;
}

.ql-size-large {
    font-size: 24px;
}

.ql-size-small {
    font-size: 16px;
}

.markup-style.ql-editor {
    max-height: 76px;
    position: relative;
    padding: 0px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
}

.markup-style h1 {
    font-size: 18px;
    line-height: 28px;
}

.markup-style h2 {
    font-size: 24px;
    color: rgb(0, 71, 178);
    line-height: 28px;
}


.sortable-ghost {
    visibility: hidden;
}

.sortable-fallback {
    opacity: 1 !important;
}
.sortable-ghost {
  visibility: visible;
  opacity: 0.2;
  background-color: rgba(0, 0, 0, 0.03);
}

.sortable-chosen.sortable-ghost {
  background-color: rgba(0, 0, 0, 0.03);
  padding: 8px 6px;
  border-radius: 06px;
}

.sortable-chosen.sortable-fallback.sortable-drag {
  background-color: rgba(0, 0, 0, 0.03);
  padding: 8px 6px;
  border-radius: 06px;
}

/*Animation*/
.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

.fade-out {
    opacity: 1;
    animation: fadeOut 1s forwards;
}

.uppercase-bold {
    font-weight: bold;
    text-transform: uppercase;
}

.hide {
    display: none !important;
}

.hidden {
    visibility: hidden !important;
}

.disabled {
    pointer-events: none;
    opacity: 0.8;
    cursor: not-allowed;
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes moving-gradient {
    0% {
        background-position: -250px 0px;
    }

    100% {
        background-position: 250px 0px;
    }
}


/* Heart beat animation */

.heartbeat {
    -webkit-animation: beat .25s infinite alternate;
    -moz-animation: beat .25s infinite alternate;
    -ms-animation: beat .25s infinite alternate;
    -o-animation: beat .25s infinite alternate;
    animation: beat .25s infinite alternate;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -o-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

@keyframes beat {
    to {
        transform: scale(0.98);
    }
}

/*Fade In/Out*/
.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

.fade-out {
    opacity: 1;
    animation: fadeOut 1s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        height: 48px;
        overflow: visible;
    }

    to {
        opacity: 0;
        height: 0px;
        overflow: hidden;
    }
}

/* global classes */
.flex-center {
    display: flex;
    align-items: center;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*TinyMCE and Quill Editor Style Override*/
@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/Inter-VariableFont_opsz-wght.ttf') format('truetype');
    font-weight: 100 900; /* All weights from Thin to Black */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/Inter-Italic-VariableFont_opsz-wght.ttf') format('truetype');
    font-weight: 100 900; /* All weights for italic */
    font-style: italic;
    font-display: swap;
}

  .mce-content-body p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .mce-content-body p,
  .ql-editor p {
    font-size: 17px !important;
    font-family: 'Segoe UI' !important;
    line-height: 26px;
  }
    .mce-content-body h1,
    .ql-snow .ql-editor h1 {
        font-size: 18px !important;
    }
    .mce-content-body h2,
    .ql-snow .ql-editor h2 {
        color: #2854c5 !important;
        font-size: 20px !important;
    }
    .mce-content-body h1,
    .mce-content-body h2,
    .ql-snow .ql-editor h1,
    .ql-snow .ql-editor h2 {
        font-family: 'Inter' !important;
    }

.nowrap {
    white-space: nowrap;
}


.tox-tinymce-aux {
  z-index: 99999!important;
}

.mud-theme-primary {
  background-color: rgb(91 186 71) !important;
}

.mud-popover-open,
.dropdown-menu-parent,
.ks-dropdown__menu-parent {
  visibility: hidden;
  animation: mud-list-show-delay 0s linear 0.2s forwards;
}

/*Mudblazor date picker style override*/
.mud-input-control {
  margin-top: 0 !important;
}
  .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0px!important;
  }

@keyframes mud-list-show-delay {
  to {
    visibility: visible;
  }
}


/*MudTextField*/
.mud-input.mud-input-underline:before {
  border-bottom: 0px solid var(--mud-palette-lines-inputs) !important;
}

.mud-input.mud-input-underline:after {
  border-bottom: 0px solid var(--mud-palette-primary) !important;
}

.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
  left: 0;
  font-size: 16px;
  top: 4px;
  font-family: 'Inter';
}

@keyframes ks-notification-bell-jiggle {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

svg.ks-notification-bell-jiggle {
  animation: ks-notification-bell-jiggle 0.9s ease infinite;
  transform-origin: top center;
}