/* 
    CÓDIGO FEITO POR jhoOrdann, GITHUB.

    VOCÊ PODE MODIFICAR, CLONAR E EXPORTAR ESTE PROJETO, MAS DEIXANDO UMA ESTRELA OU OS CRÉDITOS
    SE QUISER ME AJUDAR, ASSINE O PREMIUM DO FOOOLY OU DOE:
    --> https://foooly.vercel.app/premium

    DISCORD
    --> https://discord.com/users/733725067451826199

    MINHAS REDES SOCIAIS:
    --> https://jhoordann.vercel.app/seguir
*/
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Outfit:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Space+Grotesk:wght@300..700&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap&family=Urbanist:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&family=Varela+Round&display=swap');
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css');

:root {
    /* CORES */
    --cor_branca: #fff;
    --cor_cinza: gray;
    --cor_preta: #000;
    --cor_preto_acizentado: #25252557;
    --input_cor_primaria: #1b1b1b5e;
    --input_cor_hovered: #0000007a;
    --input_cor_focus: #00000096;
    --input_cor_border_st: #5a5a5a;
    --input_cor_border_nd: #3f3e3e;
    --input_cor_border_th: #494949;

    /* FONTE PADRÃO */
    --fonte: font-family: 'Plus Jakarta Sans', sans-serif;;

    /* BORDAS UNIVERSAIS */
    --border_size: 1px;

    /* TAMANHOS */
    --pp_size: 5%;
    --p_size: 10%;
    --mm_size: 20%;
    --m_size: 30%;
    --g_size: 40%;
    --gg_size: 50%;
    --ggg_size: 60%;
    --xg_size: 70%;
    --xxl_size: 80%;
    --xml_size: 90%;
    --xxggll_size: 100%;

    /* BORDAS */
    --mm_border_size: 2px;
    --m_border_size: 4px;
    --xm_border_size: 5px;
    --xl_border_size: 10px;
    --xml_border_size: 20px;
    --xxl_border_size: 50px;

}

/* SUBMIT */
input[type=submit] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: #522e11;
    cursor: pointer;
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    border: none;
    text-align: left;
    font-family: var(--fonte);
}

input[type=submit]:hover {
    background-color: #83410c;
}

input[type=submit]:focus {
    background-color: #743a0b;
}

input[type=submit] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type="submit"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255,255,255,1)"><path d="M3 12.9999H9V10.9999H3V1.84558C3 1.56944 3.22386 1.34558 3.5 1.34558C3.58425 1.34558 3.66714 1.36687 3.74096 1.40747L22.2034 11.5618C22.4454 11.6949 22.5337 11.9989 22.4006 12.2409C22.3549 12.324 22.2865 12.3924 22.2034 12.4381L3.74096 22.5924C3.499 22.7255 3.19497 22.6372 3.06189 22.3953C3.02129 22.3214 3 22.2386 3 22.1543V12.9999Z"></path></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 14px; /* espaço para o ícone */
    background-size: 25px 25px; /* Largura e altura da imagem */
}

/* Quando o input está ativo */
input[type=submit]:focus {
    width: var(--m_size);
}

/* INPUT TEXTO */
input[type=text] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=text]:hover {
    border: var(--border_size) solid var(--input_cor_border_nd);
    background-color: var(--input_cor_hovered);
}

input[type=text]:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

input[type=text] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type=text]:focus {
    width: var(--m_size);
}

/* INPUT DE MENSAGEM -- utilize: class="textarea" no input textarea. */
.textarea {
    width: var(--m_size);
    height: 190px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

.textarea:hover {
    border: var(--border_size) solid var(--input_cor_border_nd);
    background-color: var(--input_cor_hovered);
}

.textarea:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

.textarea {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

.textarea:focus {
    width: var(--m_size);
}

/* INPUT de selecionar --  */
.selectr {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    cursor: pointer;
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

.selectr:hover {
    border: var(--border_size) solid var(--input_cor_border_nd);
    background-color: var(--input_cor_hovered);
}

.selectr:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

.selectr {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

/* When the input field gets focus,
     change its width to 100% */
.selectr:focus {
    width: var(--m_size);
}

/* INPUT EMAIL */
input[type=email] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=email]:hover {
    border: var(--border_size) solid var(--input_cor_border_st);
    background-color: var(--input_cor_hovered);
}

input[type=email]:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

input[type=email] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type=email]:focus {
    width: var(--m_size);
}

/* INPUT PASSWORD */
input[type=password] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=password]:hover {
    border: var(--border_size) solid var(--input_cor_border_st);
    background-color: var(--input_cor_hovered);
}

input[type=password]:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

input[type=password] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type=password]:focus {
    width: var(--m_size);
}

/* INPUT DATE */
input[type=date] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=date]:hover {
    border: var(--border_size) solid var(--input_cor_border_st);
    background-color: var(--input_cor_hovered);
}

input[type=date]:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

input[type=date] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type=date]:focus {
    width: var(--m_size);
}

/* INPUT DATETIME */
input[type=datetime-local] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=datetime-local]:hover {
    border: var(--border_size) solid var(--input_cor_border_st);
    background-color: var(--input_cor_hovered);
}

input[type=datetime-local]:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

input[type=datetime-local] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type=datetime-local]:focus {
    width: var(--m_size);
}

/* INPUT COR */
input[type=color] {
    width: var(--m_size);
    height: 60px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=color]:hover {
    border: var(--border_size) solid var(--input_cor_border_st);
    background-color: var(--input_cor_hovered);
}

input[type=color]:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

input[type=color] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type=color]:focus {
    width: var(--m_size);
}

/* INPUT CHACKBOX */
input[type=search] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=search]:hover {
    border: var(--border_size) solid var(--input_cor_border_st);
    background-color: var(--input_cor_hovered);
}

input[type=search]:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

input[type=search] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type=search]:focus {
    width: var(--m_size);
}

/* INPUT TELEFONE */
input[type=tel] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=tel]:hover {
    border: var(--border_size) solid var(--input_cor_border_st);
    background-color: var(--input_cor_hovered);
}

input[type=tel]:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

input[type=tel] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type=tel]:focus {
    width: var(--m_size);
}

/* INPUT URL */
input[type=url] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=url]:hover {
    border: var(--border_size) solid var(--input_cor_border_st);
    background-color: var(--input_cor_hovered);
}

input[type=url]:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

input[type=url] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type=url]:focus {
    width: var(--m_size);
}

/* INPUT SEMANA */
input[type=week] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=week]:hover {
    border: var(--border_size) solid var(--input_cor_border_st);
    background-color: var(--input_cor_hovered);
}

input[type=week]:focus {
    border: var(--border_size) solid var(--input_cor_border_th);
    background-color: var(--input_cor_focus);
}

input[type=week] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type=week]:focus {
    width: var(--m_size);
}

/* INPUT FILES */
input[type=file] {
    width: var(--m_size);
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: var(--border_size) solid var(--input_cor_border_st);
    border-radius: var(--xl_border_size);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    background-color: var(--input_cor_primaria);
    cursor: pointer;
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    font-family: var(--fonte);
}

input[type=file]:hover {
    border: var(--border_size) solid var(--input_cor_border_nd);
    background-color: var(--input_cor_hovered);
}

input[type=file]:focus {
    border: var(--border_size) solid #202020;
    background-color: #202020;
}

input[type=file] {
    width: var(--m_size);
    -webkit-transition: width 0.15s ease-in-out;
    transition: width 0.15s ease-in-out;
}

input[type="file"]::before {
    content: 'Enviar';
    /* Texto customizado */
    display: inline-block;
    background: transparent;
    color: gray;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 0px;
    font-family: var(--fonte);
}

input[type="file"]::-webkit-file-upload-button {
    display: none;
}

input[type="file"]::-ms-browse {
    color: gray;
}

/* INPUT VOLUME 
input[type=range] {
    height: 21px;
    appearance: none;
    margin: 10px 0;
    width: 8%;
    background-color: transparent;
    font-family: var(--fonte);
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: var(--xxggll_size);
    height: 4px;
    cursor: pointer;
    animation: 0.2s;
    box-shadow: 0px 0px 0px #50555C;
    background: #E6E6E6;
    border-radius: 50px;
    border: 0px solid #000000;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #000000;
    height: 15px;
    width: 15px;
    border-radius: 50px;
    background: #E1E1E1;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5.5px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #E6E6E6;
}

input[type=range]::-moz-range-track {
    width: var(--xxggll_size);
    height: 4px;
    cursor: pointer;
    animation: 0.2s;
    box-shadow: 0px 0px 0px #50555C;
    background: #E6E6E6;
    border-radius: 50px;
    border: 0px solid #000000;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #000000;
    height: 15px;
    width: 15px;
    border-radius: 50px;
    background: #E1E1E1;
    cursor: pointer;
}

input[type=range]::-ms-track {
    width: var(--xxggll_size);
    height: 4px;
    cursor: pointer;
    animation: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #E6E6E6;
    border: 0px solid #000000;
    border-radius: 100px;
    box-shadow: 0px 0px 0px #50555C;
}

input[type=range]::-ms-fill-upper {
    background: #E6E6E6;
    border: 0px solid #000000;
    border-radius: 100px;
    box-shadow: 0px 0px 0px #50555C;
}

input[type=range]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #000000;
    height: 15px;
    width: 15px;
    border-radius: 50px;
    background: #E1E1E1;
    cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
    background: #E6E6E6;
}

input[type=range]:focus::-ms-fill-upper {
    background: #E6E6E6;
}
*/
.slider {
    /* slider */
    --slider-width: 100%;
    --slider-height: 5px;
    --slider-bg: #00000044;
    --slider-border-radius: 999px;
    /* level */
    --level-color: #fff;
    --level-transition-duration: .1s;
    /* icon */
    --icon-margin: 15px;
    --icon-color: var(--slider-bg);
    --icon-size: 25px;
}

.slider {
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.slider .volume {
    display: inline-block;
    vertical-align: top;
    margin-right: var(--icon-margin);
    color: var(--icon-color);
    width: var(--icon-size);
    height: auto;
}

.slider .level {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--slider-width);
    height: var(--slider-height);
    background: var(--slider-bg);
    overflow: hidden;
    border-radius: var(--slider-border-radius);
    -webkit-transition: height var(--level-transition-duration);
    -o-transition: height var(--level-transition-duration);
    transition: height var(--level-transition-duration);
    cursor: inherit;
}

.slider .level::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    -webkit-box-shadow: -200px 0 0 200px var(--level-color);
    box-shadow: -200px 0 0 200px var(--level-color);
}

.slider:hover .level {
    height: calc(var(--slider-height) * 1.0);
}

/* ÍCONES INPUT */
.input_icon_search {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(117,117,117,1)"><path d="M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z"></path></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 14px; /* espaço para o ícone */
    background-size: 25px 25px; /* Largura e altura da imagem */
}

.input_icon_nome {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(111,111,117,1)"><path d="M20 22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13Z"></path></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 14px; /* espaço para o ícone */
    background-size: 25px 25px; /* Largura e altura da imagem */
}

.input_icon_email {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(111,111,117,1)"><path d="M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C13.6418 20 15.1681 19.5054 16.4381 18.6571L17.5476 20.3214C15.9602 21.3818 14.0523 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12V13.5C22 15.433 20.433 17 18.5 17C17.2958 17 16.2336 16.3918 15.6038 15.4659C14.6942 16.4115 13.4158 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C13.1258 7 14.1647 7.37209 15.0005 8H17V13.5C17 14.3284 17.6716 15 18.5 15C19.3284 15 20 14.3284 20 13.5V12ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9Z"></path></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 14px; /* espaço para o ícone */
    background-size: 25px 25px; /* Largura e altura da imagem */
}

.input_icon_nomemusica {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(111,111,117,1)"><path d="M12 13.5351V3H20V6H14V17C14 19.2091 12.2091 21 10 21C7.79086 21 6 19.2091 6 17C6 14.7909 7.79086 13 10 13C10.7286 13 11.4117 13.1948 12 13.5351Z"></path></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 14px; /* espaço para o ícone */
    background-size: 25px 25px; /* Largura e altura da imagem */
}

.input_icon_descletras {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(111,111,117,1)"><path d="M21 3C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.455L2 22.5V4C2 3.44772 2.44772 3 3 3H21ZM10.5153 7.4116C8.72825 8.18684 7.5 9.75543 7.5 11.5052C7.5 12.5 7.77658 13.1137 8.29171 13.6605C8.61598 14.0048 9.12905 14.25 9.66558 14.25C10.6321 14.25 11.4156 13.4665 11.4156 12.5C11.4156 11.5795 10.7045 10.8389 9.80236 10.7553C9.64107 10.7403 9.47827 10.7431 9.32317 10.7645L9.32344 10.6729C9.32873 10.2322 9.4223 8.9333 10.9616 8.1004L10.5153 7.4116ZM15.5153 7.4116C13.7283 8.18684 12.5 9.75543 12.5 11.5052C12.5 12.5 12.7766 13.1137 13.2917 13.6605C13.616 14.0048 14.1291 14.25 14.6656 14.25C15.6321 14.25 16.4156 13.4665 16.4156 12.5C16.4156 11.5795 15.7045 10.8389 14.8024 10.7553C14.6411 10.7403 14.4783 10.7431 14.3232 10.7645L14.3234 10.6729C14.3287 10.2322 14.4223 8.9333 15.9616 8.1004L15.5153 7.4116Z"></path></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 14px; /* espaço para o ícone */
    background-size: 25px 25px; /* Largura e altura da imagem */
}

.input_icon_enviarmusica {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(111,111,117,1)"><path d="M4 12H7C8.10457 12 9 12.8954 9 14V19C9 20.1046 8.10457 21 7 21H4C2.89543 21 2 20.1046 2 19V12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12V19C22 20.1046 21.1046 21 20 21H17C15.8954 21 15 20.1046 15 19V14C15 12.8954 15.8954 12 17 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12Z"></path></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 14px; /* espaço para o ícone */
    background-size: 25px 25px; /* Largura e altura da imagem */
}

.input_icon_enviarimagem {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(111,111,117,1)"><path d="M21 15V18H24V20H21V23H19V20H16V18H19V15H21ZM21.0082 3C21.556 3 22 3.44495 22 3.9934L22.0007 13.3417C21.3749 13.1204 20.7015 13 20 13V5H4L4.001 19L13.2929 9.70715C13.6528 9.34604 14.22 9.31823 14.6123 9.62322L14.7065 9.70772L18.2521 13.2586C15.791 14.0069 14 16.2943 14 19C14 19.7015 14.1204 20.3749 14.3417 21.0007L2.9918 21C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082ZM8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7Z"></path></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    padding-right: 14px; /* espaço para o ícone */
    background-size: 25px 25px; /* Largura e altura da imagem */
}

label {
    font-size: 16px;
    margin-bottom: 5px; /* Espaço entre o label e o input */
    color: white;
    display: flex;
    flex-direction: column; /* Coloca o label acima do input */
    margin-bottom: 4px; /* Espaço entre os campos */
}

@media (max-width: 900px) {

    /* INPUTS */
    input[type=text] {
        width: var(--xxggll_size);
    }
    input[type=email] {
        width: var(--xxggll_size);
    }
    .textarea {
        width: var(--xxggll_size);
    }
    .selectr {
        width: var(--xxggll_size);
    }
    input[type=submit] {
        width: var(--xxggll_size);
    }
    input[type=file] {
        width: var(--xxggll_size);
    }
    input[type=password] {
        width: var(--xxggll_size);
    }
    input[type=date] {
        width: var(--xxggll_size);
    }
    input[type=datetime-local] {
        width: var(--xxggll_size);
    }
    input[type=color] {
        width: var(--xxggll_size);
    }
    input[type=search] {
        width: var(--xxggll_size);
    }
    input[type=url] {
        width: var(--xxggll_size);
    }
    input[type=week] {
        width: var(--xxggll_size);
    }
    input[type=tel] {
        width: var(--xxggll_size);
    }

    /* FOCUS (QUANDO CLICA) */
    input[type=text]:focus {
        width: var(--xxggll_size);
    }
    input[type=email]:focus {
        width: var(--xxggll_size);
    }
    .textarea:focus {
        width: var(--xxggll_size);
    }
    .selectr:focus {
        width: var(--xxggll_size);
    }
    input[type=submit]:focus {
        width: var(--xxggll_size);
    }
    input[type=file]:focus {
        width: var(--xxggll_size);
    }
    input[type=password]:focus {
        width: var(--xxggll_size);
    }
    input[type=date]:focus {
        width: var(--xxggll_size);
    }
    input[type=datetime-local]:focus {
        width: var(--xxggll_size);
    }
    input[type=color]:focus {
        width: var(--xxggll_size);
    }
    input[type=search]:focus {
        width: var(--xxggll_size);
    }
    input[type=url]:focus {
        width: var(--xxggll_size);
    }
    input[type=week]:focus {
        width: var(--xxggll_size);
    }
    input[type=tel]:focus {
        width: var(--xxggll_size);
    }
}