html {
    font-size: 10px !important;
}

body {
    /*margin-left: 1rem !important;*/
    /*margin-right: 1rem !important;*/
    min-width: 340px;
}

h1 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit !important;
}

label {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit !important;
    margin-bottom: 0;
}

.form-body {
    padding: 0 !important;
}

.form-control {
    font-size: 1.4rem;
}

.h5 {
    font-size: 1.4rem;
    line-height: 1.4 !important;
}


.select2-default {
    color: #5C5C5C !important;
}

.contenidor {
    clear: both;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

.contenidor-titol {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: center;
    margin-bottom: 2.5rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgb(214, 214, 214);
}

.contenidor-titol > .boto-enrere {
    flex: 0 0 auto;
}

.contenidor-titol > .titol {
    flex: 2 1 auto;

}

.contenidor-titol > .idiomes {
    flex: 0 1 auto;
    /* overflow: hidden; */
    white-space: nowrap;
}

.contenidor-peu {
    margin-top: 2.5rem;
}


.contenidor-cos {
    clear: both;
    padding: 0;

}

.control-label {
    padding-bottom: 0.7rem;
}

#diahorapicker {
    outline: 0;
}

#diahorapicker:focus {
    outline: none;
}

#horapicker {
    outline: 0;
}

#horapicker:focus {
    outline: none;
}


.btn.personal {
    color: white;
    text-shadow: none;
    background-color: #1a1a1a;
}


.btn.personal:hover,
.btn.personal:focus,
.btn.personal:active,
.btn.personal.active,
.btn.personal.disabled,
.btn.personal[disabled] {
    color: #fff !important;
    outline: none !important;
    filter: alpha(opacity=70);
    opacity: 0.70;
}

.btn.retorn {
    padding: 0 1.5rem 0 0;
    background-color: white;
    border-right: 1px solid #D6D6D6;
    margin-right: 1.5rem;
    font-size: 2.2rem;

}

.datetimepicker table tr td.day:hover,
.datetimepicker table tr td.day.focused {
    background: #0060BF;
    color: #FFF !important;
    cursor: pointer;
}

.datepicker_actiu {
    background-color: #006100;
    color: #FFF;
}

.datetimepicker table tr td.disabled {
    color: #595959 !important;
}

.datetimepicker table tr td span:hover {
    background-color: #0060BF;
    color: #FFF;
    cursor: pointer;
}

.treure_padding {
    padding: 0 !important;
}

.taula-td-right {
    text-align: right;
}

.font14px {
    font-size: 1.4rem
}

.line14 {
    line-height: 1.4;
}

.font16px {
    font-size: 1.6rem
}

.font18px {
    font-size: 1.8rem
}

.fontBold {
    font-weight: bold;
}

.web-cita {
    margin-left: 0 !important;
}

.logo-client {
    margin: 1.5rem 0 2.5rem 0;

}

.nom-oficina {
    display: inline-block;

}

.fila-cites-consulta {
    margin-bottom: 0.5rem;
}

.btn-aling-top {
    vertical-align: top;
}

.codi-cita {
    font-family: Consolas, monaco, monospace;
    font-size: 1.8rem;
}

.alert-warning {
    margin-bottom: 0 !important;
}

.idioma-actiu {
    font-weight: bold !important;
    border-color: #000 !important;
}

.font-titol {
    font-size: 2.2rem !important;
    color: #000;
}

.color-gris {
    color: #979797;
}

.vl {
    margin: 0 1rem 0 1rem;
    border-left: 1px solid #979797;
}

.quadre {
    font-size: 1.2rem;
    margin-right: 1rem;
}

.portal-titols {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 1.6rem;
}

.portal-titols-cita {
    margin: 1rem 0 1rem 0;
}

.portal-boto-finalitzar {
    margin-top: 3.5rem;
    margin-bottom: 4rem;
}

.h5-marge-bt {
    margin-bottom: 3rem;
}

.portal-titols-titol {
    font-weight: bold;
}

.separacio-elements {
    margin-bottom: 2rem;
}

.marge-quadre {
    margin-left: 2.2rem;
}

.llista-oficines {
}

.oficina {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #D6D6D6;
}

.foto {
    flex: 0 0 120px;
    order: 0;
    padding-right: 1.5rem;
}

.informacio {
    flex: 1 1 0;
    order: 1;
    font-size: 1.6rem;
    line-height: 1.6;
}

.disponiblitat {
    flex: 0 0 auto;
    order: 2;
    font-size: 1.6rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.boto-oficina {
    flex: 0 0 auto;
    order: 3;
    padding-left: 1.5rem;
}

.d-alta {
    color: #00663C;
    font-weight: 600;
}

.d-mitja {
    color: #794F0B;
    font-weight: 600;
}

.d-baixa {
    color: #C94343;
    font-weight: 600;
}

#mapa {
    height: 34rem;
}

.color-gris-ccc {
    color: #5E5E5E;
}

.info-oficina-1 {
    font-size: 1.6rem;
    line-height: 1.6;
}

.info-oficina-2 {
    margin-top: 2.2rem;
    margin-bottom: 2.2rem;
    font-weight: lighter;
    font-size: 1.4rem;
    line-height: 1.4;
    display: grid;
    grid-template-columns: 20rem auto;
    grid-gap: 3rem;
}

.info-oficine-2-no-foto {
    grid-template-columns: 0 auto;
    grid-gap: 0;
}

.info-oficina-2-foto {
    grid-column: 1 / 2;
}

.info-oficina-2-text {
    grid-column: 2 / 2;

}

.info-cita-confirmada {
    padding: 2rem 4rem;
}

.info-cita-confirmada-fa {
    color: #18632E;
    font-size: 2.6rem;
    font-weight: bold;
}

.info-cita-confirmada-titol {
    color: #18632E;
    font-size: 2rem;
    font-weight: bold;
}

.info-cita-confirmada-tramit, .info-cita-confirmada-data {
    color: #18632E;
    font-size: 1.8rem;
    padding-top: 0.5rem;
}

.info-cita-confirmada-recordatori {
    margin-top: 2.8rem;
}

.dades_oficina {
    margin-top: 1rem;
    margin-bottom: 2rem;
    margin-left: 2.2rem;
}

.info-cita-botons {
    margin-top: 4rem;
}

.num-resultats {
    color: rgba(0, 0, 0, 0.32);
    font-weight: bold;
    border-bottom: 1px solid rgb(209, 209, 209);
    padding-bottom: 0.2rem;
}

.llistat-tramits-cerca {
    margin-top: 1rem;
}

.llistat-tramits {
    padding-left: 3rem;
}

.tramit {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;
    border-bottom: solid 1px #D6D6D6;
    padding-bottom: 1rem;
}


.informacio-oficina-cerca {
    display: flex;
    font-size: 1.6rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.foto-oficina-cerca {
    flex: 0 0 120px;
    padding-right: 1.5rem;
}

.nom-tramit {
    flex: 2 1 0;
    order: 0
}

.disponiblitat-tramit {
    flex: 0 0 auto;
    order: 1;
    text-align: right;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.boto-tramit {
    flex: 0 0 auto;
    order: 2;
    padding-left: 1.5rem;
}

#capa-cerca {
    display: none;
}

#capa-buscant {
    display: none;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.6;
    margin-top: 3.5rem;
}

#capa-eliminant {
    display: none;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.6;
    margin-top: 3.5rem;
}

.llistat-tramits-cerca-no-resultats {
    font-size: 1.6rem;
    text-align: center;
    padding: 2rem;
    background-color: #FCF4F4;
    border: solid 1px #EAC4C4;
    color: #333;
}

.text-consultar-info {
    margin-bottom: 3.5rem;
}

.text-consultar-input {
    margin-bottom: 2.5rem;
}

.text-consultar-eliminar-ok {
    font-size: 1.6rem;
    text-align: center;
    padding: 2rem;
    background-color: #d6e9c6;
    border: solid 1px #dff0d8;
    color: #333;
}

.visible-mobile, .visible-desktop {
    display: none !important;
}

.botons {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

.pagina-cercar .boto-cercar {
    width: 100%;
    padding-right: 2.2rem;
}

#container-dia, #container-hora {
    width: 200px;
}

#infohores {
    /*
    padding: 0 2rem;
     */
}

.container-calendari {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.llistat-cites {
    display: grid;
    margin-top: 0.8rem;
}

.cita-assistents {
    text-align: center;
}

.llista-cites_no_multiples_assistents {
    grid-template-columns: repeat(2, 1fr) 2fr auto;
}

.llista-cites_multiples_assistents {
    grid-template-columns: repeat(2, 1fr) 2fr 1fr auto;
}

.llistat-cites > div {
    padding: 1.2rem 0.3rem;
    border-bottom: 1px solid rgb(209, 209, 209);
}

.ocultar {
    display: none !important;
    visibility: hidden !important;
}

.sense_hores {
    background-color: #f2efef;
    color: black;
}

.datepicker_actiu_text {
    color: #006100 !important;
}

#infodies {
    margin: 10px;
    line-height: 30px;
}

.busy_leyenda {
    color: #f2efef;
    background-color: #f2efef;
}

#infohores {
    margin: 10px;
    line-height: 30px;
}

.sense_hores_text {
    color: #f2efef;
}

.pointer {
    cursor: pointer !important;
}

.pre_container {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.container {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.centered-qr-page {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;
}
.text-qr-page {
    font-size: 18px;
}
.div-text-qr-page {
    padding: 5% 10px;
}
.div-img-qr-page {
    padding-bottom: 5%;
}

.chat-box {
    width: 100%;
    background-color: #f7f7f8;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    transition: height 0.5s ease;
    overflow: hidden;
}

.chat-conversation {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 0;
    display: none;
    margin-bottom: 20px;
}

.chat-message {
    background-color: #e0e7ff;
    color: #333;
    padding: 12px 16px;
    border-radius: 16px;
    margin-bottom: 10px;
    max-width: 75%;
    word-wrap: break-word;
    align-self: flex-start;
    animation: fadeIn 0.3s ease;
    font-family: sans-serif;
}

.chat-user-message {
    color: white;
    align-self: flex-end;
    border-radius: 8px 8px 0px 8px !important;
    text-align: right;
    margin-right: 10px;
}

.chat-bot-message {
    background-color: #97c1e0 !important;
    color: black;
    align-self: flex-start;
    border-radius: 0px 8px 8px 8px !important;
    text-align: left;
    float: left;
    margin-left: 10px;
}

.chat-input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    border-radius: 15px !important;
    padding: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.chat-input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 15px !important;
    outline: none;
}

.chat-button {
    width: 40px;
    height: 40px;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background-color 0.3s ease;
    border-radius: 15px !important;
}

.recording-microphone {
    text-align: center;
    font-style: italic;
}

.arrow-up {
    display: inline-block;
    font-size: 18px;
    color: white;
}

.img-logo-chat {
    max-width: 20px;
    max-height: 20px;
    float: left;
}

.img-loading-response {
    max-width: 50px;
}

.div_informar_problema {
    width: fit-content;
    background-color: indianred;
    border-radius: 5px !important;
    padding: 4px;
    cursor: pointer;
    float: right;
}

.span_informar_problema_general {
    color: aliceblue;
}

.span_informar_problema_text {
    margin-left: 5px;
}

.div_informar_problema_general {
    margin-top: 10px;
    display: none;
}

.informar_problema_text_informat {
    float: right;
    width: fit-content;
    margin-right: 10px;
    padding: 5px;
    display: none;
    color: forestgreen;
}

.audio_chat {
    cursor: pointer;
    width: fit-content;
}

.div_pot_haver_error {
    float: left;
    font-style: italic;
    font-size: 12px;
    margin-top: 10px;
}

@media (min-width: 500px) {
    .visible-desktop {
        display: block !important;
    }

    .botons :not(:first-child) {
        margin-left: 1rem;
    }
}

@media (max-width: 700px) {
    .foto {
        display: none;
    }

    .informacio {
        flex-basis: 80%;
        margin-bottom: 1.2rem;
    }

    .boto-oficina {
        flex-grow: 1;
        order: 2;
        text-align: right;
    }

    .disponiblitat {
        order: 3;
    }

    .mes-info {
        padding-left: 1.5rem;
    }

    .llistat-tramits {
        padding-left: 0;
    }

    .nom-tramit {
        flex-basis: 80%;
        margin-bottom: 1.2rem;
    }

    .disponiblitat-tramit {
        order: 2;
        text-align: left;
    }

    .boto-tramit {
        order: 1;
    }
}

@media (max-width: 500px) {

    /** helpers **/
    .visible-mobile {
        display: block !important;
    }

    /** Estils **/
    #mapa {
        height: 22rem;
    }

    .page-content {
        overflow: unset;
    }

    .foto-oficina-cerca {
        display: none;
    }

    /*
        .nom-oficina {
            width: 80%;
        }

     */
    .info-cita-botons, .info-cita-confirmada-titol,
    .info-cita-confirmada-tramit, .info-cita-confirmada-data {
        text-align: center;
    }

    .idiomes {
        text-align: center;
        padding-bottom: 2.5rem;
    }

    .pagina-inicial .font-titol {
        text-align: center;
    }

    .pagina-inicial .contenidor-peu {
        text-align: center;
    }

    .botons {
        justify-content: center;
        flex-direction: column;
    }

    .botons :not(:first-child) {
        margin-top: 2rem;
    }

    .pagina-cercar #btn-cercar {
        display: none;

    }

    .marge-quadre {
        margin-left: 0;
    }

    .pagina-cercar .boto-cercar {
        padding-right: 0
    }

    .portal-titols > span:first-child {
        display: none;
    }

    .text-oficina-cerca-mes-info {
        display: none;
    }

    .informacio-oficina-cerca {
        margin-right: -20px;
        margin-left: -20px;
        margin-bottom: 0;
    }

    .text-oficina-cerca {
        width: 100%;
        line-height: 2.3;
        text-transform: uppercase;
    }

    .text-oficina-cerca :first-child {
        background-color: rgba(216, 216, 216, 0.28);
        padding-left: 2.2rem;
    }

    .portal-boto-finalitzar {
        text-align: center;
    }

    .info-cita-confirmada-tramit, .info-cita-confirmada-data {
        padding-top: 0.8rem;
    }

    .info-cita-confirmada {
        padding: 2rem 0;
    }

    .portal-titols-titol {
        text-transform: uppercase;
    }

    .dades_oficina {
        margin-left: 0;
    }

    .pagina-consultar .font-titol {
        white-space: unset;
    }

    .container-calendari {
        font-size: 1.4rem;
    }
}


.-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e9ecef;
    border-left-width: 0.25rem;
    border-radius: 0.25rem;
}

.-callout_oficina {
    border-left-color: #5bc0de;
}

.-callout_tramit {
    border-left-color: #c8dc15;
}

.mobile_aceptar_politica {
    width: 100% !important;
    min-width: 350px !important;
}
#div-finalitzacio-tramit {
    margin: 10px 0;
}


@media (max-width: 1024px) {
    .info-oficina-2 {
        grid-template-columns: 0 auto;
        grid-gap: 0;
    }
}