:root {
    --Divider-linear: linear-gradient(90deg, #F0F0F0 0%, #CCC 50%, #F0F0F0 100%);
}

.dark-position {
    position: relative;
}

.dark-position .nav-items>li>a {
    color: black;
}

.dark-position .logo, .dark-position .icon-link {
    filter: brightness(0.1);
}

.dark-position .menu-group>svg {
    filter: brightness(0);
}

.error-container {
    display: flex;
    flex-direction: row;
    padding: 24px 48px 84px 48px ;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    gap: 48px;
    max-width: 1280px;
    height: 100vh;
}

.error-container img {
    width: 300px;
}

.error-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    width: fit-content;
}

.error-main-box {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.error-title-descript {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.error-title-descript h1 {
    color: #333;
    font-size: 36px;
    font-weight: 600;
}

.error-title-descript p {
    color: #333;
    font-size: 16px;
    font-weight: 400;

}

.error-navegation {
    display: flex;
    width: fit-content;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.error-buttons {
    display: flex;
    flex-direction: row;
    padding-bottom: 24px;
    align-items: center;
    gap: 24px;

    border-bottom: 1px solid #CCCCCC;
}

.error-button {
    position: relative;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    transition: 0.3s;

    border: none;
    border-radius: 99px;
    background: var(--botao-primario); 
}

.error-button:hover {
    color: #fff;
    background-color: #3c6fba;
}

.error-arrow-button {
    display: flex;
    padding-bottom: 2px;
    justify-content: center;
    align-items: center;
    gap: 8px;

    color: #333;
    font-size: 16px;
    font-weight: 400;

    transition: 0.3s;
    border: none;
    background: none;
}

.error-arrow-button:hover {
    color: #333;
    border-bottom: 1.5px solid #333;
}

.error-search {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}

.error-search p {
    color: #333;
    font-size: 16px;
    font-weight: 400;
}

.error-searchbar {
    display: flex;
    flex-direction: row;
    padding: 8px 8px 8px 16px;
    justify-content: flex-start;
    gap: 16px;
    align-self: stretch;

    border: none;
    border-radius: 8px;
    background: #EEE;
}

.error-searchbar::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  width: 24px;
  background: url("data:image/svg+xml;utf8,<svg fill='black' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M14.348 5.652a.5.5 0 0 0-.707 0L10 9.293 6.36 5.652a.5.5 0 1 0-.707.707L9.293 10l-3.64 3.64a.5.5 0 0 0 .707.707L10 10.707l3.64 3.64a.5.5 0 0 0 .707-.707L10.707 10l3.64-3.64a.5.5 0 0 0 0-.708z'/></svg>") no-repeat center;
  background-size: 24px 24px;
  cursor: pointer;
}

.error-searchbar p {
    color: #777;
    font-size: 16px;
    font-weight: 400;
}

@media (max-width: 1034px) {
    .error-container {
        flex-direction: column;
        padding: 48px 24px;
        justify-content: center;
    }

    .error-main-box {
        align-items: center;
    }

    .error-title-descript {
        align-items: center;
        gap: 16px;
    }

    .error-title-descript p {
        text-align: center;
    }

    .error-search {
        align-items: center;
    }

    .error-navegation {
        gap: 24px;
    }


}



@media (max-width: 470px) {

    .error-container {
        flex-direction: column;
        padding: 48px 16px;
    }

    .error-container img {
        width: 200px;
    }

    .error-title-descript h1 {
        font-size: 28px;
    }

    .error-title-descript p {
        font-size: 14px;
    }

    .error-buttons {
        flex-direction: column;

    }

    .error-navegation {
        gap: 32px;
        align-items: center;
    }
}