/* Add here all your css styles (customizations) */
:root {
    --blau-clar: #BFE9FF; /* Definir una variable per a color primari */
    --blau-fosc: #00344F; /* Definir una variable per a color secundari */
    --blau-fons: #001F2A; /* Definir una variable per a color secundari */
    --blau-boto: #8DCDFF;
    --gris-boto: #B8C8D4;
    --blau-manangelment: #004b7d;
    --groc-manangelment: #f2e94d;
    --groc-readonly-manangelment: #b6b458;
    --negre-manangelment:#111;
    --blanc-manangelment: #fff;
    --color-fons-taules: #fff;
}

html *
{
    font-family: Poppins;
}

html p, html h1, html h2, html h3, html h4, html h5, html h6, html span, html li, html a, html label, html legend{
    color: var(--blau-manangelment);
}

body {
    background-color: black;
}

body a:hover {
    text-decoration: none; /* No subratllar els enllaços */
}

/*************** ESTILS DE LLETRES / COMPONENTS GENERALS ***************/
h1 {
    background-color: transparent;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.00px;
    line-height: normal;
    margin-bottom: -6.00px;
    margin-top: -1.00px;
    position: relative;
    text-align: left;
    padding-bottom: 20px;
}

.card-manangelment {
    align-items: center;
    background-color: var(--blau-manangelment);
    border-radius: 12px;
    gap: 12px;
    justify-content: center;
    left: 149px;
    padding: 12px;
    top: 1717px;
    color: var(--blanc-manangelment);
}

.card-manangelment p{
    color: var(--blanc-manangelment);
}

.card-manangelment h4 {
     color: var(--blanc-manangelment);
 }

.card-manangelment a,
.card-manangelment a:visited,
.card-manangelment a:active,
.card-manangelment a:hover {
    color: var(--blanc-manangelment) !important;
}

.card-manangelment span {
    color: var(--blanc-manangelment);
}

.desactivat {
    background-color: #494949;
    color: #a8cde0;
    cursor: default;
}

.alert {
    color: #0C3D57 !important;
    border-radius: 12px;
    font-size: 14px;
    padding: 40px;
    border-color: transparent;
}

.alert-danger {
    color: #0C3D57 !important;
    background-color: #FF8D8D;
}

.alert-success {
    color: var(--blanc-manangelment) !important;
    background-color: var(--blau-manangelment) !important;
}

.tooltip-inner {
    background-color: #0C3D57 !important; /* Color de fons personalitzat */
    color: #ffffff; /* Color del text personalitzat */
    font-size: 14px; /* Opcional: ajusta la mida del text */
    border-radius: 15px; /* Opcional: ajusta la forma del tooltip */
    padding: 15px;
    opacity: 1 !important;
    border: 1px solid;
}

.tooltip.show {
    opacity: 1; /* Assegura opacitat completa */
}


.btn-u-green {
    background-color: var(--blau-boto); /* Color de fons personalitzat */
    color: var(--blau-fons); ; /* Color del text personalitzat */
    font-size: 14px; /* Opcional: ajusta la mida del text */
    border-radius: 10px; /* Opcional: ajusta la forma del tooltip */
    padding: 15px;

    border: 1px solid;
}

.btn-primary {
    background-color: var(--blau-manangelment); /* Color de fons personalitzat */
    color: var(--blanc-manangelment); ; /* Color del text personalitzat */
    font-size: 14px; /* Opcional: ajusta la mida del text */
    border-radius: 10px; /* Opcional: ajusta la forma del tooltip */
    padding: 15px;
    min-width: 300px;
    border: 1px solid var(--negre-manangelment); /* Color de la vora */
}

.btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #81c5f9 !important; /* Color de fons personalitzat */
    color: var(--blau-fons) !important; /* Color del text personalitzat */
    border: 1px solid;
}

.btn-primary:disabled:hover, .btn-primary:disabled  {
    color: var(--blau-fons) !important; /* Color del text personalitzat */
    background-color: var(--gris-boto) !important; /* Color de fons personalitzat */
    border-color: #007bff !important;
    cursor: default !important;
}

.btn-warning {
    color: var(--blau-fons); ; /* Color del text personalitzat */
    font-size: 14px; /* Opcional: ajusta la mida del text */
    border-radius: 10px; /* Opcional: ajusta la forma del tooltip */
    padding: 15px;
    border: 1px solid;
}

.btn-warning:hover, .btn-warning:active, .btn-warning:visited {
    color: var(--blau-fons) !important; /* Color del text personalitzat */
    border: 1px solid;
}

.btn-danger {
    background-color: var(--gris-boto); /* Color de fons personalitzat */
    color: var(--blau-fons); ; /* Color del text personalitzat */
    font-size: 14px; /* Opcional: ajusta la mida del text */
    border-radius: 10px; /* Opcional: ajusta la forma del tooltip */
    padding: 15px;
    border: 1px solid;
}

.btn-danger:active, .btn-danger:focus {
    background-color: #494949 !important; /* Color de fons personalitzat */
    color: var(--blau-clar) !important; /* Color del text personalitzat */
    border: 1px solid;
}

.btn-danger:hover {
    background-color: #494949; /* Color de fons personalitzat */
    color: var(--blau-clar); /* Color del text personalitzat */
    border: 1px solid;
}

.ui-widget-content {
    border: 1px solid var(--blau-clar);
    background: var(--blau-fons);
    color: #333333;
}

.ui-menu-item-wrapper:hover {
    border: 0;
    background: var(--blau-fosc);
    border-left: 1px solid var(--blau-clar);
    border-right: 1px solid var(--blau-clar);
}

.u-btn-red {
    color: red;
}

.u-btn-green {
    color: green;
}

/*************** TOP - Login/password o foto usuari ***************/
#top {
    width: 100%;
    min-height: 95px;
    background-color: var(--negre-manangelment);
}

#top_user {
    padding-top: 12px;
    padding-bottom: 12px;
}

#login_form {
    padding-top:20px;
    padding-bottom: 12px;
}

#login_form .login-input {
    border: 1px solid var(--blanc-manangelment) !important; /* Color de la vora */
    border-radius: 5px !important; /* Vores arrodonides */
    padding: 7px 5px !important; /* Reduïm el padding (3px vertical, 5px horitzontal) */
    background-color: transparent !important; /* Fons suau */
    font-size: 12px !important; /* Reduïm la mida del text per fer l'input menys alt */
    font-weight: bold;
    color:var(--blanc-manangelment) !important;
    min-width: 50px;
    width:100%;
}

#login_form .login-input:focus {
    border-color: var(--blanc-manangelment) !important; /* Color de la vora quan està seleccionat */
    box-shadow: 0 0 5px rgba(0,123,255,.5) !important; /* Llum quan està seleccionat */
}

.login-button {
    border: none; /* Treu la vora del botó */
    padding: 8px 0px; /* Espai dins del botó */
    margin-left: 2px;
    border-radius: 5px; /* Vores arrodonides */
    font-size: 12px !important; /* Reduïm la mida del text per fer l'input menys alt */
    transition: background-color 0.3s ease; /* Transició suau en hover */
    width:100%;
    min-width: 50px;
}

.login-button:hover {
    background-color: var(--blau-fosc);   /* Canvi de color en hover */
}

/* Canviar el color del nom d'usuari */
.user-name {
    color: var(--blanc-manangelment) !important; /* Canvia aquest valor pel color que desitgis */
}

/* Canviar el fons del menú desplegable */
.user-dropdown-menu {
    background-color: var(--blau-manangelment);
    border: 1px solid var(--negre-manangelment); /* Elimina els marges o línies del menú */
    font-weight: normal;
    box-shadow: none; /* Elimina qualsevol ombra que pugui tenir el menú */
}

/* Canviar el color del text del menú desplegable */
.user-dropdown-menu .dropdown-item {
    color: #ffffff; /* Color del text */
}

/* Canviar el color del text en passar el ratolí */
.user-dropdown-menu .dropdown-item:hover {
    background-color: var(--blau-clar); /* Color de fons quan es fa hover, pots canviar aquest valor */
    color: var(--blau-fosc) !important; /* Canvia també el color del text si vols */
}

/*************** MENU - Barra de menú ***************/
#menu {
    background-color: var(--blau-manangelment);
}

.logo-container {
    position: absolute;
    top: 10px; /* Ajusta aquesta distància per posicionar el logotip adequadament */
    z-index: 100; /* Posa el logotip per damunt dels altres elements */
}

/* Estil del logotip */
.logotip {
    height: 70px; /* Alçada del logotip, ajusta segons calgui */
    border-radius: 50%; /* Fa el logotip rodó */
}

.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:hover {
    color: var(--blanc-manangelment);
}

.navbar-black {
    background-color: #000; /* Negre personalitzat */
}
/* Estil per a la icona del menú desplegable */
.navbar-toggler {
    border-color: var(--blau-clar); /* Color de la vora de l'icona */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23BFE9FF' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    /* Canvia el color de l'icona del menú desplegable amb el color que vols (en aquest cas #BFE9FF) */
}

/* Fons transparent per al menú desplegable */
.navbar-dark .dropdown-menu {
    background-color: var(--blau-fosc);
    border: none; /* Elimina els marges o línies del menú */
    font-weight: normal;
    box-shadow: none; /* Elimina qualsevol ombra que pugui tenir el menú */
}

/* Estil del text dins del menú desplegable */
.navbar-dark .dropdown-menu .dropdown-item {
    color: #fff; /* Fa que el text sigui blanc o el color que vulguis */
}

.navbar-dark .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Afegeix un fons lleugerament blanc quan es fa hover */
}

.navbar-dark .dropdown-menu .dropdown-item:hover {
    background-color: var(--blau-clar); /* Color de fons quan es fa hover, pots canviar aquest valor */
    color: var(--blau-fosc) !important; /* Canvia també el color del text si vols */
}

/*************** CONTINGUT - Cada pàgina carrega el seu ***************/
#contingut {
    /*background-color: var(--blau-fons);*/
    background-color: var(--groc-manangelment);
    padding-bottom:50px;
}

.headline h1, .headline h2, .headline h3, .headline h4{
    margin: 70px 0 20px 0;
    padding-bottom: 5px;
    display: inline-block;
    font-weight: bold;
}

.form-control {
    color: var(--blau-manangelment);
    background-color: transparent;
    border: 1px solid var(--blau-fosc);
}

.form-control {
    background-color: transparent;
}


.control-group {
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 30px;
}

.form-control-desactivat {
    background-color: #494949;
    color: #a8cde0;
    border-color: #ddd;
    cursor: not-allowed;
}

.form-control + .help-block {
    margin-top: 0;
}

.help-block {
    font-size: 12px;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    color: var(--blau-manangelment);
    border-color: var(--blau-manangelment);
    background-color: transparent !important;
    box-shadow: 0 0 5px var(--blau-manangelment) !important;
}

.form-control[readonly] ,
.form-control[disabled]
{
    background-color: var(--groc-readonly-manangelment);
    color: var(--blau-manangelment);
    border-color: var(--groc-readonly-manangelment);; /* Canvia el color del contorn si cal */
    cursor: not-allowed; /* Canvia el cursor per indicar que no es pot editar */
}

input[type="checkbox"] {
    height: 22px;
    width: 22px;
    accent-color: var(--blau-manangelment);
    appearance:none;
    background: transparent;
    border-color: var(--blau-manangelment);
    border-width: 1px;
    border-style: solid;
}

input[type="checkbox"]:checked {
    appearance: auto;
}


/* Select quan està desplegat */
select.form-control option {
    background-color: #000; /* Canvia el color de fons de les opcions desplegades */
    color: var(--blau-clar); /* Canvia el color del text de les opcions */
}

legend {
    margin-top:30px;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
}

.custom-section-general {
    margin-bottom: 50px;
}

.flex-fill {
    flex: 1 !important; /* Això fa que les columnes ocupin la mateixa amplada */
}

/*************** BOTTOM - Part inferior amb dades de contacte ***************/
#bottom {
    width: 100%;
    min-height: 300px;
    padding-top: 20px;
    padding-bottom: 20px;
    /*background-color: black;*/
    background-color: var(--taronja-fosc);
}

.card-header {
    background-color: var(--blau-fosc);
    color: var(--blau-clar);
}

.card-body {
    background-color: var(--blau-clar);
    font-size:13px;
}

/************* ESPECÍFICS ************************/

.badge-success {
    color: var(--blau-clar);
    background-color: var(--blau-fosc);
}

.modal-body {
    background-color: var(--blau-fons);
}

/************* PANTALLA MODAL DEL PAS1, SELECCIONAR PROMOTOR ************************/
.modal-header {
    background-color: var(--blau-fosc);
}

.modal-footer {
    background-color: var(--blau-fosc);
}

/************* SELECTOR DE DATES ************************/
.datepicker.dropdown-menu {
    background-color: var(--blau-clar) !important;
    border-color: white !important;
}

.input-group-text {
    background-color: var(--blau-clar) !important;
}

/************* GRIDS/DATATABLES ************************/
table.dataTable thead {
    background-color: var(--blau-manangelment) !important;
    color: var(--blanc-manangelment);
}

table.dataTable tbody {
    background-color: var(--color-fons-taules) !important;
}

table.dataTable tbody tr, td {
    color: black !important;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 0;
}

.table-bordered {
    border: 1px solid var(--blau-fosc);
    border-bottom-width: 1px;
    border-left-width: 1px;
}

.table-bordered td, .table-bordered th {
    border: 1px solid var(--blau-fosc);
    border-bottom-width: 1px;
    border-left-width: 1px;
}

/************* DATES ************************/
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    background: none;
    color: #999999 !important;
    cursor: default;
}

/************* ICONES ALS GRIDS  ************************/
.fas, .fab, .far {
    color: var(--blau-fosc);
}

/************* ICONES ALS GRIDS EN VERMELL ************************/
.fa-exclamation-circle {
    color: red;
}

/************* GRIDS ************************/
.dataTables_info {
    color: var(--blau-manangelment);
}

.page-link {
    background-color: var(--blau-manangelment);
    color: var(--blanc-manangelment);
}

.page-item.disabled .page-link {
    background-color: var(--blau-manangelment);
    color: var(--blanc-manangelment);
}

.page-item.active .page-link {
    background-color: var(--blau-manangelment);
    color: var(--blanc-manangelment);
    border-color: var(--blanc-manangelment);
}

.btn-light {
    background-color: var(--blau-manangelment);
    color: var(--blau-fosc);
}

td a {
    color: var(--blau-fosc);
}

.overlay{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background: url("/img/Circles-menu.gif") center no-repeat;
}

/* Turn off scrollbar when body element has the loading class */
body.loading{
    overflow: hidden;
}
/* Make spinner image visible when body element has the loading class */
body.loading .overlay{
    display: block;
}

/******** MEDIA *******/
@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1200px;
  }
}

.printme {
    display: none;
}

@media print {
    .no-printme  {
        display: none;
    }
    .printme  {
        display: block;
    }
}

.image_area img:hover {
    cursor: pointer;
}

.control-group i {
    color: var(--blau-clar);
}