:root {
    --aiPrimary: #29b2ab;
    --aiPrimaryLight: #69c9c4;
    --aiPrimaryMedium: #149993;
    --aiPrimaryDark: #1d7d78;
    --aiPrimaryExtreme: #166D6D;
    --aiPrimaryVibrant: #1bc7ba;
    --aiSecondary: #ee7f4e;
    --aiSecondaryLight: #f3a583;
    --aiSecondaryMedium: #D96736;
    --aiSecondaryDark: #B93C1E;
    --aiGrey: #f6f6f6;
    --aiGreyMedium: #ebebeb;
    --aiGreyDark: #e1e1e1;
    --aiTextColor: #353535;
    --aiComplementary: #F8B547;
    --cegidPrimaryColor: #0046FE;
    --aiFontTitre: 'Function';
    --aiFontCorps: 'Gotham','Lato';
    --shadow: 0 10px 20px 0 rgba(0,0,0,.08),0 0 5px 0 rgba(0,0,0,.08);
    --block-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
    --gradient: linear-gradient(130deg,#29b2ab,#ee7f4e);
    --gradient-inverse: linear-gradient(130deg,#ee7f4e,#29b2ab);
    --radius: 5px;
}

*, *:focus {
    outline: none !important;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
}



body, html {
    height: 100%;
    margin: 0;
    background-color: #f7f7f7;
    background-color: white;
    overflow:hidden;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

li {
    margin: 0;
    padding: 2px;
    position: relative;
    transition:.3s;
}

header {
    background-color: white;
    padding: 0;
    font-family: 'Function';
    box-shadow: 0 1px 8px rgba(0,0,0,.3);
    position: fixed;
    width: 100%;
    z-index: 2;
    top:0;
    transition:.3s;
    overflow: hidden;
    height: 76px;
}

header #ai-header-content {
    padding: 20px;
    background-color: white;
    z-index: 2;
    position: relative;
}

header.ai-header-open {
    height: 100%;
}

#ai-search-content-with-preview, #ai-search-content{
    height: calc(100% - 91px); /* moins la taille du header-content */
}

#ai-search-header {
    width: 100%;
    padding: 20px;
    z-index: 1;
    position: relative;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.08),
                0 0 5px 0 rgba(0,0,0,.08);
}

#ai-search-header-wrap {
    padding: 0 10px;
    position: relative;
}

#ai-search-icon{
    float: right;
    font-size: 20px;
    line-height: 48px;
    background-color: #ee7f4e;
    color: white;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    text-align: center;
    cursor: pointer;
    margin-top: -7px;
    transition: all ease-in-out 0.15s;
}

#ai-search-icon:hover{
    background-color: #B93C1E;
}

#ai-search-input{
    width: 100%;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    position: relative;
}

#ai-search-clear {
    position: absolute;
    right: 18px;
    top: 7px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    line-height: 48px;
    width: 48px;
    height: 48px;
    text-align: center;
    transition: all ease-in-out 0.15s;
}

#ai-search-clear:hover {
    background-color: #eee;
}

#ai-search-catalogues {
    
    margin-top: -44px;
    padding: 20px 0;
}

header h1 {
    display: inline;
    font-size: 1.5rem;
}

header #logo {
    margin: 0 10px;
}

footer {
    text-align: center;
    padding: 16px;
    border-top: 1px solid #00000015;
    color: #00000035;
    font-weight: 500;
    font-size: 0.8rem;
}

#ai-breadcrumb {
    /*position: fixed;*/
    margin-top: 76px;
    background-color: #29b2ab;
    width: 100%;
    padding: 15px 0 10px 0;
    z-index: 1;
}

#ai-content {
    height: calc(100% - 200px);
}

#ai-ariane .ai-ariane-element:first-child{
    padding-left:15px;
}

.ai-ariane-element {
    display: none;
    position: relative;
}

.ai-ariane-element-arrow-top-left {
    border-width: 18px 0 18px 10px;
    border-color: #25a09a transparent transparent;   
    border-style: solid;
    background: #29b2ab;
    height: 0;
    width: 0;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}

.ai-ariane-element-arrow-bottom-left {
    border-width: 0px 0px 18px 10px;
    border-color: transparent transparent #25a09a;
    border-style: solid;
    background: #29b2ab;
    height: 0;
    width: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}

.ai-ariane-element-arrow-top-right {
    border-width: 18px 0 18px 10px;
    border-color: #29b2ab transparent transparent;   
    border-style: solid;
    height: 0;
    width: 0;
    top: 0;
    right: 0;
    position: absolute;
    transition: all ease-in-out 0.25s;
    z-index: 1;
}

.ai-ariane-element-show-last .ai-ariane-element-arrow-top-right {
    border-width: 18px 0 18px 0px !important;
}

.ai-ariane-element-arrow-bottom-right {
    border-width: 0px 0px 18px 10px;
    border-color: transparent transparent #29b2ab;
    border-style: solid;
    height: 0;
    width: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    transition: all ease-in-out 0.25s;
    z-index: 1;
}

.ai-ariane-element-show-last .ai-ariane-element-arrow-bottom-right {
    border-width: 0px 0px 18px 0px !important;
}

.ai-ariane-element-show {
    transition: all ease-in-out 0.25s;
    display: inline-block;
    padding: 5px 20px 5px 25px;
    margin: 0 1px;
    cursor: pointer;
    max-width: 300px;
    height: 37px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 0px solid transparent;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.10);
    color: rgba(255, 255, 255, 0.90);
}

.ai-ariane-element-show > span.ai-ariane-element-arrow-top-left, .ai-ariane-element-show > span.ai-ariane-element-arrow-bottom-left {
    transition: all ease-in-out 0.25s;
}

.ai-ariane-element-show:hover, 
.ai-ariane-element-show-last {
    background-color: #20847f;
}

.ai-ariane-element-show:hover > span.ai-ariane-element-arrow-top-left,
.ai-ariane-element-show-last > span.ai-ariane-element-arrow-top-left {
    border-color: #20847f transparent transparent;
}

.ai-ariane-element-show:hover > span.ai-ariane-element-arrow-bottom-left,
.ai-ariane-element-show-last > span.ai-ariane-element-arrow-bottom-left {
    border-color: transparent transparent #20847f;
}

.ai-ariane-element-text {
    line-height: 1.8em;
}

#ai-ariane .ai-ariane-element-show-last {
    cursor: default;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

#ai-catalogues {
    position:relative;
    height: 100%;
}

.ai-catalogue-element {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1), 0px 3px 3px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius);
    background-color: white;
    padding: 12px;
    min-height: 100px;
    text-align: left;
    overflow: hidden;
    border: 1px solid #ddd;
    transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s;
}

.box {
    margin-bottom: 6px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    float:left;
}

.ai-catalogue-element .ai-icon {
    position: absolute;
    right: 22px;
    top: 30%;
    font-size:20px;
}

.ai-catalogue-element-image {
    height: 150px;
    text-align: center;
    padding-bottom: 6px;
    border-bottom:1px solid #ddd
}

.ai-catalogue-element-image img {
    max-height: 100%;
    max-width: 100%;
}

.ai-catalogue-element-label {
    font-size: 13px;
    text-align: left;
    margin: auto;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 800;
    height: 44px;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: 0px;
}

.ai-search-catalogue .box, .ai-catalogue-elements .box {
    flex: 0 0 25%;
    max-width: 25%;
}

.ai-preview-selected, .ai-search-preview-selected {
    background-color: antiquewhite;
}

#ai-preview-text, #ai-search-preview-text {
    margin: auto;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 800;
    height: 44px;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: 0px;
    color: #ee7f4E;
    text-align: center;
}

#ai-content, #ai-search-content-with-preview {
    display: inline-flex;
    width: 100%;
}

#ai-catalogues, #ai-search-catalogues {
    width: 100%;
}

#ai-preview, #ai-search-preview {
    width: 50%;
    background-color: white;
    padding: 8px;
    border-left: 1px solid #ddd;
    display: none;
    text-align: center;
}

#ai-preview-actions, #ai-search-preview-actions {
    display: flex;
    font-size: 24px;
    margin-bottom: 28px;
}

#ai-preview-actions > div, #ai-search-preview-actions > div {
    margin: 2px;
    margin-right: 12px;
    padding: 2px;
    border: 1px solid black;
    font-size: 14px;
    border-radius: 50px;
    padding: 6px 12px;
}

#ai-preview-actions > div:hover, #ai-search-preview-actions > div:hover {
    background-color: #ddd;
    cursor: pointer;
}

#ai-preview-image, #ai-search-preview-image {
    max-width: 100%;
    max-height: 85%;
    border: 1px solid #ddd;
}

#ai-preview-go, #ai-search-preview-go {
	border: 1px solid #ee7f4e !important;
	color: #ee7f4e;
	font-weight: bold;
}

@media screen and (max-width: 880px) {
    
    #ai-content .box {
        flex: 0 0 33%;
        max-width: 33%;
    }
}

@media screen and (max-width: 650px) {
    
    #ai-content .box {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 400px) {
    
    #ai-content .box {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 879px) {
    #ai-content.with-preview #ai-preview {
        display: block;
        width: 100%
    }
    
    #ai-content.with-preview #ai-catalogues{
        display: none;
    }
}

@media screen and (min-width: 880px) {
    #ai-content.with-preview #ai-preview {
        display: block;
    }
    
    #ai-content.with-preview #ai-catalogues{
        width:50%;
    }
    
    #ai-content.with-preview .box {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (min-width: 1200px) {
    #ai-content.with-preview #ai-catalogues{
        width:66%;
    }

    #ai-content.with-preview #ai-preview {
        width:33%;
    }
    
    #ai-content.with-preview .box {
        flex: 0 0 33%;
        max-width: 33%;
    }
}

@media screen and (max-width: 880px) {
    
    #ai-search-content .box {
        flex: 0 0 33%;
        max-width: 33%;
    }
}

@media screen and (max-width: 650px) {
    
    #ai-search-content .box {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 400px) {
    
    #ai-search-content .box {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 879px) {
    #ai-search-content.with-preview #ai-search-preview {
        display: block;
        width: 100%
    }
    
    #ai-search-content.with-preview #ai-search-catalogues{
        display: none;
    }
}

@media screen and (min-width: 880px) {
    #ai-search-content.with-preview #ai-search-preview {
        display: block;
    }
    
    #ai-search-content.with-preview #ai-search-catalogues{
        width:50%;
    }
    
    #ai-search-content.with-preview .box {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (min-width: 1200px) {
    #ai-search-content.with-preview #ai-search-catalogues{
        width:66%;
    }

    #ai-search-content.with-preview #ai-search-preview {
        width:33%;
    }
    
    #ai-search-content.with-preview .box {
        flex: 0 0 33%;
        max-width: 33%;
    }
}

.ai-catalogue-element-tags {
    height: 20px;
}

.ai-catalogue-element:hover {
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.08),0 0 5px 0 rgba(0,0,0,.08);;
    border: 1px solid;
}

.ai-catalogue-element-linkable {
    cursor: pointer;
    color: #ee7f4e;
}

.ai-catalogue-element-clickable:hover {
    cursor: pointer;
}

.ai-catalogue, .ai-search-catalogue {
    transition: all ease-in-out 0.25s;
    display: block;
    opacity: 0;
    height: 0;
    width: 100%;
}

.ai-catalogue.ai-catalogue-show, .ai-search-catalogue {
    display: block;
    opacity: 1;
    height: 100%;
}

.ai-catalogue-elements {
    height: 100%;
    padding: 20px;
    overflow: auto;
}

.ai-search-catalogue {
    position: relative;
    margin-top: 24px;
    background-color: #29b2ab;
    height: 100%;
    padding: 20px;
    overflow: auto;
}

.ai-catalogue-element-tag, .ai-tag-element {
    color: white;
    border-radius: 30px;
    padding: 4px 8px;
    margin-left: 6px;
    font-size: 0.8em;
    line-height: initial;
    white-space: nowrap;
}

.ai-tags-element {
    background-color: white;
    width: 100%;
    box-shadow: 0 1px 8px rgba(0,0,0,.3);
    position: relative;
    z-index: 1;
}

.ai-tags-element > div > ul {
    width: calc(100% - 50px);
}

.ai-tags-element > div > ul > li {
    display: inline-flex;
    padding: 10px 0;
}

.ai-tag-element:hover {
    cursor: pointer;
}

.ai-tags-element > div > ul > li > * {
    transition: .3s;
    border: 1px solid;
    padding: 10px 14px;
}

.ai-tags-element > div > ul > li > *:not(.ai-filtered-tag){
    background-color: transparent !important;
}

.ai-filtered-tag {
    color: white !important; 
}

.ai-filtered-catalogue-element{
    opacity: 0 !important;
    height: 0 !important;
    padding:0!important;
    margin-bottom: 0px !important;
}


/***************************************************************/
/*********************      LEGENDE     ************************/
/***************************************************************/

#ai-legend-button {
    position: absolute;
    right: 25px;
    top: 10px;
    padding: 5px 10px;
    cursor: pointer;
    border: 0px solid transparent;
    border-radius: 50px;
    background-color: rgb(41, 178, 171);
    color: rgba(255, 255, 255, 0.90);
    transition: all ease-in-out 0.25s;
}

#ai-legend-button:hover {
    background-color: #166D6D;
}

#ai-legend-button i {
    margin-right:5px;
    font-size: 1.1em;
    top: 0;
    z-index: -1;
}

#ai-legende{
    position:absolute;
    transition: all ease-in-out 0.25s;
    top: 50%;
    left: calc( 50% - 450px/2 );
    background: white;
    z-index: -100;
    opacity: 1;
    width: 450px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.18), 0 0 5px 0 rgba(0,0,0,.08);
}

#ai-legende.ai-legende-show{
    top: 93px;
    opacity: 1;
    z-index: 100;
}

#ai-legende .title {
    font-weight: bold;
    margin-bottom: 10px;
}

#ai-legende-content td {
    padding: 5px 10px;
}

#ai-overlay{
    position: absolute;
    transition: all ease-in-out 0.25s;
    height: 100%;
    width:100%;
    top: 0;
    z-index: -1;    
}

#ai-overlay.ai-overlay-show{
    background: rgba(0,0,0,.24);
    z-index: 50;
}

#ai-overlay.ai-overlay-show{
    background: rgba(0,0,0,.24);
    z-index: 50;
}

.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: transparent;
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
    border: 0;
    transition: all ease-in-out 0.25s;
    font-size: 1.3em;
}

.close-button:hover {
    background-color: rgba(33,33,33,0.05);
}

.ai-folder {
    float: right;
    font-style: italic;
}