@font-face {
    font-family: "Ubuntu-Regular";
    src: url("../assets/fonts/Ubuntu-Regular.ttf");
}
body {
    background-color: #eef5ff;
    font-family: Ubuntu-Regular;
}
main {
    display: flex;
    background-color: white;
    border-radius: 10px;
    width: 900px;
    margin: 50px auto;
}
.bloco-plano, form, .bloco-adicionais, .bloco-itens {
    margin-top: 30px;
}
#sidebar {
    background-image: url("../assets/images/bg-sidebar-desktop.svg");
    height: 568px;
    width: 274px;
    margin: 15px;
}
.steps {
    display: flex;
    align-items: center;
    margin: 30px 0px 0px 30px;
}
.steps h5, .steps h6 {
    margin: 0px 15px;
    text-transform: uppercase;
}
.steps h6 {
    color: #c6c6c7cf;
    font-weight: 200;
}
.steps h5 {
    color: white;
}
.step-1 {
    padding-top: 15px;
}
.numero-sidebar {
    padding: 7px 12px;
    border: 1px solid white;
    border-radius: 20px;
    margin: 0px;
    color: white;
}
#formulario, #selecao-plano, #adicionais, #resumo-final {
    margin: 65px 78px 30px 78px;
    width: 440px;
}
h1 {
    font-size: 30px;
    margin: 0px;
}
p, .botao-mudar {
    font-size: 14px;
}
p, .botao-mudar, .resumo-total span, .servico-sl {
    color: #a9a8a8;
}
label {
    display: flex;
    margin: 25px 0px 5px 0px;
    font-size: 13px;
    font-weight: bolder;
}
#formulario input {
    border-radius: 6px;
    height: 35px;
    border: 1px solid #7977777a;
    padding-left: 15px;
    width: 96%;
}
#formulario input:focus-visible {
    outline-color: #514e93;
}
.next, .confirmacao {
    background-color: #032858;
    border: 0px;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    top: 513px;
    margin-left: 342px;
}
.next:hover, .confirmacao:hover {
    background-color: #16498c;
}
.selecao-step {
    background-color: #bce0fe;
    color: black;
    border-color: #515add;
}

.bloco-plano, .planos-mensal-anual, .selecao-add, .plano-escolhido, .resumo-total, .conteiner-servico-add {
    display: flex;
}
.planos-mensal-anual {
    justify-content: center;
    gap: 20px;
    background-color: #f8f9fe;
    margin-top: 30px;
    height: 45px;
    border-radius: 5px;
}
.bloco-plano, .plano-escolhido, .resumo-total, .conteiner-servico-add {
    justify-content: space-between;
}
.planos {
    width: 95px;
    padding: 20px 15px;
    height: 110px;
}
.planos, .selecao-add {
    border: 3px solid #e6e5e9;
    border-radius: 10px;
}
.plano-selecionado, .planos:hover {
    border-color: #514e93;
}
.img-plano {
    margin-bottom: 40px;
}
.planos h5, .texto-add h5{
    margin: 0px;
}
.botao-escolha {
    width: 43px;
    height: 20px;
    background-color: #01285a;
    border-radius: 10px;
    cursor: pointer;
}
.bolinha-botao {
    height: 13px;
    width: 14px;
    background-color: white;
    border-radius: 20px;
    margin: 3px 0px 3px 5px;
}
.valor-plano {
    color: #a7a7b0;
    font-size: 0.7em;
}
.planos h6 {
    margin: 5px 0px;
}
.go-back {
    background-color: transparent;
    border: 0px;
    color: #a7a7b0;
    font-weight: bolder;
    position: absolute;
    top: 522px;
}
.go-back:hover, .msg-anual {
    color: #01285a;
}
.planos, .go-back, .selecao-add, .botao-mudar {
    cursor: pointer;
}
.plano-selecionado {
    background-color: #f8f9fe;
}

.selecao-add, .plano-escolhido, .planos-mensal-anual, .resumo-total {
    align-items: center;
}
.selecao-add {
    padding: 10px 15px;
    margin-bottom: 15px;
}
.texto-add {
    width: 320px;
    margin-left: 15px;
}
.selecao-add p {
    margin: 5px 0px 0px 0px;
}

.bloco-itens {
    background-color: #f8f9fe;
    border-radius: 10px;
}
.bloco-itens, .resumo-total {
    padding: 20px;
}
.plano-escolhido h4 {
    font-size: 15px;
    color: black;
    margin: 0px;
}
.botao-mudar {
    text-decoration: underline;
}
.botao-mudar:hover, .valor-total {
    color: #3631c5;
}
.conteiner-servico-add h5, .bloco-itens hr {
    margin: 20px 0px 0px 0px;
}
.conteiner-servico-add h5 {
    font-weight: 100;
    font-size: 14px;
}
#confirmacao-sub {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0px 78px;
    width: 440px;
}
#confirmacao-sub img {
    width: 65px;
    margin-bottom: 20px;
}
#selecao-plano, #adicionais, #resumo-final, #confirmacao-sub, .msg-anual, .bloco-itens hr {
    display: none;
}