@import url(anlib/img.sizes.css);

:root {
    --primary: #0091FF;
    --primary-shadow: #0091ff61;
    --primary-contrast: #fff;
    --primary-hover: #0070E8;

    --secondary: #0070E8;
    --secondary-contrast: #fff;
    --secondary-hover: #0091FF;

    --tertiary: #00CB0C;
    --tertiary-shadow: #00CB0C61;
    --tertiary-contrast: #000;
    --tertiary-hover: #00BA04;

    --red: #EA2027;
    
    --border-color: #e4eaf1;
}

/* Fonts */
/* Fuente regular */
@font-face {
    font-family: 'ChampagneLimousines';
    src: url('../fonts/Champagne & Limousines.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ChampagneLimousines';
    src: url('../fonts/Champagne & Limousines Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'ChampagneLimousines';
    src: url('../fonts/Champagne & Limousines Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'ChampagneLimousines';
    src: url('../fonts/Champagne & Limousines BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
*:not(.fa):not(.fas):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    font-family: 'Poppins' !important;
    text-transform: none !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'ChampagneLimousines' !important;
    text-transform: none !important;
}
/* Fonts */

::selection {
    background-color: var(--primary);
    color: var(--primary-contrast);
}

/* Theme */
#admin.fullheight {
    min-height: 100vh;
}
#admin:before {
    position: fixed;
    background-image: -webkit-linear-gradient(0deg, var(--tertiary) 0%, var(--primary) 100%);
}
#admin.fullheight #real {
    min-height: 100%;
}
#admin.fullheight #real > div {
    min-height: 100%;
}

.btn-info:hover, .btn-info:active, .btn-info:focus, .dropdown-toggle:hover, .dropdown-toggle:active, .dropdown-toggle:focus {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-check {
    border-color: var(--border-color);
    border-width: 1px;
    border-style: solid;
}
.btn-check:not(:disabled):not(.disabled).active, .btn-check:has(> input:checked) {
    border-color: var(--primary);
    background-color: var(--primary);
    color: #fff;
}

#admin .content .bottom .left h1 {
    color: var(--primary) !important;
}
#admin .content .top .right .dropdown-menu a:hover {
    color: var(--primary) !important;
}
#admin .sidebar #list .nav .nav-item .active, 
#admin .sidebar #list .nav .sub .active,
#admin .sidebar #list .nav .nav-item .nav-link:hover, 
#admin .sidebar #list .nav .sub .nav-link:hover {
    color: var(--primary) !important;
}

#admin .sidebar .head .btn {
    background-image: -webkit-linear-gradient(0deg, var(--tertiary) 0%, var(--secondary) 100%);
}

#admin .sidebar .head {
    padding: 30px 0;
    background-image: url(/assets/img/stadium.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 0px 4000px rgba(255, 255, 255, 0.8) inset;
}
#admin .sidebar .head .logo {
    height: 90px;
    width: 74px;
    object-fit: contain;
}
/* Theme */

/* Link */
a:not([class]) {
    color: var(--primary) !important;
}
/* Link */

/* Primaries */
.bg-primary {
    background-color: var(--primary) !important;
    color: ' . $color->contrast($this->bgOne) . ' !important;
}
.text-primary {
    color: var(--primary) !important;
}
.btn-primary, .btn-primary:visited {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: -1px 4px 5px 0px var(--primary-shadow);
}
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}
.btn-primary:hover, .btn-primary.disabled:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-tertiary, .btn-tertiary:visited {
    background-color: var(--tertiary) !important;
    border-color: var(--tertiary) !important;
    box-shadow: -1px 4px 5px 0px var(--tertiary-shadow);
}
.btn-tertiary:not(:disabled):not(.disabled).active {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}
.btn-tertiary:hover, .btn-tertiary.disabled:hover {
    background: var(--tertiary-hover) !important;
    border-color: var(--tertiary-hover) !important;
}
/* Primaries */

/* Texts */
.text-danger {
    color: var(--red) !important;
}
/* Texts */

/* Alert */
.alert {
    border-radius: 25px;
}
.alert-danger {
    background-color: var(--red);
    border-color: var(--red);
    color: #fff;
}
/* Alert */

/* Label */
.label-primary {
    background-color: var(--primary) !important;
}
/* Label */

/* Flex */
.flex-gap-10 {
    gap: 10px;
}
/* Flex */

/* Input */
.form-control {
    border-radius: 20px;
    padding-left: 18px;
    padding-right: 18px;
}
.btn,
.swal2-actions button {
    border-radius: 20px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}
.input-group .btn {
    border-radius: 0 !important;
}
.input-group .btn:first-child {  
    border-radius: 20px !important;  
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.input-group .btn:last-child {
    border-radius: 20px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
/* Input */

/* Select2 */
/* CSS para el contenedor select2 */
.select2-container .select2-selection--single {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px; /* Cambia el radio de borde según sea necesario */
    height: 40px; /* Asegúrate de ajustar esto según sea necesario */
    padding: 8px 12px; /* Ajusta el padding para que coincida con el input de muestra */
    font-size: 16px; /* Asegúrate de que el tamaño de la fuente coincida */
    color: #6c757d; /* Color de texto */
    box-shadow: none;
    transition: all 0.2s ease;
}

/* CSS para el texto de placeholder */
.select2-container .select2-selection--single .select2-selection__placeholder {
    color: #6c757d; /* Color del placeholder */
    font-size: 16px; /* Asegúrate de que el tamaño de la fuente coincida */
}

/* CSS para el icono del dropdown */
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    position: absolute;
    top: 0;
    right: 10px; /* Ajusta según sea necesario */
    width: 20px;
}

/* CSS para la caja desplegable */
.select2-container .select2-dropdown {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* CSS para los elementos de la lista */
.select2-container .select2-results__option {
    padding: 8px 12px;
    font-size: 16px;
    color: #6c757d;
}

/* CSS para el hover y selección de elementos */
.select2-container .select2-results__option--highlighted,
.select2-container .select2-results__option--selected {
    background-color: #f0f0f0; /* Cambia según sea necesario */
    color: #333;
}
/* Select2 */

/* Cursors */
.cursor-move {
    cursor: move;
}
.cursor-move:active {
    cursor: grabbing;
}
/* Cursors */

/* Card */
.card {
    border-radius: 20px;
    padding: 0;
}
.card .card-body {
    padding: 1rem;
}

.card > .nav {
    border-radius: 20px 20px 0 0;
    background-color: var(--border-color);
    overflow-x: auto;
}
.card > .nav > .nav-item > a {
    border-radius: 20px 20px 0 0;
    transition: ease-in-out .3s all;
}
.card > .nav > .nav-item.active > a {
    border: none;
}
/* Card */

/* Modal */
.modal,
.swal2-container:has(.swal2-modal) {
    backdrop-filter: blur(10px);
}
.swal2-container:has(.swal2-modal) {
    background-color: var(--primary-shadow) !important;
}
.modal-backdrop {
    background-color: var(--primary);
}
.modal .modal-content,
.swal2-popup.swal2-modal {
    border-radius: 20px;
    border: none;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}
.modal .modal-content .modal-header {
}
.modal .modal-content .modal-header .modal-title {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}
/* Forzar ancho tipo modal-xl */
.modal-xl-custom {
    max-width: 1140px;
    width: 100%;
}

/* Modal */

/* Errors pages */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 100px auto;
    width: 100%;
    max-width: 600px;
    text-align: center;
}
.error-page > img {
    max-height: 300px;
    margin-bottom: 25px;
}
/* Errors pages */

/* Login */
.login #admin .content {
    background-color: var(--secondary);
}
/* Login */

/* Object fields */
.v-obj-field > button,
.v-obj-field > div > button {
    font-size: 0.7rem;
}
.v-obj-image {
    display: flex;
    align-items: start;
    justify-content: center;
}
.v-obj-image > div {
    position: relative;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    padding: 5px;
}
.v-obj-image > div > img {
    width: 175px;
    height: 175px;
    object-fit: contain;
    object-position: center;
}
.v-obj-image > div > button {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 0 !important;
    font-size: 0.7rem;
}
/* Object fields */

/* Map */
.map-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--input-border);
}
.map-container > .map-view {
    width: 100%;
    height: 100%;
}
.map-container > .map-view:focus {
    outline: none;
}
.map-container > .marker {
    position: absolute;
    height: 50px;
    width: 50px;
    top: calc(50% - 50px);
    left: calc(50% - 25px);
}
.map-container > .camera {
    --camera-height: 280px;
    position: fixed;
    height: var(--camera-height);
    width: 300px;
    background-color: #ffffff;
    top: calc(50% - var(--camera-height) - 25px);
    left: calc(50% - 150px);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 20px;
}
.map-container > .camera:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: #fff transparent;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-width: 15px 10px 0;
    bottom: -15px;
    left: 50%;
    margin-left: -10px;
}
.map-container > .camera > .stream {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}
.map-container > .camera > .preview {
    display:none;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    object-fit: contain;
}
.map-container > .camera > .btnSnap,
.map-container > .camera > .btnRetake {
    position: absolute;
    bottom: 5px;
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    font-size:1.35rem;
    display: flex;
}
.map-container > .camera > .btnRetake {
    display: none;
}
.map-container > .camera > canvas {
    display: none;
}
.map-container > .btnGeolocateMe,
.map-container > .btnGeolocateMeClass {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    left: 8px;
    bottom: 8px;
    background-color: #fff;
    color: #444;
    border: none;
    font-size: 1.2rem;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.map-container > button[type=submit] {
    position: absolute;
    width: 250px;
    left: calc(50% - (250px / 2));
    bottom: 20%;
}
/* Map */

/* Floating Places */
.floating-search {
    display: none;
    position: absolute;
    list-style: none;
    padding: 8px;
    margin: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    background: rgba(255, 255, 255, 1);
    border-radius: 0 0 8px 8px;
    z-index: 1000;
    width: calc(100% - 20px);
    left: 10px;
}
.floating-search.shown {
    display: block;
}
.floating-search > li {
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}
.floating-search > li.message {
    
}
.floating-search > li.error {
    
}
.floating-search > li.result {
    display: block;
    border-bottom: #f5f5f5 solid 1px;
    padding: 5px 8px;
    cursor: pointer;
}
.floating-search > li.result:last-child {
    border-bottom: none;
}
.floating-search > li.result > .name {
    display: block;
    color: #222;
}
.floating-search > li.result > .descrip {
    display: block;
    color: #777;
    font-size: .85rem;
}
.floating-search > li.result:hover {
    background: #f5f5f5;
}

.floating-search > li.btn-more {
    padding: 8px;
    cursor: pointer;
}
.floating-search > li.btn-more:hover {
    background: #f5f5f5;
}
/* Floating Places */

/* Empty */
.empty-msg:empty:after {
    content: attr(data-empty);
    text-align: center;
    width: 100%;
    display: block;
    color: #99abb4 !important;
    font-style: italic;
}
/* Empty */

/* Form check */
.form-check {
    border: 1px solid #dedede;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 10px 5px;
    transition: all 0.3s ease;
    position: relative;
}

.form-check-input {
    position: absolute;
    top: 5px;
    left: 5px;
    margin-top: 0;
    margin-left: 0;
}

/*.form-check-input:checked ~ .form-check-label,*/
.form-check:has(.form-check-input:checked) {
    opacity: 1;
    border-color: var(--primary);
}

/*.form-check-input:not(:checked) ~ .form-check-label {*/
.form-check:has(.form-check-input:not(:checked)) {
    opacity: 0.4;
}

.form-check-label {
    display: flex;
    align-items: center;
    padding-left: 5px;
}

.form-check-label img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-right: 10px;
}
/* Form check */

.smaller {
    font-size: 70%;
}