/*******************[NAV]************************* * /
.dlabnav .metismenu .has-arrow:after {
    border-top: 0.3125rem solid #ffffff;
    border-left: 0.3125rem solid #ffffff;
    border-bottom: 0.3125rem solid transparent;
    border-right: 0.3125rem solid transparent;
    right: .50rem;
    top: 48%;
    -webkit-transform: rotate(-225deg) translateY(-50%);
    transform: rotate(-225deg) translateY(-50%);
}

/*
.dlabnav .metismenu {
    display: flex;
    flex-direction: column;
    padding-top: 0rem;
}

@media only screen and (max-width: 35.9375rem) {
.dlabnav .metismenu li {
    padding: 0rem 0rem !important;
}
}

@media only screen and (max-width: 87.5rem) {
	.dlabnav .metismenu > li > a {
    font-size: 1rem;
    padding: 0.9375rem 1.25rem;
    border-radius: 16px;
    color: rgba(71,71,71,1.00);
	}
}
*/
/*
#map {
  height: 100%;
}
*/

/*Carousel*/
/* .toast-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    /* Espacio entre toasts  
}
*/


.btn-active {
    background-color: #0d4df0 !important;
    /* Color resaltado */
    color: white !important;
    border-color: #0d4df0 !important;
}

.custom-textarea {
    height: 150px !important;
    min-height: 150px !important;
    resize: vertical !important;
    overflow: auto !important;
}

.file-dropzone {
    width: 100%;
    height: auto;
    min-height: 350px !important;
    border: 2px dashed #ccc !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 15px !important;
    background-size: contain !important;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.toast-container {
    box-shadow: none;
    border-radius: 0;
    width: auto;
    /* max-width: 300px; */
    opacity: 1;
    border-radius: 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    z-index: 99999;
}

#toast-container>div {
    box-shadow: none;
    border-radius: 0;
    width: auto;
    min-width: 350px;
    opacity: 1;
    border-radius: 0.3rem; 
    margin-bottom: 15px !important;
}

.word-break {
    word-break: break-word !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

#modalCarousel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    /* Asegura que el modal esté por encima de otros elementos */
}

#modalCarousel .modal-content {
    display: block;
    max-width: 90%;
    width: auto;
    height: 80vh;
    object-fit: contain;
    margin: 0 auto;
    margin-top: 5%;
}

#modalCarousel .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    z-index: 1001;
    /* Asegura que el botón de cerrar esté por encima del modal */
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro semitransparente */
    border-radius: 50%;
    /* Hace el botón circular */
    transition: background 0.3s;
}

#modalCarousel .close:hover {
    background: rgba(0, 0, 0, 0.7);
    /* Cambio de fondo al hacer hover */
}

#modalCarousel .next,
#modalCarousel .prev {
    position: absolute;
    top: 50%;
    font-size: 30px;
    color: white;
    cursor: pointer;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    text-decoration: none;
    transition: background 0.3s;
    z-index: 1001;
    /* Asegura que las flechas estén por encima del modal */
}

#modalCarousel .next {
    right: 10px;
}

#modalCarousel .prev {
    left: 10px;
}

#modalCarousel .prev:hover,
#modalCarousel .next:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Estilos para pantallas pequeñas */
@media screen and (max-width: 600px) {
    #modalCarousel .close {
        font-size: 24px;
        /* Ajusta el tamaño del botón */
        top: 10px;
        right: 10px;
        padding: 8px;
        /* Reduce el tamaño del botón */
    }

    #modalCarousel .next,
    #modalCarousel .prev {
        font-size: 24px;
        /* Ajusta el tamaño de las flechas */
        padding: 8px;
        /* Ajusta el padding de las flechas */
    }
}

/******************[ DATATABLE ]***********************/

/* Elimina los íconos predeterminados que genera DataTables */
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after {
    content: "";
    /* Elimina los íconos predeterminados */
}

/* Personalización de íconos para el estado inicial (sin orden) */
table.dataTable thead th.sorting {
    padding-right: 26px;
}

table.dataTable thead th.sorting:after {
    content: "⇅";
    /* Doble flecha para no ordenado */
    font-size: 14px;
    position: absolute;
    right: 8px;
}

/* Personalización de íconos para el estado ascendente */
table.dataTable thead th.sorting_asc:after {
    content: "⇑";
    /* Flecha hacia arriba para orden ascendente */
    font-size: 14px;
    position: absolute;
    right: 8px;
}

/* Personalización de íconos para el estado descendente */
table.dataTable thead th.sorting_desc:after {
    content: "⇓";
    /* Flecha hacia abajo para orden descendente */
    font-size: 14px;
    position: absolute;
    right: 8px;
}

/* Asegúrate de mantener el cursor de puntero */
table.dataTable thead th {
    cursor: pointer;
}

table.dataTable thead th.sorting:after {
    content: "⇅" !important;
    /* Cambia este valor por el símbolo o texto que quieras */
    position: absolute;
    right: 8px;
    font-size: 14px;
}

table.dataTable thead th.sorting_asc:after {
    content: "↑" !important;
    /* Icono para el orden ascendente */
    position: absolute;
    right: 8px;
    font-size: 14px;
}

table.dataTable thead th.sorting_desc:after {
    content: "↓" !important;
    /* Icono para el orden descendente */
    position: absolute;
    right: 8px;
    font-size: 14px;
}

.dataTables_wrapper .dataTables_paginate span .paginate_button {
    height: 2.125rem;
    width: 2.125rem;
    margin-left: 0rem;
    margin: 0 0.05rem;
    line-height: 1.85rem;
    text-align: center;
    font-size: 2rem;
    border-radius: 0.5125rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous, .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    FONT-WEIGHT: 200;
    font-size: 1.125rem;
    height: 2.125rem;
    width: fit-content;
    border: 0.0625rem solid var(--primary);
    border-radius: .5125rem;
    padding: 0 9px;
    line-height: 2rem;
    margin: 0 1.5px;
    display: inline-block;
}

.dataTable thead {
    background-color: #f3f3f3;
    border-bottom-color: rgba(133,133,133,1.00) !important;
    border-top-color: rgba(133,133,133,1.00) !important;
    border-bottom-style: solid;
    border-top-style: solid;
}

.dataTables_processing{ 
    width: 100%!important;
    left: 100px!important;
    z-index: 99;
}

.dataTable {
    width: 100% !important;
    min-width: 800px !important;
}


/******************[ CHAT ]***********************/
.modalChatView{
    max-height: 450px;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(202,202,202,1.00);
}

.drag-area {
    cursor: move;
    background-color: white;
    border: solid;
    border-width: 1px;
    border-color: #A4ABB6;
    padding: 4px 8px;
    font-size: 11px;
    color: #A4ABB6;
    text-align: right;
    width: auto;
    border-radius: 4px;
    position: absolute;
    top: -30px;
    right: 0px;
}

#chatbox-container .select2-container {
    width: 100% !important;
}

#chatbox-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 90%;
    max-width: 450px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0; /* Adjusted */
    visibility: hidden; /* Adjusted */
    z-index: 9999;
    height: 60vh;
}

#chatbox {
    display: flex;
    /* Use flex here for layout */
    flex-direction: column;
    /* Example direction */
    padding: 10px;
    height: 100%;
}

#chatContainer {
    height: 300px;
    flex-grow: 1;
    /* Example of using flex-grow */
    overflow-y: auto;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #eee;
}

.chatbox-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s; /* Ensure visibility transitions instantly when showing */
    color: rgba(130,130,130,1.00);
    font-size: small;
}

.close-chat {
    position: absolute;
    top: -28px;
    left: 0px;
    border: none;
    background-color: #ff2c2c;
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    padding: 3px 10px 3px 10px;
    color: #ffffff;
}
.min-chat {
    position: absolute;
    top: -28px;
    left: 70px;
    border: none;
    background-color: #ffdb11;
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    padding: 3px 10px 3px 10px;
    color: #505050;
}

.btnChat {
    position: fixed;
    bottom: 10px;
    left: 20px;
    border: none;
    cursor: pointer;
    text-align: center;
    z-index: 999;
}

.openChat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 53px;
    height: 53px;
    background-color: #f39c12;
    border-radius: 50%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    color: white;
    text-decoration: none;
    font-size: 25px;
}

.openChat i {
    font-size: 30px;
}
.chatReq {
    display: block;
    margin-bottom: 25px;
    font-size: 11px;
    text-align: center;
    color: #c48901;
}


.hChat {
    display: block;
    font-weight: bold;        
}
.pChat {
    background-color: rgba(111,163,255,1.00);
    padding-top: 10px;
    padding-right: 13px;
    padding-left: 13px;
    padding-bottom: 10px;
    margin-left: 35px;
    font-size: 11px;
    line-height: 16px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    color: rgba(255,255,255,1.00);
}

.pChatR {
    background-color: rgba(226,232,246,1.00);
    padding-top: 10px;
    padding-right: 13px;
    padding-left: 13px;
    padding-bottom: 10px;
    margin-right: 35px;
    font-size: 11px;
    line-height: 16px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}
    
.lChat {
    margin-bottom: 20px;

}
.tChat {
    font-size: 9px;
    color: rgba(127, 153, 211, 1.00);
    margin-top: 5px;
    display: block;
}

.pChat, .pChatR {
    margin-bottom: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.pChat.no-pre-wrap,
.pChatR.no-pre-wrap {
    white-space: normal;
    /* Sobrescribe el pre-wrap */
}

.typing-indicator {
    margin-bottom: 4px;
}

/* Estilo para el indicador de "escribiendo" */
.typing-indicator {
    background-color: rgba(226, 232, 246, 1.00);
        padding-top: 10px;
        padding-right: 13px;
        padding-left: 13px;
        padding-bottom: 10px;
        margin-right: 35px;
        font-size: 11px;
        line-height: 16px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
}

/* Estilo de los puntos que simulan la escritura */
.dot-typing {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.dot-typing span {
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background-color: black;
    border-radius: 50%;
    animation: blink 1.4s infinite;
}

.dot-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.dot-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

.dot-typing span:nth-child(4) {
    animation-delay: 0.6s;
    /* Ajusta según el número de puntos */
}

/* Animación */
@keyframes blink {
    0% {
        opacity: 0.2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}

/******************[ DATATABLE]***********************/

.dt-div-img {
    width: 60px;  /* Establece un ancho fijo */
    height: 60px; /* Establece un alto fijo */
    object-fit: cover; /* Asegúrate de que la imagen cubra el área sin distorsión */
    border-radius: 5px; /* Opcional: añade bordes redondeados */
}

.dt-div-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/******************[ AUTO COMPLETE ]***********************/

.resultDiv {
    border-radius: 4px!important;
    background-color: white!important;
    z-index: 1000!important;
    max-height: 150px!important;
    border: 1px solid rgba(209,209,209,1.00)!important;
    overflow-x: scroll;
    padding: 10px;
    overflow-y: scroll;
}

.resultDiv .resultOpts {
    padding: 8px;
    color: rgba(125,125,125,1.00);
    font-weight: lighter;
}

.resultOpts:hover {
    background-color: azure; 
    pointer-events: auto;
}

.optsSim {
    color: rgba(31,72,112,1.00);
    font-weight: 800 !important;
}

/******************[ END AUTO COMPLETE ]***********************/


/******************[ CALENDAR ]***********************/

.appBadgesPos {
    transform: translate(-85%, -40%) !important;
}

/******************[ END CALENDAR ]***********************/

.profile-back .social-btn .social {
    background-color: rgba(33,33,33,0.49)!important;
}

.col-cal {
    flex: 0 0 auto !important;
    width: 14.285714% !important;
}

.selItem:hover {
		background-color: #f0f0f0;
}

.loading-form {
    background-color: #f0f0f0;
    color: #999;
    border: 1px solid #ccc !important;
    transition: background-color 0.5s ease, color 0.5s ease, border 0.5s ease;
    font-style: italic;
}


/*Text*/
.fs---0 {
    font-size: 8px !important;
}
.fs---1 {
    font-size: 11px !important;
}
.fs---2 {
    font-size: 12px !important;
}
.fs---3 {
    font-size: 18px !important;
}
.fs---4 {
    font-size: 24px !important;
}
.fs---5 {
    font-size: 40px !important;
}

.dropdown-menu .show {
    border-radius: 0px!important;
}

.btn-i { 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.btn {
    border-radius: 0.4rem !important;
}

.btn i {
    margin-right: 5px; /* Espacio entre el icono y el texto */
}
.btn-square {
    border-radius: 0 !important;
}

.btn-c-sm {
    font-size: 0.813rem !important;
    padding: 0.3rem 0.8rem;
	border-radius: 0.6125rem !important;
}

.select2-search--dropdown {
    padding: 0.5rem !important;
 
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.25rem!important;
    padding-left: 0rem!important;
}

.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    height: 2.5rem!important;
    padding-top: 0.575rem!important;
    padding-right: 1.25rem!important;
    padding-left: 1.25rem!important;
    padding-bottom: 0.575rem!important;
    border-radius: 0.7rem!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0.4rem!important;
    right: 0.9375rem;
}

/*******************[END NAV]**************************/
/* CSS Document */
.logo-abbr {
	display: none;
}
.brand-title {
    margin-left: 0;
    max-width: 12rem;
}
.preloadImg {
    width: 180px;
}
.signLogo {
    max-width: 250px;
    margin-bottom: 25px;
}
.imgAvt {
	max-width: 2.5rem;
	max-height: 2.5rem; 
}

.form-control {
    padding: 10px;
    margin: 0px;
    border-color: rgba(181,225,254,1.00);
    height: 2.5rem;
    border-radius: 0.4rem;
}

.labelMsg {
    font-size: 10px;
    color: #888888;
    margin: 0px;
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 3px;
    text-transform: uppercase;
}
.labelMsg .requiredInput {
    color: #FF0000;
    font-weight: bolder;
}

.image-upload>input {
    display: none;
}

.imputFileUp {
    display: none;
}

.hoverBright {
    cursor: pointer;
}

.hoverBright:hover { 
    opacity: 0.5;
}

.showInvMsg{
    color: #FF0004;
    font-size: 12px;
    margin-left: 10px;
    display: none;
} 

.modalHeader { 
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
	color: black !important;
}
.modalHeader h5 { color: black !important;}
.mh-Info {
    background: #e9e8f4;
}

#btnRepScrollTop {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
	background: rgba(8,25,181,0.49);
    color: white;
    cursor: pointer;
    box-shadow: 0 0 10px rgb(0,0,0,.25);
    border-radius: 50%;
	border: none;
	outline: none;
    z-index: 999;
	display: none;
}

#btnRepScrollTop:active {
	background: #0819b5; 
}

/* Estilo cuando están disponibles para selección */
.selInc {
    outline: 2px solid #17a2b8;
    /* Azul verdoso */
    border-radius: 3px;
    transition: outline 0.2s ease-in-out;
}

.selInc.enabled {
    outline: 2px solid #17a2b8;
    /* Azul verdoso */
    cursor: pointer;
}

/* Estilo cuando el checkbox está deshabilitado */
.selInc.disabled {
    outline: 2px solid #d6d6d6;
    /* Gris claro */
    cursor: not-allowed;
    opacity: 0.6;
}

.collapse-container {
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

/*

.prevPhoto {
    display: flex;
    align-items: center!important;
    justify-content: center!important;
    width: 100%;
    height: 210px;
    border: 1px solid #CCC;
    position: relative;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
	text-align: center;
	strong {
		padding: 0 10px
	}
}

.prevPhoto label{
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.prevPhoto img{
    width: 100%; 
	max-height: 200px;
}

.notBlock{
	display: none !important;
}

.upimg{
	/*display: none !important;* /
	width: 96%; 
	margin-left: 2%;
	margin-top: 10px;
	margin-bottom: 10px;
/*  	margin: 0 auto;* /
  	position: relative;
  	text-align: center;
	line-height: 25px; 
	color: #999;
	border: 2px dashed #ccc;
	display: inline-block;
	transition: transform 0.9s;
 	padding: 25px;
	height: 250px;
}

.draging {
    transform: scale(1.05);
    border: 3px dashed #008915;
	color: #008915;
}

.upimg .textImg {
	padding: 0px;
}

.upimg #viewImg .currImg {
	width: auto;
/*	height: auto;* /
/*	max-width: 300px;* /
    max-height: 220px;
	display: flex;
}

.upimg input{
	position: absolute;
	height: 100%;
	width: 100% !important;
	opacity: 0;
	top: 0;
	left: 0;
}

.delPhoto{
	color: #FFF;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	background: red;
	position: absolute;
	right: -10px;
	top: -10px;
	z-index: 2;
	cursor: pointer;
}

.rotPhoto{
	color: #FFF;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	background: orange;
	position: absolute;
	left: -10px;
	top: -10px;
	z-index: 10;
}

/******************[ DRAG AND DROP / IMAGE BOX ]***********************/

/*Estilos login*/
#divLoading{ 
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(254,254,255, .75);
	z-index: 999999 !important; 
	display: none;
}
#divLoading img{
	width: 100px;
	height: 100px;
}

[draggable="true"] {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

ul.moveable {
	list-style: none;
  	margin: 0px;
}
ul.moveable li {
    list-style-image: none !important;
    margin: 10px!important;
    border: 1px solid #ccc !important;
    padding: 6px !important;
    border-radius: 4px !important;
    color: #666 !important;
    cursor: move !important;
}

ul.moveable li:hover {
    border: 2px dashed blue !important;
    background-color: #DFDFDF !important;
}

.divDrag {
	border: 1px solid #ccc !important;
	color: #666 !important;
}
.divDrop {
	border: 2px dashed blue !important;
    background-color: #DFDFDF !important;
}

.currentDiv.over {
    border: 2px dashed #FF0004;
}
	 
.currentDiv {
    border-radius: 2px;
    border: 1px solid #989898;
}

.defImgDoc {
    background-image: url('https://iodas.reporta.pro/Assets/images/dragDropDoc.jpg');
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.defImg {
    background-image: url('https://iodas.reporta.pro/Assets/images/dragDrop.jpg');
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.imgSelBox {
	transform: translate(-50%, -50%) !important;
	left: 50% !important;
	top: 50% !important;
	position: absolute !important;
}

.prevPhoto {
    display: flex;
    align-items: center!important;
    justify-content: center!important;
    width: 100%;
    height: 210px;
    border: 1px solid #CCC;
    position: relative;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
	text-align: center;
	strong {
		padding: 0 10px
	}
}

.prevPhoto label{
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.prevPhoto img{
    width: 100%; 
	max-height: 200px;
}

.notBlock{
	display: none !important;
}

.upimg{
	/*display: none !important;*/
	width: 96%; 
	margin-left: 2%;
	margin-top: 10px;
	margin-bottom: 10px;
/*  	margin: 0 auto;*/
  	position: relative;
  	text-align: center;
	line-height: 25px; 
	color: #999;
	border: 2px dashed #ccc;
	display: inline-block;
	transition: transform 0.9s;
 	padding: 25px;
	height: 250px;
}

.draging {
    transform: scale(1.05);
    border: 3px dashed #008915;
	color: #008915;
}

.upimg .textImg {
	padding: 0px;
}

.upimg #viewImg .currImg {
	width: auto;
/*	height: auto;*/
/*	max-width: 300px;*/
    max-height: 220px;
	display: flex;
}

.upimg input{
	position: absolute;
	height: 100%;
	width: 100% !important;
	opacity: 0;
	top: 0;
	left: 0;
}

.delPhoto{
	color: #FFF;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	background: red;
	position: absolute;
	right: -10px;
	top: -10px;
	z-index: 2;
	cursor: pointer;
}

.rotPhoto{
	color: #FFF;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	background: orange;
	position: absolute;
	left: -10px;
	top: -10px;
	z-index: 10;
}

/******************[DATE PICKER]************************/
.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background-color: #2839CF;
}
.dtp div.dtp-date, .dtp div.dtp-time {
    background-color: #4154FF;
}
.dtp table.dtp-picker-days tr > td > a.selected {
    background-color: #2839CF;
}
/******************[NAVBAR BREADCRUMB]************************/
.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.navbar-dark .navbar-toggler {
    border: none !important;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .65);
}

.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .nav-link.active {
    color: #ffcf00;
}

@media (min-width: 992px) {
	.navbar-expand-lg .navbar-nav .nav-link {
	    padding-right: 1rem;
	    padding-left: 1rem;
	}
}

.breadcrumb {
    font-size: 1rem; 
}

.breadcrumb-item.active {
    color: #0819b5;
}

/******************[UpFIle View]************************/
.panel_UpFile {
	margin: 0px auto 0px; 
	max-width: 100%; 
	text-align: center;
	}
.button_outer_UpFile {
	background: #0819b5; 
	border-radius:30px; 
	text-align: center; 
	height: 50px; 
	width: 200px; 
	display: inline-block; 
	transition: .2s; 
	position: relative; 
	overflow: hidden;
	}
	
.btn_upload_UpFile {
	padding: 17px 30px 12px; 
	color: #fff; 
	text-align: center; 
	position: relative; 
	display: inline-block; 
	overflow: hidden; 
	z-index: 3; 
	white-space: nowrap;
	}
	
.btn_upload_UpFile input {
	position: absolute; 
	width: 100%; 
	left: 0; 
	top: 0; 
	width: 100%; 
	height: 105%; 
	cursor: pointer; 
	opacity: 0;}
.file_uploading_UpFile {
	width: 100%; 
	height: 10px; 
	margin-top: 20px; 
	background: #ccc;
	}
.file_uploading_UpFile .btn_upload_UpFile {
	display: none;
	}
.processing_bar {
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 0; 
	height: 100%; 
	border-radius: 30px; 
	background:#06C900; 
	transition: 5s;
	}
.file_uploading_UpFile .processing_bar {
	width: 100%;
	}
.error_msg_UpFile {
	text-align: center;  
	}
.form-control.is-invalid {
    border-color: #f72b50 !important;
/*    border-right: 0rem !important;*/
	
}

/**********************[FORMS]****************************/
::-webkit-input-placeholder { /* Edge */
  color: #B6BFCF !important;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: #B6BFCF !important;
}

::placeholder {
  color: #B6BFCF !important;
}

.form-select {
    padding: 0.575rem 1.25rem;
    border-radius: .4rem;
    border-color: rgba(181,225,254,1.00);
    width: 100%;
    align-content: flex-start;
}

.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    background: #fff;
    border-color: rgba(181,225,254,1.00);
    height: 3rem;
    padding-top: 0.30rem;
    padding-right: 1.25rem;
    padding-left: 1rem;
    padding-bottom: 0.3125rem;
    color: #6e6e6e;
    border-radius: .4rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0.75rem;
    right: 0.9375rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.3rem;
	padding-left: 0rem;
}

select+.select2-container,
.bootstrap-select+.select2-container {
    width: auto;
}
 

/*
.select2 { 
    margin-top: 3px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    margin-bottom: 3px !important; 
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
*/


/******************[End UpFIle View]************************/

.btn-primary.active {
    background-color: #0E2871;
    border-color:#0E2871;
}




/*******************[COLOR STATUS]***********************/

/*
0=>'Nueva Solicitud', //0
		1=>'Nueva Solicitud', //1
		2=>'Enviado a Cambios', //2
		3=>'Aprobado', //3
		4=>'Cancelado', //4
		5=>'Eliminado', //5
		6=>'Aprobación Revertida', //6
		7=>'Editada', //7 
		8=>'Emitir Pago', //8
		9=>'Cheque Impreso', //9
		10=>'Finalizado', //10
		11=>'Enviado a Evaluación', //10
*/
.btn-active-sel {
    filter: brightness(0.85) !important;
}

.btn--sm, .btn-group--sm > .btn {
    font-size: 0.8rem  !important;
    padding-top: 0.3rem !important;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
    padding-bottom: 0.3rem !important;
}

.bg--opcaity-50 {
    opacity: 0.5;	
}

.bg--opcaity-20 {
    opacity: 0.2;	
}

/*  style cancel buttons */
.swal-button--cancel{
    color: #ffffff;
    background-color: #A4ABB6;	
}
.swal-button--confirm{
	background-color: #4FC13A;	
	color: #ffffff; 
}
.swal-button--danger{
	background-color: #FF3838;
	color: #ffffff; 
}
/*/////////////*/
.text--white {
    color: rgba(255,255,255,1.00);
}
.btn--white:hover {
    color: #ffffff;
    background-color: rgba(255,255,255,1.00);
    border-color: #A94587;
}


/*DUPLICATE #F1ECCE */
.text--duplicate {
    color: rgba(187,178,130,1.00);
}
.bg--duplicate {
    background-color: rgba(210,145,188,1.00);
}
.mh--duplicate {
	background: #D291BC; 
}
.btn--duplicate  {
    color: #ffffff;
    background-color: #D291BC;
    border-color: rgba(210,145,188,1.00);
}
.btn--duplicate:hover {
    color: #ffffff;
    background-color: rgba(210,145,188,1.00);
    border-color: #A94587;
}
.btn-check:focus + .btn--duplicate, .btn--duplicate:focus {
    color: #ffffff;
    background-color: #D291BC;
    border-color: #D291BC;
    box-shadow: 0 0 0 0.25rem rgba(210,145,188, 0.5);
}
.btn-check:checked + .btn--duplicate, .btn-check:active + .btn--duplicate, .btn--duplicate:active, .btn--duplicate.active, .show > .btn--duplicate.dropdown-toggle {
    color: #ffffff;
    background-color: #D291BC;
    border-color: #D291BC;
}
.btn-check:checked + .btn--duplicate:focus, .btn-check:active + .btn--duplicate:focus, .btn--duplicate:active:focus, .btn--duplicate.active:focus, .show > .btn--duplicate.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(210,145,188,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(210,145,188,0.50);
}
.btn--duplicate:disabled, .btn--duplicate.disabled {
    color: #ffffff;
    background-color: #D291BC;
    border-color: #D291BC;
}
.btn-outline--duplicate {
    color: #D291BC;
    border-color: #D291BC;
}




/*NEW #2DCCFF */
.text--new {
	color: #2DCCFF;
}
.bg--new {
	background-color: #2DCCFF;
}
.mh--new {
	background: #2DCCFF; 
}
.btn--new  {
	color: #ffffff;
  	background-color: #2DCCFF;
  	border-color: #2DCCFF;
}
.btn--new:hover {
    color: #ffffff;
    background-color: #006687;
    border-color: #2DCCFF;
}
.btn-check:focus + .btn--new, .btn--new:focus {
    color: #ffffff;
    background-color: #2DCCFF;
    border-color: #2DCCFF;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn--new, .btn-check:active + .btn--new, .btn--new:active, .btn--new.active, .show > .btn--new.dropdown-toggle {
    color: #ffffff;
    background-color: #2DCCFF;
    border-color: #2DCCFF;
}
.btn-check:checked + .btn--new:focus, .btn-check:active + .btn--new:focus, .btn--new:active:focus, .btn--new.active:focus, .show > .btn--new.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(45,204,255,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(45,204,255,0.50);
}
.btn--new:disabled, .btn--new.disabled {
    color: #ffffff;
    background-color: #2DCCFF;
    border-color: #2DCCFF;
}
.btn-outline--new {
    color: #2DCCFF;
    border-color: #2DCCFF;
}

/*APPROBE #4FC13A */
.text--approve {
	color: #4FC13A;
}
.bg--approve {
	background-color: #4FC13A;
}
.mh--approve {
    background: #4FC13A;
    color: #ffffff !important;
}
.mh--approve h5 { 
	color: #ffffff !important;
}
.btn--approve  {
	color: #ffffff !important;
  	background-color: #4FC13A;
  	border-color: #4FC13A;
}
.btn--approve:hover {
    color: #ffffff !important;
    background-color: #2F8500;
    border-color: #4FC13A;
}
.btn-check:focus + .btn--approve, .btn--approve:focus {
    color: #ffffff !important;
    background-color: #4FC13A;
    border-color: #4FC13A;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn--approve, .btn-check:active + .btn--approve, .btn--approve:active, .btn--approve.active, .show > .btn--approve.dropdown-toggle {
    color: #ffffff !important;
    background-color: #4FC13A;
    border-color: #4FC13A;
}
.btn-check:checked + .btn--approve:focus, .btn-check:active + .btn--approve:focus, .btn--approve:active:focus, .btn--approve.active:focus, .show > .btn--approve.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(86,240,0,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(86,240,0,0.50);
}
.btn--approve:disabled, .btn--approve.disabled {
    color: #ffffff !important;
    background-color: #4FC13A;
    border-color: #4FC13A;
}
.btn-outline--approve {
    color: #change;
    border-color: #change;
}


/*CHANGE #5f9ea0 */
.text--change {
    color: #5f9ea0;
}
.bg--change {
    background-color: #5f9ea0;
    color: #ffffff;
}
.mh--change {
    background: #5f9ea0;
    color: #ffffff !important;
}
.mh--change h5 { 
	color: #ffffff !important;
}
.btn--change  {
	color: #ffffff !important;
  	background-color: #5f9ea0;
  	border-color: #5f9ea0;
}
.btn--change:hover {
    color: #ffffff !important;
    background-color: #4d8587;
    border-color: #5f9ea0;
}
.btn-check:focus + .btn--change, .btn--change:focus {
    color: #FFFFFF !important;
    background-color: #5f9ea0;
    border-color: #5f9ea0;
    box-shadow: 0 0 0 0.25rem rgba(95, 158, 160, 0.5);
}
.btn-check:checked + .btn--change, .btn-check:active + .btn--change, .btn--change:active, .btn--change.active, .show > .btn--change.dropdown-toggle {
    color: #FFFFFF !important;
    background-color: #5f9ea0;
    border-color: #5f9ea0;
}
.btn-check:checked + .btn--change:focus, .btn-check:active + .btn--change:focus, .btn--change:active:focus, .btn--change.active:focus, .show > .btn--change.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(95, 158, 160,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(95, 158, 160,0.50);
}
.btn--change:disabled, .btn--change.disabled {
    color: #FFFFFF !important;
    background-color: #5f9ea0;
    border-color: #5f9ea0;
}
.btn-outline--change {
    color: #5f9ea0;
    border-color: #5f9ea0;
}

/*ATENTION #FFB302 */
.text--atention {
	color: #FFB302;
}
.bg--atention {
	background-color: #FFB302;
}
.mh--atention {
	background: #FFB302; 
}
.btn--atention  {
	color: #ffffff;
  	background-color: #FFB302;
  	border-color: #FFB302;
}
.btn--atention:hover {
    color: #ffffff;
    background-color: #986A00;
    border-color: #FFB302;
}
.btn-check:focus + .btn--atention, .btn--atention:focus {
    color: #ffffff;
    background-color: #FFB302;
    border-color: #FFB302;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn--atention, .btn-check:active + .btn--atention, .btn--atention:active, .btn--atention.active, .show > .btn--atention.dropdown-toggle {
    color: #ffffff;
    background-color: #FFB302;
    border-color: #FFB302;
}
.btn-check:checked + .btn--atention:focus, .btn-check:active + .btn--atention:focus, .btn--atention:active:focus, .btn--atention.active:focus, .show > .btn--atention.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(255,179,2,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(255,179,2,0.50);
}
.btn--atention:disabled, .btn--atention.disabled {
    color: #ffffff;
    background-color: #FFB302;
    border-color: #FFB302;
}
.btn-outline--atention {
    color: #FFB302;
    border-color: #FFB302;
}

/*EDIT #D000FF */
.text--edited {
	color: #D000FF;
}
.bg--edited {
	background-color: #D000FF;
}
.mh--edited {
	background: #D000FF; 
}
.btn--edited  {
	color: #ffffff;
  	background-color: #D000FF;
  	border-color: #D000FF;
}
.btn--edited:hover {
    color: #ffffff;
    background-color: #80059c;
    border-color: #D000FF;
}
.btn-check:focus + .btn--edited, .btn--edited:focus {
    color: #ffffff;
    background-color: #D000FF;
    border-color: #D000FF;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn--edited, .btn-check:active + .btn--edited, .btn--edited:active, .btn--edited.active, .show > .btn--edited.dropdown-toggle {
    color: #ffffff;
    background-color: #D000FF;
    border-color: #D000FF;
}
.btn-check:checked + .btn--edited:focus, .btn-check:active + .btn--edited:focus, .btn--edited:active:focus, .btn--edited.active:focus, .show > .btn--edited.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(255,179,2,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(255,179,2,0.50);
}
.btn--edited:disabled, .btn--edited.disabled {
    color: #ffffff;
    background-color: #D000FF;
    border-color: #D000FF;
}
.btn-outline--edited {
    color: #D000FF;
    border-color: #D000FF;
}

/*REVERSED #008080 */
.text--reversed {
	color: #008080;
}
.bg--reversed {
	background-color: #008080;
}
.mh--reversed {
	background: #008080; 
}
.btn--reversed  {
	color: #ffffff;
  	background-color: #008080;
  	border-color: #008080;
}
.btn--reversed:hover {
    color: #ffffff;
    background-color: #024d4d;
    border-color: #024d4d;
}
.btn-check:focus + .btn--reversed, .btn--reversed:focus {
    color: #ffffff;
    background-color: #008080;
    border-color: #008080;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn--reversed, .btn-check:active + .btn--reversed, .btn--reversed:active, .btn--reversed.active, .show > .btn--reversed.dropdown-toggle {
    color: #ffffff;
    background-color: #008080;
    border-color: #008080;
}
.btn-check:checked + .btn--reversed:focus, .btn-check:active + .btn--reversed:focus, .btn--reversed:active:focus, .btn--reversed.active:focus, .show > .btn--reversed.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(255,179,2,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(255,179,2,0.50);
}
.btn--reversed:disabled, .btn--reversed.disabled {
    color: #ffffff;
    background-color: #008080;
    border-color: #008080;
}
.btn-outline--reversed {
    color: #008080;
    border-color: #008080;
}

/*SEE INFO #FFB302 */
/*
.text--info {
	color: #FF69B4;
}
.bg--info {
	background-color: #FF69B4;
}
.mh--info {
	background: #FF69B4; 
}
.btn--info  {
	color: #ffffff;
  	background-color: #FF69B4;
  	border-color: #FF69B4;
}
.btn--info:hover {
    color: #ffffff;
    background-color: #D20069;
    border-color: #FF69B4;
}
.btn-check:focus + .btn--info, .btn--info:focus {
    color: #ffffff;
    background-color: #FF69B4;
    border-color: #FF69B4;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn--info, .btn-check:active + .btn--info, .btn--info:active, .btn--info.active, .show > .btn--info.dropdown-toggle {
    color: #ffffff;
    background-color: #FF69B4;
    border-color: #FF69B4;
}
.btn-check:checked + .btn--info:focus, .btn-check:active + .btn--info:focus, .btn--info:active:focus, .btn--info.active:focus, .show > .btn--info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(255,179,2,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(255,179,2,0.50);
}
.btn--info:disabled, .btn--info.disabled {
    color: #ffffff;
    background-color: #FF69B4;
    border-color: #FF69B4;
}
.btn-outline--info {
    color: #FF69B4;
    border-color: #FF69B4;
}
*/

/*SEE INFO #023e7d */
.text--info {
	color: #023e7d;
}
.bg--info {
	background-color: #023e7d;
}
.mh--info {
	background: #023e7d; 
}
.btn--info  {
	color: #ffffff;
  	background-color: #023e7d;
  	border-color: #023e7d;
}
.btn--info:hover {
    color: #ffffff;
    background-color: #001233;
    border-color: #023e7d;
}
.btn-check:focus + .btn--info, .btn--info:focus {
    color: #ffffff;
    background-color: #023e7d;
    border-color: #023e7d;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn--info, .btn-check:active + .btn--info, .btn--info:active, .btn--info.active, .show > .btn--info.dropdown-toggle {
    color: #ffffff;
    background-color: #023e7d;
    border-color: #023e7d;
}
.btn-check:checked + .btn--info:focus, .btn-check:active + .btn--info:focus, .btn--info:active:focus, .btn--info.active:focus, .show > .btn--info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(255,179,2,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(255,179,2,0.50);
}
.btn--info:disabled, .btn--info.disabled {
    color: #ffffff;
    background-color: #023e7d;
    border-color: #023e7d;
}
.btn-outline--info {
    color: #023e7d;
    border-color: #023e7d;
}

/*CANCEL #A4ABB6 */
.text--cancel {
	color: #A4ABB6;
}
.bg--cancel {
	background-color: #A4ABB6;
}
.mh--cancel {
	background: #A4ABB6; 
}
.btn--cancel  {
	color: #ffffff;
  	background-color: #A4ABB6;
  	border-color: #A4ABB6;
}
.btn--cancel:hover {
    color: #ffffff;
    background-color: #697383;
    border-color: #A4ABB6;
}
.btn-check:focus + .btn--cancel, .btn--cancel:focus {
    color: #ffffff;
    background-color: #A4ABB6;
    border-color: #A4ABB6;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn--cancel, .btn-check:active + .btn--cancel, .btn--cancel:active, .btn--cancel.active, .show > .btn--cancel.dropdown-toggle {
    color: #ffffff;
    background-color: #A4ABB6;
    border-color: #A4ABB6;
}
.btn-check:checked + .btn--cancel:focus, .btn-check:active + .btn--cancel:focus, .btn--cancel:active:focus, .btn--cancel.active:focus, .show > .btn--cancel.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(164,171,182,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(164,171,182,0.50);
}
.btn--cancel:disabled, .btn--cancel.disabled {
    color: #ffffff;
    background-color: #A4ABB6;
    border-color: #A4ABB6;
}
.btn-outline--cancel {
    color: #A4ABB6;
    border-color: #A4ABB6;
}
.btn-outline--cancel:hover {
    color: #878a8f;
    border-color: #878a8f;
    background-color: #f2f2f2;
}



/*DELETE #FF3838 */
table.dataTable tbody tr .bg-noautho{
    background: #FFD2D2 !important;
	background-color: #FFD2D2 !important;
	opacity: 1; 
}
 
.text--delete {
	color: #FF3838;
}
.bg--delete {
	background-color: #FF3838;
}
.mh--delete {
	background: #FF3838; 
}
.btn--delete  {
	color: #ffffff;
  	background-color: #FF3838;
  	border-color: #FF3838;
}
.btn--delete:hover {
    color: #ffffff;
    background-color: #AA0000;
    border-color: #FF3838;
}
.btn-check:focus + .btn--delete, .btn--delete:focus {
    color: #ffffff;
    background-color: #FF3838;
    border-color: #FF3838;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn--delete, .btn-check:active + .btn--delete, .btn--delete:active, .btn--delete.active, .show > .btn--delete.dropdown-toggle {
    color: #ffffff;
    background-color: #FF3838;
    border-color: #FF3838;
}
.btn-check:checked + .btn--delete:focus, .btn-check:active + .btn--delete:focus, .btn--delete:active:focus, .btn--delete.active:focus, .show > .btn--delete.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(255,56,56,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(255,56,56,0.50);
}
.btn--delete:disabled, .btn--delete.disabled {
    color: #ffffff;
    background-color: #FF3838;
    border-color: #FF3838;
}
.btn-outline--delete {
    color: #FF3838;
    border-color: #FF3838;
}

/*HOLD #BBC3A4 */
.text--hold {
    color: #BBC3A4;
}
.bg--hold {
	background-color: #BBC3A4;
}
.mh--hold {
	background: #BBC3A4; 
}
.btn--hold  {
	color: #ffffff;
  	background-color: #BBC3A4;
  	border-color: #BBC3A4;
}
.btn--hold:hover {
    color: #ffffff;
    background-color: #7c8368;
    border-color: #7c8368;
}
.btn-check:focus + .btn--hold, .btn--hold:focus {
    color: #ffffff;
    background-color: #BBC3A4;
    border-color: #BBC3A4;
    box-shadow: 0 0 0 0.25rem rgba(187, 195, 164, 0.5);
}
.btn-check:checked + .btn--hold, .btn-check:active + .btn--hold, .btn--hold:active, .btn--hold.active, .show > .btn--hold.dropdown-toggle {
    color: #ffffff;
    background-color: #BBC3A4;
    border-color: #BBC3A4;
}
.btn-check:checked + .btn--hold:focus, .btn-check:active + .btn--hold:focus, .btn--hold:active:focus, .btn--hold.active:focus, .show > .btn--hold.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(79,79,79,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(79,79,79,0.50);
}
.btn--hold:disabled, .btn--hold.disabled {
    color: #ffffff;
    background-color: #BBC3A4;
    border-color: #BBC3A4;
}
.btn-outline--hold {
    color: #BBC3A4;
    border-color: #BBC3A4;
}

/*DISABLE #4F4F4F */
.text--disable {
    color: #4F4F4F;
}
.bg--disable {
	background-color: #4F4F4F;
}
.mh--disable {
	background: #4F4F4F; 
}
.btn--disable  {
	color: #ffffff;
  	background-color: #4F4F4F;
  	border-color: #4F4F4F;
}
.btn--disable:hover {
    color: #ffffff;
    background-color: #292929;
    border-color: #4F4F4F;
}
.btn-check:focus + .btn--disable, .btn--disable:focus {
    color: #ffffff;
    background-color: #4F4F4F;
    border-color: #4F4F4F;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn--disable, .btn-check:active + .btn--disable, .btn--disable:active, .btn--disable.active, .show > .btn--disable.dropdown-toggle {
    color: #ffffff;
    background-color: #4F4F4F;
    border-color: #4F4F4F;
}
.btn-check:checked + .btn--disable:focus, .btn-check:active + .btn--disable:focus, .btn--disable:active:focus, .btn--disable.active:focus, .show > .btn--disable.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(79,79,79,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(79,79,79,0.50);
}
.btn--disable:disabled, .btn--disable.disabled {
    color: #ffffff;
    background-color: #4F4F4F;
    border-color: #4F4F4F;
}
.btn-outline--disable {
    color: #4F4F4F;
    border-color: #4F4F4F;
}










/*******************[END COLOR STATUS]***********************/


.bg--blue {
	background-color: #0819b7 !important;
}
.bg--blue-l {
    background-color: #838cdb !important;
}
.bg--blue-xl {
    background-color: #c1c5ed !important;
}

.text-status {
    font-weight: 600;
}
.text-newEntrance {
    color: #0819b5;
}
.text-noAutho {
    color: #CAAD68;
}
.text-hold {
    color: #8D01FF;
}
.text-edit {
    color: #00FFDD;
}
.text-waitAutho {
    color: #0819b5;
}
.text-change {
    color: #FF8900;
}
.text-autho {
    color: #06C900;
}
.text-cancel {
    color: #93370B;
}
.text-delete {
    color: #FF0000;
}
.text-error {
    color: #FF0000;
}

.mh-Info {
	background: #FF8900; 
}
.mh-Add {
    background: #0819b5; 
}
.mh-noAutho {
    background: #CAAD68; 
}
.mh-Edt {
    background: #00FFDD; 
}.mh-Edt h5 { color: #003831 !important;}
.mh-SendApp { 
    background: #0819b5; 
}
.mh-SendApp h5 { color: white !important;}
.mh-Chg {
    background: #FF7000;
}
.mh-App {
    background: #06C900; 
}
.mh-App h5 { color: white !important;}

.mh-Hold {
    background: #8D01FF; 
}
.mh-Hold h5 { color: white !important;}

.mh-Cancel {
    background: #93370B; 
}
.mh-Cancel h5 { color: white !important;}

.mh-key {
    background: #525252; 
}
.mh-key h5 { color: white !important;}
.mh-Del { 
    background: #fc2849; 
}
.mh-Del h5 { color: white !important;}

.mh-orange {
    background: #FF8900; 
}
.mh-orange h5 { color: white !important;}

/*Color*/
.text-yellow {
    color: #FFCE00;
}

.text-blue {
    color: #005BFF;
}

.text-orange {
    color: #FF8900;
}

.text-brown {
    color: #93370B;
}

.text-teal {
    color: #00FFDD;
}

.text-purple {
    color: #8D01FF;
}

.text-fusha {
    color: #FF009C;
}

.text-red {
    color: #FF0000;
}

.text-green {
    color: #06C900;
}

/*Bacgrounds*/
.bg-yellow {
    background-color: #FFCE00;	
}

.bg-blue {
    background-color: #005BFF;
}

.bg-orange {
    background-color: #FF8900;
}

.bg-brown {
    background-color: #93370B;
}

.bg-teal {
    background-color: #00FFDD;
}

.bg-purple {
    background-color: #8D01FF;
}

.bg-fusha {
    background-color: #FF009C;
}

.bg-red {
    background-color: #FF0000;
}

.bg-green {
    background-color: #06C900;
}
.bg-light {
	background-color: #F8F8F8 !important;
}

.btn-clean {
    align-items: flex-start;
    box-sizing: border-box;
    background-color: buttonface;
    margin: 0em;
    padding: 0px 1px;
    border: none;
}

/* SEE INFO BTN */
.btn-seeInfo  {
	color: #ffffff;
  	background-color: #FF8900;
  	border-color: #FF8900;
}
.btn-seeInfo:hover {
    color: #ffffff;
    background-color: #995200;
    border-color: #FF8900;
}
.btn-check:focus + .btn-seeInfo, .btn-seeInfo:focus {
    color: #ffffff;
    background-color: #FF8900;
    border-color: #FF8900;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn-seeInfo, .btn-check:active + .btn-seeInfo, .btn-seeInfo:active, .btn-seeInfo.active, .show > .btn-seeInfo.dropdown-toggle {
    color: #ffffff;
    background-color: #FF8900;
    border-color: #FF8900;
}
.btn-check:checked + .btn-seeInfo:focus, .btn-check:active + .btn-seeInfo:focus, .btn-seeInfo:active:focus, .btn-seeInfo.active:focus, .show > .btn-seeInfo.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(255,137,0,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(255,137,0,0.50);
}
.btn-seeInfo:disabled, .btn-seeInfo.disabled {
    color: #ffffff;
    background-color: #FF8900;
    border-color: #FF8900;
}

/* ADD BTN */
.btn-add  {
	color: #ffffff;
  	background-color: #0819b5;
  	border-color: #0819b5;
}
.btn-add:hover {
    color: #ffffff;
    background-color: #05117F;
    border-color: #05117F;
}
.btn-check:focus + .btn-add, .btn-add:focus {
    color: #ffffff;
    background-color: #0819b5;
    border-color: #05117F;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn-add, .btn-check:active + .btn-add, .btn-add:active, .btn-add.active, .show > .btn-add.dropdown-toggle {
    color: #ffffff;
    background-color: #05117F;
    border-color: #05117F;
}
.btn-check:checked + .btn-add:focus, .btn-check:active + .btn-add:focus, .btn-add:active:focus, .btn-add.active:focus, .show > .btn-add.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(8,25,181,0.05);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(8,25,181,0.05);
}
.btn-add:disabled, .btn-add.disabled {
    color: #ffffff;
    background-color: #0819b5;
    border-color: #0819b5;
}

/* NO AUTHO BTN */
.btn-noAutho  {
	color: #ffffff;
  	background-color: #CAAD68;
  	border-color: #CAAD68;
}
.btn-noAutho:hover {
    color: #ffffff;
    background-color: #79622A;
    border-color: #79622A;
}
.btn-check:focus + .btn-noAutho, .btn-noAutho:focus {
    color: #ffffff;
    background-color: #CAAD68;
    border-color: #79622A;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn-noAutho, .btn-check:active + .btn-noAutho, .btn-noAutho:active, .btn-noAutho.active, .show > .btn-noAutho.dropdown-toggle {
    color: #ffffff;
    background-color: #79622A;
    border-color: #79622A;
}
.btn-check:checked + .btn-noAutho:focus, .btn-check:active + .btn-noAutho:focus, .btn-noAutho:active:focus, .btn-noAutho.active:focus, .show > .btn-noAutho.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(202,173,104,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(202,173,104,0.50);
}
.btn-noAutho:disabled, .btn-noAutho.disabled {
    color: #ffffff;
    background-color: #CAAD68;
    border-color: #CAAD68;
}

/* EDIT BTN */
.btn-edit  {
    color: #003831;
    background-color: #00FFDD;
    border-color: #00FFDD;
}
.btn-edit:hover {
    color: #003831;
    background-color: #009A85;
    border-color: #009A85;
}
.btn-check:focus + .btn-edit, .btn-edit:focus {
    color: #003831;
    background-color: #00FFDD;
    border-color: #009A85;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn-edit, .btn-check:active + .btn-edit, .btn-edit:active, .btn-edit.active, .show > .btn-edit.dropdown-toggle {
    color: #003831;
    background-color: #009A85;
    border-color: #009A85;
}
.btn-check:checked + .btn-edit:focus, .btn-check:active + .btn-edit:focus, .btn-edit:active:focus, .btn-edit.active:focus, .show > .btn-edit.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(202,173,104,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(202,173,104,0.50);
}
.btn-edit:disabled, .btn-edit.disabled {
    color: #003831;
    background-color: #00FFDD;
    border-color: #00FFDD;
}

/* HOLD BTN */
.btn-hold  {
	color: #ffffff;
  	background-color: #8D01FF;
  	border-color: #8D01FF;
}
.btn-hold:hover {
    color: #ffffff;
    background-color: #5900A1;
    border-color: #5900A1;
}
.btn-check:focus + .btn-hold, .btn-hold:focus {
    color: #ffffff;
    background-color: #8D01FF;
    border-color: #5900A1;
    box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-check:checked + .btn-hold, .btn-check:active + .btn-hold, .btn-hold:active, .btn-hold.active, .show > .btn-hold.dropdown-toggle {
    color: #ffffff;
    background-color: #5900A1;
    border-color: #5900A1;
}
.btn-check:checked + .btn-hold:focus, .btn-check:active + .btn-hold:focus, .btn-hold:active:focus, .btn-hold.active:focus, .show > .btn-hold.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.25rem rgba(141,1,255, 0.5);
}
.btn-hold:disabled, .btn-hold.disabled {
    color: #ffffff;
    background-color: #8D01FF;
    border-color: #8D01FF;
}

/* APPROBE BTN */
.btn-approbe  {
    color: #ffffff;
    background-color: #06C900;
    border-color: #06C900;
}
.btn-approbe:hover {
    color: #ffffff;
    background-color: #037F00;
    border-color: #037F00;
}
.btn-check:focus + .btn-approbe, .btn-approbe:focus {
    color: #ffffff;
    background-color: #06C900;
    border-color: #037F00;
    box-shadow: 0 0 0 0.25rem rgba(6,201,0,1, 0.5);
}
.btn-check:checked + .btn-approbe, .btn-check:active + .btn-approbe, .btn-approbe:active, .btn-approbe.active, .show > .btn-approbe.dropdown-toggle {
    color: #ffffff;
    background-color: #037F00;
    border-color: #037F00;
}
.btn-check:checked + .btn-approbe:focus, .btn-check:active + .btn-approbe:focus, .btn-approbe:active:focus, .btn-approbe.active:focus, .show > .btn-approbe.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.25rem rgba(6,201,0,1, 0.5);
}
.btn-approbe:disabled, .btn-approbe.disabled {
    color: #ffffff;
    background-color: #06C900;
    border-color: #06C900;
}

/* CANCEL BTN */
.btn-cancel  {
    color: #ffffff;
    background-color: #93370B;
    border-color: #93370B;
}
.btn-cancel:hover {
    color: #ffffff;
    background-color: #5F2307;
    border-color: #5F2307;
}
.btn-check:focus + .btn-cancel, .btn-cancel:focus {
    color: #ffffff;
    background-color: #93370B;
    border-color: #5F2307;
    box-shadow: 0 0 0 0.25rem rgba(147,55,11, 0.5);
}
.btn-check:checked + .btn-cancel, .btn-check:active + .btn-cancel, .btn-cancel:active, .btn-cancel.active, .show > .btn-cancel.dropdown-toggle {
    color: #ffffff;
    background-color: #5F2307;
    border-color: #5F2307;
}
.btn-check:checked + .btn-cancel:focus, .btn-check:active + .btn-cancel:focus, .btn-cancel:active:focus, .btn-cancel.active:focus, .show > .btn-cancel.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.25rem rgba(147,55,11, 0.5);
}
.btn-cancel:disabled, .btn-cancel.disabled {
    color: #ffffff;
    background-color: #93370B;
    border-color: #93370B;
}

/* DELETE BTN */
.btn-delete  {
    color: #ffffff;
    background-color: #FF0000;
    border-color: #FF0000;
}
.btn-delete:hover {
    color: #ffffff;
    background-color: #9D0000;
    border-color: #9D0000;
}
.btn-check:focus + .btn-delete, .btn-delete:focus {
    color: #ffffff;
    background-color: #FF0000;
    border-color: #9D0000;
    box-shadow: 0 0 0 0.25rem rgba(147,55,11, 0.5);
}
.btn-check:checked + .btn-delete, .btn-check:active + .btn-delete, .btn-delete:active, .btn-delete.active, .show > .btn-delete.dropdown-toggle {
    color: #ffffff;
    background-color: #9D0000;
    border-color: #9D0000;
}
.btn-check:checked + .btn-delete:focus, .btn-check:active + .btn-delete:focus, .btn-delete:active:focus, .btn-delete.active:focus, .show > .btn-delete.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(157,0,0,0.50);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(157,0,0,0.50);
}
.btn-delete:disabled, .btn-delete.disabled {
    color: #ffffff;
    background-color: #FF0000;
    border-color: #FF0000;
}
 
label {
    color: #003B8D;
    margin-left: 10px;
    margin-bottom: 0px;
}
.select2 {
	border-color: rgba(159,214,233,1.00); 
}

.imgDiv {
    position: relative;
    height: 13.688rem;
    width: 13.688rem;
    border-radius: 1.25rem;
    /*    border: 0.5rem solid #fff;*/
    margin-right: 2rem;
    background-image: url(../images/user.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: rgba(0,0,0,1.00);
} 

.imgUserContainer {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8%;
}

.imgUserContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ajusta la imagen sin distorsionarla */
    position: absolute;
}

@media only screen and (max-width: 35.9375rem) {
	/*******PAGINATION*******/
	.dataTables_wrapper .dataTables_paginate span .paginate_button {
	    height: 2.125rem;
	    width: 2.125rem;
	    line-height: 2.125rem; 
	}
 
	.dataTables_wrapper .dataTables_paginate .paginate_button.previous, .dataTables_wrapper .dataTables_paginate .paginate_button.next, .dataTables_wrapper .dataTables_paginate .paginate_button.first, .dataTables_wrapper .dataTables_paginate .paginate_button.last {
	    height: 2.125rem;
	    width: 2.125rem;
	    line-height: 2.125rem;
		position: relative !important;
/*	    padding: 0 0.75rem;*/
	}
	.dataTables_wrapper .dataTables_paginate .paginate_button.first.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.last.disabled {
	    color: var(--primary) !important;
	}
	.dataTables_wrapper .dataTables_paginate .paginate_button.first, .dataTables_wrapper .dataTables_paginate .paginate_button.last {
	    font-size: 1.125rem;
	    height: 2.125rem;
	    width: 2.125rem;
	    border: 0.0625rem solid var(--primary);
	    border-radius: 2.8125rem;
/*	    padding: 0 1.25rem;*/
	    line-height: 2.125rem;
	    margin: 0 0.625rem;
	    display: inline-block;
	    color: var(--primary) !important;
	}
}

.dataTables_wrapper .dataTables_paginate .paginate_button.first.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.last.disabled {
    color: var(--primary) !important;
}
 
 
.dataTables_wrapper .dataTables_paginate .paginate_button.first, .dataTables_wrapper .dataTables_paginate .paginate_button.last {
    font-size: 1.125rem;
    height: 3.125rem;
    width: fit-content;
    border: 0.0625rem solid var(--primary);
    border-radius: 2.8125rem;
    padding: 0 1.25rem;
    line-height: 3.125rem;
    margin: 0 0.625rem;
    display: inline-block;
    color: var(--primary) !important;
	position: relative !important;
}


.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled{
	display: none;
}

@media only screen and (max-width: 87.5rem) {
	.imgDiv {
		height: 7.688rem;
        width: 7.688rem;
	}
	 
}
@media only screen and (max-width: 61.9375rem) {
	.imgDiv {
		height: 6.688rem;
        width: 6.688rem;
        margin-right: 1rem;
        border-width: 3px;
	} 
}

tfoot {
    display: table-header-group;
}

.profileImg {
    border: 0.5rem solid #fff !important; 
	
}


.material-icons.md-18 { font-size: 18px; }
.material-icons.md-20 { font-size: 20px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

th {
    color: #000;
    border-color: #dfe0e1;
    background-color: #ecebf6;
}

/********************IMAGE UPLOAD*********************/
.divSelFile {
    display: flex;
    justify-content: space-between;
    width: 300px;
    height: 300px;
/*    border: 1px solid #CCC;*/
    position: relative;
    cursor: pointer;
	/*
	background: url("../images/user.png");
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
	*/
    margin: auto;
   
}

.divSelFile label {
    cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
    background-color: #B7B3FF;
}


.selectOpt {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}


#tbl_list_productos img{
	width: 50px;
}

.imgProductoDelete{
	width: 175px;
}




titleModal {
	color: white;
}

/*Estilos login*/
#divLoading{ 
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(254,254,255, .75);
	z-index: 9999; 
	display: none;
}
#divLoading img{
	width: 100px;
	height: 100px;
}

.errorText {
	color: red !important;
/*	font-weight: bolder !important;*/
}

.requiredInput {
	color: red;
}
.optionalInput {
	color: grey;
}

.dataTables_paginate a { 
	font-size: 13px !important;
}

/*Fonts Sizes*/
.fs-4 {
    font-size: 4px !important;
}
.fs-6 {
    font-size: 6px !important;
}
.fs-10 {
    font-size: 10px !important;
}
.fs-11 {
    font-size: 10.20px !important;
}
.fs-12 {
    font-size: 12px !important;
}
.fs-13 {
    font-size: 13px !important;
}
.fs-15 {
    font-size: 15px !important;
}
.fs-18 {
    font-size: 18px !important;
}
.fs-20 {
    font-size: 20px !important;
}
.fs-22 {
    font-size: 22px !important;
}
.fs-24 {
    font-size: 24px !important;
}
.fs-30 {
    font-size: 30px !important;
}
.fs-36 {
    font-size: 36px !important;
}
/*Fonts Weight*/
.fw-100 {
    font-weight: 100 !important;	
}
.fw-300 {
    font-weight: 300 !important;	
}
.fw-500 {
    font-weight: 500 !important;	
}
.fw-700 {
    font-weight: 700 !important;	
}
.fw-900 {
    font-weight: 900 !important;	
}


/*Margins*/
.mb--10 { 
    margin-bottom: 10px;
}
.mb--20 {
    margin-bottom: 20px;    
}
.mb--30 {
    margin-bottom: 30px;    
}
.mb--40 {
    margin-bottom: 40px;    
}
.mb--50 {
    margin-bottom: 50px;    
}
.mb--100 {
    margin-bottom: 100px;    
}

.mt--10 {
    margin-top: 10px;    
}
.mt--20 {
    margin-top: 20px;    
}
.mt--30 {
    margin-top: 30px;    
}
.mt--40 {
    margin-top: 40px;    
}
.mt--50 {
    margin-top: 50px;    
}

.ml--10 {
    margin-left: 10px;    
}
.ml--20 {
    margin-left: 20px;    
}
.ml--30 {
    margin-left: 30px;    
}
.ml--40 {
    margin-left: 40px;    
}
.ml--50 {
    margin-left: 50px;    
}

.mr--10 {
    margin-right: 10px;    
}
.mr--20 {
    margin-right: 20px;    
}
.mr--30 {
    margin-right: 30px;    
}
.mr--40 {
    margin-right: 40px;    
}
.mr--50 {
    margin-right: 50px;    
}

.m--10 {
    margin: 10px;    
}
.m--20 {
    margin: 20px;    
}
.m--30 {
    margin: 30px;    
}
.m--40 {
    margin: 40px;    
}
.m--50 {
    margin: 50px;    
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

.signature-pad {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 10px;
  width: 100%;
  height: 100%;
  max-width: 700px;
  max-height: 460px;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
  border-radius: 4px;
  padding: 16px;
}

.signature-pad::before,
.signature-pad::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 40%;
  height: 10px;
  bottom: 10px;
  background: transparent;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
  left: 20px;
  -webkit-transform: skew(-3deg) rotate(-3deg);
          transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
  right: 20px;
  -webkit-transform: skew(3deg) rotate(3deg);
          transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid #f4f4f4;
}

.signature-pad--body
canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--footer {
  color: #C3C3C3;
  text-align: center;
  font-size: 1.2em;
  margin-top: 8px;
}

.signature-pad--actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 8px;
}

.signature-pad--actions .column {
  padding: .1em;
}

.signature-pad--actions .button {
  margin: .2em;
}

#github img {
  border: 0;
}

@media (max-width: 940px) {
  #github img {
    width: 90px;
    height: 90px;
  }
}

@media (max-width: 480px) {
  .signature-pad--actions .button {
    display: block;
    width: 100%;
    min-height: 2em;
  }

}