:root {
    --playercheight: 400px;
}

body {
    font-family: Lato;
    font-size: 16px;
    font-weight: 500;
    line-height: 19.2px;
    letter-spacing: -0.03em;
    text-align: left;
    background-image: url("/assets/img/bg.png");
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 300px 100px;
}

#h-container {
    margin-top: 34px;
}

#nav {
    margin: 22px;
    float: right;
}

#nav li {
    display: inline;
    margin-left: 10px;
    font-weight: 800;
    color: #2A5596
}

#nav li a {
    display: inline;
    margin-left: 10px;
    font-weight: 500;
    text-decoration: none;
    color: #2A5596;
}

.chamada {
    color: #666;
    border: 1px solid #E6E6E6;
    background-color: #fff
}

.chamada h3 {
    font-family: Lato;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.07em;
    text-align: left;
    margin-bottom: 30px;

}

.chamada p {
    font-family: Lato;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    text-align: left;

}

.chamada i {
    font-size: 14px;
    border-color: #666;

}

.container {
    max-width: 1465px;
}

.fixed-bottom {
    background: #0167C0;
    font-family: Lato;
    font-size: 11px;
    font-weight: 800;
    line-height: 12px;
    text-align: left;
    color: #fff
}


textarea {
    font-family: Lato;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.04em;
    text-align: left;
    padding: 20px !important;
    resize: none;

}

#botao,
#botaostop {
    position: absolute;
    right: 25px;
    top: 25px;
    cursor: pointer;
}

#botao {
    z-index: 4;
}

#botaostop {
    z-index: 5;
}

#player {
    height: 800px;
    margin-top: -60px;
    width: 120%;
}

#player-c {
    height: 500px;
    z-index: 8;
    overflow: hidden;
}

#playerContainer {
    height: 500px;
    margin-top: -80px
}

#voiceSwitch {
    font-family: Lato;
    font-size: 16px;
    font-weight: 800;
    line-height: 19.2px;
    letter-spacing: -0.03em;
    color: #2A5596;
    position: absolute;
    top: 100px;
    right: 0px;
    z-index: 9;

}

#history {
    left: 5%;
    width: 45%;
    z-index: 11;
    overflow-y: auto;
    padding: 20px;
    text-align: right;
    height: 100%;
}

#history div {
    margin-bottom: 10px;

}

#history div.histLabel {
    color: #9A9BB1 !important;
    font-family: Roboto;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    margin-bottom: 0px;

}

#history .request {
    font-family: Roboto;
    border-radius: 0px 16px 16px 16px;
    background-color: #ddd;
    font-size: 16px;
    font-weight: 400;
    line-height: 18.75px;
    text-align: left;
    max-width: 90%;
    float: left;
    margin-right: auto;
    margin-top: 5px;
    padding: 12px 16px;
    text-wrap-mode: wrap;
    word-wrap: break-word;
}

#history .response {
    width: Fill (305px)px;
    height: Hug (290px)px;
    padding: 12px 16px;
    gap: 8px;
    border-radius: 16px 16px 0px 16px;
    opacity: 0px;
    background-color: #1565C0;
    color: #fff;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 18.75px;
    text-align: left;
    max-width: 90%;
    margin-left: auto;
    display: inline-block;
    text-wrap-mode: wrap;
    word-wrap: break-word;
}

#history::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 12px;
    background-color: #FAFAFA;
}

#history::-webkit-scrollbar {
    width: 10px;
    background-color: #FAFAFA;
}

#history::-webkit-scrollbar-thumb {
    border-radius: 12px;
    -webkit-box-shadow: none;
    background-color: #ccc;
}

textarea::placeholder {
    position: absolute !important;
    top: calc(50% - 15px);

}

#welcome {
    top: 100px;
    left: 100px;
    width: 35%;
    z-index: 10
}

#welcome p {
    font-family: Lato;
    font-weight: 500;
    line-height: 33.6px;
    letter-spacing: -0.03em;
    text-align: left;
    color: #2A5596;
    padding-bottom: 40px;
}

#welcome .p1 {
    font-size: 30px;
}

#welcome .p2 {
    font-size: 25px;
}

.spacer {
    height: 5px;
    width: 100%;
}

@media (max-width: 1400px) {
    #playerContainer {
        margin-top: 30px;
    }
}

@media (max-width: 921.98px) {
    #player {
        margin-top: 0px;
    }

    #h-container {
        margin-top: 0px;
    }

    header img {
        width: 76px;
    }

    header>a {
        margin-left: 0px !important;
    }

    header>ul {
        margin: 0px;
    }

    #nav {
        margin: 0px;
        margin-top: 10px;

    }

    #welcome {
        top: 150px;
        left: 30px;
        width: 35%;
    }

    #welcome .p1 {
        font-size: 16px;
        padding-bottom: 0px;
    }

    #welcome .p2 {
        font-size: 16px;
        line-height: 19.2px;
    }

    #playerContainer {
        height: 400px;
        margin-top: 0px;
    }

    #player-c {
        height: 400px;
        top: auto;
        bottom: 0px;
    }

    #player {
        height: calc(var(--playercheight)*1.19);
        bottom: -120px;
    }

    textarea {
        font-size: 12px !important;
        line-height: 12px;
        padding: 15px !important;
        position: relative;
    }

    #botao,
    #botaostop {
        width: 40px;
        height: 40px;
        right: 10px;
        top: 22px;
    }


    #history {
        left: 5%;
        width: 45%;
        z-index: 11;
        overflow-y: auto;
        padding: 20px;
        text-align: right;
        margin-top: 0px;
        border: 0px !important
    }

    #history div {
        margin-bottom: 10px;
    }

    #history .histLabel {
        font-size: 8px;

    }

    #history .request {
        text-wrap-mode: wrap;
        font-family: Roboto;
        font-size: 10px;
        font-weight: 400;
        line-height: 11px;
        text-align: left;
        max-width: 90%;
        margin-right: auto;
        margin-top: 10px;
        word-wrap: break-word;
    }

    textarea::placeholder {
        top: calc(50% - 12px);

    }

    #history .response {
        width: Fill (305px)px;
        height: Hug (290px)px;
        padding: 12px 16px;
        gap: 8px;
        border-radius: 16px 16px 0px 16px;
        opacity: 0px;
        background-color: #1565C0;
        color: #fff;
        font-family: Roboto;
        font-size: 10px;
        font-weight: 400;
        line-height: 11px;
        text-align: left;
        max-width: 90%;
        margin-left: auto;
        display: inline-block;
        text-wrap-mode: wrap;
        word-wrap: break-word;
    }
}

#rec,
#rec a {
    font-family: Lato;
    font-size: 16px;
    font-weight: 800;
    line-height: 19.2px;
    letter-spacing: -0.03em;
    text-align: left;
    color: #2A5596;
    text-decoration: none;
}