html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
dl,
dt,
dd,
ol,
ul,
li,
table,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
footer,
header,
section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
}

/* HTML5 display-role reset for older browsers */
body {
    line-height: 1;
    font-size: 12px;
}

ol,
ul {
    list-style: none;
}

html,
body {
    height: 100%;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

html,
body,

.row,
.column {
    height: auto;
}

/* font */
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?c8m22a');
    src: url('fonts/icomoon.eot?#iefixc8m22a') format('embedded-opentype'),
        url('fonts/icomoon.woff?c8m22a') format('woff'),
        url('fonts/icomoon.ttf?c8m22a') format('truetype'),
        url('fonts/icomoon.svg?c8m22a#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-info:before {
    content: "\e600";
}

.icon-faves:before {
    content: "\e601";
}

.icon-star-empty:before {
    content: "\e602";
}

.icon-chart-column:before {
    content: "\e603";
}

.icon-mobile:before {
    content: "\e604";
}

.icon {
    margin-right: 0.917em;
}

/* Bootstrap overrides*/
.row,
.container-fluid {
    padding: 0;
    margin: 0;
}

.column {
    padding-left: 0;
    padding-right: 0;
}

/* Nav section */
#nav-section {
    background-color: #35373d;
    width: 220px;
    float: left;
    height: 100%;
}

#nav-section li {
    border-bottom: 1px solid #4a4b51;
    white-space: nowrap;
    font-size: 11px;
    line-height: 11px;
}

#nav-section li a {
    color: #b8bbc2;
    text-transform: uppercase;
    text-decoration: none;
    margin-left: 1em;
    font-size: 12px;
    padding: 3em 1.2em;
}

#nav-section li:hover {
    background-color: #212329;
}

#nav-section li.active {
    background-color: #0d1016;
}

.nav>li>a:hover,
.nav>li>a:focus {
    background: none;
}

#dash-logo {
    color: #fff;
    background-color: #1996e4;
    text-align: center;
}

#sidebar-nav {
    padding: 0;
}

#rights {
    color: #848690;
    font-size: 10px;
    position: absolute;
    bottom: 10px;
    left: 15px;
}

/* Toggle button */

#toggle-button {
    margin-top: 27px;
    border: none;
}

#toggle-button:hover,
#toggle-button:focus {
    background-color: transparent;
}

#toggle-button .icon-bar {
    background-color: #fff;
}

/* Misc */

.box-specs {
    margin-left: 20px;
    margin-right: 20px; 
}

.custom-border {
    border-top: #b8bbc2 solid 1px;
}

.bottom-border {
    border-bottom: #b8bbc2 solid 2px;
}

.top-border, .top-border-inside {
    border-top: #b8bbc2 solid 2px;
}

.hidden, .full-hidden {
    display: none !important;
}

/* Loader */

#loader {
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: rgba(38, 39, 115, 0.50);
    z-index: 1000000;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

#loader-modal {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(38, 39, 115, 0.50);
    z-index: 1000000;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

.loader {
    border: 16px solid #f3f3f3;
    /* Light grey */
    border-top: 16px solid #a2c617;
    /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -76px 0 0 -76px;
    z-index: 1000001;
    background-color: rgba(162, 198, 23, 0.50);
}

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

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

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

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

/* Header */

header {
    background-color: #262773;
    height: 70px;
    padding: 10px 20px;
    width: auto;
}

header > div {
    width: 100%;
    height: 100%;
    display: inline;
}

header > div > span {
    height: 100%;
}

header > div.container-fluid > div.row > span.title {
    text-align: left;
}

header > div.container-fluid >div.row > span.logo {
    text-align: right;
}

header > div.container-fluid > div.row > span > h3 {
    color: white;
    font-size: calc(12px + 1vw);
    height: 100%;
    margin-top: 8px;
    cursor: default;
}

div.abonnements-container,
div.top-part-container {
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
}

div.top-part {
    width: 100%;
    display: inline-block;
    /*margin-bottom: 10px;*/
}

div.top-part > span {
    display: inline-block;
    height: 50px;
}

div.top-part > span.sub-title {
    text-align: left;
    line-height: 50px;
    vertical-align: middle;
    float: left;
 }

div.top-part > span.sub-title > h3 {
    color: #262773;
    border-left: #262773 solid 12px;
    padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

/*div.supplements div.reset-btn {
    text-align: right;
    height: 100%;
    float: right;
}

div.supplements div.reset-btn,
div.supplements div.archives-btn {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

div.supplements div.reset-btn > button {
    font-size: 15px;
    font-weight: bold;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    padding: 10px 10px;
}

div.supplements div.reset-btn > button > span.reset-label {
    margin-right: 10px;
}*/

/* Main Part Misc */

div.main-part-container {
    /*padding-top: 15px;*/
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Main Part => Queries */

.queries-title {
    color: #00a4e2;
    font-size: 16px;
    width: auto;
    display: inline-block;
    cursor: default;
    margin-bottom: 5px;
}

[id^='data-queries-'] {
    padding-top: 15px;
    padding-bottom: 0px;
}

[id^='data-queries-'] > 
span.k-colorpicker,
span.k-combobox,
/*span.k-datepicker,
span.k-datetimepicker,
span.k-dropdown,*/
span.k-dropdowntree,
span.k-numerictextbox,
span.k-timepickere {
    margin-top: 10px;
}

[id^='data-queries-'] > span.k-input {
    width: 100%;
}

.queries-date-area > span, .queries-date-area > div {
    padding: 0px;
}

.datepicker-info {
    display: flex;
    align-items: center;
}

/* Main Part => Data Queries */

#data-queries-date span.queries-selector {
   width: 100%;
   display: inline-block;
}

#data-queries-date > .row   {
    height: 100%;
}

#datepicker-info {
    font-size: 22px;
    font-style: italic;
    vertical-align: -moz-middle-with-baseline;
    vertical-align: -webkit-baseline-middle;
    color: #a2c617;
    cursor: help;
}

.area-infos {
    font-size: 11px;
    font-style: italic;
    display: block;
    text-align: left;
}

/* Main Part => Geodata Queries */

#geodata-queries span.queries-selector > ul > li {
    margin: 20px 0 5px 0;
}

#geodata-queries span.queries-selector > ul > li > div {
    margin-top: 10px;
    margin-bottom: 10px;
}

#data-queries-pathogens, #data-queries-products {
    padding-top: 5px;
    padding-bottom: 10px;
}

/* Results/Reco Part */

a {
    color: rgb(51, 51, 51);
    text-decoration: underline rgb(51, 51, 51);
}

a:hover,
a:focus {
    color: black;
}

[id^='result_'] > ul > li {
    list-style: none;
    margin-bottom: 5px;
}

#results-summary {
    color: #00a4e2;
    font-size: 18px;
    align-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

div.results {
    /*max-height: calc(55vh - 75px);
    min-height: calc(55vh - 75px);
    height: calc(55vh - 75px);*/
    max-height: 55vh;
    min-height: 55vh;
    height: 55vh;
}

span.no-results {
    display: block;
    color: #00a4e2;
    width: 100%;
    text-align: center;
    padding: 10px;
}

div.recommandation {
    max-height: 85vh;
    min-height: 85vh;
    height: calc(84vh - 18px);
    border: #b8bbc2 solid 2px;
    padding: 10px;
}

div.results,
div.recommandation>div.scrollThis {
    overflow-y: auto;
    scrollbar-width: thin;
    margin: 2px 0px;
}

div.recommandation>div.scrollThis {
    height: calc(100% - 35px);
}

div.supplements > div {
    margin: 20px 0px;
    padding: 0px !important;
}

div.supplements > div > span#archives {
    color: #a2c617; 
    cursor: pointer;
}

span.archives-label,
span.reset-label {
    font-size: 12px;
    display: inline-block;
    cursor: default;
}

span.reset-label {
    margin-right: 5px;
}

span.archives-label {
    margin-left: 5px;
}

span.archived-date {
    font-size: 10px;
    font-style: italic;
    padding-left: 8px;
}

div.informations {
    max-height: calc(23vh - 59px);
    min-height: calc(23vh - 59px);
    height: calc(23vh - 59px);
    background-color: #fadbd8;
    border: 2px solid #e74c3c;
    width: 100%;
    overflow: auto;
}

div.informations > div {
    padding: 10px;
}

div.informations span, strong {
    background-color:transparent !important; 
}

/* Kendo */

.k-animation-container,
.k-animation-container *,
.k-animation-container ::after,
.k-block .k-header,
.k-widget,
.k-widget *,
.k-widget ::before {
    box-sizing: inherit !important;
}

.k-expander {
    border-bottom: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.k-expander-header {
    border: none;
}

.k-expander-header:focus {
    box-shadow: none;
}

.k-expander-title {
    color: #00a4e2;
    font-weight: 700;
    text-transform: none;
}

.k-expander+.k-expander.k-expanded,
.k-expander.k-expanded+.k-expander {
    margin-top: 0px;
}

.k-expander-span-result {
    display: inline-block;
    width: 90%;
}

.k-window-titlebar {
    border: none;
    color: #00a4e2;
    background-color: #ffffff;
    background-image: none;
}

.k-window-title {
    color: #262773;
    border-left: #262773 solid 12px;
    padding-left: 20px;
    font-size: 20px;
    font-weight: bold;
}

.k-prompt-container,
.k-window-content {
    padding: 3px 12px;
}

.k-chip-solid-base {
    border-color: #a2c617;
    color: #a2c617;
    background-color: white;
}

.k-expander-content > ul > li {
    border: #b8bbc2 solid 1px;
    padding: 8px;
    cursor: pointer;
}

.k-expander-content>ul>li:hover {
    background-color: rgba(162, 198, 23, 0.5);
}

.k-expander-content > ul > li >span {
    color: rgb(46, 46, 46);
    font-size: 14px;
}

.k-expander-content>ul>li>span.arrow-reco-result {
    font-size: 20px;
    color: #a2c617;
    float: right;
}

.k-expander-header,
.k-expander-content {
    padding: 10px 10px 10px 0px !important;
}

/*  Class to apply color #a2c617 */

.k-radio:checked {
    color: #a2c617;
}

.k-picker:focus-within,
.k-widget.k-picker:focus-within {
    border-color: #a2c617;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(162, 198, 23, 0.75);
    box-shadow: 0px 0px 4px 0px rgba(162, 198, 23, 0.75);
}

.k-list-item:hover, .k-list-item.k-selected,
.k-list-item.k-selected:hover {
    background-color: #a2c617;
}

.k-calendar .k-calendar-header .k-nav-today,
.k-calendar .k-footer .k-nav-today,
.k-calendar:hover .k-footer:hover .k-nav-today:hover {
    color: #a2c617;
}

.k-calendar .k-today .k-link {
    color: #a2c617;
    box-shadow: inset 0 0 0 1px #a2c617;
}

.k-calendar .k-state-focused,
.k-calendar .k-state-focused.k-state-selected {
    box-shadow: none;
}

.k-calendar td.k-state-focused .k-link {
    box-shadow: inset 0 0 4px 0 rgba(162, 198, 23, 1);
}

.k-calendar td.k-state-selected .k-link {
    border-color: #a2c617;
    color: #000;
    background-color: #a2c617;
}

.k-treeview-leaf.k-in:hover {
    color: #000 !important;
    background-color: #a2c617 !important;
}

.k-treeview-leaf.k-selected {
    color: #000 !important;
    background-color: #a2c617 !important;
}

.k-treeview-leaf.k-expandable-selected {
    color: #000;
    border: 1px solid #a2c617;
    font-weight: bold;
}

.k-dropdowntree.k-input {
    height: 50px !important;
    max-height: 50px !important;
    overflow-y: scroll;
    height: auto;
}

.k-dropdowntree .k-clear-value {
    margin-right: 8px;
}

.k-chip {
    height: 20px !important;
    padding: 2px 2px !important;
    gap: 4px !important;
}

/* Warning message */

.warning {
    margin-top: 8px;    
    color: red;
    font-style: italic;
    font-size: 11px;
}

.warning-focus {
    border-color: red !important;
    color: red;
}

/************************************** MEDIA ************************************/

/* XS */
@media only screen and (max-width : 767px) {
    [id='geodata-queries'] {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .geodata-queries-refarea-input {
        /*width: 32.6%;*/
        width: 100%;
    }

    .container-fluid.abonnements-container .container-fluid.top-part-container {
        flex-direction: column;
    }

    div#sejour-summary {
        order: 1;
    }

    div#results-summary {
        order: 3;
        font-size: 16px;
    }

    div.data-queries-pathopro {
        order: 2;
    }

    .sejour-btn {
        margin-bottom: 10px;
    }

    #sejour-summary,
    #sejour-summary>div.sejour-btn,
    #sejour-summary>div.sejour-btn>button,
    #sejour-summary>div.reset-btn,
    #sejour-summary>div.reset-btn>button,
    #sejour-summary>div.update-btn,
    #sejour-summary>div.update-btn>button {
        width: 100%;
        margin-top: 5px;
    }

    #sejour-summary>div.sejour-summary {
        padding-bottom: 0px !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 10px;
    }

    #data-queries-pathogens,
    #data-queries-products {
        width: calc(90vw / 2) !important;
    }

}

/* SM */
@media only screen and (max-width: 991px) and (min-width: 768px) {
    [id='geodata-queries'] {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .geodata-queries-refarea-input {
        /*width: 32.6%;*/
        width: 100%;
    }

    .container-fluid.abonnements-container .container-fluid.top-part-container {
        flex-direction: column;
    }

    div#sejour-summary {
        order: 1;
    }

    div#results-summary {
        order: 3;
        font-size: 16px;
    }

    div.data-queries-pathopro {
        order: 2;
    }

    .sejour-btn {
        margin-bottom: 10px;
    }

    #sejour-summary,
    #sejour-summary>div.sejour-btn,
    #sejour-summary>div.sejour-btn>button,
    #sejour-summary>div.reset-btn,
    #sejour-summary>div.reset-btn>button,
    #sejour-summary>div.update-btn,
    #sejour-summary>div.update-btn>button {
        width: 100%;
        margin-top: 5px;
    }

    #sejour-summary>div.sejour-summary {
        padding-bottom: 0px !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 10px;
    }

    #data-queries-pathogens,
    #data-queries-products {
        width: calc(90vw / 2) !important;
    }

}

/* MD */
@media only screen and (max-width: 1199px) and (min-width: 992px) {

    [id='geodata-queries'] {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: -62px;
    }

    .geodata-queries-refarea-input {
        /*width: 32.7%;*/
        width: 100%;
    }

    #data-queries-pathogens,
    #data-queries-products {
        width: calc(39vw / 2) !important;
    }

    #sejour-summary>div.sejour-summary>span {
        font-size: 11px !important;
    }
    
}
    
/* LG */
@media only screen and (min-width : 1200px) {

    [id='geodata-queries'] {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: -62px;
    }

    .geodata-queries-refarea-input {
        /*width: 32.8%;*/
        width: 100%;
    }

    #data-queries-pathogens,
    #data-queries-products {
        width: calc(40vw / 2) !important;
    }

}

/** SPECIAL **/

/*@media (min-width:768px) and (max-width:850px) {

    #sejour-summary>div.sejour-summary>span {
        font-size: 11px;
    }
}*/

/****************** MODE ON MAP ******************/

.select-mode-buttons {
    margin-top: .5em;
    margin-left: .5em;
    position: absolute;
    z-index: 10;
}

.select-mode-buttons button {
    display: inline-block;
}

button.selected-mode {
    background-color: rgba(162, 198, 23, 1);
}

/****************** SWITCH DESIGN ******************/

.k-switch {
    border-radius: 3em;
    width: 3em;
    height: 16px;
    margin-top: -1px;
    vertical-align: text-bottom;
}

.k-switch-track {
    width: 3em;
    height: 16px;
    border-radius: 3em;
    padding: 1px 1px;
}

.k-switch-on .k-switch-track {
    color: rgba(162, 198, 23, 1) !important;
    background-color: rgba(162, 198, 23, 0.5) !important;
}

.k-switch-off .k-switch-thumb-wrap {
    left: 0.7em;
}
.k-switch-on .k-switch-thumb-wrap {
    left: calc(100% - 0.7em);
}

.k-switch-thumb {
    border-radius: 3em;
    width: 1em;
    height: 1em;
}

.k-switch-on .k-switch-thumb {
    border-color: rgb(102, 122, 18) !important;
    color: rgba(162, 198, 23, 1) !important;
    background-color: rgba(162, 198, 23, 1) !important;
}

/****************** DISPLAY RECO ******************/



#reco-recurrence,
#reco-debut,
#reco-fin,
#reco-risque,
#reco-avis {
    height: 25px;
    margin-bottom: 5px;
}

#reco-details,
#reco-produits {
    height: auto;
    margin-bottom: 5px;
}

#reco-pj {
    height: auto;
    margin-bottom: 5px;
}

.reco-title {
    color: #00a4e2;
    font-size: 16px;
    line-height: 30px;
    cursor: default;
}

.reco-result {
    line-height: 34px;
}

#reco-details .reco-result {
    line-height: 14px;
    font-size: 12px;
}

#reco-details .reco-result ul {
    list-style: disc;
    padding-left: 2.5em;
}

#reco-details .reco-result ol {
    list-style: decimal;
    padding-left: 2.5em;
}

#reco-details .reco-result p {
    margin-bottom: 10px;
    margin-top: 10px;
}

#reco-avis .reco-result {
    text-align: left;
}

.reco-result span.glyphicon, .reco-result i.bi {
    font-size: 16px;
    cursor: pointer;
    color: rgba(162, 198, 23, 1);
    margin-right: 10px;
}

div#reco-produits>span.scrollThis,
div#reco-details>span.scrollThis {
    /*max-height: 150px;*/
    overflow-y: auto;
    scrollbar-width: thin;
}

#avis-title {
    cursor: help;
}

.avis-file img, #avis-link img {
    height: 50px;
    margin-right: 8px;
}

div#reco-recotitle {
    font-size: 16px;
    min-height: 25px;
    height: auto;
    display: flex;
    align-items: center;
}

span.recotitle {
    color: #262773;
    font-weight: bold;
    cursor: default;
    width: 98%;
}

span.recoclose {
    cursor: pointer;
    color: rgba(162, 198, 23, 1);
    width: 2%;
}

/****************** ABONNEMENTS / SEJOUR MAIN / CONTACT ******************/

div.abonnements-btn, div.contact-btn {
    line-height: 37px;
    font-size: 27px;
    padding-top: 2.5px;
    margin-left: 10px;
    cursor: pointer;
    float: right;
}

div.abonnements-btn {
    margin-top: 2px;
}

.contact-btn a {
    text-decoration: none;
    color: rgb(162, 198, 23);
}

span#open-abonnements {
    color: #a2c617;
}

.glyphicon-bell::before {
    content: "\e123" !important;
}

.title-abonnements {
    color: #00a4e2;
    font-size: 18px;
    align-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

.close-abonnements {
    cursor: pointer;
    color: rgba(162, 198, 23, 1);
    text-align: right;
}

#sejour-summary > div {
    float: right;
}

#sejour-summary > div.sejour-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    float: left;
    height: 37px;
    width: calc(100% - 430px);
}

#sejour-summary > div.sejour-summary > span {
    color: #00a4e2;
    font-size: 14px;
    font-style: italic;
}

#sejour-summary > .sejour-btn,
#sejour-summary > .reset-btn,
#sejour-summary > .update-btn {
    float: left;
    margin-right: 10px;
}

button#open-sejour,
button#reset-sejour,
button#update-sejour,
/*button#open-abonnements,*/
button#close-abonnements {
    color: white;
    border-color: rgb(162, 198, 23);
    background-color: rgb(162, 198, 23);
    cursor: pointer;
}

button#open-sejour:hover,
button#reset-sejour:hover,
button#update-sejour:hover,
/*button#open-abonnements:hover,*/
button#close-abonnements:hover {
    color: rgb(162, 198, 23);
    border-color: rgb(162, 198, 23);
    background-color: white;
}

button#open-sejour {
    float: right;
}

button#open-sejour > span.glyphicon {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 10px;
}

button#close-abonnements > span.glyphicon {
    margin-left: 10px;
    top: 3px !important;
}

button#reset-sejour>span.glyphicon,
button#update-sejour>span.glyphicon {
    margin-left: 10px;
}

.border {
   border: #b8bbc2 solid 2px;
}

#geodata-queries-refarea {
    width: 100%;
    display: inline-block;
    vertical-align: super;
    text-align: center;
}

#geodata-queries-refarea span.k-picker {
    height: 30px !important;
}

.geodata-queries-refarea-input {
    display: inline-block;
    margin: auto;
}