/* Colores de la Web */
:root {
    --principal: #6a90a5;
    --secudario: #666;
}

.topbar .mailbox, .topbar .user-dd {
    width: 350px;
}

.page-wrapper > .container-fluid,
.page-wrapper > .container-lg,
.page-wrapper > .container-md,
.page-wrapper > .container-sm,
.page-wrapper > .container-xl,
.page-wrapper > .container-xxl {
    padding: 20px 30px;
    min-height: calc(100vh - 219px);
}

/* Formulario de Login y recuperacion */
#loginform .logo img,
#recoverform .logo img {
    width: 100%;
}

/* Cabecera panel */
span.logo-text img.light-logo {
    width: 85%;
    margin-left: 10px;
}

b.logo-icon img.light-logo {
    width: 100%;
}

i.ti-menu {
    color: var(--principal);
}

.d-flex.no-block.align-items-center.p-3.bg-info.text-white.mb-2 {
    background-color: var(--principal) !important;
}

a.btn.d-block.w-100.btn-info.rounded-pill {
    background-color: var(--principal);
    border-color: var(--principal);
}

a.btn.d-block.w-100.btn-info.rounded-pill:hover {
    background-color: var(--secudario);
    border-color: var(--secudario);
}

/* Titulo y migas de pan */
.page-titles .text-themecolor {
    color: var(--principal);
}

/* Sidebar */
#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav ul .sidebar-item .sidebar-link,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav ul .sidebar-item .sidebar-link {
    font-size: 12px;
}

#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
#main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav>ul>.sidebar-item>.sidebar-link.active {
    background-color: var(--principal);
    font-size: 12px;
}

.sidebar-nav ul .sidebar-item .sidebar-link i {
    font-size: 18px;
    margin-right: 15px;
    width: 15px;
}

.sidebar-nav ul .sidebar-item .sidebar-link .hide-menu {
    overflow: visible;
}

.user-profile .profile-text>a {
    padding: 6px 10px;
}

.user-profile .profile-text>a:hover {
    background: var(--secudario);
}

.home-card {
    color: #fff;
}

.counter {
    color: #fff;
}

.card-home-counter {
    text-align: right;
}

.bg-c-blue {
    background: linear-gradient(45deg, #4099ff, #73b4ff);
}

.bg-c-green {
    background: linear-gradient(45deg, #2ed8b6, #59e0c5);
}

.bg-c-yellow {
    background: linear-gradient(45deg, #ffb64d, #ffcb80);
}

.bg-c-pink {
    background: linear-gradient(45deg, #ff5370, #ff869a);
}

.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card .card-block {
    padding: 25px;
}

.home-card i {
    font-size: 26px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.my-leaflet-map-container img {
    max-height: none;
}

.date-table{
    font-size: 14px;
}

.order-table{
    font-size: 10px;
}


.copy-text {
	position: relative;
	padding: 5px;
	background: #fff;
	border: 0.5px solid #ddd;
	border-radius: 5px;
	display: flex;
}
.copy-text input.text {
	padding: 5px;
	font-size: 12px;
	color: #555;
	border: none;
	outline: none;
}
.copy-text button {
	padding: 5px;
	background: #5784f5;
	color: #fff;
	font-size: 12px;
	border: none;
	outline: none;
	border-radius: 5px;
	cursor: pointer;
}

.copy-text button:active {
	background: #809ce2;
}
.copy-text button:before {
	content: "Copiado";
	position: absolute;
	top: -22px;
	right: 0px;
	background: #5c81dc;
	padding: 4px 5px;
	border-radius: 10px;
	font-size: 12px;
	display: none;
}
.copy-text button:after {
	content: "";
	position: absolute;
	top: -10px;
	right: 12.5px;
	width: 5px;
	height: 5px;
	background: #5c81dc;
	transform: rotate(45deg);
	display: none;
}
.copy-text.active button:before,
.copy-text.active button:after {
	display: block;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}
#videoPreview {
    width: 100%;
    height: auto;
}
.timer, .location, .time, .video-controls, .video-message {
    position: absolute;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
}
.timer {
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.5);
}
.location {
    top: 50px;
    left: 10px;
    background: rgba(0, 0, 0, 0.5);
}
.time {
    top: 90px;
    left: 10px;
    background: rgba(0, 0, 0, 0.5);
}
.video-controls {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.video-message {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


.video-message .alert {
    margin: 0;
    padding: 5px 10px;
}

.invalid {
    border-color: red;
  }
  
  .error-message {
    color: red;
    font-size: 0.8em;
    margin-top: 5px;
  }
  
  .upload-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 80%;
    max-width: 600px;
}
.video-preview {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: #000;
}
.file-input {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    transition: background-color 0.3s ease;
}
.custom-file-upload:hover {
    background-color: #0056b3;
}

#loader {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    border-radius: 5px;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loader-message {
    color: #fff;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 5px;
}

.overlayenvio {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Fondo negro con transparencia */
    z-index: 1000;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.overlay-contentenvio {
    padding: 20px; /* Espaciado interno */
    font-size: 2vw; /* Tamaño de texto responsivo */
}

@media (max-width: 600px) {
    .overlay-contentenvio {
        font-size: 4vw; /* Ajuste para pantallas pequeñas */
    }
}

@media (min-width: 601px) and (max-width: 1200px) {
    .overlay-contentenvio {
        font-size: 3vw; /* Ajuste para pantallas medianas */
    }
}

@media (min-width: 1201px) {
    .overlay-contentenvio {
        font-size: 2vw; /* Ajuste para pantallas grandes */
    }
}

.ts-wrapper .ts-control {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}
.ts-wrapper.multi .ts-control {
    padding: 5px;
}
.ts-wrapper.multi .ts-control > div {
    margin: 2px;
    padding: 1px 5px;
}