/* Esta hoja de Estilos esta diseñada para mejorar la apariencia y la estructura de nuestros Formularios WebForms. 
    Los estilos abarcan desde la disposición de elementos en cuadrícula hasta la presentación de tarjetas 
    personalizadas, encabezados, botones y más.*/

/* Define un contenedor con diseño flexible que centra su contenido vertical y horizontalmente */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
}

.custom-bg {
    background-color: #424242 !important;
    color: white !important;
}

.bg-card {
    background-color: #1f1f1f !important;
}

.custom-bg::placeholder {
    color: #a5a5a5 !important; /* Cambia el color a tu preferencia */
}

.form-control.custom-bg {
    border: none
}

main {
    width: 100%;
    padding: 20px;
    margin: auto;
    margin-top: 100px;
}

.grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Estilos para una tarjeta personalizada */
.custom-card {
    width: 80%;
    max-width: 800px;
    transform: scale(1.2); /* Escala la tarjeta al 120% de su tamaño original */
    margin: 0 auto; /* Centra horizontalmente dentro de su contenedor */
}

/* Espaciado para la vista en cuadrícula */
.grid-view {
    margin-top: 3rem;
}

/* Contenedor para alertas con margen superior */
.alert-container {
    margin-top: 2rem;
}

/* Estilos globales para el cuerpo del documento */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Agregado para evitar la barra de desplazamiento horizontal */
}

/* Define un contenedor con ancho máximo y margen automático para centrar horizontalmente */
.container {
    width: 20%;
    max-width: 200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 50px; /* Ajusta este valor para controlar la distancia desde la parte superior */
}


/* Estilos para encabezados de nivel 1 */
h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Grupo de elementos de formulario con margen inferior */
.form-group {
    margin-bottom: 20px;
}

/* Estilos para el botón primario */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

/* Texto centrado */
.center-text {
    text-align: center;
    font-size: 24px; /* Tamaño de letra grande */
}

/* Texto alineado a la izquierda con tamaño de letra grande y negrilla */
.left-text {
    text-align: left;
    font-size: 24px; /* Tamaño de letra grande */
    font-weight: bold; /* Negrilla */
}

/* Estilos para botones en cuadrícula */
.btn-grid {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}

/* Contenedor de imágenes con contenido centrado */
.image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-inner img {
    width: 100%;
    height: auto;
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
}

/* Estilo para cambiar el color del texto del enlace de la marca (navbar-brand) a blanco */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover {
    color: #ffffff;
}

.container3 {
    background-color: #1f1f1f;
    /* Otros estilos que desees agregar */
}

.dropdown-menu {
    font-size: 16px; /* Tamaño de fuente fijo */
}

/* Estilos adicionales */
.navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.navbar-toggler {
    border-color: #fff;
}

.navbar-toggler-icon {
    background-color: #fff;
}

.dropdown-menu {
    background-color: #1f1f1f;
    border: none;
}

.dropdown-item {
    color: #fff;
    margin: 0px;
}

.footer {
    background-color: #111111;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.social-icon {
    color: #fff;
    margin-right: 10px;
}

/* Diseño responsivo */
@media (max-width: 767.98px) {
    .navbar-brand {
        margin-right: 30px;
    }
}

@media (min-width: 768px) {
    .navbar-nav {
        display: flex;
        align-items: start;
    }
}
/* Estilos adicionales */
.navbar-nav {
    margin-right: auto;
}

.navbar-toggler {
    border-color: #fff;
}

.navbar-toggler-icon {
    background-color: #fff;
}

.footer {
    background-color: #111111;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.social-icon {
    color: #fff;
    margin-right: 10px;
}

/* Diseño responsivo */
@media (max-width: 767.98px) {
    .navbar-brand {
        margin-left: 30px;
    }
}

@media (min-width: 768px) {
    .navbar-nav {
        display: flex;
        align-items: start;
    }
}

h6 strong,
h6 #totalGeneral {
    visibility: hidden;
}

#btnInsertarYacht:hover {
    color: white;
}

.ocultar-id {
    display: none;
}

/* Estilo de gradiente para alerta de éxito */
.alerta-success {
    background: linear-gradient(to right, #4CAF50, #2E8B57);
    color: #fff;
}

/* Estilo de gradiente para alerta de información */
.alerta-info {
    background: linear-gradient(to right, #808080, #A9A9A9);
    color: #fff;
}

/* Estilo de gradiente para alerta de error */
.alerta-error {
    background: linear-gradient(to right, #FF6347, #DC143C);
    color: #fff;
}

/* Estilo de gradiente para alerta de advertencia */
.alerta-warning {
    background: linear-gradient(to right, #FFD700, #FFA500);
    color: #fff;
}

.preloader {
    display: -ms-flexbox;
    display: flex;
    background-color: #f4f6f9;
    height: 100vh;
    width: 100%;
    transition: height 200ms linear;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
}

.animation__shake {
    -webkit-animation: shake 2500ms;
    animation: shake 2500ms;
}

.ml-auto {
    margin-left: auto !important;
}

.nav-link.active {
    background-color: #8BC34A !important;
    color: white !important;
}

.card-tools {
    float: right !important;
    margin-right: -.625rem;
}

.btn-tool {
    background-color: transparent;
    color: #adb5bd;
    font-size: .875rem;
    margin: -.75rem 0;
    padding: .25rem .5rem;
}


.btn-info {
    background-color: paleturquoise; /* Cambia el color de fondo del botón */
    border-color: paleturquoise; /* Cambia el color del borde del botón */
    padding: 10px 20px; /* Ajusta el tamaño del botón */
}

    .btn-info:hover {
        background-color: #800000; /* Cambia el color de fondo del botón al pasar el mouse */
        border-color: #800000; /* Cambia el color del borde del botón al pasar el mouse */
    }

.date-cell-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
}

.date-cell.month-cell {
    flex: 0 0 60px; /* Ajusta el ancho del mes, puede variar según necesites */
    text-align: left;
}

.date-cell.dates-cell {
    flex: 1;
    padding-left: 10px;
    text-align: left;
}

.month {
    background-color: #e1005a; /* Esto debe ser dinámico, dependiendo del resultado de GetMonthColor */
    color: white;
    font-size: 1.5em;
    padding: 10px;
    text-align: center;
}

.days-range {
    font-size: 1em;
}