@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
    @font-face {
        font-family: "Maersk Text";
        src: url("../fonts/MaerskText-Regular.woff2") format("woff2");
    }

    [data-theme='default'] {
        --text-color-neutral-default: 20 20 20;
        --text-color-neutral-alt: 84 84 84;
        --text-color-neutral-subtle: 178 178 178;
        --text-color-neutral-inverse: 255 255 255;
        --text-color-primary-default: 0 115 171;
        --text-color-secondary-default: 0 36 61;
        --text-color-info-default: 0 115 171;
        --text-color-error-default: 184 0 18;
        --text-color-warning-default: 128 104 20;
        --text-color-success-default: 50 133 41;
        --background-color-neutral-default: 255 255 255;
        --background-color-neutral-subtle: 247 247 247;
        --background-color-neutral-hover: 237 237 237;
        --background-color-primary-default: 66 176 213;
        --background-color-primary-subtle: 233 246 252;
        --background-color-primary-hover: 12 160 206;
        --background-color-secondary-default: 108 117 125;
        --background-color-success-default: 40 167 69;
        --background-color-danger-default: 220 53 69;
        --background-color-warning-default: 255 193 7;
        --background-color-info-default: 23 162 184;
        --background-color-light-default: 248 249 250;
        --background-color-dark-default: 52 58 64;
        --on-background-color-neutral-default: 20 20 20;
        --on-background-color-neutral-alt: 20 20 20;
        --on-background-color-neutral-subtle: 20 20 20;
        --on-background-color-neutral-inverse: 255 255 255;
        --on-background-color-primary-default: 255 255 255;
        --on-background-color-primary-subtle: 0 36 61;
        --on-background-color-secondary-default: 255 255 255;
        --on-background-color-secondary-subtle: 0 36 61;
        --on-background-color-info-default: 255 255 255;
        --on-background-color-info-subtle: 0 36 61;
        --on-background-color-error-default: 255 255 255;
        --on-background-color-error-subtle: 55 0 5;
        --on-background-color-warning-default: 77 62 12;
        --border-color-neutral-default: 207 207 207;
        --border-color-neutral-subtle: 219 219 219;
        --border-color-neutral-inverse: 255 255 255;
        --border-color-primary-default: 66 176 213;
        --border-color-primary-subtle: 181 224 245;
        --border-color-secondary-default: 0 36 61;
        --border-color-secondary-subtle: 181 224 245;
        --border-color-info-default: 66 176 213;
        --border-color-info-subtle: 181 224 245;
        --border-color-error-default: 184 0 18;
        --border-color-error-subtle: 233 178 183;
        --border-color-warning-default: 255 208 41;
        --border-color-warning-subtle: 255 235 168;
        --mds_brand_appearance_neutral_default_text-color: 20 20 20;
        --mds_brand_appearance_neutral_default_background-color: 255 255 255;
        --mds_brand_appearance_neutral_default_on-background-color: 20 20 20;
        --mds_brand_appearance_neutral_default_border-color: 207 207 207;
        --mds_brand_appearance_neutral_alt_text-color: 84 84 84;
        --mds_brand_appearance_neutral_alt_background-color: 207 207 207;
        --mds_brand_appearance_neutral_alt_on-background-color: 20 20 20;
        --mds_brand_appearance_neutral_subtle_text-color: 178 178 178;
        --mds_brand_appearance_neutral_subtle_background-color: 247 247 247;
        --mds_brand_appearance_neutral_subtle_on-background-color: 20 20 20;
        --mds_brand_appearance_neutral_subtle_border-color: 219 219 219;
        --mds_brand_appearance_neutral_inverse_text-color: 255 255 255;
        --mds_brand_appearance_neutral_inverse_background-color: 20 20 20;
        --mds_brand_appearance_neutral_inverse_on-background-color: 255 255 255;
        --mds_brand_appearance_neutral_inverse_border-color: 255 255 255;
        --mds_brand_appearance_primary_default_text-color: 0 115 171;
        --mds_brand_appearance_primary_default_background-color: 66 176 213;
        --mds_brand_appearance_primary_default_on-background-color: 255 255 255;
        --mds_brand_appearance_primary_default_border-color: 66 176 213;
        --mds_brand_appearance_primary_subtle_background-color: 233 246 252;
        --mds_brand_appearance_primary_subtle_on-background-color: 0 36 61;
        --mds_brand_appearance_primary_subtle_border-color: 181 224 245;
        --mds_brand_appearance_secondary_default_text-color: 0 36 61;
        --mds_brand_appearance_secondary_default_background-color: 0 36 61;
        --mds_brand_appearance_secondary_default_on-background-color: 255 255 255;
        --mds_brand_appearance_secondary_default_border-color: 0 36 61;
        --mds_brand_appearance_secondary_subtle_background-color: 224 229 232;
        --mds_brand_appearance_secondary_subtle_on-background-color: 0 36 61;
        --mds_brand_appearance_secondary_subtle_border-color: 181 224 245;
        --mds_brand_appearance_success_default_text-color: 50 133 41;
        --mds_brand_appearance_success_default_background-color: 64 171 53;
        --mds_brand_appearance_success_default_on-background-color: 255 255 255;
        --mds_brand_appearance_success_default_border-color: 64 171 53;
        --mds_brand_appearance_success_subtle_background-color: 220 246 217;
        --mds_brand_appearance_success_subtle_on-background-color: 19 51 16;
        --mds_brand_appearance_success_subtle_border-color: 197 229 194;
        --mds_brand_appearance_warning_default_text-color: 128 104 20;
        --mds_brand_appearance_warning_default_background-color: 255 208 41;
        --mds_brand_appearance_warning_default_on-background-color: 77 62 12;
        --mds_brand_appearance_warning_default_border-color: 255 208 41;
        --mds_brand_appearance_warning_subtle_background-color: 255 241 194;
        --mds_brand_appearance_warning_subtle_on-background-color: 77 62 12;
        --mds_brand_appearance_warning_subtle_border-color: 255 235 168;
        --mds_brand_appearance_error_default_text-color: 184 0 18;
        --mds_brand_appearance_error_default_background-color: 184 0 18;
        --mds_brand_appearance_error_default_on-background-color: 255 255 255;
        --mds_brand_appearance_error_default_border-color: 184 0 18;
        --mds_brand_appearance_error_subtle_background-color: 252 221 224;
        --mds_brand_appearance_error_subtle_on-background-color: 55 0 5;
        --mds_brand_appearance_error_subtle_border-color: 233 178 183;
        --mds_brand_appearance_info_default_text-color: 0 115 171;
        --mds_brand_appearance_info_default_background-color: 66 176 213;
        --mds_brand_appearance_info_default_on-background-color: 255 255 255;
        --mds_brand_appearance_info_default_border-color: 66 176 213;
        --mds_brand_appearance_info_subtle_background-color: 211 236 249;
        --mds_brand_appearance_info_subtle_on-background-color: 0 36 61;
        --mds_brand_appearance_info_subtle_border-color: 181 224 245;
        --mds_brand_appearance_static_dark: 20 20 20;
        --mds_brand_appearance_static_light: 255 255 255;
        --mds_brand_appearance_opacity_default_10: 255 255 255;
        --mds_brand_appearance_opacity_default_30: 255 255 255;
        --mds_brand_appearance_opacity_default_50: 255 255 255;
        --mds_brand_appearance_opacity_default_70: 255 255 255;
        --mds_brand_appearance_opacity_default_90: 255 255 255;
        --mds_brand_appearance_opacity_inverse_10: 20 20 20;
        --mds_brand_appearance_opacity_inverse_30: 20 20 20;
        --mds_brand_appearance_opacity_inverse_50: 20 20 20;
        --mds_brand_appearance_opacity_inverse_70: 20 20 20;
        --mds_brand_appearance_opacity_inverse_90: 20 20 20;
        --mds_brand_appearance_shadow_first-layer_color: 0 0 0;
        --mds_brand_appearance_shadow_second-layer_color: 0 0 0;
        --mds_brand_appearance_shadow_third-layer_color: 0 0 0;
        --mds_brand_appearance_state_neutral_default_hover_background-color: 237 237 237;
        --mds_brand_appearance_state_neutral_default_hover_border-color: 135 135 135;
        --mds_brand_appearance_state_neutral_default_active_background-color: 207 207 207;
        --mds_brand_appearance_state_neutral_default_active_border-color: 84 84 84;
        --mds_brand_appearance_state_neutral_alt_hover_background-color: 237 237 237;
        --mds_brand_appearance_state_neutral_alt_active_background-color: 207 207 207;
        --mds_brand_appearance_state_neutral_subtle_hover_background-color: 20 20 20;
        --mds_brand_appearance_state_neutral_subtle_active_background-color: 20 20 20;
        --mds_brand_appearance_state_neutral_inverse_hover_background-color: 255 255 255;
        --mds_brand_appearance_state_neutral_inverse_active_background-color: 255 255 255;
        --mds_brand_appearance_state_primary_default_hover_background-color: 12 160 206;
        --mds_brand_appearance_state_primary_default_hover_border-color: 12 160 206;
        --mds_brand_appearance_state_primary_default_active_background-color: 5 142 198;
        --mds_brand_appearance_state_primary_default_active_border-color: 5 142 198;
        --mds_brand_appearance_state_primary_subtle_hover_background-color: 66 176 213;
        --mds_brand_appearance_state_primary_subtle_active_background-color: 66 176 213;
        --mds_brand_appearance_state_secondary_default_hover_background-color: 0 61 109;
        --mds_brand_appearance_state_secondary_default_active_background-color: 20 20 20;
        --mds_brand_appearance_state_secondary_subtle_hover_background-color: 0 36 61;
        --mds_brand_appearance_state_secondary_subtle_active_background-color: 0 36 61;
        --mds_brand_appearance_state_success_default_hover_background-color: 58 154 48;
        --mds_brand_appearance_state_success_default_active_background-color: 50 133 41;
        --mds_brand_appearance_state_success_subtle_hover_background-color: 64 171 53;
        --mds_brand_appearance_state_success_subtle_active_background-color: 64 171 53;
        --mds_brand_appearance_state_warning_default_hover_background-color: 230 187 37;
        --mds_brand_appearance_state_warning_default_active_background-color: 179 146 29;
        --mds_brand_appearance_state_warning_subtle_hover_background-color: 255 208 41;
        --mds_brand_appearance_state_warning_subtle_active_background-color: 255 208 41;
        --mds_brand_appearance_state_error_default_hover_background-color: 166 0 16;
        --mds_brand_appearance_state_error_default_active_background-color: 129 0 13;
        --mds_brand_appearance_state_error_subtle_hover_background-color: 184 0 18;
        --mds_brand_appearance_state_error_subtle_active_background-color: 184 0 18;
        --mds_brand_appearance_state_info_default_hover_background-color: 12 160 206;
        --mds_brand_appearance_state_info_default_active_background-color: 5 142 198;
        --mds_brand_appearance_state_info_subtle_hover_background-color: 66 176 213;
        --mds_brand_appearance_state_info_subtle_active_background-color: 66 176 213;
        --mds_brand_appearance_state_focus_border-color: 66 176 213;
        --mds_brand_appearance_state_focus_default_shadow_color: 181 224 245;
        --mds_brand_appearance_state_focus_vanity_shadow_color: 181 224 245;
    }
}


html {
    @apply font-sans;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #2D3748;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E0;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #718096;
    }

.nav {
}

.nav__listItem {
    @apply flex items-center duration-200 text-base leading-6 p-4 hover:bg-colorBackgroundPrimary-subtle;
}

    .nav__listItem.active {
        @apply border-colorBorderPrimary border-l-4 bg-colorBackgroundPrimary-subtle;
    }

.nav__listItem__text {
    @apply mx-4;
}


.grid__container {
    @apply flex flex-wrap;
}

    .grid__container .gridItem {
        @apply h-full w-80 bg-colorBackgroundNeutral-subtle m-4 p-10 rounded-lg;
    }

.gridItem:hover .gridItem__title {
    @apply underline;
}

.gridItem__title {
    @apply text-xl;
}

.table {
    @apply min-w-full leading-normal;
}

    .table thead th {
        @apply px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200;
    }

    .table tbody td {
        @apply px-5 py-5 text-sm bg-white border-b border-gray-200;
    }

.mc-table {
    @apply min-w-full leading-normal;
}

.mc-table__header th {
    @apply px-5 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase bg-gray-100 border-b-2 border-gray-200;
}

.mc-table__body td {
    @apply px-5 py-5 text-sm border-b border-gray-200;
}

.mc-table__body tr:hover td {
    @apply bg-primaryBackground-subtle;
}
.mc-c-list {
    /* background-color: var(--list_background-color);
    border-color: var(--list_border-color);
    border-radius: var(--list_border-radius);
    border-style: var(--list_border-style);
    border-width: var(--list_border-width);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    @include shadow();*/
}

.btn[disabled] {
    @apply opacity-50 cursor-not-allowed pointer-events-none select-none touch-none;
}


.btn {
    @apply rounded border-solid text-base font-normal py-2 px-4 ease-in-out transition-all duration-200;
}

.btn-primary {
    @apply text-primaryOnBackground bg-primaryBackground hover:bg-statePrimaryDefault-hoverBackground;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-neutral {
    @apply border border-neutralBorderColor text-neutral bg-neutralBackground hover:bg-stateNeutralDefault-hoverBackground;
}



.btn-neutral-plain {
    @apply border-none text-neutral bg-neutralBackground hover:bg-stateNeutralDefault-hoverBackground;
}


.validation-message {
    @apply text-error;
}

.bm-container {
    @apply fixed w-full h-screen z-50 overflow-hidden bg-opacityInverse50 flex flex-col items-center p-10;
}

.positon-middle {
    @apply top-0 right-0 left-0 bottom-0;
}

.position-topright div[role=dialog] {
    @apply fixed top-0 right-0 bottom-0 absolute;
}

.position-topright {
    @apply fixed top-0 right-0 h-screen;
}

.blazored-modal {
    @apply bg-neutralBackground p-6 rounded;
}


.bm-header {
    @apply pb-4 font-bold;
}

.blazored-modal input, .blazored-modal textarea {
    background-color: white;
}

.blazored-modal .form-control:not(button) {
    color: #F9F9F9;
    border: none;
}

.blazored-modal .form-control:focus {
    box-shadow: none;
    border: 1px solid rgb(210 210 210 / 25%);
}

.blazored-modal .tag-input:focus {
    box-shadow: none;
    border: none;
}

.blazored-modal .form-select {
    color: #F9F9F9;
    background-color: rgb(44, 46, 51) !important;
    border: none !important;
}

.blazored-modal input:focus {

}
.blazored-modal input {
    background-color:white;
}

.blazored-modal .bm-close {
    color: #F9F9F9 !important;
}



[type=text], [type=date] {
    @apply bg-neutralBackground text-base rounded border border-neutralBorderColor h-[40px] px-3 duration-200 transition-all ease-in-out focus:outline-none focus-visible:outline-none focus-visible:border focus-visible:border-stateNeutralDefault-hoverBorderColor focus:border focus:border-stateNeutralDefault-hoverBorderColor focus:shadow-[0_0_0_3px] focus:shadow-stateFocus-defaultShadowColor;
}

select {
    @apply bg-neutralBackground text-base rounded border border-neutralBorderColor h-[40px] px-3 pr-10 duration-200 transition-all ease-in-out focus:outline-none focus-visible:outline-none focus-visible:border focus-visible:border-stateNeutralDefault-hoverBorderColor focus:border focus:border-stateNeutralDefault-hoverBorderColor focus:shadow-[0_0_0_3px] focus:shadow-stateFocus-defaultShadowColor;
}



.fade-in {
    @apply transition-all ease-in duration-700;
}

.image-container img {
    @apply w-full;
}

label > input[type='checkbox'] {
    @apply h-5 w-5 border-neutralBorderColor border rounded duration-200 transition-all ease-in-out focus:outline-none focus-visible:outline-none focus-visible:border focus-visible:border-stateNeutralDefault-hoverBorderColor focus:border focus:border-stateNeutralDefault-hoverBorderColor focus:shadow-[0_0_0_3px] focus:shadow-stateFocus-defaultShadowColor;
}

    label > input[type='checkbox']:checked, [type='radio']:checked {
        @apply bg-primaryBackground border-primaryBorderColor text-primaryBackground;
    }

.loader-skeleton input {
    @apply bg-neutralBackground-subtle animate-pulse text-neutralBackground-subtle border-neutralBackground-subtle;
}

.loader-skeleton label {
    @apply bg-neutralBackground-subtle animate-pulse text-neutralBackground-subtle border-neutralBackground-subtle;
}

.loader-skeleton .image-container {
    @apply bg-neutralBackground-subtle animate-pulse text-neutralBackground-subtle border-neutralBackground-subtle;
}


.loader-skeleton p {
    @apply bg-neutralBackground-subtle animate-pulse text-neutralBackground-subtle border-neutralBackground-subtle;
}

.loader-skeleton li {
    @apply bg-neutralBackground-subtle animate-pulse text-neutralBackground-subtle border-neutralBackground-subtle;
}


.mc_input__input {
    @apply w-full mt-2;
    background-color:white;
}

.mc_datepicker input {
    @apply w-full mt-2;
}

.mc_select__select {
    @apply w-full mt-2;
}

.mc_input__input:read-only {
    color: #aaa;
    background-color: #f0f0f0;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
    -webkit-touch-callout: none;
    font-size: 0.8rem;
}


.notification_hub {
    @apply fixed bottom-0 right-0 p-6 space-y-4;
}

.notification_hub__item {
    @apply p-3 rounded flex flex-col justify-center content-center duration-300 ease-in-out transition-opacity w-auto relative min-h-[80px];
}

.notification_hub__item--success {
    @apply bg-successBackground-subtle text-successOnBackground-subtle;
}

.notification_hub__item--info {
    @apply bg-infoBackground-subtle text-infoOnBackground-subtle;
}


.notification_hub__item--warning {
    @apply bg-warningBackground-subtle text-warningOnBackground-subtle;
}

.notification_hub__item--error {
    @apply bg-errorBackground-subtle text-errorOnBackground-subtle;
}

.notfication_hub__item__heading {
    @apply font-bold;
}

.notification_hub__item__close_button {
    @apply absolute px-2 py-1 right-0 top-0;
}

.fade-enter {
    opacity: 0;
    /*transform: translateX(100%);*/
    transition: opacity 500ms;
}

.fade-enter-active {
    opacity: 1;
    /*transform: translateX(0);*/
}

.fade-exit {
    opacity: 1;
    /*transform: translateX(0);*/
    transition: opacity 500ms;
}

.fade-exit-active {
    opacity: 0;
    /*transform: translateX(100%);*/
}