a {
    text-decoration: none;
}

.icon {
    background-position: center;
    background-repeat: no-repeat;
}

button:hover .feather-expand {
    cursor: pointer;
    stroke-width: 1.75;
    transform: scale(1.25);
    transform-origin: bottom;
    transition: all 0.1s ease;
}

.chevron-down {background-image: url(/images/icons/f2f701df6066/chevron-down.svg);}
.chevron-left {background-image: url(/images/icons/bc5176dd6666/chevron-left.svg);}
.chevron-right {background-image: url(/images/icons/45f9b3224c0b/chevron-right.svg);}
.chevron-up {background-image: url(/images/icons/9c038838d566/chevron-up.svg);}
.menu {background-image: url(/images/icons/39d16f845c06/menu.svg);}
.x {image: url(/images/icons/b9c2cfcd9f44/x.svg);}
@media screen and (min-width: 552px) {
    .fullscreen-bg {
        position: fixed;
        overflow-x: hidden;
        overflow-y: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: repeat;
    }
}

@media screen and (min-width: 552px) {
    .sso-content {
        padding: 40px 40px 15px 40px;
    }
}

@media screen and (min-width: 552px) {
    .sso-panel-header {
        padding: 20px 36px 0;
        font-family: ConduitITCStd-Light, Calibri, sans-serif;
    }
}

@media screen and (min-width: 552px) {
    .sso-panel {
        align-content: center;
    }
}

.header-links {
    display: inline;
    color: #777776;
    font-size: 14px;
}

.frontpage-header {
    color: #d4310e;
    border-bottom: 1px solid #bfbaba;
    font-family: ConduitITCStd-Light, Calibri, sans-serif;
    font-weight: 200;
    font-size: 17px;
    line-height: 23px;
    text-align: center;
    padding: 0 0 10px;
    margin-bottom: 10px;
}

.logo-login {
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
}

.sso-panel {
    margin-left: 30%;
    background-color: white;
    max-width: 350px;
    box-shadow: 0 0 9px 2px rgba(0,0,0,0.05);
}

@media screen and (min-width: 552px) {
    .sso-container {
        width: 75%;
        display: inline-block;
    }
}

.ingris-title-login {
    border-top: solid 2px #004869;
    border-bottom: solid 2px #004869;
    margin: 15px 0 20px 0;
    padding: 11px 0;
    line-height: 23px;
}

.ingris-title-login p {
    display: inline;
    font-size: 20px;
    font-family: ConduitITCStd-Light, Calibri, sans-serif;
    color: #004869;
}

.login-content {
    padding: 0 15px 15px 15px;
}

.ssoButton {
    background-color: #007db8;
    border-color: #007db8;
}

.ssoButton:hover,
.ssoButton:active:focus {
    color: #007db8;
    border-color: #007db8;
    background-color: white;
}

@media (max-width: 767px) {
    .login-content {
        padding: 0;
    }

    .sso-container {
        margin-top: -60px;
    }

    .logo-login {
        margin-top: 10%;
        padding: 0;
    }

    .sso-panel-header {
        display: none;
    }

    .sso-panel {
        margin-left: 0;
        max-width: 100%;
        min-height: 100vh;
        padding: 0 10%;
    }
}

@font-face {
    font-family: 'ConduitITCStd-Light';
    src: url('/fonts/1c9a69d6875a/ConduitITCStd-Light.otf') format('opentype');
    font-display: swap;
}

:root {
    --ingris-body-background-color: #f9f9f9;
    --ingris-purkeoversikt-individnr-color: #004869;
    --ingris-content-container-padding: 30px;
    --ingris-massereg-space-between-cards: 4px;
}

@media (max-width: 1025px) {
    :root {
        --ingris-content-container-padding: 15px;
    }
}

body {
    background-color: var(--ingris-body-background-color);
    overflow-y: scroll;
}

body,
.panel-heading .badge,
.panel-heading .btn,
.panel-heading .dropdown-menu,
.popover-content,
button.close {
    font-family: Calibri, sans-serif;
}

h1, h2, h3, h4, h5, h6, .panel-heading, .side-menu-wrapper, .navbar {
    font-family: ConduitITCStd-Light, Calibri, sans-serif;
}

table th, .table-headers {
    font-family: ConduitITCStd-Light, Calibri, sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1;
}

.header-as-table {
    font-family: ConduitITCStd-Light, Calibri, sans-serif;
    font-size: 16px;
    font-weight: 800;
    padding-bottom: 8px;
}

dt {
    font-family: ConduitITCStd-Light, Calibri, sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.content-wrapper {
    width: 85%;
}

.content-wrapper-menu-closed {
    width: 96%;
}

.content-container {
    padding: 0 var(--ingris-content-container-padding);
}

.content-container-full-width {
    margin-left: calc(var(--ingris-content-container-padding) * -1);
    margin-right: calc(var(--ingris-content-container-padding) * -1);
    padding: 0 var(--ingris-content-container-padding);
}

@media (max-width: 1025px) {
    .container {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 1025px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.side-menu-wrapper {
    width: 15%;
    padding-left: 0;
}

.side-menu-inner-width {
    width: calc(15vw - 40px)
}

.side-menu-wrapper-menu-closed {
    width: 4%;
}

.side-menu-container {
    width: inherit;
    height: 100%;
    position: fixed;
    background-color: #004869;
    z-index: 2;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 16px;
}

@media (max-width: 1600px) {
    .content-wrapper {
        width: 80%;
    }

    .side-menu-wrapper {
        width: 20%;
    }

    .side-menu-inner-width {
        width: calc(20vw - 40px)
    }
}

@media (max-width: 1199px) {
    .content-wrapper-menu-closed {
        width: 94%;
    }

    .content-wrapper {
        width: 77%;
    }

    .side-menu-wrapper-menu-closed {
        width: 6%;
    }

    .side-menu-wrapper {
        width: 23%;
    }

    .side-menu-inner-width {
        width: calc(23vw - 40px)
    }
}

@media (max-width: 1024px) {
    .side-menu-inner-width {
        width: 200px;
    }
}

@media (max-width: 991px) {
    .content-wrapper-menu-closed {
        width: 92%;
    }

    .content-wrapper {
        width: 75%;
    }

    .side-menu-wrapper-menu-closed {
        width: 8%;
    }

    .side-menu-wrapper {
        width: 25%;
    }
}

@media (max-width: 1025px) {
    #app {
        padding-top: 50px;
    }
}

/*-------------------- Knapper ----------------------*/

.btn-outline-danger:hover svg,
.btn-outline-danger:active:focus svg {
    stroke: white;
}

.animalia-primary,
.animalia-primary:focus,
.animalia-primary-inverse:hover,
.animalia-primary-inverse:active:focus,
.animalia-primary-inverse:focus:hover {
    color: white;
    background-color: #007db8;
    border-color: #007db8;
}

.animalia-primary:hover,
.animalia-primary:active:focus,
.animalia-primary-inverse,
.animalia-primary-inverse:focus {
    color: #007db8;
    border-color: #007db8;
    background-color: white;
}

.animalia-primary-inverse:hover svg,
.animalia-primary-inverse:active:focus svg,
.animalia-primary-inverse:focus:hover svg,
.animalia-danger-inverse:hover svg,
.animalia-danger-inverse:active:focus svg,
.animalia-danger-inverse:focus:hover svg {
    stroke: white;
}

.animalia-primary:hover svg,
.animalia-primary:active:focus svg,
.animalia-primary:focus:hover svg {
    stroke: #007db8;
}

.animalia-gray,
.animalia-gray:focus {
    color: #444;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.animalia-gray:hover,
.animalia-gray:active:focus,
.animalia-gray.active {
    color: #444;
    border-color: #999;
    background-color: #f5f5f5;
}

.animalia-gray.active {
    background-color: #cacaca;
}

.animalia-submenu,
.animalia-submenu:focus,
.animalia-submenu:hover,
.animalia-submenu:active:focus {
    color: #004869;
    background-color: white;
    border-color: #004869;
    width: 100%;
    font-size: 16px;
}

.animalia-danger,
.animalia-danger:focus,
.animalia-danger-inverse:hover,
.animalia-danger-inverse:active:focus,
.animalia-danger-inverse:focus:hover {
    color: white;
    background-color: #d4310e;
    border-color: #d4310e;
}

.animalia-danger:hover,
.animalia-danger:active:focus,
.animalia-danger-inverse,
.animalia-danger-inverse:focus {
    color: #d4310e;
    border-color: #d4310e;
    background-color: white;
}

.animalia-dropdown-primary,
.animalia-dropdown-primary:hover,
.animalia-dropdown-primary:focus,
.animalia-dropdown-primary-inverse:hover,
.animalia-dropdown-primary-inverse:active:focus {
    color: white;
    background-color: #004869;
    border-color: #004869;
}

.animalia-dropdown-secondary,
.animalia-dropdown-secondary:hover,
.animalia-dropdown-secondary:focus,
.animalia-dropdown-secondary-inverse:hover,
.animalia-dropdown-secondary-inverse:active:focus {
    color: rgba(68, 68, 68, 1.0);
    background-color: #f1f0f0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.btn-xs {
    padding: 0 .5rem;
}

.animalia-btn-medium {
    padding: 0.25rem 0.5rem;
}

#member-search-result .heading {
    font-weight: bold;
}

#individ-search-result .heading {
    font-weight: bold;
}

div.search-row:hover, div.medlem-search-row:hover div {
    background-color: rgba(0, 149, 255, .12);
    transition: 0.1s;
    color: black;
    cursor: pointer;
}

div.search-row-keyboard-selected, div.medlem-search-keyboard-selected div {
    background-color: rgba(0, 149, 255, .25);
    color: black;
}

div.agreement-buttons {
    padding-top: 2em
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: transform 150ms ease-in-out;
    z-index: 0;
}

.caret,
.caret.rotate-down {
    transform: rotate(0deg);
}

.caret.rotate-up {
    transform: rotate(180deg);
}

.light-blue {
    background-color: rgba(0, 149, 219, 0.5)
}

.individsok-wrapper {
    position: fixed;
    bottom: 0.55pc;
    right: 0.55pc;
    width: 3pc;
    height: 3pc;
}

.individsok-snarvei {
    background: url(/images/icons/7ef6da3bcaf9/individsok.svg);
    background-size: auto;
    padding-bottom: 100%;
}

.button-row {
    padding-bottom: 8px;
    padding-top: 8px;
    border-top: 1px solid #e6e6e8;
}

a:hover {
    text-decoration: none;
}

#rapport-container {
    margin-top: 10px;
    height: calc(100vh - 80px);
}

.card-row {
    padding: 12px 0;
    border-top: 1px solid #dee2e6;
}

.helse-rad {
    padding: 12px 4px 8px 4px;
    border-top: 1px solid #dee2e6;
}

.helse-rad:hover, .card-row:hover {
    background-color: #f5f5f5;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

@keyframes border-animation {
    from {
        border-width: 1px 1px 1px 8px;
        border-color: rgba(0, 149, 219, 0);
        border-style: solid;
    }
    to {
        border-width: 1px 1px 1px 8px;
        border-color: rgba(0, 149, 219, 0.6);
        border-style: solid;
    }
}

.box-border-animation-desc {
    animation-name: border-animation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

.border-animated-box {
    border-radius: 4px;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%);
    padding: 12px 8px 12px 8px;
    background-color: #f5f5f5;
}

@keyframes helse-info-animation {
    from {
        border-width: 1px 1px 1px 8px;
        border-color: rgba(156, 145, 0, 0);
        border-style: solid;
    }
    to {
        border-width: 1px 1px 1px 8px;
        border-color: rgba(156, 145, 0, 0.5);
        border-style: solid;
    }
}

.helse-detail-box {
    animation-name: helse-info-animation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes forrige-innlogging-animation {
    from {
        border-width: 1px 1px 1px 8px;
        border-color: rgba(0, 149, 219, 0);
        border-style: solid;
    }
    to {
        border-width: 1px 1px 1px 8px;
        border-color: rgba(0, 149, 219, 0.6);
        border-style: solid;
    }
}

.forrige-innlogging-box {
    animation-name: forrige-innlogging-animation;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    border-radius: 4px;
    margin: 8px 0 8px 0;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%);
    padding: 4px 8px 4px 8px;
    background-color: #EEE;
}

.grid-container {
    display: grid;
    justify-items: stretch;
}

.data-cell {
    padding: 12px 0 12px 2px;
    border-top: 1px solid #dee2e6;
}

.grid-container-v2 {
    display: grid;
    justify-items: stretch;
}

.grid-container-v2-head {
    display: contents;
    font-family: ConduitITCStd-Light, Calibri, sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.grid-container-v2-row {
    display: contents;
}

.grid-container-v2-head > *,
.grid-container-v2-row > * {
    padding: 12px 6px;
}

.grid-container-v2-row > * {
    border-top: 1px solid #dee2e6;
}

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

@media (min-width: 768px) {
    .flex-row-md {
        flex-direction: row;
    }
}

.pointer {
    cursor: pointer;
}

.individ-basis-oppsummering dl {
    margin-bottom: 0.2rem;
}

.ingris-options-list {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: white;
    position: absolute;
    z-index: 10000;
    min-width: 200px;
    width: fit-content;
    width: -moz-fit-content;
    white-space: nowrap;
    max-height: 400px;
    overflow-y: auto;
}

.ingris-input-select::placeholder, .ingris-input-select::-webkit-input-placeholder {
    color: #495057;
}

.kolonneoppsett-dropzone.dragover {
    border: 1px dashed #8a8a8a;
    margin-left: -15px;
    margin-right: -15px;
}

.kolonneoppsett-dragzone .feather-menu {
    -ms-touch-action: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}

.kolonneoppsett-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: .25rem;
}

.kolonneoppsett-li {
    display: block;
    padding: .75rem 1.25rem;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
}

.kol-dragover {
    background-color: #bbb;
    padding-top: 16px;
    padding-bottom: 16px;
}

.kol-selected {
    opacity: 0.5;
}

.ingris-main-loading-indicator {
    color: rgba(0, 0, 0, .5);
    font-style: italic;
    font-size: 25px;
    text-align: center;
    padding: 100px 0;
    /* Hensikten med denne animasjonen er å ikke vise loading-indicatoren med en gang, men vente til den
       har brukt litt tid på å loade. Vanligvis går det meget så kjapt å laste inn tingene, og da unngår
       vi at det "blinker" en loading-indikator i 0.2 sekunder før siden laster i happy casen. */
    animation: ingris-animation-fade-in-tail 1s none;
}

.badge-pill-animalia {
    color: white;
    background-color: #c51e2e;
    margin-left: 2px;
    font-size: 10.5px;
}

@keyframes ingris-animation-fade-in-tail {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes spinner-animation-fade-in {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media screen {
    .only-print {
        display: none;
    }
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

.running-pig {
    animation-name: running-pig;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes running-pig {
    0% { transform: translate(0px,  0px); }
    50%  { transform: translate(50px, 0px); }
    100%   { transform: translate(-0px, -0px); }
}

.info-tom-side {
    color: rgba(0, 0, 0, .5);
    font-style: italic;
    font-size: 25px;
    text-align: center;
    padding: 70px 0;
}

.group-pill {
    margin-right: 8px;
    margin-bottom: 4px;
    padding: 0.5em 1em 0.5em 1em;
    border-radius: 10rem;
    display: inline-block;
    font-size: 12px;
}

.feather-bell-alert {
    animation-duration: 0.5s;
    transform-origin: top center;
    animation-name: ringing-bell;
    animation-iteration-count: 4;
    animation-delay: 1s;
}

@keyframes ringing-bell {
    0% { transform: rotate(0deg); }
    25%  { transform: rotate(30deg); }
    75%  { transform: rotate(-30deg); }
    100%   { transform: rotate(0deg);}
}

.fade-in {
    animation: fadeInAnimation ease 0.8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.grid-row-wrapper {
    display: contents;
    position: relative;
}

.massereg-col-label {
    padding: 0.50rem 0 0.50rem 2px;
    background-color: #b2dff4;
}

.massereg-tight {
    height: 36px;
    padding: 1px 1px 1px 0;
}

.my-fixed-table {
    user-select: none;
}

.my-fixed-table > * > *,
.my-fixed-table-header-cell {
    background-color: var(--ingris-body-background-color);
    padding: 0 6px;
}

/* Styling som gjelder spesifikt headeren */
.my-fixed-table-header-cell {
    font-weight: bold;
    border-bottom: 1px solid #000;
    font-family: ConduitITCStd-Light, Calibri, sans-serif;
    font-size: 16px;
    padding: 6px;
    white-space: nowrap;
}

.my-fixed-table-header-cell:nth-child(1),
.my-fixed-table-header-cell:nth-child(2) {
    z-index: 1;
}

.my-fixed-table-row .btn,
.my-fixed-table-row-liten .btn,
.my-fixed-table-row-middels .btn{
    line-height: 1;
}

.my-fixed-table-row-liten:hover > div,
.my-fixed-table-row-middels:hover > div,
.my-fixed-table-row:hover > div {
    background-color: #eee;
}

.my-fixed-table-row > div {
    padding: 12px 6px;
}

.my-fixed-table-row-middels > div {
    padding: 6px 6px;
}

.my-fixed-table-row-liten > div {
    padding: 0 6px;
}

.my-fixed-table-row-highlighted > div {
    background-color: #eaefff;
}


.side-menu-main, .side-menu-main a {
    color: white;
    cursor: pointer;
}

.side-menu-main a {
    display: block;
}

.side-menu-main ul {
    padding-left: 0px;
    list-style: none;
    background-color: #004869;
}

:root {
    --ingris-menu-left-padding: 20px;
}

@media (max-width: 1024px) {
    :root {
        --ingris-menu-left-padding: 15px;
    }
}

.side-menu-main li {
    border-bottom: solid 2px #2a627d;
    padding: 12px 0px 12px 20px;
}

.side-menu-main li.anchor-container {
    padding: 0;
}

.side-menu-main li.anchor-container a {
    color: white;
    display: block;
    padding: 12px 0px 12px var(--ingris-menu-left-padding);
}

.side-menu-main li.anchor-container a:hover {
    text-decoration: none;
}

.side-menu-main li.selected {
    border-left: solid 5px white;
    padding-left: 15px;
}

.side-menu-main li:hover {
    background-color: #2a627d;
}

.side-menu-main li:last-child {
    border-bottom: none;
}

/*---------------------- Sublist --------------------------------*/

ul.side-menu-sublist li {
    border: none;
}

ul.side-menu-sublist li {
    padding: 0;
}

ul.side-menu-sublist li a {
    padding: 12px 0px 12px 40px;
    display: block;
}

ul.side-menu-sublist li.selected {
    border-left: solid 5px white;
    padding-left: 35px;
}

ul.side-menu-sublist li:last-child {
    border-bottom: solid 2px #2a627d;
}


/*--------------------------- Logo  ---------------------------------*/

.ingris-logo {
    float: left;
    height: 27px;
    width: 95px;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 20px;
    background-image: url(/images/3d57449ad504/ingris_logo_hvit.svg);
}

.application-name {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 600;
    float: left;
    margin-left:10px;
}

.navbar-header .ingris-logo-sm {
    height: 20px;
    width: 105px;
    float: left;
    display: block;
    padding: 15px;
    margin-top: 8px;
    margin-left: 15px;
    background-image: url(/images/3d57449ad504/ingris_logo_hvit.svg);
}

.ingris-logo-no-text {
    background-image: url(/images/308cd2c71e9d/logo_ingris_uten_tekst.svg);
    background-position: center;
    background-repeat: no-repeat;
    top: 0;
    color: white;
    cursor: pointer;
    padding: 24px 0;
    position: fixed;
    width: inherit;
}

.animalia-logo {
    height: 27px;
    width: 140px;
    position: fixed;
    bottom: 15px;
    z-index: -1;
    margin-left: 18px;
    background-image: url(/images/23b902efad24/logo_animalia.svg);

}

/*--------------------------- Other  ---------------------------------*/

.menu-top {
    padding-left: 20px;
    font-size: 0.8em;
    padding-bottom: 5px;
    border-bottom: solid 2px #2a627d;
    cursor: auto;
    display: flex;
    flex-direction: row;
    gap: 5px;
}

/*---------------------------- Mobile menu -----------------------------*/

.medlem-info {
    color: white;
    clear: left;
    padding-left: var(--ingris-menu-left-padding);
    padding-bottom: 3px;
    font-size: 0.8em;
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.dropdown-list {
    padding-inline-start: 0;
    margin-block-end: 0;
    margin-bottom: 0;
    padding-left: 0;
}

.dropdown-list>li {
    border-top: 1px solid #2a627d;
    list-style: none;
}

.dropdown-list>li>a {
    color: white;
    display: block;
    line-height: 20px;
    padding: 15px;
}

.dropdown-list>li>a:not([href]),
.dropdown-list>li>a:not([href]):hover,
.dropdown-list>li>a:not([href]):focus {
    color: white;
}

.dropdown-sublist > li > a {
    color: white;
}

.dropdown-sublist>li {
    list-style: none;
    color: white;
    padding: 12px;
}

#navbar-main {
    padding: 0;
}

.navbar-nav>li>a,
.navbar-nav .open .dropdown-menu>li>a{
    padding-top: 15px;
    padding-bottom: 15px;
}

.navbar-header {
    height: 57px;
}

.collapse {
    overflow-y: auto;
    max-height: calc(100vh - 57px); /* ref høyden på .navbar-header */
}

.navbar-header,
.collapse {
    width: 100%;
    background-color: #004869;
}

.menu-toggle {
    background-color: transparent;
    border: solid 1px white;
    border-radius: 4px;
    float: right;
    margin-right: 15px;
    margin-top: 8px;
    padding: 6px;
}

/*---------------------------- Icons -----------------------------*/

.chevron-left-menu {
    background-color: #004869;
    border-radius: 0 4px 4px 0;
    bottom: 0;
    left: 15%;
    padding: 24px;
    position: fixed;
}

.chevron-right-menu {
    bottom: 0;
    cursor: pointer;
    padding: 24px 0;
    position: fixed;
    width: inherit;
}

.menu-menu {
    cursor: pointer;
    height: 20px;
    width: 30px;
}

@media (max-width: 1199px) {
    .chevron-left-menu {
        left: 20%;
    }
}

@media (max-width: 991px) {
    .chevron-left-menu {
        left: 25%;
    }
}

.selected-member {
    cursor: pointer;
    color: #fff;
}

.selected-member:hover {
    color: #fff;
}

.oppfolging, .oppfolging-inaktiv {
    margin-right: 16px;
    border-radius: 15px;
    padding: 0 5px 0 5px;
    display: inline-block;
    cursor: pointer;
}

.oppfolging {
    background-color: #c51e2e;
    border: 1px solid #c51e2e;
}

.oppfolging-inaktiv {
    background-color: rgba(0, 0, 0, .2);
    border: 1px solid rgba(0, 0, 0, .2);
}

.oppfolging span, .oppfolging-inaktiv span {
    font-size: 12px;
    padding-left: 5px;
    color: white;
}
@charset "UTF-8";

/*!
 * Pikaday
 * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
 */

.pika-single {
    z-index: 9999;
    display: block;
    position: relative;
    color: #333;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*
clear child float (pika-lendar), using the famous micro clearfix hack
http://nicolasgallagher.com/micro-clearfix-hack/
*/
.pika-single:before,
.pika-single:after {
    content: " ";
    display: table;
}
.pika-single:after { clear: both }

.pika-single.is-hidden {
    display: none;
}

.pika-single.is-bound {
    position: absolute;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
}

.pika-lendar {
    float: left;
    width: 240px;
    margin: 8px;
}

.pika-title {
    position: relative;
    text-align: center;
}

.pika-label {
    display: inline-block;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    background-color: #fff;
}
.pika-title select {
    cursor: pointer;
    position: absolute;
    z-index: 9998;
    margin: 0;
    left: 0;
    top: 5px;
    opacity: 0;
}

.pika-prev,
.pika-next {
    display: block;
    cursor: pointer;
    position: relative;
    outline: none;
    border: 0;
    padding: 0;
    width: 20px;
    height: 30px;
    /* hide text using text-indent trick, using width value (it's enough) */
    text-indent: 20px;
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    opacity: .5;
}

.pika-prev:hover,
.pika-next:hover {
    opacity: 1;
}

.pika-prev,
.is-rtl .pika-next {
    float: left;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
}

.pika-next,
.is-rtl .pika-prev {
    float: right;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
}

.pika-prev.is-disabled,
.pika-next.is-disabled {
    cursor: default;
    opacity: .2;
}

.pika-select {
    display: inline-block;
}

.pika-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}

.pika-table th,
.pika-table td {
    width: 14.285714285714286%;
    padding: 0;
}

.pika-table th {
    color: #999;
    font-size: 12px;
    line-height: 25px;
    font-weight: bold;
    text-align: center;
}

.pika-button {
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    border: 0;
    margin: 0;
    width: 100%;
    padding: 5px;
    color: #666;
    font-size: 12px;
    line-height: 15px;
    text-align: right;
    background: #f5f5f5;
}

.pika-week {
    font-size: 11px;
    color: #999;
}

.is-today .pika-button {
    color: #33aaff;
    font-weight: bold;
}

.is-selected .pika-button,
.has-event .pika-button {
    color: #fff;
    font-weight: bold;
    background: #33aaff;
    box-shadow: inset 0 1px 3px #178fe5;
    border-radius: 3px;
}

.has-event .pika-button {
    background: #005da9;
    box-shadow: inset 0 1px 3px #0076c9;
}

.is-disabled .pika-button,
.is-inrange .pika-button {
    background: #D5E9F7;
}

.is-startrange .pika-button {
    color: #fff;
    background: #6CB31D;
    box-shadow: none;
    border-radius: 3px;
}

.is-endrange .pika-button {
    color: #fff;
    background: #33aaff;
    box-shadow: none;
    border-radius: 3px;
}

.is-disabled .pika-button {
    pointer-events: none;
    cursor: default;
    color: #999;
    opacity: .3;
}

.is-outside-current-month .pika-button {
    color: #999;
    opacity: .3;
}

.is-selection-disabled {
    pointer-events: none;
    cursor: default;
}

.pika-button:hover,
.pika-row.pick-whole-week:hover .pika-button {
    color: #fff;
    background: #ff8000;
    box-shadow: none;
    border-radius: 3px;
}

/* styling for abbr */
.pika-table abbr {
    border-bottom: none;
    cursor: help;
}
.infomeldingrad {
    border-top: 1px solid #ccc;
}

.infomeldingrad button {
    margin-top: 4px;
}

.infomeldinger-container {
    margin: 0 15px 15px 15px;
}

.infomeldinger-header {
    font-weight: bold;
}

.gyldig>div {
    background-color: rgba(255, 192, 203, 0.5);
}
.individ-sok-individer {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: white;
    position: absolute;
    z-index: 10;
    width: 300px;
}

.inner-addon {
    position: relative;
}

/* style icon */
.inner-addon .field-icon {
    position: absolute;
    padding: 6px;
    cursor: pointer;
}

.disabled-addon .field-icon {
    cursor: default;
}

/* align icon */
.left-addon .field-icon  { left:  0;}
.right-addon .field-icon { right: 0;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }
.diagnose-sok-diagnoser {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: white;
    position: absolute;
    z-index: 10000;
    min-width: 200px;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
}

.valgt-diagnose {
    border: 1px #ccc solid;
    border-radius: 5px;
    background-color: rgba(0, 149, 219, 0.25);
    margin-top: 2px;
    padding: 2px 2px 2px 8px;
    color: #444;
}

.endre-diagnose {
    margin-right: 0px;
}

.fjern-diagnose,
.endre-diagnose {
    float: right;
}

.fjern-diagnose svg,
.endre-diagnose svg {
    cursor: pointer;
    stroke: #333;
}

.fjern-diagnose svg:hover {
    stroke: #d4310e;
}

.endre-diagnose svg:hover {
    stroke: #5cb85c;
}
/*****************/
/* modal popovers*/
/*****************/
.modal-header {
    background-color: #004869;
    color: white;
    justify-content: space-between;
}

.modal-action-btn {
    color: white;
}

.modal-header.panel-heading {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.modal-wrapper {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1040;
    overflow-y: scroll;

    /*copied from bootstrap 5.3.7 modal class, as we do not use the modal wrapper class, still we rely on variables from the class*/
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);
}

.modal-backdrop {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.6;
    z-index: 1;
    -webkit-animation: fade-in 0.2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fade-in 0.2s; /* Firefox < 16 */
    -ms-animation: fade-in 0.2s; /* Internet Explorer */
    -o-animation: fade-in 0.2s; /* Opera < 12.1 */
    animation: fade-in 0.2s;
}

.modal-child {
    margin: auto;
    margin-top: 30px;
    z-index: 2;
    -webkit-animation: fade-in-child 0.2s;
    -moz-animation: fade-in-child 0.2s;
    -ms-animation: fade-in-child 0.2s;
    -o-animation: fade-in-child 0.2s;
    animation: fade-in-child 0.2s;
}

@keyframes fade-in {
    from {opacity: 0;}
    to   {opacity: 0.6;}
}

@keyframes fade-in-child {
    from {opacity: 0;}
    to   {opacity: 1;}
}

.modal-action {
    padding: .4rem .6rem 0 .6rem;

    display: inline-block;
}

.modal-action img {
    display: inline-block;
    vertical-align: middle;
}

.btn-modal-heading, .btn-modal-heading:hover  {
    color: white;
}

.modal-header {
    padding: .5rem 1rem;
}

.modal-footer {
    margin-top: 8px;
    padding: 4px 0;
    justify-content: space-between;
}

.paginate b {
    cursor: pointer;
}

.nav-tabs .nav-item.active {
    background-color: #c3d1dd;
    border-color: #dee2e6 #dee2e6;
}

.nav-tabs .nav-item {
    background-color: #e5ecf0;
    color: #444;
}

.nav-link {
    cursor: pointer;
}

@media (max-width: 991px) {
    .nav-tabs .nav-link {
        border-radius: .25rem;
        margin: 2px;
    }
}

:root {
    --ingris-purkeoversikt-puljer-x-spacing: 20px;
}

.oversikt-row {
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    margin-bottom: 8px;
    border-left: solid 8px rgba(0, 72, 105, 0.5);
    font-family: ConduitITCStd-Light, Calibri, sans-serif;
    font-size: 16px;
}

.oversikt-row > .row {
    height: 58px;
    margin-left: 0px;
    margin-right: 0px;
}

.oversikt-row > .row > div {
    margin-top: auto;
    margin-bottom: auto;
}

.oversikt-row-individnr {
    color: #004869;
    font-size: 20px;
    cursor: pointer;
}

.oversikt-row-individnr a {
    color: #004869;
}

.oversikt-menu {
    color: #004869;
    text-align: center;
    margin-bottom: 10px;

}

.oversikt-menu .active {
    border-bottom: 4px solid #007db8;
    color: #007db8;
    font-weight: 800;
    padding-bottom: 5px;
}

.oversikt-menu-ny {
    color: #1B4866;
    text-align: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.oversikt-menu-ny .active {
    border-bottom: 2px solid #347CB3;
    color: #347CB3;
    font-weight: 500;
    padding-bottom: 5px;
}

.oversikt-row-chevron {
    cursor: pointer;
}

.oversikt-row-chevron svg {
    stroke: #444;
}

@media (max-width: 1025px) {
    .oversikt-row-individnr {
        font-size: 16px;
        padding-left: 20px;
    }

    .gruppe-overskrift {
        font-size: 1.5em;
    }
}

@media (max-width: 992px) {
    .oversikt-row > .row {
        min-height: 40px;
        height: auto;
    }

    .oversikt-row > .row > div {
        padding-left: 5px;
        padding-right: 5px;
    }

    .oversikt-row dl  {
        margin-bottom: 0px;
    }

    .oversikt-row-individnr {
        font-size: 18px;
    }

}

.oversikt-row dl dt {
    font-size: 16px;
    font-weight: 300;
    color: #666;
}

.oversikt-row dl dd {
    font-size: 16px;
    font-weight: 300;
    padding-left: 5px;
    padding-right: 5px;
    color: #004869;
    margin-bottom: 0.2rem;
}

.individlister > [class^="col"] {
    padding-right: 0;
}

.individlister > [class^="col"]:last-child {
    padding-right: 15px;
}

.clear-filter {
    background-color: #f1f0f0;
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 4px 8px;
    text-align: center;
    vertical-align: baseline;
    cursor: pointer;
}

.clear-filter svg:hover {
    stroke: #d4310e;
}

.individ-box-element {
    padding: 12px 0;
    border-top: 1px solid #E8EDFF;
    border-bottom: 3px solid #E8EDFF;
}

.grid-row-wrapper .individ-box-element:first-child {
    padding-left:  14px;
    border-left: 1px solid #E8EDFF;
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
}

.grid-row-wrapper .individ-box-element:last-child {
    padding-right: 14px;
    border-right: 3px solid #E8EDFF;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
}

.grid-row-wrapper.valgt .individ-box-element  {
    border-color: #92A9FF;
    background-color: #F9FAFF;
}

.pulje-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.registreringsrad {
    background-color: #fff;
    border-radius: 4px;
    border: solid 1px #ccc;
    border-bottom: none;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
    margin: 0 0 16px;
    padding: 8px;
}

.registreringsrad label  {
    margin-bottom: 0;
    font-weight: bold;
}

.individ-fjosoppsett {
    color: #004869;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    line-height: 18px;
    margin-right: 8px;
    white-space: nowrap;
}
.sokmeny label {
    margin-bottom: 0;
    font-weight: bold;
}

.masseregrader .card {
    margin-bottom: var(--ingris-massereg-space-between-cards);
}

.masseregrader label,
.masseregfelter label {
    margin: 0px;
}

.masseregrader .form-control.is-invalid,
.masseregrader select.form-select.is-invalid {
    background-image: none;
    padding-right: .75rem !important;

}

.masseregrader .invalid-feedback {
    display: none;
}

.masseregrader .save-button,
.masseregfelter .animalia-primary {
 padding: 0.25rem 0.5rem;
}

.masseregrader .card-body,
.masseregfelter .card-body {
    padding: 0.25rem 0.75rem 0.5rem 0.75rem;
}

.masseregfelter {
    margin-bottom: 16px;
    background-color: rgb(229, 236, 240);
}

.masseregheader {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.masseregheader .massereg-header-text-and-button {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}

.massereg-header-text-and-button h3, .massereg-header-text-and-button .info-btn {
    margin-top: 0.375rem;
    margin-bottom: 0;
}

/*----------------------------------------------------------------------------------------
  re-com.css

  This file is required for styling the re-com UI library components.
  To use the library, bootstrap.css is also required, which is best obtained from a CDN.
  So, place the following lines in the <head> section of the html file:

    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
    <link rel="stylesheet" href="resources/css/re-com.css">

  The following is required for constraining an application to the
  height of the browser window and setting some global defaults like font...
----------------------------------------------------------------------------------------*/

/* The following style addresses: http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */
/** {*/
/*    min-height:     0px;*/
/*    min-width:      0px;*/
/*    height:         100%;*/
/*}*/
/*Kommenterte ut disse da de var i konflikt med cljs-headless-table sin måte å ha overflow på*/

html, body {
    font-family:    Segoe UI, Roboto, sans-serif;
    font-size:      14px;
    font-weight:    400;
    color:          rgba(68, 68, 68, 1.0);
    letter-spacing: 0.002em;
    margin:         0px;
    padding:        0px;
}

/*----------------------------------------------------------------------------------------
  Bootstrap overrides after upgrading to 3.3.5
----------------------------------------------------------------------------------------*/

.popover, .tooltip {
    font-family: Segoe UI, Roboto, sans-serif;
    position: absolute;
}

.popover-title {
    font-weight: normal;
}

.form-control-feedback {
    pointer-events: initial;
}


/*----------------------------------------------------------------------------------------
  The section immediately below is required for the drop-down components and comes from
  the bootstrap-chosen library:

    https://github.com/alxlit/bootstrap-chosen
    License: MIT.

  That library provides it's css as a .less file.
  To compile the less file into the css below, use the following steps from
  a command prompt (you'll need git and the lessc compiler (http://lesscss.org):

	git clone https://github.com/alxlit/bootstrap-chosen

	cd bootstrap-chosen

	git clone --depth=1 https://github.com/twbs/bootstrap
 

    lessc bootstrap-chosen.less > bootstrap-chosen.css

  Finally, replace the section below with the contents of bootstrap-chosen.css.

  START OF BOOTSTRAP-CHOSEN SECTION...
----------------------------------------------------------------------------------------*/

.chosen-select {
    width: 100%;
}
.chosen-select-deselect {
    width: 100%;
}
.chosen-container {
    display: inline-block;
    font-size: 14px;
    position: relative;
    vertical-align: middle;
}
.chosen-container .chosen-drop {
    background: #ffffff;
    border: 1px solid #cccccc;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, .25);
    box-shadow: 0 8px 8px rgba(0, 0, 0, .25);
    margin-top: -1px;
    position: absolute;
    top: 100%;
    left: -9000px;
    z-index: 1060;
}
.chosen-container.chosen-with-drop .chosen-drop {
    left: 0;
    right: 0;
}
.chosen-container .chosen-results {
    color: #555555;
    margin: 0 4px 4px 0;
    max-height: 240px;
    padding: 0 0 0 4px;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
    display: none;
    line-height: 1.42857143;
    list-style: none;
    margin: 0;
    padding: 5px 6px;
}
.chosen-container .chosen-results li em {
    background: #feffde;
    font-style: normal;
}
.chosen-container .chosen-results li.group-result {
    display: list-item;
    cursor: default;
    color: #999;
    font-weight: bold;
}
.chosen-container .chosen-results li.group-option {
    padding-left: 15px;
}
.chosen-container .chosen-results li.active-result {
    cursor: pointer;
    display: list-item;
}
.chosen-container .chosen-results li.highlighted {
    background-color: #428bca;
    background-image: none;
    color: white;
}
.chosen-container .chosen-results li.highlighted em {
    background: transparent;
}
.chosen-container .chosen-results li.disabled-result {
    display: list-item;
    color: #777777;
}
.chosen-container .chosen-results .no-results {
    background: #eeeeee;
    display: list-item;
}
.chosen-container .chosen-results .error {
    text-align: center;
    background: #f2dede;
    display: list-item;
}
.chosen-container .chosen-results .loading {
    text-align: center;
    color: #ccc;
    display: list-item;
}
.chosen-container .chosen-results-scroll {
    background: white;
    margin: 0 4px;
    position: absolute;
    text-align: center;
    width: 321px;
    z-index: 1;
}
.chosen-container .chosen-results-scroll span {
    display: inline-block;
    height: 1.42857143;
    text-indent: -5000px;
    width: 9px;
}
.chosen-container .chosen-results-scroll-down {
    bottom: 0;
}
.chosen-container .chosen-results-scroll-down span {
    background: url(/images/83f0ac6f64f2/chosen-sprite.png) no-repeat -4px -3px;
}
.chosen-container .chosen-results-scroll-up span {
    background: url(/images/83f0ac6f64f2/chosen-sprite.png) no-repeat -22px -3px;
}
.chosen-container-single .chosen-single {
    background-color: #ffffff;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 1px solid #cccccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555555;
    display: block;
    height: 34px;
    overflow: hidden;
    line-height: 34px;
    padding: 0 0 0 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}
.chosen-container-single .chosen-single span {
    display: block;
    margin-right: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chosen-container-single .chosen-single abbr {
    background: url(/images/83f0ac6f64f2/chosen-sprite.png) right top no-repeat;
    display: block;
    font-size: 1px;
    height: 10px;
    position: absolute;
    right: 26px;
    top: 12px;
    width: 12px;
}
.chosen-container-single .chosen-single abbr:hover {
    background-position: right -11px;
}
.chosen-container-single .chosen-single.chosen-disabled .chosen-single abbr:hover {
    background-position: right 2px;
}
.chosen-container-single .chosen-single div {
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
}
.chosen-container-single .chosen-single div b {
    background: url(/images/83f0ac6f64f2/chosen-sprite.png) no-repeat 0 7px;
    display: block;
    height: 100%;
    width: 100%;
}
.chosen-container-single .chosen-default {
    color: #777777;
}
.chosen-container-single .chosen-search {
    margin: 0;
    padding: 3px 4px;
    position: relative;
    white-space: nowrap;
    z-index: 1000;
}
.chosen-container-single .chosen-search input[type="text"] {
    background: url(/images/83f0ac6f64f2/chosen-sprite.png) no-repeat 100% -20px, #ffffff;
    border: 1px solid #cccccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    margin: 1px 0;
    padding: 4px 20px 4px 4px;
    width: 100%;
}
.chosen-container-single .chosen-drop {
    margin-top: -1px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
.chosen-container-single-nosearch .chosen-search input {
    position: absolute;
    left: -9000px;
}
.chosen-container-multi .chosen-choices {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    cursor: text;
    height: auto !important;
    height: 1%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.chosen-container-multi .chosen-choices li {
    float: left;
    list-style: none;
}
.chosen-container-multi .chosen-choices .search-field {
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
.chosen-container-multi .chosen-choices .search-field input[type="text"] {
    background: transparent !important;
    border: 0 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #555555;
    height: 32px;
    margin: 0;
    padding: 4px;
    outline: 0;
}
.chosen-container-multi .chosen-choices .search-field .default {
    color: #999;
}
.chosen-container-multi .chosen-choices .search-choice {
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #eeeeee 100%);
    background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #333333;
    cursor: default;
    line-height: 13px;
    margin: 6px 0 3px 5px;
    padding: 3px 20px 3px 5px;
    position: relative;
}
.chosen-container-multi .chosen-choices .search-choice .search-choice-close {
    background: url(/images/83f0ac6f64f2/chosen-sprite.png) right top no-repeat;
    display: block;
    font-size: 1px;
    height: 10px;
    position: absolute;
    right: 4px;
    top: 5px;
    width: 12px;
    cursor: pointer;
}
.chosen-container-multi .chosen-choices .search-choice .search-choice-close:hover {
    background-position: right -11px;
}
.chosen-container-multi .chosen-choices .search-choice-focus {
    background: #d4d4d4;
}
.chosen-container-multi .chosen-choices .search-choice-focus .search-choice-close {
    background-position: right -11px;
}
.chosen-container-multi .chosen-results {
    margin: 0 0 0 0;
    padding: 0;
}
.chosen-container-multi .chosen-drop .result-selected {
    display: none;
}
.chosen-container-active .chosen-single {
    border: 1px solid #66afe9;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}
.chosen-container-active.chosen-with-drop .chosen-single {
    background-color: #ffffff;
    border: 1px solid #66afe9;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}
.chosen-container-active.chosen-with-drop .chosen-single div {
    background: transparent;
    border-left: none;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: -18px 7px;
}
.chosen-container-active .chosen-choices {
    border: 1px solid #66afe9;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}
.chosen-container-active .chosen-choices .search-field input[type="text"] {
    color: #111 !important;
}
.chosen-container-active.chosen-with-drop .chosen-choices {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.chosen-disabled {
    cursor: default;
    opacity: 0.5 !important;
}
.chosen-disabled .chosen-single {
    cursor: default;
}
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
    cursor: default;
}
.chosen-rtl {
    text-align: right;
}
.chosen-rtl .chosen-single {
    padding: 0 8px 0 0;
    overflow: visible;
}
.chosen-rtl .chosen-single span {
    margin-left: 26px;
    margin-right: 0;
    direction: rtl;
}
.chosen-rtl .chosen-single div {
    left: 7px;
    right: auto;
}
.chosen-rtl .chosen-single abbr {
    left: 26px;
    right: auto;
}
.chosen-rtl .chosen-choices .search-field input[type="text"] {
    direction: rtl;
}
.chosen-rtl .chosen-choices li {
    float: right;
}
.chosen-rtl .chosen-choices .search-choice {
    margin: 6px 5px 3px 0;
    padding: 3px 5px 3px 19px;
}
.chosen-rtl .chosen-choices .search-choice .search-choice-close {
    background-position: right top;
    left: 4px;
    right: auto;
}
.chosen-rtl.chosen-container-single .chosen-results {
    margin: 0 0 4px 4px;
    padding: 0 4px 0 0;
}
.chosen-rtl .chosen-results .group-option {
    padding-left: 0;
    padding-right: 15px;
}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
    border-right: none;
}
.chosen-rtl .chosen-search input[type="text"] {
    background: url(/images/83f0ac6f64f2/chosen-sprite.png) no-repeat -28px -20px, #ffffff;
    direction: rtl;
    padding: 4px 5px 4px 20px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
    .chosen-rtl .chosen-search input[type="text"],
    .chosen-container-single .chosen-single abbr,
    .chosen-container-single .chosen-single div b,
    .chosen-container-single .chosen-search input[type="text"],
    .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
    .chosen-container .chosen-results-scroll-down span,
    .chosen-container .chosen-results-scroll-up span {
        background-image: url(/images/02570234a27d/chosen-sprite@2x.png) !important;
        background-size: 52px 37px !important;
        background-repeat: no-repeat !important;
    }
}

/*----------------------------------------------------------------------------------------
  ...END OF BOOTSTRAP-CHOSEN SECTION

  bootstrap-chosen additions
----------------------------------------------------------------------------------------*/

/* Mouse hover color in drop-downs */
.chosen-container .chosen-results li.mouseover {
    background-color: #eeeeee;
    background-image: none;
}

/*----------------------------------------------------------------------------------------
 Stylesheet for re-com.date Date Picker variants inline-picker & dropdown-picker
 Day8 variation loosely based on:
 Copyright 2013 Dan Grossman ( http://www.dangrossman.info )
 Licensed under the Apache License v2.0
 http://www.apache.org/licenses/LICENSE-2.0
 Built for http://www.improvely.com
 http://eternicode.github.io/bootstrap-datepicker

  START OF DATE PICKER SECTION...
----------------------------------------------------------------------------------------*/

.datepicker.single .calendar {
    float: none;
}

.datepicker .calendar {
    display: none;
    max-width: 200px;
}

.datepicker .calendar.single .calendar-date {
    border: none;
}

.datepicker .calendar th, .datepicker .calendar td {
    white-space: nowrap;
    text-align: center;
    min-width: 32px;
}

.datepicker .calendar-date {
    border: 1px solid #ddd;
    padding: 4px;
    border-radius: 4px;
    background: #fff;
}

.datepicker .calendar-time {
    text-align: center;
    margin: 8px auto 0 auto;
    line-height: 30px;
}

.datepicker {
    position: absolute;
    background: #fff;
    top: 100px;
    left: 20px;
    padding: 10px 10px 5px;
    margin-top: 1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    line-height: 16px;
    border-radius: 4px;
}

.datepicker table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
}

.datepicker td, .datepicker th {
    text-align: center;
    width: 27px;
    height: 26px;
    max-width: 27px;
    max-height: 26px;
    min-width: 27px;
    min-height: 26px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 4px;
    cursor: default;
    white-space: nowrap;
    font-weight: normal;
}

.datepicker td.off {
    padding: 4px;
    color: #999;
}

.datepicker td.disabled {
    color: #999;
}

.datepicker th.disabled {
    color: #999;
}

.datepicker td.available:hover, .datepicker th.available:hover {
    background: #eee;
    cursor: pointer;
}

.datepicker td.in-range {
    background: #ebf4f8;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.datepicker td.start-date {
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

.datepicker td.end-date {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.datepicker td.start-date.end-date {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.datepicker td.active, .datepicker td.active:hover {
    background-color: #357ebd;
    border-color: #3071a9;
    color: #fff;
}

/* Introduced by Day8 from http://eternicode.github.io/bootstrap-datepicker */
.datepicker td.today, .datepicker td.today:hover {
    background-color: #ffcd70;
    border-color: #f59e00;
    border-radius: 18px;
    color: #fff;
}

.datepicker th.day-enabled, label.day-enabled {
    font-weight: normal;
    font-size: 10px;
    color: #333;
}

.datepicker th.selectable {
    font-weight: normal;
    color: #357ebd;
}

.datepicker th.day-disabled {
    font-weight: normal;
    font-size: 10px;
    color: #999;
}

.datepicker td.week, .datepicker th.week {
    font-size: 80%;
    color: #ccc;
}


.datepicker th.prev {
    border: 1px solid #ccc;
    border-right-style: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #F7F7F7;
}

.datepicker th.next {
    border: 1px solid #ccc;
    border-left-style: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #F7F7F7;
}

.datepicker th.month {
    width: auto;
    font-size: 14px;
    color: #777;
    border-radius: 0;
    border: 1px solid #CCC;
    border-right-style: none;
    border-left-style: none;
    background-color: #F7F7F7;
}

.dropdown-button {
    cursor: pointer;
    height: 32px;
    font-size: 13px;
    font-weight: normal;
}

.dropdown-button.activator {
    width: 40px;
    color: #777;
    background-color: #F7F7F7
}

/*----------------------------------------------------------------------------------------
  END OF DATE PICKER SECTION...


  CSS THROBBER
----------------------------------------------------------------------------------------*/
@keyframes  blink {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(.5);
        opacity: 0;
    }
}
@-moz-keyframes blink {
    0% {
        -moz-transform: scale(1);
        opacity: 1;
    }
    100% {
        -moz-transform: scale(.5);
        opacity: 0;
    }
}
@-webkit-keyframes blink {
    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(.5);
        opacity: 0;
    }
}

.loader {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin: 20px;
    padding: 0px;
}

.loader li {
    position: absolute;
    display: block;
    border-radius: 4px;
    background-color: #999;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    margin-left: -3px;
    opacity: 0;
    -webkit-animation: blink .8s ease infinite;
    -moz-animation: blink .8s ease infinite;
    animation: blink .8s ease infinite;
}

.loader li:nth-child(1) {
    top: 0%;
    left: 50%;
    -webkit-animation-delay: -.7s;
    -moz-animation-delay: -.7s;
    animation-delay: -.7s;
}

.loader li:nth-child(2) {
    top: 15%;
    left: 85%;
    -webkit-animation-delay: -.6s;
    -moz-animation-delay: -.6s;
    animation-delay: -.6s;
}

.loader li:nth-child(3) {
    top: 50%;
    left: 100%;
    -webkit-animation-delay: -.5s;
    -moz-animation-delay: -.5s;
    animation-delay: -.5s;
}

.loader li:nth-child(4) {
    top: 85%;
    left: 85%;
    -webkit-animation-delay: -.4s;
    -moz-animation-delay: -.4s;
    animation-delay: -.4s;
}

.loader li:nth-child(5) {
    top: 100%;
    left: 50%;
    -webkit-animation-delay: -.3s;
    -moz-animation-delay: -.3s;
    animation-delay: -.3s;
}

.loader li:nth-child(6) {
    top: 85%;
    left: 15%;
    -webkit-animation-delay: -.2s;
    -moz-animation-delay: -.2s;
    animation-delay: -.2s;
}

.loader li:nth-child(7) {
    top: 50%;
    left: 0%;
    -webkit-animation-delay: -.1s;
    -moz-animation-delay: -.1s;
    animation-delay: -.1s;

}

.loader li:nth-child(8) {
    top: 15%;
    left: 15%;
}

.loader.smaller {
    width: 9px;
    height: 10px;
    margin: 7px;
}

.loader.smaller li {
    width: 4px;
    height: 4px;
    margin-top: -2px;
    margin-left: -2px;
}

.loader.small {
    width: 12px;
    height: 12px;
    margin: 10px;
}

.loader.small li {
    width: 4px;
    height: 4px;
    margin-top: -2px;
    margin-left: -2px;
}

.loader.large {
    width: 48px;
    height: 48px;
    margin: 20px;
}

.loader.large li {
    border-radius: 14px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
}

/*----------------------------------------------------------------------------------------
  END OF CSS THROBBER SECTION...


  Bootstrap list-group-item variation (only used in selection-list component)
----------------------------------------------------------------------------------------*/
/* TODO: re-demo CSS */
.compact {
    margin: 0;
    height: 19px;
    white-space: nowrap;
    border: none;
    padding: 0;
    overflow: hidden;
    cursor: default;
    font-size: small;
    text-overflow: ellipsis;
}

/*----------------------------------------------------------------------------------------
  Custom scrollbars
   - http://css-tricks.com/custom-scrollbars-in-webkit
   - http://codemug.com/html/custom-scrollbars-using-css
----------------------------------------------------------------------------------------*/

::-webkit-scrollbar {
    width: 10px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.05);
}
::-webkit-scrollbar:horizontal {
    height:10px;
}
::-webkit-scrollbar:hover {
    background-color:rgba(0,0,0,0.20);
}
::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical {
    background:rgba(0,0,0,0.25);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:horizontal:active, ::-webkit-scrollbar-thumb:vertical:active {
    background:rgba(0,0,0,0.45);
}

/* Color of selected text*/
/*
::-moz-selection { color: gold;  background: red; }
::selection      { color: gold;  background: red; }
*/


/*----------------------------------------------------------------------------------------
  Override bootstrap input text placeholder color (it's too dark)
----------------------------------------------------------------------------------------*/

.form-control::-webkit-input-placeholder {
    color: #bbb;
}

/*----------------------------------------------------------------------------------------
  Override bootstrap warning color (from horrible brown/orange to orange)
----------------------------------------------------------------------------------------*/

.has-warning .form-control {
    border-color: #f57c00;
}

.has-warning .form-control:focus {
    border-color: #f57c00;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(245, 124, 0, 0.6);
}

/* TODO: REMOVE */
.has-warning .form-control-feedback {
    color: #f57c00;
}

.rc-input-text .zmdi-alert-triangle {
    color: #f57c00;
}

.has-error .form-control {
    border-color: #d50000;
}

.has-error .form-control:focus {
    border-color: #d50000;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(213, 0, 0, 0.6);
}

/* TODO: REMOVE */
.has-error .form-control-feedback {
    color: #d50000;
}

/* Override bootstrap green validation */

.has-success .form-control {
    border-color: #13C200;
}

.has-success .form-control:focus {
    border-color: #13C200;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(19, 194, 0, 0.6);
}

.rc-input-text .zmdi-alert-circle {
    color: #d50000;
}

.rc-input-text .zmdi-check-circle {
    color: #13C200;
}

.alert-warning {
    color:            #ea6b00;
    background-color: #ffecdc;
    border-color:     #faebcc;
}

code {
    margin-right:   0.2em;
    border-radius:  4px;
    color:          #333;
    background:     #eee;
    border:         1px solid #ddd;
    padding:        0.1em 0.3em;
}


/*----------------------------------------------------------------------------------------
  Time component
----------------------------------------------------------------------------------------*/

.time-entry {
    flex:          none;
    padding-left:  0.3em;
    padding-top:   2px;
    border:        1px solid #ccc;
    border-radius: 4px 0 0 4px;
    width:         3.3em;
}
.time-entry:last-child {
    border-radius:    4px;
}
.time-icon {
    display:          flex;
    padding:          0 0.3em;
    border:           1px solid #ccc;
    border-left:      none;
    border-radius:    0 4px 4px 0;
    background-color: #ddd;
}

/*----------------------------------------------------------------------------------------
  md-circle-icon-button
----------------------------------------------------------------------------------------*/

.rc-md-circle-icon-button {
    width:               40px;                  /* material design dimensions */
    height:              40px;
    text-align:          center;             /* to horizontally center the icon */
    border:              1px solid lightgrey;
    border-radius:       50%;
    background-color:    inherit;
    opacity:             0.9;
}

.rc-md-circle-icon-button > i {
    font-size  : 24px;
    line-height: 40px;               /* to vertically center in surrounding :div */
    color: inherit;
}

.rc-md-circle-icon-button:hover {
    border: 1px solid #428bca;
    color:  #428bca;
}

.rc-circle-smaller {
    width:  26px;
    height: 26px;
}

.rc-circle-smaller > i {
    font-size:   16px;
    line-height: 24px;
}

.rc-circle-larger {
    width:  56px;
    height: 56px;
}

.rc-circle-larger > i {
    font-size:   24px;
    line-height: 56px;
}

.rc-circle-emphasis {
    border: 1px solid #428bca;
    background-color: #428bca;
    color:  white;
}

.rc-circle-emphasis:hover {
    border: 1px solid #2196f3;
    background-color: #2196f3;
    color:  white;
}

.rc-circle-disabled {
    border: none;
}

.rc-circle-disabled:hover {
    border: none;
}

.rc-circle-disabled > i {
    color: lightgrey;
}

/*----------------------------------------------------------------------------------------
  md-icon-button
----------------------------------------------------------------------------------------*/

.rc-md-icon-button {
    height:              24px;
    font-size:           24px;
    line-height:         24px;
    text-align:          center;             /* to horizontally center the icon */
    background-color:    inherit;
    border-radius:       3px;
}

.rc-md-icon-button > i {
    color: inherit;
}

.rc-md-icon-button:hover {
    color: #2196f3;
}

.rc-icon-smaller {
    height:      16px;
    font-size:   16px;
    line-height: 16px;
}

.rc-icon-larger {
    height:      32px;
    font-size:   32px;
    line-height: 32px;
}

.rc-icon-emphasis {
    background-color: #428bca;
    color:            white;
}

.rc-icon-emphasis:hover {
    background-color: #2196f3;
    color:            white;
}

.rc-icon-disabled > i {
    color: lightgrey;
}

/*----------------------------------------------------------------------------------------
  info-button

  CSS styles below are taken from https://github.com/oakmac/cljs.info...

    The MIT License (MIT)
    Copyright (c) 2014 Chris Oakman and contributors
    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
    to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
    and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
    IN THE SOFTWARE.
----------------------------------------------------------------------------------------*/

.rc-info-button {
    padding-left:        3px;
    padding-right:       3px;
    fill:                #bdbdbd;
}

.rc-info-button:hover {
    fill:  #2962ff;
}

.popover-content .info-heading {
    font-size: 22px;
}

.popover-content .info-subheading {
    font-size: 18px;
    margin-top: 8px;
}

.popover-content .info-bold {
    background-color: #555;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    font-weight: bold;
}

.popover-content a {
    color: #ccf;
}

.popover-content code {
    color: white;
    background-color: #555;
    border: none;
}

/*----------------------------------------------------------------------------------------
  row-button
----------------------------------------------------------------------------------------*/

.rc-row-button {
    text-align:          center;             /* to horizontally center the icon */
    color:               #2167f2; /2196f3;
    background-color:    inherit;
    opacity:             0;
    cursor:              pointer;
}

.rc-row-button > i {
    color: inherit;
}

.rc-row-mouse-over-row {
    opacity: 0.4;
}

.rc-row-button:hover, rc-row-mouse-over-row:hover {
    opacity: 1;
}

.rc-row-disabled {
    opacity: 1;
    color:   lightgrey;
    cursor:  default;
}

/*----------------------------------------------------------------------------------------
  div-table
----------------------------------------------------------------------------------------*/

.rc-div-table {
    flex:   none;
    width:  auto;
    border: 2px solid lightgrey;
    cursor: default;
}

.rc-div-table-header > div {
    background-color: #e8e8e8;
    font-weight: bold;
    padding:     5px;
}

.rc-div-table-row {
    border-top: 1px solid lightgrey;
}

.rc-div-table-row:hover {
    background-color: #f2f2f2;
}

.rc-div-table-row > div {
    padding:     5px;
}

/*----------------------------------------------------------------------------------------
  General Typography
----------------------------------------------------------------------------------------*/

.semibold {
    font-weight: 500;
}
.bold {
    font-weight: 700;
}
.italic {
    font-style: italic;
}
.uppercase {
    text-transform: uppercase;
}
.all-small-caps {
    font-variant: small-caps;
}

.level1 {
    font-family:    Roboto, sans-serif;
    font-weight:    200;
    font-size:      40px;
    color:          rgba(68, 68, 68, 1.0);
    letter-spacing: normal;
    /*-ms-font-feature-settings:    'ss20' 1;*/
}
.level2 {
    font-family:    Roboto, sans-serif;
    font-weight:    200;
    font-size:      26px;
    color:          rgba(0, 0, 0, 1.0);
    letter-spacing: 0.001em;
}
.level3 {
    font-family:    Roboto, sans-serif;
    font-weight:    500;
    font-size:      15px;
    color:          rgba(68, 68, 68, 1.0);
    letter-spacing: 0.002em;
}
.level4 {
    font-family:    Roboto, sans-serif;
    font-weight:    500;
    font-size:      15px;
    color:          rgba(68, 68, 68, 0.6);
    letter-spacing: 0.002em;
}
.field-label {
    font-family:    Roboto, sans-serif;
    font-weight:    400;
    font-size:      14px;
    color:          rgba(68, 68, 68, 0.6);
    letter-spacing: 0.002em;
    font-variant:   small-caps;
    flex:           none;
}

.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*----------------------------------------------------------------------------------------
  Flexbox "display" styles
  Requires 2 display values which we can't represent in a Clojure map
----------------------------------------------------------------------------------------*/

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

.zmdi-hc-fw-rc {
    width: 1em;
    text-align: center;
}

.rc-typeahead-suggestions-container {
    position: absolute;
    width: 100%;
    background-color: #eee;
}

.rc-typeahead-suggestion {
    background-color: #eee;
    padding: 0.4em;
}

.rc-typeahead-suggestion.active {
    background-color: #ddd;
}

.popover-title {
    padding: 6px 12px;
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}

.popover-content {
    padding: 8px 12px;
}

.menu .display-inline-flex {
    display: inline-block;
}
div.group-plan-event-selections {
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    background-color: #f9f9f9;
    padding: 1rem;
    margin: 1rem 0 1rem 0;
}

dt.group-plan-label {
    font-weight: normal;
}

li.day-heading {
       background-color: rgba(253, 198, 0, 0.5);
       border-color: rgba(253, 198, 0, 0.5);
}

span.group-plan-chevron {
    float: right;
}

span.group-plan-chevron svg {
    stroke: rgba(68, 68, 68, 1.0);
}

table.group-plan-table {
    margin: 0 0 48px 0;
}
.calendar {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(7, minmax(50px, 1fr));
    grid-template-rows: 50px;
    grid-auto-rows: 120px;
    overflow: auto;
}
.calendar-container {
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    width: 100%;
    margin-bottom: 64px;

}

.calendar-and-menu-container {
    margin-top: 16px;
}

.calendar-header {
    text-align: center;
    padding: 20px 0;
    background: linear-gradient(to bottom, #fafbfd 0%, rgba(255, 255, 255, 0) 100%);
    border-bottom: 1px solid rgba(166, 168, 179, 0.12);
}
.calendar-header h1 {
    margin: 0;
    font-size: 24px;
}
.calendar-header p {
    margin: 5px 0 0 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(81, 86, 93, 0.8);
}
.calendar-header button {
    background: 0;
    border: 0;
    padding: 0;
    color: rgba(81, 86, 93, 0.7);
    cursor: pointer;
    outline: 0;
}

.day {
    border-bottom: 1px solid rgba(166, 168, 179, 0.2);
    border-right: 1px solid rgba(166, 168, 179, 0.2);
    padding: 4px;
    letter-spacing: 1px;
    font-size: 12px;
    box-sizing: border-box;
    color: #666666;
    position: relative;
    pointer-events: none;
    z-index: 1;
}

div.calendar-date-info {
    display: flex;
    justify-content: space-between;
}

.day:nth-of-type(7n + 7) {
    border-right: 0;
}
.day:nth-of-type(n + 1):nth-of-type(-n + 7) {
    grid-row: 2;
}
.day:nth-of-type(n + 8):nth-of-type(-n + 14) {
    grid-row: 3;
}
.day:nth-of-type(n + 15):nth-of-type(-n + 21) {
    grid-row: 4;
}
.day:nth-of-type(n + 22):nth-of-type(-n + 28) {
    grid-row: 5;
}
.day:nth-of-type(n + 29):nth-of-type(-n + 35) {
    grid-row: 6;
}
.day:nth-of-type(7n + 1) {
    grid-column: 1/1;
}
.day:nth-of-type(7n + 2) {
    grid-column: 2/2;
}
.day:nth-of-type(7n + 3) {
    grid-column: 3/3;
}
.day:nth-of-type(7n + 4) {
    grid-column: 4/4;
}
.day:nth-of-type(7n + 5) {
    grid-column: 5/5;
}
.day:nth-of-type(7n + 6) {
    grid-column: 6/6;
}
.day:nth-of-type(7n + 7) {
    grid-column: 7/7;
}
.day-name {
    font-size: 12px;
    text-transform: uppercase;
    color: #666666;
    text-align: center;
    border-bottom: 1px solid rgba(166, 168, 179, 0.12);
    line-height: 50px;
    font-weight: 500;
}
.day-disabled {
    color: #666666;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f9f9fa' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    cursor: not-allowed;
}

.task {
    border-left-width: 3px;
    padding: 2px 2px;
    border-left-style: solid;
    font-size: 12px;
    position: relative;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    margin-top: -2px;
    align-self: center;
    color: #444444;
}

.calendar-and-menu-container svg {
    stroke: #444;
}

.previous-month {
    float: left;
    margin-left: 24px;
}

.next-month {
    float: right;
    margin-right: 24px;
}

.group-list li {
    padding: 8px 8px 0 8px;
}

.group-plan-pill {
    padding-right: 1em;
    padding-left: 1em;
    font-size: 85%;
}

.day-holiday {
    background-color: rgba(195, 100, 100, 0.10);
}

section.holiday {
    color: rgba(195, 100, 100, 1);
    margin-bottom: 4px;
    overflow: hidden;
    white-space: nowrap;
}



.report-summary {
    margin-top: 16px
}

.statuslogg-table svg {
    stroke: #444;
}

.statuslogg-table td {
    padding: 0.4rem;
}

.statuslogg-table th {
    background-color: #e5ecf0;
    color: #004869;
    position: sticky;
    top: 0;
}

.statuslogg-table {
    overflow: auto;
    height: 80vh;
}

span.sortable {
    cursor: pointer;
}

.purkerapport .table-bordered tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 149, 219, 0.12);
}

.purkerapport .table-bordered td, .table-bordered th {
    border: 1px solid rgba(0, 149, 219, 0.17);
}

.purkerapport table.table-hover tbody tr:hover {
    background-color: rgba(0, 149, 219, 0.25);
}

.purkerapport .table.table-hover tr.aggregated {
    background-color: rgba(0, 149, 219, 0.20);
}

.purkerapport .table-bordered thead th {
    border: 1px solid rgba(0, 149, 219, 0.17);
}

div.rase-spinner {
    width: 200px;
    display: inline-block;
}
svg.spinner {
    animation: 2s linear infinite svg-animation;
    max-width: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@keyframes svg-animation {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg)
    }
}

svg.spinner circle {
       animation: 1.4s ease-in-out infinite both circle-animation;
       display: block;
       fill: transparent;
       stroke: #2f3d4c;
       stroke-linecap: round;
       stroke-dasharray: 283;
       stroke-dashoffset: 280;
       stroke-width: 10px;
       transform-origin: 50% 50%;
}

@keyframes circle-animation {
    0%,
    25% {
        stroke-dashoffset: 280;
        transform: rotate(0);
    }

    50%,
    75% {
        stroke-dashoffset: 75;
        transform: rotate(45deg);
    }

    100% {
        stroke-dashoffset: 280;
        transform: rotate(360deg);
    }
}
.fordelingslinje {
    padding: 12px 0;
    border-top: solid 1px #ccc;
}

.fordelt {
    color: #999;
}

.fordelt svg {
    stroke: #999;
}
.medisin-sok-medisiner {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: white;
    position: absolute;
    z-index: 10;
    min-width: 200px;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
}
.totalmarked-table {
    width: 100%;
}

.totalmarked-table h2:nth-of-type(1) {
    margin-top: 50px;
}

.totalmarked-table th {
    background: #eee;
    padding: 0 5px;
    cursor: pointer;
}

.totalmarked-table td {
    padding: 2px 5px;
}

.totalmarked-table th[colspan] {
    text-align: center;
}

.totalmarked-table th[colspan].totalmarked-table-th-no-center {
    text-align: unset;
}

.totalmarked-table tbody.totalmarked-table-striped td:nth-of-type(odd),
.totalmarked-table tbody.totalmarked-table-striped tr:nth-of-type(odd) {
    background:rgba(0, 0, 0, 0.03);
}


.totalmarked-fleipete-spinner-mouseout {
    animation-name: spin-end;
    animation-duration: 500ms;
}

.totalmarked-fleipete-spinner:hover {
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@keyframes spin-end {
    from {
        transform:rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}
.vaksineplan > .grid-row-wrapper > div {
    background-color: #F9F9F9;
    padding: 2px;
}
/* Satt opp sånn at vi kan bruke det senere */
.nokkeltall-tabell {}


.nokkeltall-tabell tbody tr.brukes:nth-of-type(odd) td {
    background-color: rgba(0, 255, 0, 0.05);
}

.nokkeltall-tabell tbody tr.brukes:nth-of-type(even) td {
    background-color: rgba(0, 255, 0, 0.02);
}

table.nokkeltall-batcher tbody tr.brukes:nth-of-type(odd) td {
    background-color: rgba(0, 255, 0, 0.08);
}

table.nokkeltall-batcher tbody tr.brukes:nth-of-type(even) td {
    background-color: rgba(0, 255, 0, 0.05);
}