* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #eee;
}

.card {
    margin: auto;
}

#main-panel {
    /*width: 1000px;*/
    width: 100%;
    /*background: #eee;*/
    /*margin: 0px;
  position: absolute;
  margin: auto;*/
    position: relative;
    /*top: 0px;
  left: 0px;*/
}

#top-panel {
    background: #17277e;
    width: 100%;
    height: 35px;
    position: relative;
    /*padding: 5px 0;*/
}

    #top-panel .logo {
        color: #fff;
        margin-right: 15px;
        font-size: 21px;
    }

    #top-panel .option {
        font-size: 15px;
        color: #ccc;
        margin-right: 10px;
    }
/*#top-panel #logout {*/
#logout {
    /*float: right;*/
    color: red;
    text-shadow: 0 0 1px #fff;
}

#content-panel {
    background: #eee;
    /*width: 990px;*/
    /*width:1000px;*/
    /*position: absolute;*/
    position: relative;
    /*top: 40px;
  left: 0px;*/
    padding: 5px;
    margin: auto;
}

form {
    margin: 0px;
    padding: 0px;
}

input[type=text], input[type=password] {
    margin: 0px;
}

.input-prepend {
    margin: 0px;
    margin-bottom: 5px;
}

#content-panel .title {
    font-size: 17px;
}

#index-container {
    background: #fff;
    /*height: 330px;*/
    margin-top: 5px;
    /*overflow-y: scroll;*/
    /*border: 1px solid #ccc;*/
}

table {
    font-size: 11px;
}

    table thead {
        background: #17277e;
        color: #fff;
    }

/* ----------------------- */

#users-content .input-prepend .add-on {
    width: 55px;
    text-align: left;
}

#users-content .input-prepend input {
    width: 350px;
    text-align: left;
}

#users-content .input-prepend select {
    width: 364px;
    text-align: left;
}

/* ----------------------- */

#enrollments-content .input-prepend .add-on {
    width: 130px;
    text-align: left;
}

#enrollments-content .input-prepend input {
    width: 300px;
    text-align: left;
}

#enrollments-content .input-prepend select {
    width: 315px;
    text-align: left;
}

/* ----------------------- */

#visitor-list .input-prepend .add-on {
    width: 130px;
    text-align: left;
}

#visitor-list .input-prepend input {
    width: 300px;
    text-align: left;
}

#visitor-list .input-prepend select {
    width: 315px;
    text-align: left;
}

/* ----------------------- */

#entrances_content div {
    /*border: 1px solid #000;*/
}

#entrances_content #left-panel {
    background: #eee;
    width: 645px;
    height: 500px;
    float: left;
    /*border: 2px solid #666;*/
    /*padding: 10px;*/
}

#entrances_content #right-panel {
    background: #fff;
    width: 330px;
    /*height: 500px;*/
    height: 486px;
    float: right;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

    #entrances_content #right-panel .matchlog {
        height: 58px;
        /*margin-bottom: 2px;*/
        margin: 2px 0 0 2px;
        background: #fff;
        width: 308px;
        padding: 5px;
    }

    #entrances_content #right-panel .matchtype {
        background: #228B22;
        width: 18px;
        height: 48px;
        color: #fff;
        font-size: 22px;
        text-align: center;
        padding-top: 5px;
        float: left;
        border: 1px solid #000;
    }

    #entrances_content #right-panel .matchphoto {
        width: 35px;
        height: 48px;
        float: left; /*background: url() no-repeat center center; background-size: cover;*/
        border: 1px solid #000;
    }

    #entrances_content #right-panel .matchinfo {
        width: 205px;
        height: 48px;
        margin-left: 4px;
        float: left;
        padding-right: 2px;
    }

    #entrances_content #right-panel .matchtime {
        width: 35px;
        height: 48px;
        /*float: left;*/
        /*margin-left: 4px;*/
        border: 1px solid #000;
        text-align: center;
        font-size: 22px;
        /*padding-top: 5px;*/
        background: #000;
        color: #fff;
        line-height: 24px;
        float: right;
    }

    #entrances_content #right-panel .matchinfo span {
        font-size: 11px;
        display: block;
    }

    #entrances_content #right-panel .matchnoevidence {
        width: 16px;
        height: 6px;
        background: #000;
        border: 1px solid #000;
        margin-top: 5px;
    }

    #entrances_content #right-panel .matchclick {
        width: 16px;
        height: 6px;
        background: orange;
        border: 1px solid #000;
        margin-top: 5px;
    }

#entrances_content #left-panel #photos-container {
    border: 1px solid #ccc;
    height: 383px;
    padding: 10px;
    background: #fff;
}

    #entrances_content #left-panel #photos-container #enrolled {
        border: 1px solid #000;
        width: 293px;
        height: 362px;
        float: left;
        margin-left: 10px;
    }

    #entrances_content #left-panel #photos-container #evidence {
        border: 1px solid #000;
        width: 293px;
        height: 362px;
        float: left;
        margin-left: 13px;
    }

#entrances_content #left-panel #footer {
    border: 1px solid #ccc;
    height: 93px;
    background: #fff;
    margin-top: 10px;
}

    #entrances_content #left-panel #footer #user-data {
        width: 390px;
        height: 92px;
        float: left;
    }

    #entrances_content #left-panel #footer #entryhour {
        float: left;
        /*height: 58px;*/
        width: 225px;
        text-align: center;
        font-size: 72px;
        /*padding-top: 36px;*/
    }

    #entrances_content #left-panel #footer #user-data #identifier {
        background: #000;
        width: 50px;
        height: 92px;
        color: #fff;
        text-align: center;
        font-size: 54px;
        padding-top: 10px;
        float: left;
    }

    #entrances_content #left-panel #footer #user-data #info {
        float: left;
        width: 329px;
        height: 83px;
        padding: 5px;
        color: #fff;
        font-size: 16px;
        text-align: center;
    }

#entrances_content #modal-manualentrance {
    background: #fff;
    /*border: 4px solid #000;*/
    border: 1px solid #ccc;
    position: absolute;
    top: 510px;
    /*left: 5px;*/
    width: 645px;
}

    #entrances_content #modal-manualentrance #title {
        color: #fff;
        background: #000;
        padding: 5px;
    }

    #entrances_content #modal-manualentrance #identification-types {
        background: #000;
        border-bottom: 1px solid #000;
        margin-bottom: 5px;
    }

        #entrances_content #modal-manualentrance #identification-types div {
            display: inline-block;
            padding: 2px;
            cursor: pointer;
        }

    #entrances_content #modal-manualentrance #identification-container {
        text-align: center;
        margin: 10px;
    }

        #entrances_content #modal-manualentrance #identification-container input {
            width: 500px;
            height: 47px;
            text-align: center;
            font-size: 30px;
            margin: auto;
        }

#entrances_content #modal-alert {
    background: red;
    /*border: 4px solid #000;*/
    position: absolute;
    /*top: 5px;*/
    left: 5px;
    width: 634px;
    display: block;
    color: #fff;
    font-size: 35px;
    padding: 10px;
    display: none;
    text-align: center;
    box-shadow: 0 2px 2px Gray;
}

#entrances_content #modal-family-members {
    background: #000;
    position: relative;
    /*top: 505px;*/
    /*left: 654px;*/
    /*left: 664px;*/
    width: 330px;
    height: 97px;
    padding: 5px;
    /*margin-left: 7px;*/
    float: right;
}

    #entrances_content #modal-family-members .title {
        display: block;
        text-align: center;
        color: #fff;
        font-size: 16px;
    }

    #entrances_content #modal-family-members .tile {
        cursor: pointer;
        width: 52px;
        height: 59px;
        margin-right: 2px;
        margin-bottom: 2px;
        float: left;
        margin-top: 5px;
    }

#entrances_content #static-toggle {
    margin-left: 660px;
    text-align: center;
}
/* ----------------------------------- */

#booking-content {
    margin-top: 10px;
}

    #booking-content #inviting #responsible {
        width: 230px;
    }

    #booking-content #inviting #member {
        width: 627px;
    }

    #booking-content #inviting {
        /*border-bottom: 1px solid #666;*/
        padding-bottom: 6px;
        /*border-top: 1px solid #666;*/
        padding-top: 6px;
    }

    #booking-content #invited {
        /*border-bottom: 1px solid #666;*/
        padding-bottom: 6px;
        padding-top: 6px;
    }

        #booking-content #invited #invited-initial-date, #booking-content #invited #invited-final-date {
            width: 82px;
        }

        #booking-content #invited #id {
            width: 94px;
        }

        #booking-content #invited #name {
            width: 236px;
        }

        #booking-content #invited #is-special {
            margin: 0px;
            margin-right: 5px;
        }

        #booking-content #invited #notes {
            margin-left: 5px;
            width: 130px;
        }

    #booking-content #event {
        border-bottom: 1px solid #666;
        padding-bottom: 6px;
        padding-top: 6px;
    }

        #booking-content #event #event-initial-date, #booking-content #event #event-final-date {
            width: 82px;
        }

        #booking-content #event #name {
            width: 569px;
        }

        #booking-content #event #csv {
            display: none;
        }

    #booking-content #controls {
        padding-bottom: 6px;
        padding-top: 10px;
        text-align: right;
    }

        #booking-content #controls #bar {
            float: left;
        }

            #booking-content #controls #bar #controls-initial-date, #booking-content #controls #bar #controls-final-date {
                width: 82px;
            }


#reports-content #initial-date, #reports-content #final-date {
    width: 82px;
}

#reports-content #identification, #reports-content #membership {
    width: 120px;
}

#reports-content #entrance-type {
    margin: 0px;
    width: 180px;
}

#reports-content #list-enrollments, #reports-content #search-filter,
#reports-content #custom-report {
    margin-bottom: 5px;
    width: 170px;
}

#reports-content #results {
    text-align: left;
    margin-left: 5px;
    margin-top: 5px;
    display: none;
}


/* /Entraces.aspx */
/* PersonLog Detail */
#person-log-detail {
    /*background: #ccc;*/
    /*position: absolute;*/
    /*top: 5px;
	left: 5px;*/
    /*top:1px;*/
    width: 645px;
    /*height: 498px;*/
    height: 438px;
    text-align: center;
    display: none;
    /*opacity: 0.9;*/
}

#person-log-detail-person-names {
    color: #000;
    /*margin: 0;*/
}

#person-log-detail-person-ids {
    margin: 0px;
    color: #666;
    font-weight: normal;
    padding: 0px;
    /*margin-top: -11px;*/
}

#person-log-detail-person-time {
    margin: 0px;
    font-size: 40px;
    color: #666;
    margin-top: -5px;
}

#person-log-detail-photo-container {
    /*background: #000;*/
    width: 648px;
    height: 326px;
    margin-bottom: 12px;
    margin-top: 5px;
}

#person-log-detail-photo-original {
    /*background: red;*/
    width: 294px;
    height: 326px;
    margin-left: 23px;
    float: left;
    border: 1px solid #666;
}

#person-log-detail-photo-evidence {
    /*background: blue;*/
    width: 294px;
    height: 326px;
    margin-left: 13px;
    float: left;
    border: 1px solid #666;
}
/********* MENU **********/
#idelity-icon {
    border-radius: 50%;
    vertical-align: top;
    margin-top: 4px;
}

.menu-admin li.active a {
    color: #555;
    background-color: #eee;
}

.menu-admin li a {
    padding: 0 15px 5px 15px;
    top: 8px;
    color: White;
}

    .menu-admin li a:hover {
        color: #555;
    }

.menu-admin {
    border: 0;
}

#help, #logout {
    margin-bottom: 0;
    /*float: right; 
        color: White; */
    font-size: 20px;
    margin: 5px 5px 10px 5px;
}

#home {
    margin-bottom: 0;
    /*float: right;*/
    color: White;
    font-size: 15px;
    margin: 7px 10px 0 5px;
    text-decoration: none;
}

#menu-dropdown {
    top: 130%
}

    #menu-dropdown li a {
        color: #555;
    }

.menu-admin .open a {
    color: #555;
}

/*New For Button Whatsapp*/
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    background-color: #25D366;
    padding: 10px 10px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); /* Agrega una sombra al botón */
}

    .whatsapp-btn img {
        margin-right: 10px;
    }
/* END New For Button Whatsapp*/

/* New For Carousel*/
.carousel-title {
    /*position: absolute;*/
    top: 20px; /* Ajusta la distancia desde la parte superior del carrusel */
    text-align: center;
    /*left: 50%;*/ /* Centra horizontalmente el título */
    /*transform: translateX(-50%);*/ /* Corrige la posición del título para que esté realmente centrado */
    z-index: 100; /* Asegura que el título esté por encima del carrusel */
}

    .carousel-title h2 {
        color: black; /* Establece el color del texto del título */
        /*background-color: rgba(0, 0, 0, 0.5);*/ /* Añade un fondo oscuro semi-transparente al título */
        padding: 10px 20px; /* Agrega espaciado alrededor del texto del título */
        border-radius: 5px; /* Añade bordes redondeados al fondo del título */
    }

.carousel {
    width: 500px; /* Ancho fijo del carrusel */
    height: 400px; /* Altura fija del carrusel */
    margin: 20px auto; /* Centra el carrusel horizontalmente */
}

.carousel .carousel-inner {
     width: 100%; /* Ancho relativo al contenedor del carrusel */
     height: 100%; /* Altura relativa al contenedor del carrusel */
}


    .carousel img {
        width: 100%; /* Ancho fijo de la imagen */
        height: auto; /* Altura fija de la imagen */
        object-fit: cover; /* Asegura que la imagen cubra el espacio asignado sin deformarse */
        transition: box-shadow 0.5s; /* Añade una transición suave al efecto de zoom */
    }

        .carousel img:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }


/* END New For Carousel*/

/********* MENU **********/
/********* VEHICLES **********/
.vehicle {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 3px;
    margin: auto;
    margin-top: 5px;
    font-size: large;
    font-weight: bolder;
    padding-top: 12px;
    text-align: center;
    text-decoration: none;
    z-index: 11;
    float: left;
}

#vehiclePanel {
    background-color: #eee;
    width: 150px;
    height: 500px;
    position: fixed;
    left: 0;
    top: 50px;
    border-radius: 0 5px 5px 0;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 2px #ccc;
    z-index: 1;
}

#newVehicle {
    width: 147px;
    margin: auto;
    background-color: #ddd;
    text-align: center;
    height: 70px;
}

#closeVPanel {
    position: absolute;
    width: 15px;
    height: 40px;
    right: -15px;
    top: 5px;
    border-radius: 0 3px 3px 0;
    background-color: #ddd;
    color: #777;
    font-family: monospace;
    text-align: center;
    padding: 8px 0 0 0;
    cursor: pointer;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}

#openVPanel {
    position: fixed;
    left: 0;
    top: 55px;
    width: 15px;
    height: 40px;
    right: -15px;
    border-radius: 0 3px 3px 0;
    background-color: #ddd;
    color: #777;
    font-family: monospace;
    text-align: center;
    padding: 8px 0 0 0;
    cursor: pointer;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}

.deleteVehicle {
    position: relative;
    width: 15px;
    height: 40px;
    top: 10px;
    border-radius: 3px 0 0 3px;
    background-color: #ddd;
    color: #777;
    font-family: monospace;
    text-align: center;
    padding: 8px 0 0 0;
    cursor: pointer;
    border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    float: left;
    margin-left: 15px;
}
/********* VEHICLES **********/