/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 2.7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

.full-width-input {
    width: 100%;
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}


@media (max-width: 600px) {
    .responsive-table tbody tr {
        display: block;
    }

    .responsive-table tbody tr th,
    .responsive-table tbody tr td {
        display: block;
    }

    .responsive-table tbody tr td.cami-name {
        order: -1;
    }
}

header .custom-logo-link img {
    margin-left: 10px;
}

.site-title {
    margin-top: 30px;
}

.ast-site-title-wrap .site-title {
    font-size: 18px;
    /*font-family: 'Arial', sans-serif;*/
}

/*.ast-site-title-wrap {
    margin-top: 12px;
}*/

.ast-site-title-wrap .cap_sub-header {
    text-transform: uppercase;
    font-size: 11px;
}

.cap_user-info {
    font-size: 12px;
}



::selection {
    background-color: brown;
    color: white;
}


.b {
    font-weight: bold;
}

/* Estils globals per als botons */
/*button,*/
.btn-primary {
    background-color: #855049b8 !important;
    color: white;
    border: 1px solid #855049b8 !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    line-height: 1.5rem;
    border-radius: 0.25rem;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
}

/*button:hover,*/
.btn-primary:hover {
    background-color: #ff5d2b !important;
    /* Color de fons quan es fa hover */
    border-color: #ff5d2b !important;
    color: #ffffff;
    /* Color del text quan es fa hover */
}

/*button:focus,*/
.btn-primary:focus {
    box-shadow: 0 0 0 .08rem rgba(255, 49, 12, 0.941) !important;
    outline: none !important;
    border-color: #ff5d2b !important;
    background-color: #ff0000 !important;
    color: #ffffff;
}




.fs32 {
    font-size: 32px;
}

.fw600 {
    font-weight: 600;
}

.rem070 {
    font-size: 0.7rem;
}

.rem085 {
    font-size: 0.85rem;
}

.rem100 {
    font-size: 1.0rem;
}

.rem120 {
    font-size: 1.2rem;
}

.rem160 {
    font-size: 1.6rem;
}

.rem200 {
    font-size: 2.0rem;
}

.rem250 {
    font-size: 2.5rem;
}

.rem260 {
    font-size: 2.6rem;
}


.rem270 {
    font-size: 2.7rem;
}

.rem280 {
    font-size: 2.8rem;
}

.w150 {
    width: 150px;
}

.w200 {
    width: 200px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt40 {
    margin-top: 40px;
}

.ml10 {
    margin-left: 10px;
}

.ml15 {
    margin-left: 15px;
}

.ml30 {
    margin-left: 30px;
}

.mr10 {
    margin-right: 10px;
}

.mb0 {
    margin-bottom: 0px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb30 {
    margin-bottom: 30px;
}

.p20 {
    padding: 20px;
}

.pl45 {
    padding-left: 45px;
}


.info-alert {
    margin-bottom: 5px;
    padding: 10px;
}

.gris-clar {
    background-color: #f8f8f8;
}

.negreta {
    font-weight: bold;
}

.verd-clar {
    color: #6effe7;
}

.vermell-intens {
    color: #ff0000;
}

.fucsia {
    color: #ff00ff;
}

/* Pàgina Camins */



#search-camins {
    min-width: 300px;
    max-width: 400px;
    margin: 10px auto 0px;
}

.titol_centrat {
    width: 100%;
    text-align: center;
}

#zona-filtres {
    text-align: center;
    padding: 0;
}

.zona-filtre {
    margin: 0 2px;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 0.7em;
    cursor: pointer;
    border-radius: 5px;
    background-color: #f2f2f2;
    color: #333;
    transition: background-color 0.3s;
}

.zona-filtre:hover {
    /*background-color: #e0e0e0;*/
    text-decoration: none;
    background-color: #ff5d2b !important;
    /* Color de fons quan es fa hover */
    border-color: #ff5d2b !important;
    color: #ffffff;
}

.zona-filtre:focus {
    box-shadow: 0 0 0 .08rem rgba(255, 49, 12, 0.941) !important;
    outline: none !important;
    border-color: #2c3368 !important;
    background-color: #2c3368 !important;
    color: #ffffff;
}

.zona-activa {
    background-color: #2c3368;
    /* Gris fosc */
    color: #fff;
    /* Lletres blanques */
}

#loading {
    display: none;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0px 0 0 0;
    z-index: 9999;
}

#opcions-cerca label {
    display: inline-block;
    margin-right: 10px;
    padding: 0px 10px;
    text-decoration: none;
    font-size: 0.7em;
    cursor: pointer;
    vertical-align: middle;
}

#opcions-cerca input[type="radio"] {
    vertical-align: middle;
    margin-top: -4px;
}

/* TAULA CAMINS ----------------------------------- */

#taula_camins {
    max-width: 400px;
    margin: 15px auto;
}

.table-hover tbody tr {
    transition: background-color 0.3s ease-in-out;
}

.table-hover tbody tr:hover {
    background-color: #f5f5f5;
    cursor: pointer;
    border: 1px solid #2c3368;
}

.codi-cami-column {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cami-row .cami-name a {
    text-decoration: none;
    color: #333;
}


.cami-row th,
.cami-row td {
    margin-right: 10px;
    /* Ajusta aquest valor segons necessitis */
}

@media screen and (max-width: 544px) {
    .cami-row {
        display: flex;
        flex-direction: row;
    }

    .cami-row td {
        /* Afegeix aquesta regla */
        display: table-cell !important;
        width: 100%;
    }

    .codi-cami-column {

        width: 80px !important;
        min-width: 80px;
        max-width: 80px;
        text-align: center;
    }

    .cami-name {
        flex: 1;
        /* Permet que aquesta cel·la ocupi l'espai restant */
        text-align: left;
    }

    .cami-name a {
        word-wrap: break-word;
        display: block;
    }
}

/* PAGINA CAMÍ ---------------------------------------------------- */

/*top*/

/* Estils per les icones */
#el_contenidor {
    display: flex;
    justify-content: space-between;
    /* Alinea els elements a l'esquerra i a la dreta respectivament */
    align-items: center;
    /* Centra els elements verticalment */
    padding: 10px 0;
    box-sizing: border-box;
    /* Inclou el padding dins de l'amplada total */
    width: 100%;
}

#icones {
    cursor: pointer;
    width: 40px;
    /* Mida fixa per a la icona */
    height: 40px;
    padding: 5px;
    display: flex;
    align-items: center;
}

#cerca {
    display: flex;
    flex-grow: 1;
    /* Permet a la caixa de cerca ocupar l'espai disponible, respectant la mida màxima */
    max-width: 500px;
    /* Màxim ample per la caixa de cerca */
    margin-left: 20px;
    /* Margen esquerre per separar les icones de la caixa de cerca */
}

#cerca .md-form {
    display: flex;
    width: 100%;
}

#cerca input[type="text"] {
    flex-grow: 1;
    /* Permet que l'input de text ocupi l'espai disponible */
    margin-right: 5px;
    /* Espai entre l'input de text i el botó */
}

#cerca input[type="button"] {
    width: 100px;
    /* Ample fix per al botó de cerca */
}

#cami-search-results {
    flex-direction: column;
    clear: both;
    width: 400px;
    margin: 10px 0px 10px auto;
}


/* Media queries per a adaptabilitat en dispositius petits */
@media (max-width: 600px) {
    #el_contenidor_top {
        flex-direction: column;
        /* Apila els elements verticalment */
    }

    #icones,
    #cerca {
        width: 100%;
        /* Fa que tant les icones com la caixa de cerca ocupin tot l'amplada */
        margin-left: 0;
    }

    #cerca {
        max-width: none;
        /* Elimina el marge esquerre en pantalles petites */
    }

    #cerca input[type="text"] {
        width: calc(100% - 105px);
        /* Ajusta l'ample deixant espai per al botó */
    }

    #cerca input[type="button"] {
        width: 100px;
    }
}









/* end top */

/* titols */
#titols {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    /* Aquesta línia assegura l'alineació al top */
    width: 100%;
}

#titols>div {
    margin-top: 0;
    box-sizing: border-box;
}

#titols h2,
#titols p {
    word-wrap: break-word;
    /* Assegura que les paraules es trenquin per ajustar-se al contenidor */
    overflow-wrap: break-word;
    /* Alternativa moderna a word-wrap, fa el mateix */
    hyphens: auto;
    /* Permet la hifenació automàtica si és suportada */
}

#titol-zona {
    text-align: left;
    /*min-width: 150px;*/
    /* Estableix una amplada mínima en píxels */
    min-width: 70px;
    /*max-width: 90px;*/
}

#titol_a4 {
    text-align: right;
    flex-grow: 1;
    /* Permet que aquest div ocupi l'espai restant */
    min-width: 100px;
    /* Estableix una amplada mínima per assegurar-se que no es redueix massa */
    max-width: 80%;

}

/* Estils per a pantalles amples */
@media (min-width: 600px) {
    #titols>div:first-child {
        width: 30%;
        /* Assigna un percentatge de l'amplada del contenidor a cada div */
    }

    #titol_a4 {
        width: 70%;
    }

    #titols h1 {
        font-size: 2.5rem;
    }

    #titols h2 {
        font-size: 2.0rem;

    }

    #titols p {
        font-size: 90%;
    }
}

/* Estils per a pantalles més petites */
@media (max-width: 599px) {
    #titols {
        flex-direction: row;
    }

    #titols h1 {
        font-size: 2rem;
    }

    #titols h2 {
        font-size: 1.5rem;
    }

    #titols p {
        font-size: 80%;
    }
}

/* end titols */

/* map i elevacio */

#contenidor_map_elev {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 10px;
}

#map {
    width: 100%;
    height: 37vw;
    margin-bottom: 10px;
    max-height: 500px;
}

#elevation_chart {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
}

/*@media screen and (max-width: 768px) {*/
@media screen and (max-width: 544px) {
    #el_contenidor {
        flex-direction: column;
    }

    #map {
        height: 70vw;

    }

}

/*ICONES DE LA PÀGINA CAMÍ*/
#icones_dels_emergents i {
    cursor: pointer;
}


/*MODALS */
.modal {
    height: 100%;
    margin: 0px;
    padding: 0px !important;
}

#modalYt360 .modal-content,
#modalYtNormal .modal-content,
#modalSV .modal-content {
    background: rgba(255, 255, 255, 0.8);
    color: #fff;
    width: 90%;
    margin: 0 auto;
    border: 0px solid #000 !important;
    padding: 10px;
}

#commentModal .modal-content {
    background: rgba(255, 255, 255, 1);
    width: 90%;
    margin: 0 auto;
    border: 0px solid #000 !important;
    padding: 10px;
}

#modalYt360 .modal-header,
#modalYt360 .modal-footer,
#modalYtNormal .modal-header,
#modalYtNormal .modal-footer,
#modalSV .modal-header,
#modalSV .modal-footer,
#commentModal .modal-header,
#commentModal .modal-footer {
    border: 0px solid #000 !important;
}

#modalYt360 .modal-body,
#modalYtNormal .modal-body,
#modalSV .modal-body,
#commentModal .modal-body {
    height: 55.26vw;
    max-height: 562px;
    padding: 0 !important;

}

.modal-backdrop.show {
    opacity: 0.7 !important;
}

.modal-content .close,
.modal-content .modal-title {
    color: #6c6d7e;
    background: inherit;

}

.modal-dialog {
    width: 90%;
    max-width: none !important;
    margin: 0 auto;
    height: 100%;
}

#commentVisibility {
    max-width: 200px;
}

@media (min-width: 768px) {

    #modalYt360 .modal-content,
    #modalYtNormal .modal-content,
    #modalSV .modal-content,
    #commentModal .modal-content {
        max-width: 768px !important;
        padding: 20px;
    }

    #commentText {
        height: 200px;

    }
}

@media (min-width: 1000px) {

    #modalYt360 .modal-content,
    #modalYtNormal .modal-content,
    #modalSV .modal-content,
    #commentModal .modal-content {
        max-width: 999px !important;
    }

    #commentText {
        height: 200px;

    }
}

/* Estils per al login
*/

.logo-container {
    display: flex;
    justify-content: center;
}


.login-form-wrapper {
    max-width: 400px;
    /* O l'amplada que prefereixis per al teu formulari */
    margin: 0 auto;
    /* Això centra el div */
    padding: 20px;

}

.login-form-container {
    max-width: 400px;
    width: 100%;
    /* Ajusta aquest valor si vols que el formulari tingui una amplada específica dins dels 400px */
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Els teus altres estils aquí */
}

.login-form-container label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.login-form-container input[type="text"],
.login-form-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    /* Completem la definició de la propietat border */
    border-radius: 4px;
    /* Afegeix un lleuger arrodoneix a les cantonades */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Opcional: afegeix una lleugera ombra interior per a profunditat */
    font-size: 1.2em;
    /* Ajusta la mida de lletra per millorar la llegibilitat */
}

.login-form-container input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    /* Elimina el borde per a un aspecte més net */
    background-color: #007bff;
    /* Un blau viu, però pots escollir qualsevol color */
    color: white;
    /* Text blanc per contrast */
    border-radius: 4px;
    /* Arrodoneix les cantonades del botó */
    cursor: pointer;
    /* Canvia el cursor a una mà per indicar interactivitat */
    font-size: 1em;
    /* Ajusta la mida de lletra */
    margin-top: 10px;
    /* Afegeix un marge superior per separar-lo dels inputs */
}

/* Estils per al botó de submit quan es passa el ratolí per sobre */
.login-form-container input[type="submit"]:hover {
    background-color: #0056b3;
    /* Fosc per efecte hover */
}

.qr-code-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}


/*COMENTARIS A LA PÀGINA CAMI*/
#comment-section {
    margin-top: 70px;
    padding: 10px 0px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.comment-actions i {
    cursor: pointer;
}

.comment {
    border-bottom: 1px solid #ccc;
    padding: 8px 10px;
}

.comment:hover {
    background-color: #f3f3f3;
    /* Color de fons lleuger en passar el ratolí */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Sombrejat lleuger */
    /*cursor: pointer; /* Canvia el cursor per indicar interactivitat */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* Transició suau */
}

i.edit-comment:hover {
    color: #28a745 !important;
}

i.delete-comment:hover {
    color: #dc3545 !important;
}

.comment:last-child {
    border-bottom: none;
}


/* PÀGINA GESTIÓ D'USUARIS *********************************************************************/

tr.inactive-user {
    background-color: #ffeaea;
    /* Light red */
}

.card.inactive-user {
    background-color: #ffeaea;
    /* Light red */
}

/*
.edit-button {
    cursor: pointer;
    -webkit-appearance: button;
    appearance: button;
    text-transform: none;
    overflow: visible;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: 0px solid var(--ast-global-color-2);
    border-radius: 0px;
    color: var(--ast-global-color-2);
    background-color: var(--ast-global-color-0);
    padding: 10px 20px;
}
*/
#user-form label {
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: bold;
}

/*
#notification-container {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: red;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000; 
}

*/
#newCompanyModal .modal-dialog,
#confirmModal .modal-dialog,
#deleteCommentModal .modal-dialog {
    max-width: 400px !important;
    margin: 50px auto !important;
}


/* MODAL FEEDBACK */

#feedbackModal .modal-dialog {
    max-width: 650px !important;
    margin: 50px auto !important;
}

.fons-titol-feedback {
    background-color: #12162d;
    color: white !important;

}

.blanc {
    color: white !important;
}

#fdFeedbackForm label {
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: bold;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

/* ICONES CAMINS I COMENTARIS */
.fas,
.fab {
    color: #adb5bd;
}

.fas:hover,
.fab:hover {
    color: #75645d;
}

/* END ICONES CAMINS I COMENTARIS */




/* PÀGINA COMENTARIS */
.icon_zona {
    width: 35px;
    height: 35px;
    background-image: url('/wp-content/themes/astra-child/imatges/zones-ASCO_02.png');
    display: inline-block;
    transform: scale(0.5);
    transform-origin: top left;
    margin-bottom: -16px;
}

.zona-2 {
    background-position: 0 0;
}

.zona-1 {
    background-position: -38px 0;
}

.zona-4 {
    background-position: -76px 0;
}

.zona-3 {
    background-position: -114px 0;
}

h4 .icon_zona {
    display: inline-block;
    margin-left: 10px;
    vertical-align: bottom;
}

.search-bar form {
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: 20px;
}

.search-bar .form-group {
    margin-bottom: 20px;
    width: 250px;
}

.search-bar .form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #748aa1;
}

.search-bar input[type="text"],
.search-bar select,
.search-bar button {
    width: 100%;
}

.search-bar button {
    padding: 10px 20px;
}

@media (max-width: 600px) {
    .search-bar form {
        width: 100%;
        padding: 10px;
    }

    .search-bar .form-group {
        width: 100%;
    }
}

#espai-comentaris .comment h4 {
    margin-bottom: 0px;
    font-size: 1.2rem;
}



/* END PÀGINA COMENTARIS */