/*==================================================================================================== 
    START ==> HEADER
==================================================================================================== */
header {
    /* add specific design for header background here */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10vh;
    background-color: var(--clrPrim75);
}

.content__Header {
    /* add specific design for header content here */
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--stdPadding);
    gap: 8px;
}

#logoImgHeader {
    height: 60px;
    width: 60px;
}

#logoTextHeader {
    flex: 1;
}

.searchArea {
    width: 500px;
    position: relative;
}

#searchInput {
    width: 100%;
    border: none;
}

#searchInput:focus {
    border: none;
    outline: none;
}

#searchBtn {
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 4px;
    padding: 16px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--stdTransition);
    cursor: default;
    background-color: transparent;
}

#searchBtn:hover {
    background-color: transparent;
}

#searchInput.inputValide {
    outline: 3px solid green;
    background-color: lightgreen;
    color: green;
}

#searchInput.inputInvalide {
    outline: 3px solid red;
    background-color: pink;
    color: red;
}

.inputValideBtn {

    background-color: green;
}

.inputInvalideBtn {

    background-color: red;
}

/*==================================================================================================== 
    END ==> HEADER
==================================================================================================== */