:root {
--amarillo: #fcdb1c;
--color-azul: #18ace3;
--color-verde: #009640;
--color-morado: #ab4191;
--color-blanco: #ffffff;
--color-azul-claro: #EEEFFF;
--guayaba: #FD6C69;
--montana: #1B3834;
--mantequilla: #F8F3DE;
--verde-claro: #D6FBB5;
--cielo: #A6DDF0;
--guayacan: #F9DA59;
}

.btn.bg-mantequilla.text-guayaba:hover{
background-color: var(--guayaba);
color: var(--mantequilla);
}

.os-theme-light>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-theme-light>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle:hover{
    background: var(--guayaba);
}


.identificador {
    margin-right: 0px;
    /* padding: 1rem; */
    background-color: var(--guayaba);
    border: solid 1px var(--guayaba);
    color: white;
    margin-right: 0px;
    padding: 1rem 1.25rem;
    /* background-color: white; */
    border-top: solid 1px;
    border-bottom: solid 1px;
    border-right: solid 1px;
}

.required::after, .requerido::after{
content: ' (*)';
color: red
}

/* Textos y fondos con papeleta de colores */

.text-amarillo {
color: var(--amarillo);
}

.bg-amarillo {
background-color: var(--amarillo);
}

.text-azul {
color: var(--guayaba);
}

.bg-azul {
background-color: var(--guayaba);
}

.text-verde {
color: var(--montana);
}

.bg-verde {
background-color: var(--montana);
}

.text-morado {
color: var(--color-morado);
}

.bg-morado {
background-color: var(--color-morado);
}

.text-blanco {
color: var(--color-blanco);
}

.bg-blanco {
background-color: var(--color-blanco);
}

.text-azul-claro {
color: var(--guayaba-claro);
}

.bg-azul-claro {
background-color: var(--guayaba-claro);
}

.text-guayaba {
color: var(--guayaba);
}

.bg-guayaba {
background-color: var(--guayaba);
}

.text-montana {
color: var(--montana);
}

.bg-montana {
background-color: var(--montana);
}

.text-mantequilla {
color: var(--mantequilla);
}

.bg-mantequilla {
background-color: var(--mantequilla);
}

.text-verde-claro {
color: var(--verde-claro);
}

.bg-verde-claro {
background-color: var(--verde-claro);
}

.text-cielo {
color: var(--cielo);
}

.bg-cielo {
background-color: var(--cielo);
}

.text-guayacan {
color: var(--guayacan);
}

.bg-guayacan {
background-color: var(--guayacan);
}



/* ----------------------------------------------------------------------------------------- */
.corte-derecha {
clip-path: polygon(0% 0%, 100% 23%, 100% 83%, 0% 100%);
}

.corte-izquierda {
clip-path: polygon(0% 23%, 100% 0%, 100% 100%, 0% 83%);
}

.pointer{
cursor: pointer;
}

.d-grid{
display: grid;
}

.borde-encabezado {
width: 5px;
height: 51px;
background-color: var(--montana);
}

/* input file */
input.form-control[type=file] {
padding: 3px 15px;
}

/* OGNANIZAR */
.btn-eje {
transition: all 1s ease 0.1s;
}

.btn-eje:hover,
.btn-eje:active,
.btn-eje:focus {
transform: scale(1);
-webkit-box-shadow: 3px 4px 24px -1px rgba(0, 0, 0, 0.31);
-moz-box-shadow: 3px 4px 24px -1px rgba(0, 0, 0, 0.31);
box-shadow: 3px 4px 24px -1px rgba(0, 0, 0, 0.31);
/* padding: 5px; */
border-radius: 10px;
}

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

* {
box-sizing: border-box;
}


.nav-tabs {
border-bottom: 1px solid var(--guayaba);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
color: #495057;
background-color: #fff;
border-color: var(--guayaba) var(--guayaba) var(--guayaba);
}


.rounded-pill-left {
border-radius: 30px 0px 0px 30px;
}

.rounded-pill-right {
border-radius: 0px 30px 30px 0px;
}

.card-personalizada {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 15px
}

.boton-esquina-derecha {
right: -10px;
top: -10px;
background: #c8d7e5;
border: none;
padding: 5px;
border-radius: 5px;
z-index: 2;
position: absolute;
}

/* Clases para cascada de estados */
.revision {
background-color: #17a2b8;
}

.aprobado {
background-color: var(--montana);
}

.pendiente {
background-color: var(--color-morado);
}

.rechazado,
.correccion {
background-color: #dc3545;
}

.revision,
.aprobado,
.rechazado,
.correccion {
color: white;
}


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

/* Estilos para nav-tabs */

.nav-tabs a {
color: var(--guayaba);
}

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

/* ESTILOS PARA EL HOME */

.cajon-info {
background-color: rgb(247 250 255);
padding: 15px;
border-radius: 15px;
margin-bottom: 10px;
height: 250px;
}

.content-principal {
background-color: #662681
}

.logo-mipyme {
max-height: 110px;
}

.img-carpeta,
.img-buscar {
max-height: 100px
}

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

/* Clases de estados actividad */

.actividad-pendiente {
background-color: #e0a800;
border-color: #d39e00;
}

.actividad-revision {
background-color: #138496;
border-color: #117a8b;
}

.actividad-correccion {
background-color: #5a6268;
border-color: #545b62;
}

.actividad-finalizado {
background-color: #218838;
border-color: #1e7e34;
}

.actividad-atrasada {
background-color: #c82333;
border-color: #bd2130;
}

.actividad-cancelada {
background-color: var(--color-morado);
}

/* Estados Proyecto */


.proyecto-ejecucion {
background: rgb(42, 49, 128);
background: linear-gradient(90deg, rgba(42, 49, 128, 1) 0%, rgba(0, 150, 64, 1) 35%, rgba(102, 38, 129, 1) 100%);
}


/* Clase para texto input file bootstrap */
.custom-file-label::after {
content: "Buscar" !important;
}

/* Clase para requeridos por Jhordy */
.requerido::after {
content: " (*)";
color: red;
}

/* Fin requerido */
td,
th {
vertical-align: middle !important;
}

.modal-content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 3px solid var(--montana);
border-radius: 20px;
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .5);
/* outline: 0; */
overflow: hidden;
}

.modal-header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid var(--montana);
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px);
}

.modal-footer {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 0.75rem;
border-top: 1px solid var(--montana);
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}

.borde {
border: 1px solid #dee2e6;
}

.borde-table-start {
border-radius: 5px 0px 0px 0px;
}

.borde-table-end {
border-radius: 0px 5px 0px 0px;
}

.g-recaptcha {
display: flex;
justify-content: center;
}

/* body {
background-color: #f4f6f9;
} */

.content-wrapper {
background-color: transparent;
}

.vaya-fondo {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover;
opacity: 0.2;
}

.card-personalizada {
background-color: rgba(255, 255, 255, 0.6);
border-radius: 15px
}

.centro {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.text-center {
text-align: center;
}

.zoom-iconos {
transition: all 1s ease 0.1s;
}

.zoom-iconos:hover {
transform: scale(1.1);
-webkit-box-shadow: 3px 4px 24px -1px rgba(0, 0, 0, 0.31);
-moz-box-shadow: 3px 4px 24px -1px rgba(0, 0, 0, 0.31);
box-shadow: 3px 4px 24px -1px rgba(0, 0, 0, 0.31);
/* padding: 5px; */
border-radius: 10px;
}

.titulo-header {
border-bottom: solid 2px var(--guayaba);
background-color: #9e89891a;
border-radius: 10px;
}


[type=checkbox] {
width: 1.8em;
height: 1.8em !important;
}

[type=checkbox]:disabled {
background-color: #999;
}

:checked[type=checkbox] {
background-color: var(--guayaba);
}



.form-check-input[type=radio] {
width: 1.8em;
height: 1.8em !important;
}

.form-check-input:checked[type=radio] {
background-color: var(--guayaba);
background-image: none;
}

.bg-personalizado {
background: linear-gradient(133deg, rgba(0, 105, 150, 0.7511379551820728) 0%, rgba(124, 184, 40, 0.7455357142857143)
100%);
}



.nav-pills .nav-link:not(.active):hover {
color: var(--guayaba);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: var(--guayaba);
}

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


/* BOTONES */

.btn-outline-primary {
color: var(--guayaba);
border-color: var(--guayaba);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
color: #fff;
background-color: var(--guayaba);
border-color: var(--guayaba);
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
color: #fff;
background-color: var(--guayaba);
border-color: var(--guayaba);
}


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


/* ventana modales */

.shadow-modal {
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.40) !important;
}


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



.ms-container {
background: transparent url(../img/switch.png) no-repeat 50% 50%;
width: 100% !important;
}


/* TABLAS */

.border-tabla-start {
border-radius: 20px 0px 0px 0px;
}

.border-tabla-end {
border-radius: 0px 20px 0px 0px;
}


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


/* PAGINACIÓN */

.page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: var(--guayaba);
background-color: #fff;
border: 1px solid #dee2e6;
}

.page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: var(--guayaba);
border-color: var(--guayaba);
}

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

/* Estilo label checkbox */

.form-check-label {
margin-left: 1.5em;
}

/*
------------------------------------------------------------------------------------------------------------------------
*/
/* Ícono ver contraseña */
/* .input-group-prepend input {
padding: 9px 42px 9px 12px;
}

.eye {
position: relative;
right: 35px;
} */

/*
-----------------------------------------------------------------------------------------------------------------------
*/
/* Botón WhatsApp */
.float {
position: fixed;
width: 60px;
height: 60px;
bottom: 50px;
right: 10px;
background-color: rgb(196, 196, 196);
color: rgb(24, 85, 16);
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
box-shadow: 0px 0px 3px 10px rgba(40, 184, 40, 0.5);
border: 1px solid rgb(110, 110, 110);
}

.float:hover {
text-decoration: none;
color: var(--verde);
background-color: #25D366;
}

.my-float {
margin-top: 14px;
}

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


/*BOTON WPP*/

.float {
position: fixed;
width: 60px;
height: 60px;
bottom: 45px;
right: 20px;
background-color: var(--guayaba);
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
box-shadow: 0px 0px 25px 10px rgb(253 108 105 / 70%);
}

.float:hover {
text-decoration: none;
color: var(--montana);
background-color: #fff;
}

.my-float {
margin-top: 14px;
}

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


/* Miga de pan en proyectos y demas vistas referentes a el */
.breadcrumb {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
list-style: none;
background-color: #e9ecef;
border-radius: 0.25rem;
}

/* ------------------------------------------------------------------------------------------- */
.collapse {
visibility: initial;
}

/* -------------------------------------------------------------------------------------------- */
/* Maquetación Objetivos */

.menu-objetivo {
transition: all 1s ease 0.1s;
}

.menu-objetivo:hover,
.menu-objetivo.active {
transform: scale(1.1);
webkit-box-shadow: 3px 4px 24px -1px rgba(0, 0, 0, 0.31);
-moz-box-shadow: 3px 4px 24px -1px rgba(0, 0, 0, 0.31);
box-shadow: 3px 4px 24px -1px rgba(0, 0, 0, 0.31);
border-radius: 10px
}




/* ------------------------------------------------------------------------------------------- */
/* Maquetación TRL */

/* .fixedTRL {
position: fixed;
bottom: 60px;
left: 600px;
width: 900px;
height: 50px;
border: 1px solid #73AD21;
} */



/* Redes sociales */

.social-icons {
padding: 0;
list-style: none;
margin: 1em
}

.social-icons li {
display: inline-block;
margin: .15em;
position: relative;
font-size: 1.2em
}

.social-icons i {
color: var(--montana);
position: absolute;
top: 21px;
left: 21px;
transition: all 265ms ease-out
}

.social-icons a {
display: inline-block
}

.social-icons a:before {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
content: " ";
width: 60px;
height: 60px;
border-radius: 100%;
display: block;
/* background: linear-gradient(45deg, #00B5F5, #002A8F); */
background: white;
transition: all 265ms ease-out
}

.social-icons a:hover:before {
transform: scale(0);
transition: all 265ms ease-in
}

.social-icons a:hover i {
transform: scale(2.2);
-ms-transform: scale(2.2);
-webkit-transform: scale(2.2);
color: var(--montana);
background: white;
/* background: -webkit-linear-gradient(45deg, #00B5F5, #002A8F); */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 265ms ease-in;
}

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


/* Estilos para motores Webkit y blink (Chrome, Safari, Opera... )*/

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 15px;
}

::-webkit-scrollbar-button:increment {
    display: none;
}

::-webkit-scrollbar:horizontal {
    height: 10px;
}

::-webkit-scrollbar-thumb {
    /* background-color: #662681; */
    /*  background: rgb(0, 43, 233); */
    background: linear-gradient(180deg, var(--montana) 0%, var(--guayaba) 100%);
    border-radius: 20px;
    border: 2px solid #f1f2f3;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

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

/* .layout-fixed .wrapper .sidebar {
    height: calc(70vh - (3.5rem + 1px));
} */