/* HTML TAGSTLE */
body {
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    margin: 0px;
    padding: 0px;
    /* background-image:url(images/repeat.jpg);
    background-repeat:repeat-x; */
}

.div_main_1 {
    text-align: center; 
    padding: 10px;
    flex:1;
    height: 52px
}
.div_main_2 {
    flex: 1;
    /* Cada div ocupa l'espai disponible */
}

.select {
    /*position: absolute;*/
    /* With the padding included, the width is 190 pixels: the actual width of the image. */
    height: 21px;
}

div.main_area{ /* bar that runs across the bottom of the menu */
    width: 980px;
    /*height: 400px;*/
    background: #faf1f9;
    border: 2px;
    position:relative;
    top:0px;
    left:0px;
    text-align:left;
}

div.controls{ /* bar that runs across the bottom of the menu */
    display:inline;
    top:0px;
    left:0px;
    padding: 0 24px 0 8px;
}

div.bottomline{ /* bar that runs across the bottom of the menu */
    position:relative;
    width:100%;
    bottom:0px;
    top:0px;
    left:0px;
    height:20px;
    text-align:center;
    border-width: 0px; 
    border-style: ridge;
}

div.area{ /* bar that runs across the bottom of the menu */
    width: 100%;
    background: #cacaff;
    top:0px;
    left:0px;
    display: inline;
    visibility:visible;
}

div.roomnumber {
    Position:relative;
    left:30px;
    width:200px;
}

div.username {
    left:450px;
    width:230px;
}
.ui-tabs .ui-tabs-nav
{
background: lightblue;
}

.ui-corner-bottom .ui-tabs-panel /* just in case you want to change the panel */
{
background: blue;
}
div.box {
    border-width: 2px; 
    border-style: ridge;
    background-color: #f0f0f0;
    padding: 5px;
    margin: 0px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    border-radius:5px;
}

div.total{ /* bar that runs across the bottom of the menu */
    width: 920px;
    position:relative;
    top:50px;
    left:350px;
}

div.bottombar{ /* bar that runs across the bottom of the menu */
    width: 920px;
    height: 10px;
    background: #1a1109;
}


ul.menu{ /* main menu UL */
    font: bold 14px Georgia ;
    width: 920px;
    background: #9090e9;
    padding: 11px 0 8px 0; /* padding of the 4 sides of the menu */
    margin: 0;
    text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}

ul.menu li{
    display: inline;
    padding: 11px 0 8px 0;
}

ul.menu li a{
    color:black;
    padding: 6px 8px 6px 8px; /* padding of the 4 sides of each menu link */
    margin-right: 11px; /* spacing between each menu link */
    text-decoration: none;
}

.selected, ul.menu li a:hover, ul.menu li a.selected {
    color: black;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE9+ SVG equivalent  of linear gradients */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
    background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
    -moz-box-shadow: 0 0 5px #595959; /* CSS3 box shadows */
    /* -webkit-box-shadow: 0 0 5px #595959; 
    box-shadow: 0 0 5px #595959;*/
}

table.productos {
    position:relative;
    left:10px;
    top:00px;
    border-width: 1px; 
    border-style: solid;
    background-color: #f0f0f0;
    padding: 2px;
    margin: 0px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    border-radius:5px;
    text-align:left;
}

table.productos thead {
    text-align:left;
    padding: 2px;
    padding-left: 2px;
    font-weight:bold;
    text-decoration:none;
}

table.ampliar_popup {
    position:relative;
    left:10px;
    top:0px;
    border-width: 1px; 
    border-style: solid;
    background-color: #f0f0f0;
    padding: 0px;
    margin: 0px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    border-radius:5px;
    text-align:left;
}

select.product {

}

#textoFooter {
    margin-top:100px;
    height:40px;
}

.islink {
    display:inline;
    color:red;
    text-decoration:underline;
    cursor: pointer;
    padding:3px;
}

.disabledlink {
    display:inline;
    color:graytext;
    text-decoration:underline;
    cursor: auto ;
    padding:3px;
}

.fake-link {
    font-weight:bold;
    text-decoration:none;
    cursor: pointer;
}

.center {
    margin-left:auto;
    margin-right:auto;
    width:70%;
}

#blanket {
    background-color:#111;
    opacity: 0.65;
    position:absolute;
    z-index: 9001; 
    top:0px;
    left:0px;
    width:100%;
}

html>body #blanket {
    filter: alpha(opacity=65);
}

.form-popup {
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius:6px;
    position:absolute;
    background-color:#aaaaff;
    width:400px;    
    z-index: 9002;
    top:200px;
    left:200px;
}

#ka-popup {
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius:6px;
    position:absolute;
    background-color:#d6d6c2;
    width:360px;    
    z-index: 9002;
    top:200px;
    left:200px;
}

div.popup {
    /*    border-width: 1px;
        border-style: solid;*/
/*    position:relative;
    left:5px;
    top:20px;*/
    padding:0px;
}

hr.popup {
    background: #fff  no-repeat scroll center;
    height:.05em;
}


.checkbox.styled, .radio.styled {
  width: 19px;
  height: 25px;
  padding: 0 5px 0 0;
  display: block;
  clear: left;
  float: left;
}

.floating-box {
    float: left;
    margin: 1px;
    border: 0px solid;  
}



/* Basic styling for modal */
.modaldisabled {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 650px; /* Maximum width */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.closemodal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.closemodal:hover,
.closemodal:focus {
    color: black;
    text-decoration: none;
}

.modal-header,
.modal-body,
.modal-footer {
    margin-bottom: 20px;
    font-size: 14px;
}

.modal-header h1 {
    margin: 0;
    font-size: 24px;
}

.modal-body div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.modal-body div label {
    width: 150px;
    margin-right: 10px;
    font-weight: bold;
}

.modal-body div select,
.modal-body div input {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.modal-body div select {
    width: 100px; /* Set the width of the select elements */
}

#manual div {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start;
    margin-bottom: 10px;
}

#manual div label {
    width: auto;
    margin-right: 0;
    margin-bottom: 5px; /* Add space between label and input */
}

#manual div input {
    width: 80px; /* Set the width of the input fields */
}

#manual {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
}

#btns {
    text-align: right;
}

#btns button {
    padding: 10px 20px;
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#btns .modalaction {
    background-color: #4CAF50;
    color: white;
}

#btns .cancelar {
    background-color: #f44336;
    color: white;
}

/* Add styles for disabled buttons */
#btns button:disabled {
    background-color: #ccc; /* Grey color for disabled buttons */
    color: #666; /* Slightly darker grey for the text */
    cursor: not-allowed; /* Show not-allowed cursor */
}

.tooltip-activos {
	position: relative;
	display: inline-block;
}

.tooltip-activos .tooltip-activostext {
	visibility: hidden;
	width: 160px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%; /* Posició de la informació emergent */
	left: 50%;
	margin-left: -80px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip-activos .tooltip-activostext::after {
	content: "";
	position: absolute;
	top: 100%; /* Punt de la fletxa */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.tooltip-activos:hover .tooltip-activostext {
	visibility: visible;
	opacity: 1;
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.blinking-text {
	text-align: center;
	color: dimgray;
	animation: blink 1s infinite; 
}

.episode {
    padding-top: 5px;
}

#new-task-modal .modal-body {
    max-height: 400px; /* Fixa una alçada màxima per a la modal */
    overflow-y: auto; /* Permet desplaçar-se verticalment */
}

#rooms-list {
    display: flex;
    flex-wrap: wrap; /* Fa que els elements es distribueixin en diverses línies */
    gap: 10px; /* Espai entre els checkboxes */
}

#rooms-list .form-check {
    flex: 1 1 20px; /* Els checkboxes ocuparan un terç de la línia, amb espai entre ells */
    box-sizing: border-box; /* Evita que els marges alterin la mida de l'element */
}

/* Ajustar per a pantalles més petites */
@media (max-width: 768px) {
    #rooms-list .form-check {
        flex: 1 1 calc(50% - 10px); /* Dos elements per línia en pantalles petites */
    }
}

@media (max-width: 480px) {
    #rooms-list .form-check {
        flex: 1 1 100%; /* Un element per línia en pantalles molt petites */
    }
}

#new-task-modal .modal-dialog {
    max-width: 600px; /* Limita l'amplada de la modal */
    width: 100%; /* Assegura que s'adapti a la mida de la pantalla */
}

#new-task-modal .modal-body {
    padding: 10px;
    max-height: 400px; /* Fixem l'altura màxima de la modal */
    overflow-y: auto; /* Afegim desplaçament si hi ha massa elements */
}

.info-tooltip {
    position: absolute;
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 200px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}

.task-info {
    position: relative; /* Per situar el tooltip respecte a l'enllaç */
    text-decoration: none;
}

.task-info:hover .info-tooltip {
    display: block;
}