/*
Put here the style for Desktop, Tablette and Mobile specific to this widget 
*/
.arrow-send {
    position: relative;
    width: 24px;
}

.img-attatchment {
    position: relative;
    width: 22px;
}

.filters {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    right: 0;
    left: 0
}

.filters li {
    display: inline
}

.filters li a {
    color: inherit;
    margin: 3px;
    padding: 3px 7px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px
}

.filters li a:hover {
    border-color: rgba(175,47,47,.1)
}

.filters li a.selected {
    border-color: rgba(175,47,47,.2)
}
.filters > div:nth-child(1) { z-index: 4 !important }
.filters > div:nth-child(2) { z-index: 3 !important }
.filters > div:nth-child(3) { z-index: 2 !important }
.filters > div:nth-child(4) { z-index: 1 !important }

.idealist-forum .filters > div:nth-child(1) { z-index: 1 !important }
.idealist-forum  .filters > div:nth-child(2) { z-index: 2 !important }
.idealist-forum  .filters > div:nth-child(3) { z-index: 3 !important }
.idealist-forum  .filters > div:nth-child(4) { z-index: 4 !important }
.filter-ti-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
.response-section .contributions .filters .contributions-number {
    gap:5px
}

.search-container-keywords {
    display: flex;
    justify-content: center; 
    align-items: center; 
    padding-left: 20px; 
    padding-right: 20px; 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.inner-search-container-keywords{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1px;
    padding: 0 0 0 281px; 
}

.pseudo-search {
    width: 220px; 
    box-sizing: border-box; 
    padding: 8px; 
    height: 28px;
    border: 1px solid #c9d2e4;
    padding: 0 15px;
    margin: 0;
    font: var(--fw-regular) var(--fs-400)/var(--fs-600) Arial;
    border-radius : 5px;
}

#pseudo-suggestions {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    position: absolute;
    width: 220px;
    z-index: 1000;
    display: none;
    border-radius: 5px;
    max-height: 200px; 
    overflow-y: auto; 
    left: 477px;
}

#pseudo-suggestions li {
    padding: 8px; 
    cursor: pointer;
    border-bottom: 1px solid #eee; 
}

#pseudo-suggestions li:last-child {
    border-bottom: none; 
}

#pseudo-suggestions li:hover {
    background-color: #f0f0f0; 
}

.themePage .main-titles.idealist-forum{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: start;
    flex-direction: column;
    z-index: 2;
}

.themePage .idealist-forum .show-filters{
    position: absolute;
    top: -16px;
    right: 0px;
    cursor: pointer;
    background-color: var(--lab-color);
    padding: 10px;
    border-radius: 0px 10px 0px 5px;
    color: white; 
}
.response-section .contributions .contributions-container{
    width: 100%;
}
.contributionContent .select-selected{
    width: 99%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    height: 71%;
}
.themePage .searchEngine-theme .keyWordFilter{
    white-space: nowrap;
}
.themePage #pseudo-search-container {
    padding: 10px 0px 10px 70px;
}

#pseudo-search-container {
    padding: 10px 0px 10px 438px;
}
.search-field-button .btn-solid.search-buttonkeywords{
    width : auto !important;
    border: none;
    outline: none;
     background-color:var(--main-text-color) ;
    background: linear-gradient(220deg, var(--main-text-color) 20.49%,  var(--main-text-color) 85.4%); 
    height: 10px;
    border-radius: var(--btn-solid-radius, 0px 5px 5px 0px) !important;
}
.btn-solid.search-buttonkeywords .button-icon{
    display: contents;
    color: #fff;
    font-size: 1.1em !important;
    margin-top: -3px;
}

.btn-solid.search-buttonkeywords:hover {
    background-color: #fff;
    border: 1px solid #000; 
    color: #000; 
}

.btn-solid.search-buttonkeywords:hover .button-icon {
    color: #000;
}
.black-color-Date{
    color: black;
}
.btn-solid.search-buttonkeywords{
    height: 28px;
    background-color: var(--campaign-color);
    border-color: white;
}
.search-field-button-keywords{
    margin-top: 3px;
}
.search-field .search-input-keywords {
    width: 220px !important;
    height: 28px !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px !important ;
    font: var(--fw-regular) var(--fs-400) / var(--fs-600) Arial;
    margin: 2px 10px 0 0 !important;
    box-shadow: 0px 2px 30px 10px #0000000D !important;
    background: #fff;
}
.themePage .search-field .search-input-keywords {
    border-radius: 4px 0px 0px 4px !important;
}
.themePage .search-field .reset-search {
    color: #696969;
    cursor: pointer;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
}
.modal .oneIdea {
    max-width: 900px;
    box-shadow: none;
  }

  .modal .oneIdea .contributions-content .contribution .contrib-content .comment-list {
    max-height: 258px;
  }

  .modal .oneIdea .contributions-content .contribution .contrib-content .comment-list::-webkit-scrollbar {
    width: 4px;
  }
  .contrib-parent-content{
    width: 100%;
  }
  .attachments {
    display: flex;
  }
  .input-file .fa-image {
    margin-top: 9px;
  }
  .modal#oneIdea {
    left: 0px;
    right: 0px;
    z-index: 1000 !important;
  }
  #loginform {
    z-index: 9000 !important;
  }
  #idForButton {
    margin-bottom: 2%;
    float: right;
  }
  .spinner-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--lab-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

.themePage .select-selected{
    white-space: nowrap !important;
}

/* ===================================== Begin Desktop ================================ */

@media(min-width:1176px) and (max-width:1350px) {

    #filters > div.classed-per > div.custom-select.productAspectsContent{
        width: 150px !important;
    }
}
@media(min-width: 1351px){

    #filters > div.classed-per > div.custom-select.productAspectsContent{
        width: 200px !important;
    }
} 
    
/* ===================================== End Desktop ================================== */

/* ===================================== Begin Tablette =============================== */
@media (max-width: 767px) {
    .idealistsort{
        width: 60px;   
    }
    .response-section .contributions .filters,
    .response-section .contributions .filters>div
    {
        gap:15px
    }
}
@media (min-width: 768px) and (max-width: 926px) {
    .themePage .contributions-content .contribution .contrib-content .contrib-info .info .username{
        font-size:0.775rem;;
    }
    .contributions-content .contribution .contrib-content .contrib-description .contrib-states {
        gap: 2px !important;
    }
    .contributions-content .contribution .contrib-content .contrib-description .contrib-states .btn-comment {
        font-size: 9px !important;
        padding: 0 5px !important;
        height: 27px !important;
    }
    .lets-like svg {
        width: 22px !important;
        height: 18px !important;
    }
    .num-comm svg {
        width: 20px !important;
        height: 16px !important;
      }
}

/* ===================================== End Tablette ================================= */
/* ===================================== Begin Mobile ================================== */
@media (max-width:430px) {
    .contributions-content .contribution .contrib-content .contrib-description .contrib-states .btn-comment {
        font-size: 9px !important;
        padding: 0 5px !important;
        height: 27px !important;
    }
    .lets-like svg {
        width: 22px !important;
        height: 18px !important;
    }
    .num-comm svg {
        width: 20px !important;
        height: 16px !important;
      }
    .filters {
        bottom: 10px
    }
    #filter-date {
        display: flex;
        flex-direction: column;
        /* align-items: flex-start; */
    }
    #filter-date > .fa-regular .fa-calendar .fa-lg,
    #filter-date > span:first-of-type {
        display: inline-flex;
        align-items: center;
        margin-right: 10px;
    }

    #start-date,
    #end-date {
        width: 100%;
        max-width: 300px;
    }

    #filter-date > span {
        margin-top: 10px;
    }

    .inner-search-container-keywords {
        display: flex;
        padding: 0; 
        flex-wrap:wrap;
    }

    .search-field {
        flex: 1 1 0; 
    }

    .search-field-button-keywords {
        margin-left: 10px; 
    }
    #keywords-fields span {
        padding-left: 5px;
        width: 40%;
    }
    #pseudo-search-container {
        padding-left:5px ;
        width: 100%;

    }
}
/* ===================================== End Mobile ==================================== */