/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* NETXUS */

body {
    background: url('/logo.gif') no-repeat center center fixed;
    background-size: 50%;
}

body::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 90%;
    background: rgba(244, 245, 250, 0.8);
    z-index: -1;
}

:root {
    --netxus50: #ecfaff;
    --netxus100: #d4f2ff;
    --netxus200: #b2eaff;
    --netxus300: #7edfff;
    --netxus400: #41c9ff;
    --netxus500: #16a9ff;
    --netxus600: #0089ff;
    --netxus700: #0070fd;
    --netxus800: #015bcc;
    /* --netxus900: #324d72; */
    --netxus900: #094f9f;
    --netxus950: #0c356a;
}

.bg-greynetxus{
    background-color: #abb2b9 !important;
}

.bg-netxus1{
    background-color: var(--netxus50) !important;
}

.bg-netxus2{
    background-color: var(--netxus100) !important;
}

.bg-netxus3{
    background-color: var(--netxus200) !important;
}

.bg-netxus4{
    background-color: var(--netxus300) !important;
}

.bg-netxus5{
    background-color: var(--netxus400) !important;
}

.bg-netxus6{
    background-color: var(--netxus500) !important;
}

.bg-netxus7{
    background-color: var(--netxus600) !important;
}

.bg-netxus8{
    background-color: var(--netxus700) !important;
}

.bg-netxus9{
    background-color: var(--netxus800) !important;
}

.bg-netxus10{
    background-color: var(--netxus900) !important;
}

.txt-netxus {
    color: var(--netxus950);
}

.btn-outline-netxus {
    border-color: var(--netxus950);
    background-color: transparent;
    color: var(--netxus950);
}

.btn-outline-netxus:hover {
    background-color: var(--netxus950);
    color: #FFF !important;
}

.btn-pink {
    font-family: "Quicksand", Georgia, "Times New Roman", Times, serif !important;
}

.btn-netxus {
    border-color: var(--netxus950) !important;
    background-color: var(--netxus950) !important;
    color: #FFFFFF;

    font-family: "Quicksand", Georgia, "Times New Roman", Times, serif !important;
}

.btn-netxus:hover {
    border-color: var(--netxus900) !important;
    background-color: var(--netxus900) !important;
    color: #FFF !important;
}

.btn-netxus:focus,
.btn-netxus:active {
    border-color: var(--netxus900) !important;
    background-color: var(--netxus900) !important;
    color: #FFF !important;
}

.bg-netxus {
    background-color: var(--netxus950) !important;
}

.border-bottom-netxus {
    border-color: var(--netxus700) !important;
}


/* Estilos floating label para nomina */
.did-floating-label-content {
    position: relative;
    margin-bottom: 10px;
}

.did-floating-label {
    font-size: 13px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    top: 6px;
    padding: 0 5px;
    background: #f8fafc;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;

    left: 2px;
    padding: 0px 0px 0px 2px;
}

.did-floating-input,
.did-floating-select {
    /* font-size: 12px; */
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #f8fafc;
    color: #323840;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;

    &:focus {
        outline: none;

        ~.did-floating-label {
            top: -8px;
            font-size: 10px;
            background: #fff;
        }
    }
}

select.did-floating-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.did-floating-select::-ms-expand {
    display: none;
}

.did-floating-input:not(:placeholder-shown)~.did-floating-label {
    top: -8px;
    font-size: 10px;
}

.did-floating-select:not([value=""]):valid~.did-floating-label {
    top: -8px;
    font-size: 10px;
}

.did-floating-select[value=""]:focus~.did-floating-label {
    top: 11px;
    font-size: 10px;
}

.did-floating-select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath id='Path_1' data-name='Path 1' d='M371,294l4,6,4-6Z' transform='translate(-371 -294)' fill='%23003d71'/%3E%3C/svg%3E%0A");
    background-position: right 15px top 50%;
    background-repeat: no-repeat;
}

.input-group {
    display: flex;

    .did-floating-input {
        border-radius: 0 4px 4px 0;
        border-left: 0;
        padding-left: 0;
        text-align: right;
    }
}

.input-group-append {
    display: flex;
    align-items: center;
    /*   margin-left:-1px; */
}

.input-group-text {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    background: #f8fafc;
    border: 1px solid #ced4da;
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.total_text {
    padding-top: 10px;
}

/* Estilos floating label para nomina */

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* Modificando estilos ventana ver */
.email-application .app-content .sidebar .email-app-sidebar .email-app-menu .sidebar-menu-list {
    padding: 0px !important;
}

.email-application .border, .email-application [class*="border-"] {
    margin: 10px;
}

.email-application .app-content .sidebar .email-app-sidebar .email-app-menu .sidebar-menu-list .list-group {
    border-bottom: solid 1px lightgray;
    border-top: solid 1px lightgray;
}

.email-application .app-content .sidebar .email-app-sidebar .email-app-menu .sidebar-menu-list .list-group:hover {
    background: #F2F4F4;
}

.email-application .app-content .sidebar .email-app-sidebar .email-app-menu .sidebar-menu-list .list-group.active {
    border-right: solid 3px var(--netxus900);
}

.vertical-compact-menu .main-menu .navigation > li.active > a {
    border-right: solid 4px var(--netxus900);
  }

.email-application .app-content .sidebar .email-app-sidebar .email-app-menu {
    background-color: #FFF;
}

.email-application .app-content .content-right .email-app-list-wrapper .email-app-list .email-action .action-right .email-pagination {
    padding: 0.35rem 0.5rem;
    margin-left: 0.6rem;
}

.email-application .app-content .content-right .email-app-list-wrapper .email-app-list .email-user-list .users-list-wrapper li {
    animation: none;
}

.email-application .app-content .content-right .email-app-list-wrapper .email-app-list .email-action li .user-details {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.email-application .app-content .content-right .email-app-details .email-scroll-area .email-detail-head .collapse-header .card-header[aria-expanded="false"] {
    background-color: #FFF;
}

.email-application .app-content .sidebar .email-app-sidebar {
    height: calc(100vh - 7.3rem);
  }

.email-application .app-content .content-right .email-app-list-wrapper .email-app-list .email-user-list {
    height: calc(100vh - 15rem);
}

.email-application .app-content .content-right .email-app-details .email-scroll-area {
    height: calc(100vh - 10.4rem);
}

@media (max-width: 991.98px) {

    .email-application .app-content .sidebar .email-app-sidebar {
        height: calc(100vh - 7rem);
    }

    .email-application .app-content .email-user-list {
        height: calc(100vh - 18rem) !important;
    }

    .email-application .app-content .content-right .email-app-details .email-scroll-area {
        height: calc(100vh - 18rem);
    }
}

.media-list{
    margin: auto;
}

.box {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid #BBB;
    background: #fff;
    float: left;
    padding: 25px;
    border-radius: 3px;
    margin-bottom: 50px;
}


/* SELECT2 */

.select2-container--default .select2-selection--multiple {
    padding: 4px 8px !important;
    font-size: 12px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--netxus900) !important;
}

.select2-container--default .select2-results__options .select2-results__option[aria-selected="true"] {
    background-color: var(--netxus900) !important;
}

/*
*Estilo para los totales de la cotizacion general
*/
.producto{
	padding-left: 20px;
}

.nombre_producto{
	background-color: lightgray;
	padding-top: 5px;
	padding-bottom: 5px;
	display: none;
}
.total-section .total-row .total-label {
    display: inline-block;
    color: #777666;
    min-height: 28px;
    width: 70%;
    border-top: 1px solid #eee;
    padding: 5px 1%;
}

.total-section .total-row .total-amount {
    float: right;
    padding: 5px 1.5%;
    border-top: 1px solid #eee;
    min-height: 28px;
    width: 30%;
    margin-left: -1%;
    text-align: right;
    color: #777666;
}

/*
* Estilo para ver la cotizacion en moviles
*/
@media (max-width: 991.98px) {
	.total-section .total-row .total-label {
		display: inline-block;
		color: #777666;
		min-height: 28px;
		width: 50%;
		border-top: 1px solid #eee;
		padding: 10px 1%;
	}

	.total-section .total-row .total-amount {
		float: right;
		padding: 10px 1.5%;
		border-top: 1px solid #eee;
		min-height: 28px;
		width: 50%;
		margin-left: -1%;
		text-align: right;
		color: #777666;
	}
}

.boton-cotizar {
	position: absolute;
	bottom: 0;
}

/* SE USA PARA MOSTRAR EN MOBILE LA COTIZACION*/
@media only screen and (max-width: 767px) {
	.boton-cotizar {
		position: relative;
	}

    /* Force table to not be like tables anymore */
	#no-more-tables table,
	#no-more-tables thead,
	#no-more-tables tbody,
	#no-more-tables th,
	#no-more-tables td,
	#no-more-tables tr {
		display: block;
		/*padding-right: 0px;*/
		padding-left: 0px;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	#no-more-tables tbody {
		border: 1px solid #ccc;
		border-top: 3px solid #d2d6de;
		border-top-color: #3c8dbc;
		border-radius: 3px;
	}

	#no-more-tables td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 40%;/*original en 50%*/
		white-space: normal;
		text-align:left;
	}

	#no-more-tables td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}

	/*
	Label the data
	*/
	#no-more-tables td:before {
		content: attr(data-title);
	}
}

.ui-autocomplete .ui-state-active, .ui-autocomplete .ui-widget-content .ui-state-active {
    background: var(--netxus900);
}

/* ESTILOS MENSAJES ERROR CAMPO */
.form-group .help-block ul {
	padding-left: 0 !important;
	list-style-type: none !important;
}

.form-group.error span {
	color: #dc3545 !important;
	border-color: #dc3545 !important;
}

/* COLORES PAGINACION */
.page-item.active .page-link {
    background-color: var(--netxus950);
    border-color: var(--netxus950);
}

.pagination .page-link {
    color: var(--netxus950);
}


/* FOOTER */
footer.footer-light {
    z-index: 5;
}

/* KANBAN */
div.kanban {
    border-top: 5px solid #78909C;
    width: 20%;
    height: calc(100vh - 20rem);
    /* height: auto; */
    margin: 1rem;
    max-width: 322px;
    min-width: 322px;
    display: inline-block;
    vertical-align: top;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    flex-direction: column;
    min-height: 350px;
    position: relative;
    background: #f0f0f0;
    border-radius: 2px;
}

.contentedor_item{
    height: calc(100vh) !important;
}

.text {
    color: grey;
    font-size: 1rem;
    font-weight: 400;
    line-height: 18px;
    overflow: hidden;
    padding: 5px;
    width: 100%;
    text-align: left;
    font-size: 13px;
    word-wrap: break-word;
}

/**
* Nestable
*/

.dd {
    position: relative;
    display: block;
    list-style: none;
}

.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dd-list .dd-list {
    padding-left: 30px;
}


.dd-item {
    display: block;
    margin: 1.5rem 0rem 0 0rem;
    padding: 20px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    background: #fff;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    cursor: move;
    box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2) !important;
    -webkit-box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2) !important;
}

.dd-item:hover {
    background: #fff;
}

.dd-item>button {
    display: block;
    position: relative;
    cursor: move;
    float: left;
    width: 25px;
    height: 20px;
    margin: 5px 0;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    font-weight: bold;
}

.dd-item>button:before {
    content: '+';
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    text-indent: 0;
}

.dd-item>button[data-action="collapse"]:before {
    content: '<i class="material-icons">filter_none</i>';
}

.dd-placeholder,
.dd-empty {
    margin: 5px 0;
    padding: 0;
    min-height: 30px;
    background: #E0E0E0;
    border: 1px dashed #b6bcbf;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.dd-empty {
    border: 1px dashed #bbb;
    min-height: 100px;
    background-color: #E0E0E0;
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
}

.dd-dragel {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

.dd-dragel>.dd-item .dd-handle {
    margin-top: 0;
    cursor: move;
}

.dd-dragel .dd-item {
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .5);
    box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .5);
    cursor: move;
}

.board-column-header {
    background-color: var(--netxus950) !important;
}

.board-container {
    height: calc(100vh - 15rem) !important;
}

.board-item.muuri-item-placeholder .board-item-content {
    border-color: var(--netxus900) !important;
}

/* APP */
.primary {
    color: var(--netxus900) !important;
}

.text-primary {
    color: var(--netxus900) !important;
  }

.circulo {
    width: 15px; /* ancho del círculo */
    height: 15px; /* alto del círculo */
    border-radius: 50%; /* convierte el cuadrado en círculo */
    display: flex; /* opcional, para centrar contenido */
}

.modal-footer {
    border-top: 1px solid #ddd;
}

/* EFECTO MAQUINA ESCRIBIR PARA WIRE LOADING */

h2.escribir {
	position: relative;
	background: white;
	color: #000;
	font-size: 2.5em;
}

h2.escribir span {
    position:absolute;
    right:0;
    width:0;
    background: white;
    color: #000;
    animation: escribir 1s steps(30) infinite;
}

@keyframes escribir {
    from { width: 100% }
    to { width:0 }
}

/* MENU */
.vertical-compact-menu .main-menu .navigation > li > a {
    padding: 0.3rem 0rem !important;
}

.popover{
    z-index: 1000000 !important;
    /* background-color: var(--netxus100); */
}

.border-bottom {
    border-bottom: 1px solid #EEEEEE !important;
}

/* VISTA DOCUMENTOS */
.media-list {
    width: 80%;
    height: 100%;
    position: relative;
    background: #fff;
    float: left;
	padding: 25px;
	margin-left: 10%;
	margin-bottom: 50px;
}

@media (min-width: 16px) and (max-width: 576px) {
	.media-list {
		width: 100%;
		height: 100%;
		position: relative;
		background: #fff;
		float: left;
		padding: 25px;
		margin-left: 0;
		margin-bottom: 50px;
	}

	page table, page span{
		font-size: 0.8em !important;
	}
	page h1{
		font-size: 2em !important;
	}
	.descripcion{
		width: auto !important;
	}
	.logoct{
		width: 60% !important;
	}
}

@media (min-width: 577px) and (max-width: 767px) {
	.media-list {
		width: 100%;
		height: 100%;
		position: relative;
		background: #fff;
		float: left;
		padding: 25px;
		margin-left: 0;
		margin-bottom: 50px;
	}

	page table, page span{
		font-size: 0.9em !important;
	}
	page h1{
		font-size: 2em !important;
	}
	.descripcion{
		width: auto !important;
	}
	.logoct{
		width: 60% !important;
	}
}

@media (min-width: 577px) and (max-width: 1699px) {
	.media-list {
		width: 100%;
		height: 100%;
		position: relative;
		background: #fff;
		float: left;
		padding: 25px;
		margin-left: 0;
		margin-bottom: 50px;
	}

	page table, page span{
		font-size: 1em !important;
	}
	page h1{
		font-size: 2em !important;
	}
	.descripcion{
		width: auto !important;
	}
	.logoct{
		width: 60% !important;
	}
}

@media (min-width: 1700px) {
	.media-list {
		/* width: 68%; */
		width: 85%;
		height: 100%;
		position: relative;
		background: #fff;
		float: left;
		padding: 25px;
		margin-bottom: 50px;
	}

	page table, page span{
		font-size: 1em !important;
	}
	page h1{
		font-size: 2em !important;
	}
	.descripcion{
		width: auto !important;
	}
	.logoct{
		width: 40% !important;
	}
}

.card-header {
    padding: 1.5rem 1.5rem 0rem 1.5rem;
}

/* HOME INFORMES */
.ct-area-circle {
	fill: #28d094;
	stroke-width: 5;
	stroke: #fff;
}

.border-redius-indigo {
    border: 1px solid #1E9FF2 !important;
}

/* MUURI */
.board-column-header{
    font-size: 1rem !important;
}

/* CALENDARIO */
.fc-button{
    font-family: "Quicksand", Georgia, "Times New Roman", Times, serif !important;
}

.fc-button:not(:disabled).fc-button-active {
    background-color: var(--netxus950) !important;
    border-color: #666ee8;
}

.fc-button:not(:disabled).fc-button:hover {
    background-color: var(--netxus950) !important;
    border-color: #666ee8;
}

.fc-day-header span{
    font-family: "Quicksand", Georgia, "Times New Roman", Times, serif !important;
}

.fc-event span {
    font-family: "Quicksand", Georgia, "Times New Roman", Times, serif !important;
}

/* TABLA */
/* Se comenta porque daña los estilos en el PDF */
/* table {
    font-family: "Quicksand", Georgia, "Times New Roman", Times, serif !important;
} */

.bg_verdeclaro{
    background: #DCFCE7;
}

.bg_rojoclaro{
    background: #FADBD8;
}

.agrupado {
    background-color: #fff8e1 !important;
    border-color: #f0ad4e !important;
    color: #333 !important; /* opcional: texto oscuro */
}