body {
    display: grid;
    grid-template-columns: 375px;
    justify-content: center;
    align-items: center;
    color: white;
    background-image: url("./assets/images/background-mobile.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: "Inconsolata", monospace;
}

label {
    font-size: 20px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1rem 10px;
}

.logo-inicio>img {
    width: 155px;
}

.container-avatar {
    margin: 0 0.6rem;
}

.container-upload {
    display: grid;
    border-radius: 0.7rem;
    border: 2px dashed rgba(255, 255, 255, 0.473);
    background-color: hsla(245, 19%, 35%, 0.292);
}

.container-upload:hover {
    background-color: hsla(245, 19%, 35%, 0.679);
}

.container-upload p{
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-top: 0;
    color: rgba(255, 255, 255, 0.485);
}

.img-upload {
    text-align: center;
    margin: 1rem 0 1rem 0;
}

.img-upload>img {
    background-color: rgba(243, 230, 215, 0.16);
    border-radius: 0.5rem;
    border: 0.3px solid rgba(183, 163, 163, 0.218);
    width: 40px;
    height: 40px;
    cursor: pointer;

}

.container-upload>input {
    display: none;
}

.container-error {
    display: grid;
    grid-template-columns: 23px 1fr;
    grid-template-rows: 40px;
    align-items: center;
    margin: 0;
}

.emailUser{
    display: inline-block;
}
.email-user-error{
    display: grid;
    grid-template-columns: 23px 1fr;
    grid-template-rows: 0px;
    align-items: center;
    margin-top: 0;
}


.control-error{
    margin: 0;
    display: inline-block;
    font-size: xx-small;
    color: rgba(255, 255, 255, 0.434);
}

.parrafo-error{
    margin: 0;
    display: inline-block;
    font-size: xx-small;
    color: hsl(7, 88%, 67%);
}

h1 {
    margin-top: 30px;
    font-size: 26px;
    text-align: center;
}

.container p {
    margin: 8px 0 5px 0;
    font-size: 18px;
    text-align: center;
    color: rgba(255, 255, 255, 0.647);
}

.container-form-user {
    margin: 0 14px;
}

.container-form-user label {
    display: grid;
    margin: 1rem 0;
}

.container-form-user input {
    margin: 0.5rem 0;
    height: 50px;
    border-radius: 0.7rem;
    padding: 0 1rem;
    color: white;
    background-color: rgba(139, 174, 174, 0.178);
    border: 0.3px solid rgba(255, 255, 255, 0.474);
}

.container-form-user input:hover {
    background-color: hsla(245, 19%, 35%, 0.679);
    box-shadow: 1px 1.3px 1px;

}

#generateTicketBtn {
    display: grid;
    grid-template-rows: 45px;
    align-items: center;
    border-radius: 0.7rem;
    font-size: 18px;
    color: black;
    background-color: hsl(7, 88%, 67%);
    border: 0 solid rgba(255, 255, 255, 0);
}

#generateTicketBtn:hover {
    background-color: hsl(7, 71%, 60%);
    border-bottom: 2px solid hsl(7, 88%, 67%);
    cursor: pointer;
}

.container-ticket {
    display: grid;
    margin: 5rem 0;
    justify-content: center;
    grid-template-rows: 0;
}

.container-info-ticket img {
    max-width: 100%;
    max-height: 145px;
}

.container-ticket-info-avatar {
    display: grid;
    grid-template-columns: 255px 30px;
    padding: 1rem 1rem;
    grid-template-areas:
        "   logoDate    numeroTiket    "
        "   dataUser    numeroTiket    "
    ;
}

.container-ticket-info-avatar .user-date {
    font-size: x-small;
    text-align: center;
    color: rgba(255, 255, 255, 0.607);
}

.container-logo-date {
    grid-area: logoDate;

}

.container-info-logo-avatar {
    display: grid;
    grid-area: dataUser;
    grid-template-columns: 45px 100px;
    gap: 0 1rem;
    grid-template-areas:
        "   user-logo     user-name  "
        "   user-logo    user-email   "
    ;
}

.numero-tiket {
    display: flex;
    grid-area: numeroTiket;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
    font-size: larger;
    color: rgba(255, 255, 255, 0.537);
}

.container-logo-date>img {
    width: 155px;
    margin-bottom: 0;
}

.container-logo-date>p {
    display: grid;
    margin-top: 3px;
    justify-items: flex-start;
    margin-left: 40px;
    padding-bottom: 1.3rem;
}

.user-logo {
    margin: 0;
    width: 45px;
    height: 40px;
    border-radius: 0.5rem;
    grid-area: user-logo;
}

.user-name {
    margin-top: 0;
    margin-bottom: 0;
    grid-area: user-name;
}

.user-email {
    margin: 0;
    grid-area: user-email;
}

.modify-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

}

.modify-upload .removeAvatar {
    margin-bottom: 10px;
    height: 27px;
    font-size: x-small;
    border-radius: 0.4rem;
    border: 0 solid rgba(255, 255, 255, 0);
    background-color: rgba(255, 255, 255, 0.101);
    color: rgba(255, 255, 255, 0.786);
    cursor: pointer;
}

.modify-upload .editAvatar {
    margin-bottom: 10px;
    /* height: 27px; */
    padding: 0.5rem;
    font-size: 11px;
    border-radius: 0.4rem;
    border: 0 solid rgba(255, 255, 255, 0);
    background-color: rgba(255, 255, 255, 0.101);
    color: rgba(255, 255, 255, 0.786);
    cursor: pointer;
}

h1 #ticketTitleName {
    font-size: 27px;
    display: inline-block;
    background: linear-gradient(to right, hsl(7, 88%, 67%), white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#recived-email {
    display: inline-block;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

#ticketTitleEmail {
    display: inline-block;
    color: hsl(7, 88%, 67%);
}


@media(max-width: 375px) {
    body {
        display: inline-block;
    }

}