/* Compact Search Form */
/*------------------------------------*/

/* dimensions */
.w-csf-btn {
    width: 40px;
}
.h-csf {
    height: 40px;
}


/* static base with submit+icon */
.compact-search-form input[type=text] {
    /*height: 40px;*/
    width: 100%;
    padding: 5px 0;
    -webkit-transition: width 0.4s ease-in-out, margin 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    transition: width 0.4s ease-in-out, margin 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    display: inline-block;
    cursor: default;

    margin-bottom: 0;
    float: right;
    margin-top: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0);
    background: white;
}
.compact-search-form input[type=submit] {
    /*width: 40px;*/
    /*height: 40px;*/
    padding: 5px 0;
    display: inline-block;
    /*-webkit-transition: width 0.4s ease-in-out;*/
    /*transition: width 0.4s ease-in-out;*/
    position: absolute;
    right: 0;
    /*pointer-events: none;*/
    margin-bottom: 0;
    background-color: var(--color-primary);
    margin-top: 0;
    /*z-index: 100;*/
    -webkit-transition: margin 0.4s ease-in-out, background-color 0.4s ease-in-out;
    transition: margin 0.4s ease-in-out, background-color 0.4s ease-in-out;
    z-index: 1;
}
input[type=submit] + .fa-search {
    font-size: 22px;
    position: absolute;
    right: 10px;
    top: 9px;
    pointer-events: none;
    margin-top: 0;
    -webkit-transition: margin 0.4s ease-in-out;
    transition: margin 0.4s ease-in-out;
    z-index: 2;
}


/* Expandable Compact Search Form*/
.csf-wrapper {
    -webkit-transition: width 0.4s ease-in-out, margin 0.4s ease-in-out;
    transition: width 0.4s ease-in-out, margin 0.4s ease-in-out;
    width: 100%;
    right: 0;
    margin-top: -8px;
}
.csf-wrapper .compact-search-form > .row > .col {
    /*padding: 0;*/
}
.csf-wrapper.csf-closed input[type=text] {
    cursor: pointer;
    /*width: calc(100% - 20px);*/
    /*cursor: default;*/
    /*padding-left: 8px;*/
    /*padding-right: 50px;*/
    /*margin-top: -10px;*/
    box-shadow: 0 0 10px rgba(0,0,0,1);
}
.csf-wrapper.csf-closed {
    width: 40px;
    margin-top: 0;
}
.csf-wrapper.csf-closed input[type=submit] {
    pointer-events: none;
    background: #000;
    /*margin-top: -10px;*/
}
.csf-wrapper.csf-closed input[type=submit] + .fa-search {
    /*margin-top: -10px;*/
}