@font-face {
    font-family: "GT Sectra Fine";
    font-style: normal;
    font-weight: normal;
    src: url("/GT-Sectra-Fine-Regular.ttf");
}

@font-face {
    font-family: 'Larsseit Regular';
    font-style: normal;
    font-weight: 500;
    src: url('/LarsseitMedium.woff') format('woff');
}

@font-face {
    font-family: 'Larsseit Regular';
    font-style: normal;
    font-weight: 400;
    src: url('/LarsseitMedium.woff') format('woff');
}

@font-face {
    font-family: 'Larsseit Light';
    font-style: normal;
    font-weight: normal;
    src: url('/LarsseitLight.woff') format('woff');
}

:root {
    /* Colors */
    --text-primay: rgba(37, 55, 70, 1);

    /* Main PTG Colors */
    --navy: #253746;
    --grey-blue: #5B7F95;
    --light-blue: #62B5E5;
    --yellow: #FFCD00;

    --grey-bg: #ECEFF1;

    --white: rgba(255, 255, 255, 1);
    --grey: #DFDFDF;
    --light-grey: rgba(249, 249, 250, 1);
    --medium-grey: rgba(238, 240, 242, 1);
    --dark-grey: rgba(81, 88, 92, 1);
    --navy-50: rgba(146, 155, 163, 1);

    --state-enabled-blue: #62B5E5;
    --state-enabled-light-blue: #B5D7ED;
    --state-hover-yellow: var(--yellow);
    --state-disabled: var(--grey);

    --alerts-positive-dark: #1E5722;
    --alerts-positive-light: #E7F6E8;
    --alerts-information-dark: #174C7D;
    --alerts-information-light: #D4E7F7;
    --alerts-warning-dark: #7A4100;
    --alerts-warning-light: #FFDAB8;
    --alerts-warning-minor-dark: #754400;
    --alerts-warning-minor-light: #FEF4C3;
    --alerts-critical-warning-dark: #8A0900;
    --alerts-critical-warning-light: #FDD3D3;
    --alerts-neutral-dark: #464B4E;
    --alerts-neutral-light: #E6E6E6;

    --shortcut-1: #5B7F95 9.64%;
    --shortcut-2: #F9F9FA 93.29%;

    /* Structures */
    --corner-radius-soft-corner: 15px;
}

@property --shortcut-color-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #5B7F95 9.64%;
}

@property --shortcut-color-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #F9F9FA 93.29%;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    color: var(--navy);
}

span, p, h5, h6, li {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

h1, h2, h3, h4 {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

main {
    background-color: var(--grey-bg);
}

/* Portrait tablets */
@media (min-width: 600px) {
    main {
        padding: 15px;
    }
}

/* Landscape tablets */
@media (min-width: 801px) {
    main {
        padding: 15px;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    main {
        padding: 30px;
    }
}


#kundeweb-app {
    height: 100%;
}

.home-main-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    row-gap: 10px;
    flex: 2 1 600px;
    min-width: 412px;
}

.list-item {
    content-visibility: auto;
    contain-intrinsic-size: auto;
}

.list-item-selected {
    background-color: rgba(98, 181, 229, 0.4);
}


.hover-link {
    cursor: pointer;
    color: var(--white);
}

.hover-link:hover:not([class~="selected"]) {
    color: var(--yellow);
}

.white-background-parent > div {
    background-color: white;
}

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

.sticky {
    position: sticky;

    top: 90px;
    max-height: 500px;
}

.documents-container {
    flex-direction: column;
    row-gap: 20px;
}

.documents-container-item {
    background-color: var(--Color-palette-Neutrals-Light-grey, #F9F9FA);
    border-radius: 10px;
}

/*
@media (min-width: 1920px) {
    .large-max-width {
        max-width: 1920px;
    }

    .document-filter-header {
        align-items: center;
    }
}

@media (min-width: 2560px) {
    .documents-container {
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
    }

    .documents-container-item {
        width: 49%;
    }
}
*/

.search-bar {
    background-color: color-mix(in srgb, var(--light-blue) 20%, transparent) ;
}

.shortcut-container {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    row-gap: 15px;
    width: 220px;
    height: 220px;
    border-radius: 20px;
    padding: 30px;

    --shortcut-color-1: #5B7F95 9.64%;
    --shortcut-color-2: #F9F9FA 93.29%;

    color: white;

    background: linear-gradient(27.69deg, var(--shortcut-color-1), var(--shortcut-color-2));
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

.shortcut-container {
    color: var(--white);
}

.shortcut-container .MuiTypography-root {
    color: var(--white);
    transition: all 200ms ease-in;
}

.shortcut-container:hover {
    color: var(--yellow);
    --shortcut-color-1: #5B7F95 9.64%;
    --shortcut-color-2: #253746 93.29%;
}

.shortcut-container:hover .MuiTypography-root {
    color: var(--yellow);
}

.rounded-container {
    background-color: white;
    border-radius: var(--corner-radius-soft-corner);
    padding: 25px 30px 30px 30px;
}

.main-tab-container-outer {
    width: 100%;
    height: calc(100vh - 120px - 120px - 100px);
}

.main-tab-container-inner {
    display: flex;
    flex-direction: column;

    overflow-y: auto;
    overflow-x: hidden;

    row-gap: 40px;
    height: 100%;
    /* NOTE: To give some space to the scroll bar */
    padding-right: 20px;
    /* NOTE: To give some space to select labels that are on the top */
    padding-top: 5px;
}

.bordered-container {
    border-radius: var(--corner-radius-soft-corner);
    padding: 20px;
    border: 1px solid var(--grey);
}

.gray-rounded-container {
    background-color: var(--Color-palette-Neutrals-Light-grey, rgba(249, 249, 250, 1));
    border-radius: var(--corner-radius-soft-corner);
    padding: 15px;
}

.customer-box-item {
    display: flex;
    flex-direction: column;

    row-gap: 10px;
    padding: 30px;

    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 300px;
    min-width: 150px;
}

/* Portrait tablets */
@media (min-width: 600px) {
    .customer-box-item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 300px;
        min-width: 150px;
    }
}

/* Landscape tablets */
@media (min-width: 801px) {
    .customer-box-item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 300px;
        min-width: 150px;
    }
}

/* High-res tablet */
@media (min-width: 1025px) {
    .customer-box-item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 400px;
    }
}

@media (min-width:1281px) {
    .customer-box-item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 400px;
        max-width: 400px;
    }
}


.table-header {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    line-height: var(--3);
    letter-spacing: 0.17000000178813934px;
    text-align: left;
}

.switch-text {
    font-size: 12px;
    color: var(--navy);
}

.switch-text.selected {
    color: var(--navy);
}

.switch-text:hover:not([class~="selected"]) {
    color: var(--yellow);
}

.navigation-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    column-gap: 10px;
    padding: 10px;
    border-radius: 4px;
}

.navigation-button:hover {
    background: color-mix(in srgb, var(--light-blue) 20%, transparent);
}

.navigation-button.selected {
    background: color-mix(in srgb, var(--light-blue) 40%, transparent);
}

.typography-defaults {
    color: var(--text-primary);
}

.filter-bar-controllers-container {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;

    gap: 15px;

    padding-top: 10px;
    padding-right: 10px;
}

.admin-company-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    gap: 30px;
}

@media (min-width: 1025px) {
    .filter-bar-container {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 180px;
        min-width: 180px;
        max-width: 300px;
    }

    .ticket-center-container {
        display: flex;

        gap: 20px;

        height: calc(100vh - 260px);
    }
}

@media (max-width: 1024px) {
    .ticket-center-container {
        display: flex;
        flex-direction: column-reverse;

        gap: 20px;
    }

    .admin-company-container {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-end;

        gap: 30px;
    }
}

/* Mui stuff */
.flex.MuiSelect-selectMenu {
    display: flex;
}

.MuiSvgIcon-root.MuiSvgIcon-fontSizeMedium.MuiTableSortLabel-icon.white-background {
    color: white;
}

.MuiListItemButton-root.list-item:hover {
    background-color: color-mix(in srgb, var(--light-blue) 20%, transparent);
}

.MuiListItemButton-root.Mui-selected.list-item {
    background-color: color-mix(in srgb, var(--light-blue) 40%, transparent);
}

.MuiLink-root.hover-link {
    font-size: 16px;
    cursor: pointer;
    color: var(--white);
}

.MuiLink-root:hover {
    color: var(--yellow);
}

.MuiLink-root.hover-link.selected {
    color: var(--light-blue);
}

.MuiLink-root.hover-link:hover:not([class~="selected"]) {
    color: var(--yellow);
}

.MuiIconButton-root.my-account-button {
    color: var(--navy);
    background-color: var(--white);
}

.MuiIconButton-root.my-account-button.selected {
    color: var(--white);
    background-color: var(--light-blue);
}

.MuiIconButton-root.my-account-button:hover:not([class~="selected"]) {
    color: var(--yellow);
    background-color: var(--white);
}

.MuiIconButton-root.pin-button {
    color: var(--navy-50);
    transition: color 100ms ease-in;
}

.MuiIconButton-root.pin-button:hover {
    color: var(--alerts-positive-dark);
}

.MuiIconButton-root.pin-button.enabled {
    color: var(--navy);
    opacity: 100%;
}

.MuiIconButton-root.pin-button.enabled:hover {
    color: var(--alerts-critical-warning-dark);
    opacity: 100%;
}

.MuiButtonBase-root.button {
    color: var(--white);
    background-color: var(--navy);
    box-shadow: none;
}

.MuiButtonBase-root.button:hover {
    color: var(--navy);
    background-color: var(--yellow);
    box-shadow: none;
}

.MuiButtonBase-root.button-green {
    color: var(--alerts-positive-dark);
    background-color: var(--alerts-positive-light);
    box-shadow: none;
}

.MuiButtonBase-root.button-green:hover {
    color: var(--navy);
    background-color: var(--yellow);
    box-shadow: none;
}

.MuiButtonBase-root.button-gray {
    color: var(--alerts-neutral-dark);
    background-color: var(--alerts-neutral-light);
    box-shadow: none;
}

.MuiButtonBase-root.button-gray:hover {
    color: var(--alerts-neutral-light);
    background-color: var(--alerts-neutral-dark);
    box-shadow: none;
}

.MuiInputBase-input.MuiInput-input::placeholder {
    color: var(--navy);
    /* NOTE(simkir): We're overwriting the mui textfield opacity, so we need this */
    opacity: 1;
}

.MuiInputBase-root:hover {
    background-color: color-mix(in srgb, var(--light-blue) 10%, transparent);
}

.white-background-parent > .MuiInputBase-root:hover {
    /* TODO(simkir): Is there a better way here to default to some color? Since
     * the hover above sets it to the blue shade, the inherit will also get that.
     */
    background-color: white;
}

.MuiPickersDay-root.Mui-selected.calendar-selected {
    background-color: var(--navy);
}