/* ROOT ---------------------------------------- */
:root {
    --color-header-blue: #0e2a4a;
    --color-main-red: #dc5b57;
    --color-main-lightred: #ff6d68;
    --color-main-darkblue: #4c5d8a;
    --color-main-darkblue-hover: #5b70a6;
    --color-main-blue: #4a8ddc;
    --color-main-lightblue: #59a9ff;
    --color-main-lightblue-90: #6ab2ff;
    --color-main-yellow: #f3c911;
    --color-main-lightyellow: #fff114;
    --color-main-yellow-50: rgba(243, 201, 17, 0.5);
    --color-main-darkgreen: #2d946e;
    --color-main-green: #33ae81;
    --color-main-lightgreen: #3dd19b;
    --color-main-lightergreen: #5ad3a7;
    /* Contrast grayscale from https://dev.to/finnhvman/grayscale-color-palette-with-equal-contrast-ratios-2pgl */
    --color-border-grayscale-0: #000000; /* White text */
    --color-border-grayscale-16: #101010; /* White text */
    --color-border-grayscale-27: #1b1b1b; /* White text */
    --color-border-grayscale-36: #242424; /* White text */
    --color-border-grayscale-44: #2c2c2c; /* White text */
    --color-border-grayscale-51: #333333; /* White text */
    --color-border-grayscale-58: #3a3a3a; /* White text */
    --color-border-grayscale-65: #414141; /* White text */
    --color-border-grayscale-72: #484848; /* White text */
    --color-border-grayscale-79: #4f4f4f; /* White text */
    --color-border-grayscale-86: #565656; /* White text */
    --color-border-grayscale-93: #5d5d5d; /* White text */
    --color-border-grayscale-100: #646464; /* White text */
    --color-border-grayscale-107: #6b6b6b; /* White text */
    --color-border-grayscale-114: #727272; /* White text */
    --color-border-grayscale-121: #797979; /* White text */
    --color-border-grayscale-129: #818181; /* Black text */
    --color-border-grayscale-137: #898989; /* Black text */
    --color-border-grayscale-145: #919191; /* Black text */
    --color-border-grayscale-153: #999999; /* Black text */
    --color-border-grayscale-162: #a2a2a2; /* Black text */
    --color-border-grayscale-171: #ababab; /* Black text */
    --color-border-grayscale-180: #b4b4b4; /* Black text */
    --color-border-grayscale-190: #bebebe; /* Black text */
    --color-border-grayscale-200: #c8c8c8; /* Black text */
    --color-border-grayscale-210: #d2d2d2; /* Black text */
    --color-border-grayscale-221: #dddddd; /* Black text */
    --color-border-grayscale-232: #e8e8e8; /* Black text */
    --color-border-grayscale-243: #f3f3f3; /* Black text */
    --color-border-grayscale-255: #ffffff; /* Black text */
}

html {
    height: 100%;
    width: 100%;
}

/* BODY ---------------------------------------- */
body {
    padding-top: 50px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
}

/* OUTLINE ---------------------------------------- */
.outline {
    color: white;
    -webkit-text-stroke: 0.10em black;
}

    .outline::before {
        content: attr(data-content);
        -webkit-text-fill-color: white;
        -webkit-text-stroke: 0;
        position: absolute;
    }

/* NAVBAR ----------------------------------------  */
.logo {
    font-size: 22px;
    font-weight: 800;
    text-shadow: 1px 1px 0px #161616;
    color: var(--color-main-lightred);
    transition: color 0.3s ease-in-out;
}

    .logo:hover {
        color: var(--color-main-red);
    }

.navbar,
.nav-link,
.navbar-brand {
    padding: 0px;
}

.navbar {
    background-color: var(--color-header-blue);
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:focus {
    color: white;
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 0px;
    box-shadow: none;
    transition: box-shadow 0.3s ease-in-out;
}

    .navbar-dark .navbar-brand:hover {
        color: #E9ECEF;
        box-shadow: inset 0px -4px 0px 0px var(--color-main-lightred);
        transition: box-shadow 0.3s ease-in-out;
    }

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:focus {
    font-family: "Source Sans 3", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    box-shadow: none;
    transition: box-shadow 0.3s ease-in-out;
}

    .navbar-dark .navbar-nav .nav-link:hover {
        color: #E9ECEF;
        box-shadow: inset 0px -3px 0px 0px var(--color-main-yellow);
        transition: box-shadow 0.3s ease-in-out;
    }

    .navbar-dark .navbar-nav .nav-link.menuUser {
        font-family: "Source Sans 3", sans-serif;
        font-size: 14px;
        letter-spacing: 0em;
        font-weight: normal;
        box-shadow: none;
        transition: box-shadow 0.3s ease-in-out;
    }

        .navbar-dark .navbar-nav .nav-link.menuUser:hover {
            box-shadow: inset 0px -3px 0px 0px var(--color-main-yellow);
            transition: box-shadow 0.3s ease-in-out;
        }

    .navbar-dark .navbar-nav .nav-link.menuSuperUser {
        background-color: #3d3d3d;
        box-shadow: none;
        transition: box-shadow 0.3s ease-in-out;
    }

        .navbar-dark .navbar-nav .nav-link.menuSuperUser:hover {
            box-shadow: inset 0px -3px 0px 0px var(--color-main-yellow);
            transition: box-shadow 0.3s ease-in-out;
        }

    .navbar-dark .navbar-nav .nav-link.menuMainWebLink {
        background-color: var(--color-main-yellow);
        color: #3d3d3d;
        box-shadow: none;
        transition: box-shadow 0.3s ease-in-out;
    }

        .navbar-dark .navbar-nav .nav-link.menuMainWebLink:hover,
        .navbar-dark .navbar-nav .nav-link.menuMainWebLink:active {
            background-color: var(--color-main-lightyellow);
            box-shadow: inset 0px -3px 0px 0px var(--color-main-yellow);
            transition: box-shadow 0.3s ease-in-out;
        }

.navbar-dark .navbar-nav .dropdown-item {
    font-family: "Source Sans 3", sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.navbar .dropdown-menu hr {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.navbar .dropdown-menu .dropdown-header {
    padding-left: 1rem;
    cursor: default;
}

.navbar .dropdown-menu .dropdown-item {
    padding-left: 1rem;
}

.navbar-nav .dropdown-item:hover {
    background-color: #e9ecef;
}

.nav-item > .dropdown-menu {
    min-width: 250px;
}

.nav-tabs {
    margin-bottom: 20px;
}

    .nav-tabs .nav-item .nav-link {
        padding: .5rem 1rem;
    }

.navbarLoginInfo {
    line-height: 15px;
}

.navbarLoginImg {
    /*color: white;*/
}

.navbarDarkText {
    color: #bababa;
}

#navResourcy .activePage {
    box-shadow: inset 0px -3px 0px 0px var(--color-main-yellow) !important;
}

#navResourcy .navbar-brand.activePage,
#navResourcy .navbar-brand .activePage {
    box-shadow: inset 0px -3px 0px 0px var(--color-main-red) !important;
}

.navbar-brand-whitelabel {
    background-color: #3d3d3d !important;
}

    .navbar-brand-whitelabel:hover {
        background-color: dimgray !important;
    }

img .brandLogotype {
    height: 30px;
    margin-top: 0px;
}

/* SUB MENU for navigation buttons etc ---------------------------------------- */
.subMenu {
    background-color: #f6f6f6;
    padding-left: 10px;
    padding-right: 10px;
    min-height: 50px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
}

    .subMenu > h1, .subMenu > h2, .subMenu > h3, .subMenu > h4, .subMenu > h5, .subMenu > h6 {
        margin-bottom: 0px;
    }

.subMenuPlanningContainer {
    min-height: 50px;
}

.subMenuOpen {
    background-color: #f9f9f9;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    min-height: 50px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}

.subMenuPlanningContainer .subMenuOpen {
    background-color: white;
    border-bottom: none;
}

.subMenuDialog {
    background-color: #f0f0f0;
    min-height: 50px;
    border-bottom: 1px solid #e0e0e0;
}

.container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}

/*.row {
    margin-left: 0px;
    margin-right: 0px;
}*/

.panelNavButton {
    min-width: 120px;
    /* padding-left: 20px;
    padding-right: 20px;*/
}

.subMenu > h4 {
    color: #555555;
    font-weight: bold;
}

/* OTHER ----------------------------------------  */
.resourcyLoginTitle {
    font-family: "Montserrat", sans-serif;
    color: #DC5B57;
    font-size: 60px;
    font-weight: 800;
    letter-spacing: 2px;
    /*text-shadow: 1px 1px 0px #3d3d3d;*/
}

.mainGridContainer,
.planningGridContainer {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.mainGanttGridContainer {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    overflow-y: scroll;
}

.modal-header {
    background-color: var(--color-main-blue);
    color: white;
}

    .modal-header.message-header {
        background-color: var(--color-header-blue);
        color: white;
    }

    .modal-header .close {
        color: white;
        /*margin: -1rem -1rem -1rem 0px;*/
        line-height: unset;
    }

.list-container {
    float: left;
}

.filter-list-container {
}

.workTimeLimitOK {
    background-color: #c2e7d9 !important;
}

/*.lockedRow td.workTimeLimitOK {
    background-color: rgba(194, 231, 217, 0.6) !important;
    color: black;
}*/

.workTimeLimitLow {
}

.workTimeLimitHigh {
    background-color: #f5cecd !important;
}

.workTimeLimitVeryHigh {
    background-color: red !important;
    color: white;
    border: 2px solid yellow;
}

.logout {
    font-weight: bold;
}

.verticalSeparator {
    display: inline-block;
    width: 50px;
    height: 100%;
    color: transparent;
}

.noteStyle {
    white-space: nowrap;
}

.allowEditingNote {
    background-color: #ffffed !important;
}

.allowEditingHours {
    background-color: #ffffed !important;
}

.lockedRow {
    font-style: italic;
    color: gray;
    /*z-index: 2;*/
    /*background: repeating-linear-gradient(-45deg, transparent, transparent 10px, #fafafa 10px, #fafafa 20px) !important;*/
    /*background: repeating-linear-gradient(-45deg, white, white 10px, #fafafa 10px, #fafafa 20px) !important;*/
}

    .lockedRow td {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }

        .lockedRow td:first-child::before {
            content: "\f023"; /* Unicode för 'fa-lock' */
            font-family: "Font Awesome 5 Free";
            font-weight: 900; /* 900 = solid (gratis i v5) */
            opacity: 0.5;
            font-size: 0.75em;
            font-style: normal;
            color: #666;
            margin-left: 5px;
        }

        /*.lockedRow td:first-child::before {
            content: "🔒 ";
            color: gray;
            opacity: 0.5;
            font-size: 0.9em;
            font-style: normal;
            margin-left: 2px;*/
            /*margin-right: 6px;*/
        /*}*/

.absenceRow {
    background-color: #FDF3F3;
}

.dx-datagrid .dx-datagrid-rowsview .dx-row.dx-group-row.absenceGroupRow {
    background-color: #F8DCDB !important;
}

    .dx-datagrid .dx-datagrid-rowsview .dx-row.dx-group-row.absenceGroupRow > td:nth-child(n+3) {
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }


.hiddenRow {
    display: none;
}

.ProjValue1 {
    background-color: #f4f4f4 !important;
    color: #888888 !important;
    font-size: 13px !important;
    line-height: 19px !important;
}

/*.ProjValue2 {
    background-color: #f4f4f4;
    color: #888888;
    text-transform: uppercase;
    font-style: italic;
}

.ProjValue3 {
    background-color: #f4f4f4;
    color: #888888;
    text-transform: uppercase;
    font-style: italic;
}

.ProjValue4 {
    background-color: #f4f4f4;
    color: #888888;
    text-transform: uppercase;
    font-style: italic;
}*/

.dx-button-mode-contained.activeFavorite,
.dx-button-mode-contained.activeFavorite:active,
.dx-button-mode-contained.activeFavorite:focus {
    background-color: var(--color-main-green);
    border: none;
    min-width: 90px;
}

    .dx-button-mode-contained.activeFavorite:hover {
        background-color: var(--color-main-lightgreen);
    }

.dx-button-mode-contained.notActiveFavorite,
.dx-button-mode-contained.notActiveFavorite:active,
.dx-button-mode-contained.notActiveFavorite:focus {
    background-color: var(--color-main-blue);
    border: none;
    min-width: 90px;
}

    .dx-button-mode-contained.notActiveFavorite:hover {
        background-color: var(--color-main-lightblue);
    }

/* Border skall visas på raden längst ner i griden. Detta pga att vi ändrar storlek på griden baserat på fönstrets storlek */
.dx-datagrid.dx-datagrid-borders > .dx-datagrid-rowsview.dx-last-row-border tbody:last-child > .dx-data-row:nth-last-child(2) > td {
    border-bottom-width: 1px;
}

.loginbody {
    padding-top: 20px;
    padding-bottom: 20px;
    height: 100%;
}

.form-control {
    font-size: 14px;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

    .form-signin .checkbox {
        font-weight: 400;
    }

    .form-signin .form-control {
        position: relative;
        box-sizing: border-box;
        height: auto;
        padding: 10px;
        font-size: 16px;
    }

        .form-signin .form-control:focus {
            z-index: 2;
        }

    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

.table .thead-light th {
    background-color: var(--color-main-blue);
    color: white;
    font-weight: normal;
    border-color: var(--color-main-blue);
}

.footer-filter {
    position: fixed;
    left: 10px;
    bottom: 2px;
    font-size: 12px;
    font-weight: normal;
    color: var(--color-main-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50%;
}

.footer-copyright {
    position: fixed;
    right: 10px;
    bottom: 2px;
    font-size: 12px;
    font-weight: normal;
    color: #aaaaaa;
    white-space: nowrap;
    overflow: visible;
    text-align: right;
    width: 50%;
    padding-left: 50px;
}


/* Serverside filter / Öppna planering ---------------------------------------- */
.list-group-item {
    padding: 0.75rem 0.75rem;
}

.filterTextPanel {
    max-width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 36px;
    cursor: default;
}

    .filterTextPanel.form-control {
        padding: 0px;
    }

    .filterTextPanel .list-group-item {
        border: none;
    }

        .filterTextPanel .list-group-item:not(:last-child) {
            border-right: 1px solid rgba(0, 0, 0, 0.125);
        }

.filterOnPanel {
    float: left;
    height: 36px;
    max-width: 100%;
}

.filterOnHover {
    float: left;
    display: inline-block;
    white-space: normal;
}

.filterBadge {
    font-size: 12px;
    font-weight: normal;
    background-color: #f0f0f0;
    margin: 2px;
    padding: 4px;
}

.filterLargeFont {
    font-size: 13px;
}

.form-row.hoursPerPeriod {
    max-height: 200px;
    overflow-y: auto;
}

.list-group .hoursPerPeriod:nth-of-type(odd) {
    background-color: #f0f0f0;
}

/* Loading Header ---------------------------------------- */
.loading {
    display: block;
    position: fixed;
    z-index: 1000;
    padding-top: 0px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(255,255,255); /* Fallback color */
    background-color: rgba(255,255,255,0.4); /* w/ opacity */
}

/* Loading Content */
.loading-content {
    position: relative;
    top: calc(100% - 230px);
    background-color: rgba(255,255,255,0.8);
    margin-left: auto;
    margin-right: 50px;
    padding: 0;
    border-radius: 5px;
    min-height: 190px;
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

/* Loading Header */
.loading-header {
    background-color: rgba(74,141,220,0.8);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px;
    text-align: center;
}

/* Loading Body */
.loading-body {
    padding: 20px;
    font-weight: normal;
    text-align: center;
    color: #3d3d3d;
    font-size: 1rem;
}

/* Loading Footer */
.loading-footer {
    /*padding: 2px 16px;
    background-color: #5cb85c;
    color: white;*/
}

/* Loading Spinner */
.loading-spinner {
    margin-top: 40px;
    margin-bottom: 20px;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

/* CSS LOADER CLOCK-SMOOTH ----------------------------------------*/

.clock-smooth {
    height: 2em;
    width: 2em;
    font-size: 30px;
    color: var(--color-main-red);
    box-sizing: border-box;
    position: relative;
}

    .clock-smooth:before, .clock-smooth:after {
        content: '';
        height: 0.15em;
        width: 0.15em;
        border-radius: 50%;
        position: absolute;
        color: var(--color-main-blue);
        top: 0;
        left: 0;
        box-shadow: -0.15em -0.15em currentcolor, 2em -0.15em currentcolor, -0.15em 2em currentcolor, 2em 2em currentcolor;
        opacity: 0.5;
    }

    .clock-smooth:after {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 1em 1em;
        transform-origin: 1em 1em;
        opacity: 1;
    }

.hand-smooth {
    display: block;
    width: .2em;
    height: 1.4em;
    border-radius: 0.2em;
    background: currentColor;
    position: absolute;
    bottom: 50%;
    left: 50%;
    margin: 0 -.1em -.1em;
    -webkit-transform-origin: center calc(100% - .1em);
    transform-origin: center calc(100% - .1em);
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: cubic-bezier(0.48, 0.07, 0.5, 1.4);
    animation-timing-function: cubic-bezier(0.48, 0.07, 0.5, 1.4);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.hour-smooth {
    opacity: .8;
    height: .9em;
    -webkit-animation-name: hour-move;
    animation-name: hour-move;
}

.minute-smooth {
    -webkit-animation-name: minute-move;
    animation-name: minute-move;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes minute-movex {
    0% {
        -webkit-transform: rotate(0turn);
        transform: rotate(0turn);
    }

    90%, 100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@keyframes minute-movex {
    0% {
        -webkit-transform: rotate(0turn);
        transform: rotate(0turn);
    }

    90%, 100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@-webkit-keyframes minute-move {
    0%, 5% {
        -webkit-transform: rotate(0turn);
        transform: rotate(0turn);
    }

    90% {
        -webkit-transform: rotate(1.0001turn);
        transform: rotate(1.0001turn);
        -webkit-animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
        animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
    }

    100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@keyframes minute-move {
    0%, 5% {
        -webkit-transform: rotate(0turn);
        transform: rotate(0turn);
    }

    90% {
        -webkit-transform: rotate(1.0001turn);
        transform: rotate(1.0001turn);
        -webkit-animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
        animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
    }

    100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@-webkit-keyframes hour-move {
    0% {
        -webkit-transform: rotate(0turn);
        transform: rotate(0turn);
    }

    25% {
        -webkit-transform: rotate(0.25turn);
        transform: rotate(0.25turn);
    }

    50% {
        -webkit-transform: rotate(0.5turn);
        transform: rotate(0.5turn);
    }

    75% {
        -webkit-transform: rotate(0.75turn);
        transform: rotate(0.75turn);
    }

    100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@keyframes hour-move {
    0% {
        -webkit-transform: rotate(0turn);
        transform: rotate(0turn);
    }

    25% {
        -webkit-transform: rotate(0.25turn);
        transform: rotate(0.25turn);
    }

    50% {
        -webkit-transform: rotate(0.5turn);
        transform: rotate(0.5turn);
    }

    75% {
        -webkit-transform: rotate(0.75turn);
        transform: rotate(0.75turn);
    }

    100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

/* CSS LOADER CLOCK ---------------------------------------- */

.clock {
    width: 50px;
    height: 50px;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 2px var(--color-main-red);
    border-radius: 50%;
    position: relative;
}

    .clock:after, .clock:before {
        position: absolute;
        content: "";
        background-color: var(--color-main-red);
    }

    .clock:after {
        width: 20px;
        height: 2px;
        top: 24px;
        left: 24px;
        -webkit-transform-origin: 1px 1px;
        -moz-transform-origin: 1px 1px;
        transform-origin: 1px 1px;
        -webkit-animation: minhand 2s linear infinite;
        -moz-animation: minhand 2s linear infinite;
        animation: minhand 2s linear infinite;
    }

    .clock:before {
        width: 16px;
        height: 2px;
        top: 24px;
        left: 24px;
        -webkit-transform-origin: 1px 1px;
        -moz-transform-origin: 1px 1px;
        transform-origin: 1px 1px;
        -webkit-animation: hrhand 8s linear infinite;
        -moz-animation: hrhand 8s linear infinite;
        animation: hrhand 8s linear infinite;
    }

@-webkit-keyframes minhand {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes minhand {
    0% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(360deg)
    }
}

@keyframes minhand {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes hrhand {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes hrhand {
    0% {
        -moz-transform: rotate(0deg)
    }

    100% {
        -moz-transform: rotate(360deg)
    }
}

@keyframes hrhand {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@media print {
    .noprint {
        display: none;
    }
}

.HighlightBell {
    /*Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: 8;
    /*color: #dc3545;*/
}



@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.unreadMessage {
    font-weight: bold;
}


.btnLogin {
    background-color: #2d946e !important;
    border-color: #2d946e !important;
}

    .btnLogin:hover, .btnLogin:active, .btnLogin:focus {
        background-color: #33ae81 !important;
        border-color: #33ae81 !important;
    }

    .btnLogin:active, .btnLogin:focus {
        box-shadow: 0 0 0 0.2rem rgba(61, 209, 155, 0.5) !important;
    }

.btnLoginMicrosoft {
    background-color: #4a8ddc !important;
    border-color: #4a8ddc !important;
}

    .btnLoginMicrosoft:hover, .btnLoginMicrosoft:active, .btnLoginMicrosoft:focus {
        background-color: #59a9ff !important;
        border-color: #59a9ff !important;
    }

.bgLoginGradient {
    background: rgb(255,255,255);
    background: linear-gradient(160deg, rgba(249,250,251,1) 0%, rgba(248,249,250,1) 100%);
}

/*

GÖR MED SASS ISTÄLLET SE NEDAN:
    https://stackoverflow.com/questions/38792005/how-to-change-the-bootstrap-primary-color
    
.btn-primary,
.btn-primary:active,
.btn-primary:focus {
    background-color: #4c5d8a;
    color: white;
    border-color: #4c5d8a;
    border-radius: 4px;
}
    .btn-primary:hover {
        background-color: var(--color-main-darkblue-hover);
        color: white;
        border-color: #4c5d8a;
        border-radius: 4px;
    }

.btn-secondary,
.btn-secondary:active,
.btn-secondary:focus {
    background-color: #eceff1;
    color: gray;
    border-color: #4c5d8a;
    border-radius: 4px;
}
    .btn-secondary:hover {
        background-color: white;
        color: gray;
        border-color: #4c5d8a;
        border-radius: 4px;
    }*/


.PlanningClientFilters_HL {
    font-weight: bold !important;
    background-color: var(--color-main-green) !important;
}

.hasFilters {
    /*text-decoration: underline;*/
    /*font-weight:bold;*/
}

.CellStyle1 {
    border-left: 4px solid gray !important;
}

    .CellStyle1::before {
        content: "Ω";
        position: absolute;
        top: -1px;
        left: 2px;
        /*font-size: normal;*/
        color: gray;
        z-index: 1;
    }

.CellStyleX > div {
    border: 2px solid green !important;
    color: green;
}

.CellStyle2 {
}

    .CellStyle2::before {
        font-family: "Font Awesome 5 Free";
        content: "\f06e";
        color: green;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }

.CellExclamationMark {
}

    .CellExclamationMark::before {
        content: "!";
        font-size: small;
        font-weight: bold;
        color: gray;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }

.CellQuestionMark {
}

    .CellQuestionMark::before {
        content: "?";
        font-size: small;
        font-weight: bold;
        color: gray;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }

.CellLabelE {
}

    .CellLabelE::before {
        content: "E";
        font-size: small;
        font-weight: bold;
        color: gray;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }

.CellLabelF {
}

    .CellLabelF::before {
        content: "F";
        font-size: small;
        font-weight: bold;
        color: gray;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }

.CellLabelK {
}

    .CellLabelK::before {
        content: "K";
        font-size: small;
        font-weight: bold;
        color: gray;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }

.CellLabelM {
}

    .CellLabelM::before {
        content: "M";
        font-size: small;
        font-weight: bold;
        color: gray;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }

.CellLabelR {
}

    .CellLabelR ::before {
        content: "R";
        font-size: small;
        font-weight: bold;
        color: gray;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }

.CellLabelS {
}

    .CellLabelS::before {
        content: "S";
        font-size: small;
        font-weight: bold;
        color: gray;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }

.CellLabelT {
}

    .CellLabelT::before {
        content: "T";
        font-size: small;
        font-weight: bold;
        color: gray;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }

.CellLabelU {
}

    .CellLabelU ::before {
        content: "U";
        font-size: small;
        font-weight: bold;
        color: gray;
        position: absolute;
        top: -1px;
        left: 2px;
        z-index: 1;
    }


/*.lockedRow td.workTimeLimitOK {
    background: rgba(76, 175, 80, 0.2) !important;*/ /* Green background with 20% opacity */
/*}*/

#message-container {
    padding: 20px;
}

.adminTopInfo {
    margin-left: 30px;
}

.group_ProjectOngoing {
}

/*.group_ProjectOngoing::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.05);
        pointer-events: none;
        z-index: 2;
    }*/

.group_ProjectNotStarted,
.group_ProjectFinished {
}

    .group_ProjectNotStarted::after,
    .group_ProjectFinished::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.1);
        pointer-events: none;
        z-index: 2;
    }

.ProjectOngoing {
}

    .ProjectOngoing::after {
    }

.ProjectNotStarted {
    color: gray;
}

    .ProjectNotStarted::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.1);
        pointer-events: none;
        z-index: 2;
    }

.ProjectFinished {
    color: gray;
}

    .ProjectFinished::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.1);
        pointer-events: none;
        z-index: 2;
    }


/*.workTimeLimitOK.cell-selected {
    background-color: #eeffbd !important;
}

.workTimeLimitHigh.cell-selected {
    background-color: #ffeebd !important;
}*/

.fa-icon-small {
    font-size: 14px !important;
}

.smallertext {
    font-size: 12px;
}

.validation-summary-errors ul {
    list-style: none;
    padding-left: 0;
}


.tooltipContainer {
    filter: drop-shadow(lightgray 4px 4px 2px);
    padding: 0px;
    margin: 0px;
    text-align: left;
}

.newFilterDialog {
    z-index: 2000000;
    position: fixed;
    left: 0px;
    top: 60px;
    width: 300px;
    height: calc(100% - 70px);
    background-color: beige;
    transition: left .5s cubic-bezier(0.820, 0.085, 0.395, 0.895);
}

    .newFilterDialog.collapsed {
        left: -300px;
    }

.pt-6,
.py-6 {
    padding-top: 5rem !important;
}

.pr-6,
.px-6 {
    padding-right: 5rem !important;
}

.pb-6,
.py-6 {
    padding-bottom: 5rem !important;
}

.pl-6,
.px-6 {
    padding-left: 5rem !important;
}

.p-6,
.p-6 {
    padding: 5rem !important;
}


.dx-datagrid-headers .dx-datagrid-table .dx-row > td.focusedWeek {
    color: #333333;
    background-color: #e6e6e6;
    font-weight: 600;
    box-shadow: inset 0px -2px 0px 0px #aaaaaa;
}

.widget-filter-DropDownButton {
    height: 42px;
    margin-left: 15px;
}