/* || GENERAL STYLES */
[v-cloak] {
    display: none;
}

html, body {
    height: 100%;
}

html {
    background-color: #ECF2F4;
}

body {
    font-family: Roboto;
}

/* || UTILITIES */

.table.is-7 {
    width: 70%
}

.table.is-8 {
    width: 80%
}

.is-family-dmsans {
    font-family: "DM Sans"
}

.is-sky-blue {
    color: var(--color-sky-blue);
}

.is-yellow {
    color: var(--color-yellow);
}

.is-size-8 {
    font-size: .70rem !important;
}

.cell-separator-left {
    border-left: 0.0625rem solid #ECF2F4 !important;
}

.cell-separator-right {
    border-right: 0.0625rem solid #ECF2F4 !important;
}

.line-spacing-3 {
    line-height: 2em;
}

.is-grey {
    color: #85989D;
}

.clean {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.clean-module {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.light-opacity {
    opacity: 0.33;
}

.medium-opacity {
    opacity: 0.5;
}

.strong-opacity {
    opacity: 0.75;
}

.title-active {
    text-decoration: underline;
    color: #76AE32;
}

.menu-title {
    color: #8F99A3;
    font-weight: bold;
    font-size: 1em;
    text-transform: uppercase;
}

.menu-links {
    font-weight: bold;
    line-height: 2;
    font-size: 0.9em;
    margin-bottom: 0.9375rem;
}

.notification.is-white {
    background-color: #FFFFFF;
}

.normal-link a {
    text-decoration: underline;
}

.normal-link a:hover {
    color: #76AE32;
    text-decoration: none;
}

.custom-label {
    color: #93A4A8;
}

.sub-container {
    margin: 1em;
}

.is-family-comfortaa {
    font-family: Comfortaa;
}

.custom-title {
    color: var(--color-sky-blue);
    font-family: Comfortaa, Poppins, 'Text Me One', Roboto;
    letter-spacing: 0.0625rem;
    line-height: 3rem;
}

.round-warning {
    height: 1.125rem;
    width: 1.125rem;
    border-radius: 50%;
    display: inline-block;
    background: #FFB818;
    font-size: 0.75em;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.dot {
    height: 0.625rem;
    width: 0.625rem;
    border-radius: 50%;
    display: inline-block;
}

.dot-20 {
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    display: inline-block;
}

.dot-30 {
    height: 1.875rem;
    width: 1.875rem;
    border-radius: 50%;
    display: inline-block;
}

.name {
    min-width: 3.75rem;
    border: none;
    border-radius: 0.625rem;
    margin: 0.25em 0.75em 0.25em 0.75em;
}

.is-green {
    background-color: #76AE32;
    color: #fff;
}

.is-blue {
    background-color: #CCDFFE;
    color: var(--color-sky-blue);
}

.is-black {
    color: #000000;
}

.has-text-red {
    color: #E84236 !important;
}

.has-text-green {
    color: #7CB333 !important;
}

.has-text-grey-100 {
    color: #505b5e !important;
}

.table th.is-5 {
    width: 5%;
}

.table th.is-7 {
    width: 7%;
}

.table th.is-10 {
    width: 10%;
}

.table th.is-15 {
    width: 15%;
}

.table th.is-20 {
    width: 20%;
}

.table th.is-25 {
    width: 25%;
}

.table th.is-30 {
    width: 30%;
}

.table th.is-40 {
    width: 40%;
}

.table th.is-50 {
    width: 50%;
}

.table th.is-60 {
    width: 60%;
}

.table th.is-70 {
    width: 70%;
}

.table th.is-80 {
    width: 80%;
}

.table th.is-90 {
    width: 90%;
}


/* || NAV */
.custom-nav {
    height: 6.25rem;
}

.custom-logo {
    margin-left: 1.25rem;
}

.sidemenu {
    min-height: 100%;
}

.topmenu {
    border-top: 0.25rem solid #76AE32;
    padding-bottom: 0.375rem;
}

.custom-profil {
    width: 9.375rem;
    padding-left: 1.5em; /** 2.5em if logo*/
    padding-top: 0.5em;
}

.nav-bottom {
    height: 0.625rem;
    background: linear-gradient(to top, #ECF2F4 60%, #D0DCDE);
}

.nav-disconnect {
    background-color: #E1E3E6;
    border-radius: 46%;
    background-position: center;
    cursor: pointer;
}

.nav-disconnect:hover {
    background-color: #545A67;
}

.nav-disconnect:hover input {
    filter: brightness(0) invert(1);
}

/* || ICONS */
.simple-icon {
    border: none;
}

.table-legend-map {
    width: 6.25rem;
}

.table-value-map {
    width: 12.5rem;
}

.map-popup {
    width: 20rem;
    border: 0.1875rem solid #787C72;
    border-radius: 0.875rem;
}

.is-underlined {
    text-decoration: underline;
}

.is-size-85 {
    font-size: 0.85rem !important
}

/**********************************************************************************/
/**********************************************************************************/
/************************************* PAGES **************************************/
/**********************************************************************************/
/**********************************************************************************/

/* || PAGE form renewal */
#form-renewal input {
    max-width: 70%;
}

/* || PAGE Diagnosis */
.staff-comparison {
    width: 100%;
    border-bottom: 0.0625rem solid #8F99A3;
}

.staff-comparison td {
    text-align: center;
    border: 0.0625rem solid #8F99A3;
}

.staff-comparison th {
    text-align: center;
}

.staff-comparaison-title {
    background-color: #93C47D;
    color: #FFFFFF;
    font-weight: bold;
}

.staff-comparison td:not([align]), .staff-comparison th:not([align]) {
    text-align: center;
}

.lessThan20min {
    font-family: Comfortaa, Poppins, 'Text Me One', Roboto;
    color: #76AE32;
}

.between20and40min {
    font-family: Comfortaa, Poppins, 'Text Me One', Roboto;
    color: #FFC654;
}

.between40and59min {
    font-family: Comfortaa, Poppins, 'Text Me One', Roboto;
    color: #E87701;
}

.greaterEquals60min {
    font-family: Comfortaa, Poppins, 'Text Me One', Roboto;
    color: #DB2D1B;
}

.population-face {
    width: 18%;
}

/* || PAGE Workplace main page */
.module .pastille {
    position: relative;
    top: 3.125rem;
    left: 8.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #DB2D1B;
    color: #fff;
    font-size: 1em;
    text-align: center;
    padding-top: 0.5rem;
}

/* || PAGE Data Visualization */
.map-legend {
    text-align: center;
    font-weight: bold;
    font-size: 0.75em;
}

.star {
    color: #76ae32;
}

.circle {
    color: #c0ba1d;
}

.square {
    color: #e87701;
}

.diamond {
    color: #db2d1b;
}

.triangle {
    color: #610900;
}

.table-alternatives {
    border: 0;
}

.table-alternatives-top td {
    border: 0;
}

.icon-green {
    color: #7DB33A;
}

.table-alternative-road-background {
    background-color: #EEEEEE;
}

.table-alternatives-road {
    border-bottom: 0.625rem solid #999999;
}

.alternativess-type {
    text-align: center;
}

.parking {
    background-color: #1155CC;
    color: white;
}

.worksplace-table, .staff-table {
    border-radius: 0.6em;
}

.worksplace-table thead tr th, .staff-table thead tr th {
    height: 3em;
    vertical-align: middle;
}

.worksplace-table tbody tr td {
    height: 4.5em;
    vertical-align: middle;
}

.staff-table tbody tr td {
    height: 2em;
    vertical-align: middle;
}

.worksplace-table .cells, .staff-table .cells {
    color: #93A4A8;
}

.worksplace-table .option, .staff-table .option {
    color: var(--color-sky-blue);
}

.worksplace-table .name, .staff-table .name {
    width: 45%;
}

.worksplace-table .metadata, .staff-table .metadata {
    width: 30%;
}

.worksplace-table .action, .staff-table .action {
    width: 15%;
}

.worksplace-table .link, .staff-table .link {
    width: 25%;
}

#diagnosis-bar {
    background: linear-gradient(to top, white 85%, #ECF2F4);
    min-height: 6.875rem;
    border-radius: 0.6em;
}

#diagnosis-bar .diagnosis-bar-top {
    padding: 0.5em 1.5em;
}

.diagnosis-bar-top {
    min-height: 4.8494rem;
}

#diagnosis-bar-top-back {
    color: #93A4A8;
    padding-top: 1.3em;
}

#diagnosis-bar-top-back a {
    color: #93A4A8;
}

#diagnosis-bar-top-back a:hover {
    color: #76AE32;
}

#diagnosis-bar-top-title {
    padding: 0.8em;
}

.diagnosis-link {
    padding-left: 1.5em;
}

.export-data {
    padding-right: 0.8em;
}

.diagnosis-link span:hover {
    border-bottom: 0.1875rem solid #76AE32;
    padding-bottom: 0.0625rem;
}

.diagnosis-link-active {
    color: #76AE32;
    border-bottom: 0.1875rem solid #76AE32;
    padding-bottom: 0.0625rem;
}

.border-bottom-line {
    border-bottom: 0.0625rem solid #ECF2F4;
}

.distance-1 {
    color: #7CB333 !important;
}

.distance-2 {
    color: #8CA434 !important;
}

.distance-3 {
    color: #A98634 !important;
}

.distance-4 {
    color: #DA5336 !important;
}

.distance-5 {
    color: #E84236 !important;
}

.duration-1 {
    color: #7CB333 !important;
    font-weight: bold;
}

.duration-2 {
    color: #8CA434 !important;
}

.duration-3 {
    color: #A98634 !important;
}

.duration-4 {
    color: #DA5336 !important;
}

.duration-5 {
    color: #E84236 !important;
}

/** Temporary work around**/
.icon-legend {
    height: 2.8125rem;
}

.turnover-text {
    padding: 0 2.5rem 0 2.5rem;
}

#data-map {
    background: #fff;
}

.calendar-box {
    padding: 0;
}

.calendar-box {
    margin-bottom: 0.2rem !important;
}

.app-map {
    height: 100%;
}

.custom-container {
    height: 88%;
    max-height: 88%;
    display: flex;
    flex-direction: column;
    flex: 0;
}

#map-container {
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
}

#data-map {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0rem;
    background-color: #ECF2F4;
    margin-left: 0.625rem;
}

/**
Data Visualisation
**/
#data-viz-map {
    height: 50rem;
}

#data-viz-map-flexible {
    flex: 1 1 auto;
    height: 100%;
}

.label-day {
    border-radius: 0.625rem;
    color: #fff;
    background-color: var(--color-sky-blue);
    font-family: Comfortaa;
}

.action-column {
    flex: 0 0 3.125rem;
}

.working_hours {
    border: none;
    border-radius: 0.625rem;
    margin: 0.25em 0 0.25em 0;
}

.custom-box {
    margin-bottom: 0.50em !important;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
}

#container-workinghours {
    overflow: visible;
    overflow-x: hidden;
    height: 100%;
}

.circle-text {
    margin: auto;
    width: 18.75rem;
    height: 18.75rem;
    background-color: #55827D;
    border: 0.5rem solid #ECF2F4;
    display: block;
    border-radius: 50%;
    padding-top: 6.25rem;
}

.circle-text-parking {
    margin: auto;
    width: 18.75rem;
    height: 18.75rem;
    background-color: #1155CC;
    border: 0.5rem solid #ECF2F4;
    display: block;
    border-radius: 50%;
    padding-top: 7.5rem;
}


.diagnosis-table {
    margin-top: 1.25rem;
    box-sizing: border-box;
    border-collapse: inherit;
    border-radius: 0.6em;
    border: 0.0625rem solid #B3C4C9;
    color: #0D2C54;
    font-size: 1rem;
    font-family: "DM Sans";
    font-weight: 590;
}

.diagnosis-table thead th {
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.diagnosis-table tr, .diagnosis-table tr > td {
    border-collapse: collapse;
    border-spacing: 0rem;
}

.diagnosis-table tbody tr:nth-child(odd) {
    background-color: #ECF2F4;
}

.diagnosis-table tr > td {
    color: #0D2C54;
    border: none;
}

.diagnosis-table tr > th {
    color: #85989D;
    border: none;
}

.current-travel-mode {
    background-color: #F3F5F5; /** #ECF2F4;**/
}

.diagnosis-table-max-width-cells {
    max-width: 17.5rem;
}


/* || PAGE DIAGNOSIS */
.chart-table {
    width: 50%;
    margin: auto;
}

#diagnosis-distance-worldtour-text-container {
    padding-top: 2.5rem;
}

#diagnosis-distance-worldtour {
    background-image: url("../assets/images/diagnosis/earth_worldtour.png");
    height: 18.625rem;
    width: 19.75rem;
}

#diagnosis-distance-worldtour .lap {
    margin: auto;
    width: 19.75rem;
    padding-top: 9.0625rem;
    text-align: center;
    vertical-align: middle;
    font-family: Comfortaa, Poppins, 'Text Me One', Roboto;
    font-size: 8em;
    font-weight: bold;
    color: #fff;
}

.lap-text {
    margin-top: 0.625rem;
    padding-left: 3.125rem;
    text-transform: uppercase;
    font-size: 1.4em !important;
    font-family: Comfortaa, Poppins, 'Text Me One', Roboto;
}

.diagnosis-text {
    color: #85989D;
    font-family: "DM Sans";
    font-size: 0.9em;
    line-height: 1.5rem;
}

.diagnosis-average-duration-background {
    width: 15.625rem;
    height: 18.5rem;
}

#diagnosis-average-duration-background-content {
    position: relative;
    top: 9.375rem;
}

.diagnosis-central-value {
    color: #fff;
    font-family: Comfortaa, Poppins, 'Text Me One', Roboto;
    font-weight: bold;
}

.diagnosis-main-value {
    font-size: 6em;
}

.diagnosis-main-value-unit {
    font-size: 2em;
}

.carbon-footprint-data {
    padding-top: 2.5rem;
}

#carbon-footprint-background {
    margin: auto;
    background-image: url("../assets/images/diagnosis/impact_trajets.png");
    height: 21.4375rem;
    width: 24.9375rem;
}

#carbon-footprint-employee-background {
    background-image: url("../assets/images/diagnosis/impact_salarie.png");
    height: 21.5625rem;
    width: 24.9375rem;
}

#carbon-footprint-background-content {
    position: relative;
    top: 8.75rem;
    left: 5.3125rem;
}

#carbon-footprint-background-content-value {
    font-size: 4em;
}

#carbon-footprint-background-content-unit {
    font-size: 1.8em;
}

#carbon-footprint-comment {
    width: 15.625rem;
    position: relative;
    top: 10.625rem;
    left: 15rem;
}

#carbon-footprint-employee-comment {
    width: 15.625rem;
    position: relative;
    top: 10.625rem;
    left: 1.25rem;
}

.cancel-margin-bottom {
    margin-bottom: 0rem !important;
}

.cancel-margin-bottom .message-header {
    background-color: #85989D !important;
}

#alternative-distance-svg {
    margin-left: 3.125rem;
}

.separate {
    border-right: 0.0625rem solid #85989D;
}

.is-block-centered {
    margin: auto;
}


.custom-btn-container, .custom-btn-employee-container {
    display: flex;
    justify-content: center;
    width: 10rem;
    padding: 0.3125rem;
    border-radius: 624.9375rem;
    box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, .1), 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, .06)
}

.custom-btn-employee-container {
    width: 24.375rem;
}

.border-none {
    border: none;
}

.workplaces-map-container {
    height: calc(100% - 5.3125rem);
}

.workplace {
    padding: 0.5em;
    font-family: "DM Sans";
}

.workplace:hover {
    cursor: pointer;
}

.is-sky-blue {
    color: var(--color-sky-blue);
}

.custom-breadcrumb {
    font-family: "DM Sans";
}


.employee-map-container {
    height: calc(100% - 10.625rem);
}

.list-legend {
    font-family: "DM Sans";
}

.geovelo-box {
    width: 20rem;
    height: 4.375rem;
    background-color: #659F4A;
    color: #ffffff;
    font-family: 'Fira Sans'
}

.geovelo-box:hover {
    color: #ffffff;
}

.geovelo-box a {
    color: #ffffff;
}

#employee-profile-container {
    border-radius: 1.5em;
}

.workplace-menu {
    li {
        border-radius: 0 10px 10px 0;
        background-color: var(--color-white);

        a {
            color: var(--color-grey-50);
        }
    }

    li.active {
        background-color: var(--color-green-default);

        a {
            color: white;
        }
    }
}


.custom-rounded {
    display: inline-flex;
    border-radius: 290486px;
    padding-bottom: calc(0.5em - 0.0625rem);
    padding-top: calc(0.5em - 0.0625rem);
    padding-left: calc(1em + 0.25em);
    padding-right: calc(1em + 0.25em);
}

.has-background-geovelo {
    background-color: #659F4A;
}

.has-border-grey {
    border: 0.0625rem solid #dbdbdb;
}

.mobility-plan-container {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.mobility-plan-icon {
    display: block;
    text-align: center;
    vertical-align: middle;
}

.has-background-mode {
    background-color: #DDEBCC;
}

.has-background-distance {
    background-color: #F9DDC0;
}


.has-border-mode:hover {
    border: 0.0625rem solid #DDEBCC;
}


.has-border-distance:hover {
    border: 0.0625rem solid #F9DDC0;
}


.reset:hover {
    color: inherit;
}


.is-title-4 {
    color: var(--color-sky-blue);
    font-family: Comfortaa, Poppins, 'Text Me One', Roboto;
    letter-spacing: 0.0625rem;
    line-height: 3rem;
}

.is-title-5 {
    font-family: "DM Sans";
}

.table-header-label {
    font-family: "DM Sans";
    color: #85989d !important;
}

.has-sorting:hover {
    cursor: pointer
}

.custom-table {
    font-family: "DM Sans";
}

.table-search-line {
    background-color: #f3f5f5;
}

.top-cities {
    min-height: 26.25rem;
}

.legend {
    font-family: "DM Sans";
    color: #505b5e;
}

.custom-box {
    min-height: 12.5rem;
    box-shadow: 0 0.0625rem 0.1875rem 0 rgb(0 0 0 / 10%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 6%);
}

.is-fluid-dashboard {
    padding-left: 3.125rem !important;
    padding-right: 3.125rem !important;
}

.header-menu {
    font-family: "DM Sans";
}

.custom-working-hour-box {
    margin-bottom: 0.50em !important;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    box-shadow: 0 0.0625rem 0.1875rem 0 rgb(0 0 0 / 10%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 6%);
}


.info-map-legend {
    padding: 0.375rem 0.5rem;
    font: 0.875rem/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0.9375rem rgba(0, 0, 0, 0.2);
    border-radius: 0.3125rem;
}

.adjust-legend-icon {
    top: 0.0625rem;
}


.employee-popin, .workplace-popin {
    font-family: Comfortaa, Poppins, 'Text Me One', Roboto;
    letter-spacing: 0.0313rem;
    width: 17.5rem;
    border: 0rem solid #787C72;
}

.employee-popin-link a {
    color: #000 !important;
    text-decoration: underline;
}

.employee-popin-link a:hover {
    color: #000 !important;
    text-decoration: none;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/** Workplace Swapping CSS **/

.workplaces-swapping-container {
    height: 12.5rem;
}

.workplaces-swapping-group-container {
}

.workplaces-swapping-table {
    border-collapse: separate;
    border-spacing: 0 0.25rem;
    background-color: inherit;
}


.workplaces-swapping-table > thead {
    background-color: #E5EBED;
}

.workplaces-swapping-table thead > tr > th {
    background-color: #E5EBED;
    border: none;
    font-family: "DM Sans";
    height: 3.125rem;
    vertical-align: middle;
    letter-spacing: 0.12em;
}

.workplaces-swapping-savings-column {
    color: #f7f8fa !important;
    background-color: #76AE32 !important;
}

.workplaces-swapping-table tbody > tr > td {
    font-family: "DM Sans", Comfortaa, Poppins, 'Text Me One', Roboto;
    height: 3.75rem;
    vertical-align: middle;
}

.is-grey-header {
    color: #85989d !important;
}

.rows {
    color: #324348;
    background-color: white;
}

.rows:hover {
    background-color: #e9edf5;
    cursor: pointer;
}

.workplaces-swapping-table thead:after {
    content: '';
    display: block;
    height: 0.3125rem;
    background-color: #ECF2F4;
}


.col-left-radius {
    border-radius: 0.5em 0 0 0.5em;
}

.col-right-radius {
    border-radius: 0 0.5em 0.5em 0;
}

.hide {
    display: none;
}

.rows:hover .hide {
    display: inline;
}


.div-rows {
    vertical-align: center;
    font-family: "DM Sans", Comfortaa, Poppins, 'Text Me One', Roboto;
}

.row-is-rounded {
    border-radius: 0.5em;
}

.rows-content {
    vertical-align: center;
}

.header-has-background-grey {
    background-color: #E5EBED !important;
}

.table-header {
    font-family: "DM Sans";
    vertical-align: middle;
    letter-spacing: 0.12em;
}


.tag:not(body).is-neutral {
    background-color: #e9edf5;
    color: #464f60;
}


.workplaces-swapping-group-data-table {
    font-family: "DM Sans";
    font-size: 0.875rem;
    color: #324348;
    border-collapse: separate;
    border-spacing: 0 0.25rem;
    border-bottom: 0.0938rem #f3f7fb solid;
}

.workplaces-swapping-group-data-table > thead {
    background-color: #f3f7fb;
    border: none;
    text-align: right;
}

.workplaces-swapping-group-data-table > tbody {
    text-align: right;
}

.workplaces-swapping-group-data-table th, .workplaces-swapping-group-data-table td {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.align-left {
    text-align: left !important;
}

.workplaces-swapping-group-data-table > thead > tr > th {
    border: none;
    font-weight: 500;
}

.workplaces-swapping-group-data-table > tbody > tr > td {
    border-bottom: 0.0938rem #f3f7fb solid;
}

.row-is-bold {
    font-weight: 500;
}


.tag:not(body).is-higher {
    background-color: #edfdf3;
    color: #017a47;
}

.tag:not(body).is-lower {
    background-color: #fdeded;
    color: #ef5466;
}


.workplace-swap-group-map {
    height: 50rem;
}

.workplace-swap-group-border {
    border-bottom: 0.0938rem #f3f7fb solid;
}

.workplace_swap_group_link:hover {
    background-color: #e9edf5;
    cursor: pointer;
}

.svg-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.container.is-almost-fluid {
    max-width: none;
    padding-left: 0rem;
    padding-right: 0rem;
    width: 80%;
}


.is-blue-transparent {
    background-color: rgba(46, 169, 232, 0.1);
}

.is-green-transparent {
    background-color: #9FC670;
}


.stack-green {
    background-color: #76AE32;
    height: 3.125rem;
    padding-top: 0.75rem;
}

.stack-light-green-2 {
    background-color: #DCEACA;
    height: 2.8125rem;
    padding-top: 0.625rem;
}

.stack-green-2 {
    background-color: #76AE32;
    height: 2.8125rem;
    padding-top: 0.625rem;
}

.stack-gray {
    background-color: #D9D9D9;
    height: 3.125rem;
    padding-top: 0.625rem;
}

.stack-gray-2 {
    background-color: #D9D9D9;
    height: 2.8125rem;
    padding-top: 0.625rem;
}

.button-size-30 {
    padding: 1.875rem;
}


.fmd-rounded {
    display: inline-flex;
    border-radius: 0.9375rem;
    padding-bottom: calc(0.5em - 0.0625rem);
    padding-top: calc(0.5em - 0.0625rem);
    padding-left: calc(1em + 0.25em);
    padding-right: calc(1em + 0.25em);
}

.fmd-rounded-legend {
    height: 4.375rem;
}

.has-background-red-danger {
    background-color: #FF5C50;
}

.has-background-green {
    background-color: #76AE32;
}

.mobility-plan-block-rounded {
    display: inline-flex;
    border-radius: 0.9375rem;
    padding-bottom: calc(0.5em - 0.0625rem);
    padding-top: calc(0.5em - 0.0625rem);
    padding-left: calc(1em + 0.25em);
    padding-right: calc(1em + 0.25em);
}

.green-block {
    line-height: 0.9375rem;
    padding-top: 0.3125rem;
    height: 3.75rem;
    margin-bottom: 0.625rem;
}

.height-5 {
    height: 3.125rem;
}

.height-10 {
    height: 6.25rem;
}

.height-12 {
    height: 7.5rem;
}

.custom-column-content {
    padding: 0.625rem
}

.custom-title-spacing-1 {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}


.has-background-custom-grey {
    background-color: #EDEDED;
}


.dashedline {
    border: 0.0625rem dashed #000000;
}

.transit-plan-green-section {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    border-radius: 2.1875rem;
}

/** Search bar**/
.search-bar {
    min-height: 4.375rem;
    background-color: #E4EBED;
}

.custom-search-input {
    border-color: #687182;
    border-radius: 0.6em;
}

/** Table V2  **/

.custom-table-v2 {
    border-radius: 1em;
    margin-bottom: 1.875rem;
}

.custom-table-v2 > thead > tr {
    height: 3.75rem;
}

.custom-table-v2 > thead > tr > th {
    font-size: 0.75em;
    text-transform: uppercase;
    color: #687182;
    text-align: center;
    background-color: #E4EBED;
    border-bottom: none;
}

.custom-table-v2 > thead > tr > th .header-title {
    width: 80%;
    float: left;
}

.custom-table-v2 > thead > tr > th .header-sorting {
    float: right;
}

.custom-table-v2 > tbody > tr {
    height: 5rem;
    color: #687182;
}

.custom-table-v2 > tbody > tr > td {
    padding-top: 0.625rem;
    font-size: 0.90em;
    border-bottom: 0.0625rem solid #F7F9FA
}

.left-corner {
    border-top-left-radius: 1em;
}

.right-corner {
    border-top-right-radius: 1em;
}

.small-text {
    font-size: 0.75em;
    color: #AFAFAF;
}

.transit-dot {
    padding-top: 0.4375rem;
    border-radius: 50%;
    width: 1.875rem;
    height: 1.875rem;
    display: inline-block;
}


.copytoclipboard-tooltip:hover {
    cursor: pointer;
}


.copytoclipboard-tooltip .tooltiptext {
    visibility: hidden;
    width: 8.75rem;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 0.375rem;
    padding: 0.3125rem;
    position: absolute;
    z-index: var(--z-index-component);
    bottom: 150%;
    left: 50%;
    margin-left: -4.6875rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.copytoclipboard-tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -0.3125rem;
    border-width: 0.3125rem;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.copytoclipboard-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.navbar a:hover {
    color: var(--color-sky-blue);
}

.navbar-menu .navbar-end {
    width: 100%;
    margin-left: unset;
}

.new-feature-tag {
    background-color: #FFF3D6;
    color: #F8B81B;
    padding:0.3125rem 0.625rem 0.3125rem 0.625rem;
    font-weight:700;
    border-radius: 0.3125rem;
}

.perimeter-warning {
    border: 2px solid var(--color-red-default);
    border-radius: 20px;
    background-color: #FADFDD;

    svg {
        stroke: var(--color-red-default);
    }

    .perimeter-message {
        color: #545A67;
    }

    a {
        color: var(--color-green-default);
    }
}