/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 15/01/2025, 03:17:16 PM
    Author     : juank
*/

body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.25;
}

/* Estilos generales de la card */
.card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 10px 20px;
    width: 88%;
}

.card-footer {
    background-color: #fff;
    border-top: 1px solid #2196f3;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-complete {
    background-color: lightsteelblue;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 10px 20px;
    width: 88%;
}

/* Contenido dentro de la card */
.card-content {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 2 columnas: 1 para label y 1 para el valor */
    gap: 15px;
}

/* Estilo de los labels */
.card-label {
    font-weight: bold;
    color: #333;
    text-align: left;
    font-size: 14px;
    margin-right: 20px;
}

/* Estilo de los valores */
.card-value {
    color: #555;
    text-align: left;
    font-size: 13px;
    width: 88%;
}

.button {
    background: #2196f3 !important;
    color: #fff !important;
    border: 1px solid #2196f3 !important;
    margin: 10px 0;
    outline: 0 none;
    border-radius: 4px;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
    text-decoration: none;
    padding: 5px;
    display: ruby-text;
}

.button-filter-l {
    background: #2196f3 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    /* margin: 0; */
    /* outline: 0 none; */
    border-radius: 8px 0px 0px 8px;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
    text-decoration: none;
    padding: 7px;
    width: 46%;
    margin-left: 5px;
}

.button-filter-r {
    background: #2196f3 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    /* margin: 0; */
    /* outline: 0 none; */
    border-radius: 0px 8px 8px 0px;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
    text-decoration: none;
    padding: 7px;
    width: 46%;
    margin-left: 5px;
}

.button-filter {
    background: #2196f3 !important;
    color: #fff !important;
    border: 1px solid #2196f3 !important;
    /* margin: 0; */
    /* outline: 0 none; */
    border-radius: 8px 8px 8px 8px;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
    text-decoration: none;
    padding: 7px;
    width: 90%;
}

.button-filter-t {
    background: #2196f3 !important;
    color: #fff !important;
    border: 1px solid #2196f3 !important;
    /* margin: 0; */
    /* outline: 0 none; */
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s;
    text-decoration: none;
    padding: 7px;
    width: 33%;
    margin-left: 5px;
}

/* Responsividad: la card se adapta en pantallas pequeñas */
@media (max-width: 767px) {
    .card-content {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }
}


.float{
    position:fixed;
    width:50px;
    height:50px;
    bottom:30px;
    right:30px;
    background-color:#2196f3;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
    margin-bottom: 20%;
}

.my-float{
    margin-top:35%;
}

.toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 8px;
}

.toolbar-option {
    color: #2196f3;
}



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1008; /* 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/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    font-size: 15px;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-lo {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.general-field {
    max-width: 90%;
}

.general-label {
    max-width: 90%;
    font-weight: bold;
}

.ui-inputfield{
    width: 88%;
}

.button-bar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
}

.ui-splitbutton {
    margin-right: .5rem;
}

.actions {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.action-option {
    margin-right: 10px;
}

.approved {
    background: green;
    color: white;
    font-weight: bold;
    padding: 3px;
    border-radius: 5px;
}

.denied {
    background: orange;
    color: white;
    font-weight: bold;
    padding: 3px;
    border-radius: 5px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columnas de igual ancho */
    gap: 10px; /* Espacio entre elementos */
}

.grid-item {
    border: 1px solid #ccc; /* Borde para cada celda */
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Centrar el texto */
    background-color: #f9f9f9; /* Fondo claro */
    border-radius: 4px; /* Bordes redondeados */
}

.tooltip-container {
    position: relative;
    display: inline-block;
    max-width: 200px; /* Define el ancho máximo del contenedor */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden; /* Oculta el texto que excede el ancho */
    text-overflow: ellipsis; /* Agrega los puntos suspensivos */
    cursor: pointer; /* Cambia el cursor para indicar que hay interacción */
}

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

.tooltip {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    position: absolute;
    bottom: 100%; /* Posiciona el tooltip encima del texto */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    white-space: normal; /* Permite que el texto del tooltip tenga varias líneas */
    z-index: 10;
    width: max-content;
    max-width: 300px; /* Ajusta el ancho máximo del tooltip */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}


.ui-datepicker  {
    z-index: 1009 !important;
}

.ui-selectonemenu-panel {
    z-index: 1009 !important;
}

.title {
    color: #203975;
    text-align: left;
    margin-left: 2px;
}

.message {
    display: flex;
    background: lightpink;
    height: 50px;
    justify-content: center;
    position: fixed;
    /* bottom: 17px; */
    border-radius: 8px;
    padding: 5px;
    border-bottom: 5px;
    margin-left: 4px;
    width: 90%;
}

.ui-selectonemenu-panel {
    z-index: 1009 !important;
}

.ui-datascroller .ui-datascroller-header {
    padding: 15px 10px !important;
}

.ui-growl {
    z-index: 9999 !important;
}

.button-selected {
    background-color: #23A2DB !important;
}

.warn-message {
    border: solid orange;
    border-width: 1px 2px 1px 2px;
    background: lightyellow;
    padding: 3px;
    height: 33px;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    color: slategrey;
}

.war-title {
    margin-top: 8px;
    margin-left: 5px;
    color: slategray;
}

.icon {
    width: 24px;
    height: 24px;
}

.icon-plus {
    width: 24px;
    height: 24px;
    margin-top: 25%;
}


.search-panel{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}