/* Style CSS */
:root {
  --gray-100: #F3F3F3;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-500: #656565;
  --gray-900: #1D1D1B;
  --dark: #002738;
  --black: #000;
  --white: #fff;
  --primary: #64D2EC;
  --primary-100: #D4E6F1;
  --secondary: #223462;
  --secondary-200: #D3E5EA;
  --tertiary: #FF9946;
}

.instant-system-widget {
    margin: 36px 0;
}

.instant-system-widget .is-Widget {
    background-color: rgba(0,0,0,0);
}

.instant-system-widget #is-WidgetResultsArea, 
.instant-system-widget .is-WidgetResultsArea {
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}
@media screen and (max-width: 991px) {
    .instant-system-widget .is-Widget {
        max-width: 87%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width: 767px) {
    .instant-system-widget .is-Widget {
        max-width: 100%;
    }
}

.instant-system-widget .is-Widget-H3 {
    font-family: 'Plus Jakarta Sans',Helvetica,Arial,sans-serif;
    margin-bottom: 24px;
}
.instant-system-widget h2 {
    padding: 0;
}
.instant-system-widget h2::after {
    display: none;
}
/* :::::::::::::::::::::::::::::::::::: 
WIDGET 3 en 1
::::::::::::::::::::::::::::::::::::::: */

/* Onglets */
.instant-system-widget #is-Features-List {
    border-bottom: 1px solid var(--gray-200);
}
.instant-system-widget .is-Features-Tab {
    background-color: var(--gray-100);
}
.instant-system-widget .is-Features-Tab + .is-Features-Tab {
    border-left: 1px solid var(--black);
}
.instant-system-widget .is-Features-Tab-Link {
    padding: 16px 0 0 0;
    color: var(--dark);
    opacity: 1;
}
.instant-system-widget .is-Features-Tab-Link:active, 
.instant-system-widget .is-Features-Tab-Link:focus, 
.instant-system-widget .is-Features-Tab-Link:hover {
    color: var(--tertiary);
}
.instant-system-widget .is-Features-Tab-Text {
    border-color: var(--gray-100);
    padding-bottom: 7px;

    font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}
.instant-system-widget #is-Features-List.is-Feature-List_1, 
.instant-system-widget #is-Features-List.is-Feature-List_2, 
.instant-system-widget #is-Features-List.is-Feature-List_3 {
    margin: 0;
    padding: 0;
}

.instant-system-widget .is-Tab-List-Wrapper {
    margin-bottom: 0;
}

.instant-system-widget .is-Tab-List-Wrapper-C1 {
    padding: 0;
    margin: 0;

    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .instant-system-widget .is-Features-Tab-Text {
        font-size: 1.4rem;
    }
    .instant-system-widget .is-Tab-Content {
        padding-left: 24px;
        padding-right: 24px;
    }
}
/* Onglet actif */
.instant-system-widget .is-Features-Tab.is-active {
    background-color: var(--white);
}
.instant-system-widget .is-Features-Tab.is-active .is-Features-Tab-Link {
    color: var(--tertiary);
}
.instant-system-widget .is-Features-Tab.is-active .is-Features-Tab-Text {
    border-color: var(--tertiary);
}
/* Tab pane */
.instant-system-widget .is-Tab-Content {
    padding-left: 32px;
    padding-top: 15px;
    padding-right: 32px;

    background-color: var(--white);
}
/* Formulaire */
.instant-system-widget .is-LabelInInput {
    box-shadow: 0 0 0 1px var(--gray-300);
}
.instant-system-widget .is-LabelInInput-LabelWrapper {
    color: var(--gray-900);
}
.instant-system-widget #is-JourneyForm .is-LabelInInput-Input {
    color: var(--gray-900);
}
.instant-system-widget #is-JourneyForm .is-LabelInInput-Input::placeholder {
    color: var(--gray-500);
}
.instant-system-widget .is-Autocomplete-Wrapper_Error.is-LabelInInput {
    /* Style pour les erreurs */
}
.instant-system-widget .is-Input[type=text] {
    border-color: var(--gray-300);
}
.is-dropdown-menu a,
.instant-system-widget a {
    text-decoration: none;
}
/* Boutons */
.instant-system-widget .is-Combobox-Button {
    color: var(--dark);
}
.instant-system-widget #is-Journey-ShowAdvancedSearchButton {
    background-color: var(--primary-100);
    border: 1px solid var(--primary-100);
    color: var(--gray-900);
}
.instant-system-widget #is-Journey-AdvancedSearch-Button, 
.instant-system-widget .is-Button_PrimaryGradient,
.instant-system-widget .is-Button_Search {
    background-image: none;
    background-color: var(--gray-900);
    color: var(--white);

    border-radius: 30px;
    border: 1px solid var(--black);
}

.instant-system-widget #is-Journey-AdvancedSearch-Button:active, 
.instant-system-widget #is-Journey-AdvancedSearch-Button:hover, 
.instant-system-widget .is-Button_PrimaryGradient:active, 
.instant-system-widget .is-Button_PrimaryGradient:hover, 
.instant-system-widget .is-Button_Search:active, 
.instant-system-widget .is-Button_Search:hover {
    background-color: var(--white);
    background-image: none;
    color: var(--black)
}
.instant-system-widget #is-TimePreference-Select-Button {
    padding-right: 16px;
}
/* Itinéraire */
.instant-system-widget .is-Journey-Results-Header {
    background-color: var(--secondary);
    background-image: none;

    margin: 0;
}
.is-Disruption-Details-Instructions p {
    font-size: 1.5rem;
}
/* Horaires */
.instant-system-widget #is-Schedule-Results {
    padding: 20px 60px;
}

.instant-system-widget .is-Result-Header {
    background-image: none;
    background-color: var(--secondary);
}

.is-Disruption-Item-Header {
    text-decoration: none;
}

.instant-system-widget .is-LineDirection-Timesheet-Wrapper, 
.instant-system-widget .is-Stoppoint-Timesheet-Wrapper {
    margin: 18px 0 0 0;
}

.instant-system-widget .is-NativeDateInput-Wrapper, 
.instant-system-widget .is-NativeTimeInput-Wrapper {
    border-color: var(--gray-300);
}

.instant-system-widget .is-Autocomplete-Suggestion-Item-BadgeAndText {
    margin-right: 10px;
}

/*
.is-Widget-Max-Width {
    max-width: 100%;
}
*/
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::
Info trafic 
::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Nav tabs */
.instant-system-widget .is-Switch {
    border-radius: 16px;
    border: none;
    height: auto;

    background-color: var(--secondary-200);
}
.instant-system-widget .is-Switch-Item {
    display: inline-flex;

    height: auto;
}
.instant-system-widget .is-Switch-Link {
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0);

    padding: 4px 0;
}
.instant-system-widget .is-Switch-Link:hover {
    border-color: var(--secondary);
}
.instant-system-widget .is-WidgetResults {
    background-color: var(--white);
}
.instant-system-widget .is-Switch {
    border-color: var(--secondary);
}
.instant-system-widget .is-Switch-Link {
    color: var(--secondary);
}
.instant-system-widget .is-Switch-Item.is-active .is-Switch-Link {
    background-color: var(--secondary);
    border-color: var(--secondary);
}
/* Contenu */
.instant-system-widget .is-TrafficInfos-H2 {
    margin-top: 36px;
}
.instant-system-widget  a[data-toggle] {
    display: block;
}
.instant-system-widget .is-Badge:not(.is-Badge_WithImage) {
    display: inline-flex;

    border-radius: 12px;
    border-color: #1D1D1B;
}
.instant-system-widget .is-Badge-Text {
    min-width: 48px;
    height: auto;

    margin: 0;
    padding-left: 12px;
    padding-right: 12px;

    border-radius: 11px 9px 9px 11px;
}
.instant-system-widget .is-Badge-Icon {
    left: 1px;

    height: 100%;

    border-radius: 10px 24px 24px 10px;
}
.instant-system-widget .is-Badge .is-Icon {
    color: #000;
}

.instant-system-widget .is-Badge_WithIconText {
    padding-left: 24px;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::: PAGE D'ACCUEIL
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.home-transport #is-Journey,
.home-transport #is-TrafficInfos,
.home-transport #is-Schedule,
.home-transport #is-WidgetWrapper,
.home-transport .is-WidgetResultsArea {
    max-width: 100%;
    margin: 0;
}

.layout-home .instant-system-widget {
    border-radius: 16px; 
    margin: 0;
}

.layout-home .instant-system-widget .is-Widget {
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.1);
}

.layout-home .instant-system-widget .is-WidgetResults {
    background-color: var(--white);
}

@media screen and (min-width: 992px) {
    .layout-home  .instant-system-widget {
        position: absolute;
        width: 100%;
        /* z-index: 8; */
    }
}
.layout-home #is-TrafficInfos-Results,
.layout-home #is-Schedule-Results {
    max-height: 600px;
    overflow: auto;
}
.layout-home .is-WidgetResultsArea {
    background-color: #fff;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::: Largeur des blocs / container
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
#is-Journey,
#is-TrafficInfos,
#is-Schedule,
#is-WidgetWrapper,
.is-WidgetResultsArea {
    max-width: 1015px;
    margin: 0 auto;
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
LAYOUT DEFAULT 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.layout-default .instant-system-widget {
    display: flex;
    flex-direction: column;
    position: relative;

    margin-left: auto;
    margin-right: auto;

    max-width: 90%;
}
@media screen and (min-width: 1680px) {
    .layout-default .instant-system-widget #is-Schedule-Lines_currents,
    .layout-default .instant-system-widget #is-Schedule-Lines_futures {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 1px;
    }
    .layout-default #is-Schedule-Lines_currents .is-col-lg-4,
    .layout-default #is-Schedule-Lines_futures .is-col-lg-4 {
        padding: 0 10px;
    }
    .layout-default #is-Schedule-Lines_currents .is-row,
    .layout-default #is-Schedule-Lines_futures .is-row {
        margin: 0 -10px;
    }
}
/* Widget Itinéraire */
.layout-default #is-WidgetWrapper {
    width: 100%;
}
@media screen and (min-width: 1400px) {
    .layout-default .instant-system-widget {
        flex-direction: row;
    }
    .layout-default #is-WidgetWrapper {
        width: 42%;
    }
}
/* Widget Horaires */
@media screen and (min-width: 1400px) {
    .layout-default #is-WidgetWrapper_Schedule {
        width: 42%;
    }
}
.layout-default .instant-system-widget #is-Schedule-Results {
    padding: 20px 18px;
}
/* Widget Info Trafic */
.layout-default #is-WidgetWrapper_Traffic {
    width: 100%;
}
/* Carte */
.layout-default #is-MapWrapper {
    height: 450px;
}
@media screen and (min-width: 1400px) {
    .layout-default #is-MapWrapper {
        flex-shrink: 1;

        width: 100%;
        height: 900px;

        margin: 0;
    }
}