@font-face {
    font-family: icons;
    src: url(/fonts/telenet/icons.1684245015372.eot);
    src: url(/fonts/telenet/icons.1684245015372.eot?#iefix) format("embedded-opentype"), url(/fonts/telenet/icons.1684245015372.woff) format("woff"), url(/fonts/telenet/icons.1684245015372.ttf) format("truetype"), url(/fonts/telenet/icons.1684245015372.svg#icons.1684245015372) format("svg");
    font-weight: 400;
    font-style: normal
}

.animation--slide-down-to-screen {
    -webkit-animation: slide-down-to-screen ease-in;
    animation: slide-down-to-screen ease-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: .3s;
    animation-duration: .3s
}

@-webkit-keyframes slide-down-to-screen {
    0% {
        transform: translateY(calc(-100vh - 100%))
    }

    to {
        transform: translateY(0)
    }
}

@keyframes slide-down-to-screen {
    0% {
        transform: translateY(calc(-100vh - 100%))
    }

    to {
        transform: translateY(0)
    }
}


.button:not([class*=section]) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 700;
    text-decoration: none;
    color: var(--semantic-components-button-color-text-primary-default);
    background-color: var(--semantic-components-button-color-background-surface-primary-default);
    font-family: TelenetAlbra-Bold, Helvetica, Verdana, Arial, Sans-serif;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 1.2rem 2.4rem;
    border: .1rem solid transparent;
    border-radius: 1.2rem;
    min-height: 4.8rem;
    min-width: 100%
}

@media only screen and (min-width:36em) {
    .button:not([class*=section]) {
        font-size: 1.8rem;
        line-height: 2.8rem;
        min-height: 4.9rem;
        min-width: 14rem;
        padding: 1.2rem 1.6rem
    }
}

.button:hover:not([class*=section]) {
    cursor: pointer;
    text-decoration: none;
    color: var(--semantic-components-button-color-text-primary-default-hover);
    background-color: var(--semantic-components-button-color-background-surface-primary-hover)
}

.button:focus:not([class*=section]) {
    text-decoration: none
}

.button:active:not([class*=section]) {
    color: var(--semantic-components-button-color-text-primary-default-active);
    background-color: var(--semantic-components-button-color-background-surface-primary-active)
}

.button.button--disabled:not([class*=section]),
.button.button--disabled:not([class*=section]):hover,
.button.disabled:not([class*=section]),
.button.disabled:not([class*=section]):hover,
.button:not([class*=section]):disabled,
.button:not([class*=section]):disabled:hover {
    pointer-events: none;
    opacity: .5;
    color: var(--button__color__button--disabled);
    background-color: var(--button__backgroundcolor__button--disabled)
}

.button.button--primary.button--disabled:not([class*=section]),
.button.button--primary.button--disabled:not([class*=section]):hover,
.button.button--primary.disabled:not([class*=section]),
.button.button--primary.disabled:not([class*=section]):hover,
.button.button--primary:not([class*=section]):disabled,
.button.button--primary:not([class*=section]):disabled:hover {
    color: var(--button--primary__color__button--disabled);
    background-color: var(--button--primary__backgroundcolor__button--disabled)
}

.button.button--fullwidth:not([class*=section]) {
    width: 100%
}

button:focus {
    outline: 0
}

button:focus-visible {
    outline: .5rem auto var(--focus-outline-color) !important
}

.button+.button {
    margin-left: 0;
    margin-top: 1.6rem
}

@media only screen and (min-width:36em) {
    .button+.button {
        margin-top: 0
    }

    .button+.button:not(.button--fullwidth) {
        margin-left: 1.6rem
    }

    .button.button--fullwidth+.button:not(.button--fullwidth) {
        margin-left: 0
    }
}

.link {
    display: inline;
    text-decoration: underline;
    color: var(--link-color);
    text-underline-offset: 0.4rem;
}

.link:hover {
    cursor: pointer;
    text-decoration: none;
    color: var(--link-color--hover)
}

.link.disabled {
    pointer-events: none;
    opacity: .5;
    color: var(--link-color--disabled)
}

.link span {
    vertical-align: middle
}

.form__input {
    display: block;
    box-sizing: inherit;
    border: 0.1rem solid transparent;
    margin-bottom: .4rem;
    padding: 1.2rem 6.4rem 1.2rem 1.2rem;
    width: 100%;
    color: var(--semantic-color-text-default);
    background-color: var(--semantic-color-background-surface-bold-default);
    font-family: TelenetAlbra-Regular, Helvetica, Verdana, Arial, Sans-serif;
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 400;
    border-radius: 1.2rem;
}

.form__input:focus {
    border-color: var(--form__input--focus__border-color);
    outline: 0;
    border-width: .2rem
}

.form__input::-moz-placeholder {
    color: var(--form__input__placeholder__color)
}

.form__input::placeholder {
    opacity: 1;
    color: var(--form__input__placeholder__color)
}

.form__input.disabled,
.form__input:disabled {
    pointer-events: none;
    opacity: 1;
    background-color: var(--form__input--disabled__background);
    color: var(--form__input--disabled__color)
}

.form__input[readonly] {
    opacity: 1;
    background-color: var(--form__input--disabled__background);
    color: var(--form__input--disabled__color)
}

.form__input-container .icon-search {
    color: var(--semantic-color-icon-subtle);
}



.filter-btn {
    border-radius: 1.2rem !important;
    color: var(--semantic-color-text-default);
    border-color: var(--semantic-components-button-color-border-secondary-default) !important;   
}

.form-group.error .form__input,
.form__input.error,
.form__input.ng-dirty.ng-invalid {
    border-color: var(--error-color);
    border-width: .2rem
}

.form-group.error .form__input:focus,
.form__input.error:focus,
.form__input.ng-dirty.ng-invalid:focus {
    border-color: var(--error-color)
}

.form--error {
  font-weight: 700;

}


textarea {
    outline: 0;
    overflow: auto
}

textarea.form__input {
    overflow: hidden;
    resize: none
}

input[type=number] {
    -moz-appearance: textfield
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none
}

label {
    display: inline-block;
    cursor: pointer;
    margin-bottom: .4rem;
    color: var(--form--label--color);
    font-family: TelenetAlbra-Regular, Helvetica, Verdana, Arial, Sans-serif;
    font-size: 1.2rem;
    line-height: 1.6rem;
    font-weight: 400;
    letter-spacing: 0
}

@media only screen and (min-width:48.0625em) {
    label {
        font-size: 1.2rem;
        line-height: 1.6rem;
        letter-spacing: 0
    }
}

@media only screen and (min-width:74.5em) {
    label {
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: 0
    }
}

.sticky-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.6rem;
    font-size: 2.4rem;
    line-height: 3.6rem;
    background-color: #fff
}

.sticky-header .col-12 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.sticky-footer {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 1.5rem;
    z-index: 100;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 -.4rem .8rem 0 var(--shadow--xs)
}

@media only screen and (min-width:48.0625em) {
    .sticky-footer {
        padding: 2rem
    }
}

.tab-bar {
    display: flex;
    overflow: hidden;
    list-style-type: none;
    background-color: transparent;
    text-align: center;
    align-items: stretch;
}

.tab-bar__li {
    width: 100%;
    border-bottom: 0 solid;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
    background-color: #14131214;
    margin-top: 0.4rem;
    font-size: 1.6rem;
    line-height: 2.4rem;
}

@media only screen and (min-width:36em) {
    .tab-bar__li {
        width: 25rem
    }
}

.tab-bar__li a {
    color: #291d18;
    text-decoration: none;
    text-align: center
}

.tab-bar__li.active {
    font-weight: 900;
    border-top: .4rem solid #FAEB50;
    background-color: #fff;
    margin-top: 0rem;
}

.tab-bar__li.active a,
.tab-bar__li.active a.color-text {
    color: #291d18
}

.tab-bar__li--bold {
    margin-right: 4.8rem
}
.tab-bar__li--bold .text-weight--g {
    font-weight: 400;
}

.tab-bar__li--bold:last-child {
    margin-right: 0
}

.tab-bar__li--bold.active {
    border-top: .4rem solid #FAEB50
}

.notification {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 1.6rem;
    margin-bottom: 1rem;
    border-radius: 0;
    background-color: var(--backgroundcolor, transparent);
    border-radius: 1.2rem;
    border: 0.1rem solid var(--bordercolor, transparent);
    backdrop-filter: blur(2.5rem);
    box-shadow: 0 -0.4rem .8rem 0 rgba(20, 19, 18, 0.08);
}

@media only screen and (min-width:36em) {
    .notification {
        flex-wrap: nowrap;
        padding: 1.6rem 2.4rem
    }
}

.notification.notification--info .icon-information:before,
.notification.notification--info .icon-status-info:before {
    content: "\f16c";
    font-family: icons;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: inherit;
    color: var(--coloricon)
}

.notification--success {
    --coloricon: var(--semantic-color-icon-succes);
    --bordercolor: var(--semantic-components-notification-color-border-success);  
    --backgroundcolor: var(--semantic-components-notification-color-background-success);
}

.notification--errorfield {
    --coloricon: var(--semantic-color-icon-error);
    --bordercolor: var(--semantic-components-notification-color-border-error);  
    --backgroundcolor: var(--semantic-components-notification-color-background-error);
}

.notification--info {
    --coloricon: var(--semantic-color-icon-informative);
    --bordercolor: var(--semantic-components-notification-color-border-info);  
    --backgroundcolor: var(--semantic-components-notification-color-background-info);
}

.notification--warning {
    --coloricon: var(--semantic-color-icon-warning);
    --bordercolor: var(--semantic-components-notification-color-border-warning);  
    --backgroundcolor: var(--semantic-components-notification-color-background-warning);
}

.notification span {
    display: flex;
    align-items: flex-start;
    line-height: 2.4rem;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--semantic-color-text-default);
}

@media only screen and (min-width:36em) {
    .notification span {
        font-size: 1.8rem;
        line-height: 2.8rem
    }
}

.notification span a {
    display: inline
}

.notification span.icon:before,
.notification span[class^=icon-]:before {
    display: inline-block;
    align-items: center;
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 400 !important;
    margin: 0 1.6rem 0 0;
    position: relative
}

@media only screen and (min-width:36em) {
    .notification span.icon:before,
    .notification span[class^=icon-]:before {
        font-size: 2.4rem;
        margin: 0 2.4rem 0 0
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 1200
}

@media only screen and (min-width:36em) {
    .overlay {
        position: absolute
    }
}

.overlay__mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--overlay__mask__background);
    z-index: 1006;
    transition: all .3s ease
}

.overlay__section {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1007;
    width: 100%;
    height: 100vh;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: auto;
    justify-content: center
}

.overlay__section__content {
    max-width: 75.2rem;
    margin-left: 1rem;
    margin-right: 1rem;
    background: var(--overlay__section__content__background);
    overflow: auto;
    box-sizing: inherit;
    text-align: center
}

@media only screen and (min-width:36em) {
    .overlay__section__content {
        padding: 3.2rem;
        border-radius: 0;
        box-shadow: 0 2.4rem 6.4rem 0 var(--shadow--l)
    }
}

.overlay__section__content--wrapper {
    position: relative;
    max-width: 75.2rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    padding-bottom: 3.2rem;
    padding-top: 5.6rem;
    background-color: var(--overlay__section__content--wrapper__background-color)
}

@media only screen and (min-width:36em) {
    .overlay__section__content--wrapper {
        flex-basis: 83.33333%;
        max-width: 83.33333%;
        padding-left: 5.6rem;
        padding-right: 5.6rem
    }
}

@media only screen and (min-width:48.0625em) {
    .overlay__section__content--wrapper {
        padding-left: 8rem;
        padding-right: 8rem
    }
}

.overlay__section__content--full-width {
    max-width: 113.2rem
}

.overlay__section__content--page {
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding-top: 5.5rem
}

@media only screen and (min-width:36em) {
    .overlay__section__content--page {
        padding-top: 5rem
    }
}

.overlay__section__content .form-helper,
.overlay__section__content label {
    display: flow-root;
    margin-bottom: 0;
    text-align: initial
}

.overlay__section__content p {
    text-align: unset
}

.overlay__section__content__close {
    position: fixed;
    top: 2.8rem;
    right: 2.8rem;
    left: auto;
    float: inherit;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 1001
}

.overlay__section__content__action .button {
    width: auto;
    flex: 1 1 50%
}

@media only screen and (min-width:36em) {
    .overlay__section__content__action .button {
        width: auto
    }
}

.overlay__section__content__action .button:not(:first-child) {
    margin-top: .6rem
}

@media only screen and (min-width:36em) {
    .overlay__section__content__action .button:not(:first-child) {
        margin-left: .8rem;
        margin-top: 0
    }
}

.overlay--page .overlay__section {
    align-items: normal;
    justify-content: center;
    background: #fff
}

.overlay--page .overlay__section__content {
    margin: auto;
    max-width: 113.2rem;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none
}

.chip--active {
    color: var(--semantic-color-text-default) !important;
    border-color: #141312a3 !important;
}

.chip--active img {
   filter: invert(0) !important;
}