:root {
    --gris-fosc: #d9d9d9;
    --gris-clar: #f2f2f2;
    --vermell-error: #d60000;
    --verd-ok: #428500;
    --font-default: 'TradeGothicLTStd';
    --color-main-buttons: #A99E8E;
    --color-titol-seccio: #000000;
}

body, form label {
    font-weight: 300 !important;
    font-size: 16px !important;
    color: black !important;
    background-color: #fff !important;    
}

h2 {
    font-weight: 500 !important;
    font-size: 28px !important;
    color: var(--color-titol-seccio);
}

h3 {
    font-weight: 300 !important;
    font-size: 21px !important;
}

h4 {
    font-weight: 300!important;
    font-size:16px!important
}

h1, h2 {
  text-transform: uppercase;
}

a {
  color: black !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  cursor:pointer;
}

/*tags q no volem que sortin*/
.sr-only {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

/*tags q no volem que sortin*/
.sr-only-focusable:active, .sr-only-focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

.container-fluid{
    padding-top: 10px;
    padding-bottom: 10px;
}

.form-select {
    color: black!important;
    background-image: url(../assets/images/custom-select.png);
    background-size: auto
}

.custom-file-label::after {
    left: 0;
    right: auto;
    border-left-width: 0;
    border-right: inherit;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  margin: 0;
  opacity: 0;
}

.form-check-input.check-outline.outline-valid {
    border: 1px solid #A99E8E !important; /*SEGURAS*/
    background-color: transparent;
}

.form-check-input {
    border: 1px solid #000 !important;
    background-color: transparent;
}

.form-control.valid { /*check verd per els inputs text correctes*/
    color: var(--verd-ok) !important;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%235ac146' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);    
}

.font{
    font-family: var(--font-default), sans-serif;
    font-weight: 400; 
}

.fonts{
    font-family: var(--font-default), sans-serif;
    font-weight: 400; 
}

legend {
  font-size: inherit;
}

.buttonSelect{
    color: #fff !important;
    background-color: var(--verd-ok) !important;
    border-color: var(--verd-ok) !important;
}

.buttonSelectCicle{
    color: #fff !important;
    background-color: var(--verd-ok) !important;
    border-color: var(--verd-ok) !important;
}

.btn-close span{
    display:none;
}

#seccioBescanvi label,#codi-promocional label{
    display:inherit;
    width:100%;
}

/*marquem el requadre seleccionat*/
.elemGrupSelect, .elemSelect{
    color: var(--verd-ok) !important;
    border: 1px solid var(--verd-ok) !important; /*SEGURAS*/
}

/*marquem text seleccionat*/
.elemCicleSelect{
    color: var(--verd-ok) !important;
}

.valid:checked {
    background-color: var(--verd-ok) !important;
    border-color: var(--verd-ok) !important;
}

.check-outline.outline-invalid {
    border: 1px solid var(--vermell-error);
    background-color: transparent;
}

.invalid:checked {
    background-color: var(--verd-ok) !important;
    border-color: var(--verd-ok) !important;
}

.is-invalid {
    border-color: var(--vermell-error);
    color: var(--vermell-error);
}

.is-invalid label {
    color: var(--vermell-error) !important
}

.text-danger, .is-invalid {
    color: var(--vermell-error) !important;
}
.bg-danger {
    background-color: var(--vermell-error) !important;
}
.btn-danger, .form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--vermell-error) !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .input-group-text:focus, .input-group-text:active {
    background-color: var(--vermell-error) !important;
    border-color: var(--vermell-error) !important;
}

.input-group {
    border-radius:5px!important;
    overflow:hidden
}

#tabla_tarifes .input-group {
    width: 110px;
}

.form-control, .form-select {
    font-weight: 300!important;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image:none!important;
}

.form-control {
    color: #647385;
	border: 1px solid #A99E8E; /*SEGURAS*/
}

.form-control:focus {
    box-shadow: none;
}

.bg-light {
    background-color: #fff !important;
	border: 1px solid #A99E8E; /*SEGURAS*/
}

.btn{
    color: #000 !important;
}

.btn-secondary{
    color: #fff !important;
}

.btn-tarifes{
    background-color: #e9ecef;
    border-color: #e9ecef;
    box-shadow: none;
}

.btn-tarifes:hover{
    background-color: #cfd3d7;;
    border-color: #cfd3d7;
    box-shadow: none;
}

.btn-dark {
    background-color: var(--color-main-buttons);
    border-color: var(--color-main-buttons);
    box-shadow: none;
    color: #fff !important;
}
.btn-dark:hover {
    color: black;
    background-color: var(--gris-fosc);
    border-color: var(--gris-fosc);
    box-shadow: none;
}

.btn-dark:disabled {
    opacity: 1;
    background-color: var(--color-main-buttons) !important;
    border-color: var(--color-main-buttons) !important;
}

.btn-dark:disabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: inherit;
    z-index: 1;
}

.modal-body{
    text-align: left;
}


.form-check-input.valid:checked {
    background-color: var(--verd-ok) !important;
    border-color: var(--verd-ok) !important;
}

.form-check-input:checked {
    background-color: var(--verd-ok) !important;
    border-color: var(--verd-ok) !important;
}

.row{
    margin-left: 0px !important;
    margin-right: 0px !important;    
}

/*-- SECCIO MEDIA QUERIES --*/
@media (max-width:769px) {
    .w-50{
        width:100% !important;
    }

    #lista_grups .row, #lista_actividades .row{
        text-align:center;
    }
    
    .cicleElement{
        text-align: left !important;
    }
    
    #lista_grups .blocPetitMida, #lista_actividades .blocPetitMida{
        width:100% !important;
    }    
}


.diaNoSeleccionat{
    opacity: 25% !important;
}

.disabled{
    opacity: 25% !important;
    cursor: default;
}

#tabla_horarios .disabled{
    opacity: 25% !important;
    border-color: var(--vermell-error) !important;
    color: var(--vermell-error) !important;
    cursor: default;
}

.valid {
    color: var(--verd-ok) !important;
    border-color: var(--verd-ok) !important;
}

.bootstrap-touchspin-down {
     border-top-right-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
}

.bootstrap-touchspin-up {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.popover-body{
    font-weight: 500;
    color: #000000 !important;
}

/* -- MEDIA QUERIES SECTION -- */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Styles for tablets in portrait orientation */
}

/*Mobile queries*/
@media (max-width: 480px) {
    /* Styles for mobile phones in portrait orientation */
    body, form label {
        font-size: 14px !important;  
    }
    h2 {
        font-weight: 500 !important;
        font-size: 21px !important;
    }
    
    h3 {
        font-weight: 300 !important;
        font-size: 16px !important;
    }
    
    .cicleElement{
        text-align: left !important;
    }
}