﻿/* Styles by RB */

#sidebarToggle svg {
    color: #009000 !important;
}

.sidenav-light .sidenav-menu .nav-link:hover {
    color: #007000 !important;
}

.sidenav .sidenav-menu .nav .nav-link.active {
    font-weight: normal !important;
}

.sidenav-light .sidenav-menu .nav-link.active {
    color: black !important;
}

    .sidenav-light .sidenav-menu .nav-link.active:hover {
        color: #007000 !important;
    }

.sidenav-light .sidenav-menu .nav-link .nav-link-icon {
    color: #009000 !important;
}

    .sidenav-light .sidenav-menu .nav-link .nav-link-icon:hover {
        color: #007000 !important;
    }

.dropdown-item:hover, .dropdown-item:focus {
    color: #007000 !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #007000 !important;
    color: white !important;
}

.card:not([class*=bg-]) .card-header {
    color: black !important;
}

.nav-link .nav-link-icon span {
    color: black !important;
}

.nav-item a.active {
    color: #009000 !important;
}

    .nav-item a.active:hover {
        color: #007000 !important;
    }


.nav-item .nav-link {
    color: black !important;
}

    .nav-item .nav-link:hover {
        color: #007000 !important;
    }

a {
    color: black;
}

    a:hover {
        color: #007000;
    }

    a svg {
        color: #009000 !important;
        font-size: medium !important;
    }

        a svg:hover {
            color: #007000 !important;
        }

    a.icon-action {
        margin-left: 6px;
        margin-right: 6px;
    }

    a svg.font-xxl {
        min-width: 45px;
    }


.btn .feather:hover {
    color: #007000 !important;
}

.btn .fa:hover {
    color: #007000 !important;
}

.btn .fas:hover {
    color: #007000 !important;
}

.bg-gradient-primary-to-secondary {
    background-color: #007000 !important;
    background-image: linear-gradient(135deg, lightgrey 0%, rgba(0, 135, 46, 0.7) 150%) !important;
}

.fixed-top, .nav-fixed #layoutSidenav #layoutSidenav_nav, .nav-fixed .topnav {
    background-color: #dbdcdd !important;
}

.sidenav-light {
    background-color: #e9ebee !important;
}


.sidenav .sidenav-menu .nav .nav-link .nav-link-icon {
    width: 20px !important;
}

.img-logo {
    max-height: 40px;
    max-width: 112px;
    width: auto;
    height: auto;
}

.img-grid {
    max-height: 80px;
    max-width: 80px;
    width: auto;
    height: auto;
}

.progress-bar-custom {
    background-color: #00ac69 !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #009000 !important;
    background-color: #009000 !important;
}

.custom-actions {
    align-items: center;
    display: grid;
    width: 100%;
    max-width: 100px;
    min-width: 80px;
    gap: 10px;
    grid-template-columns: repeat(5,minmax(50px, 1fr));
}

.custom-actions-1c {
    align-items: center;
    display: grid;
    width: 100%;
    max-width: 100px;
    min-width: 80px;
    gap: 10px;
    grid-template-columns: repeat(1,minmax(50px, 1fr));
}

.custom-actions-2c {
    align-items: center;
    display: grid;
    width: 100%;
    max-width: 100px;
    min-width: 80px;
    gap: 10px;
    grid-template-columns: repeat(2,minmax(50px, 1fr));
}

.custom-actions-3c {
    align-items: center;
    display: grid;
    width: 100%;
    max-width: 100px;
    min-width: 80px;
    gap: 10px;
    grid-template-columns: repeat(3,minmax(50px, 1fr));
}

.custom-actions-4c {
    align-items: center;
    display: grid;
    width: 100%;
    max-width: 100px;
    min-width: 80px;
    gap: 10px;
    grid-template-columns: repeat(4,minmax(50px, 1fr));
}

.custom-actions {
    align-items: center;
    display: grid;
    width: 100%;
    max-width: 100px;
    min-width: 80px;
    gap: 10px;
    grid-template-columns: repeat(5,minmax(50px, 1fr));
}

.custom-actions-product {
    align-items: center;
    display: grid;
    width: 100%;
    max-width: 100px;
    min-width: 80px;
    gap: 10px;
    grid-template-columns: repeat(2,minmax(50px, 1fr));
}

.custom-actions .custom-switch {
    margin-top: -10px;
}

.custom-actions .custom-control-input:not(:checked) ~ .custom-control-label::before {
    color: #fff;
    border-color: #e73d4a !important;
    background-color: #e73d4a !important;
}

.textarea-resize-none {
    resize: none;
}

.table tbody td {
    vertical-align: middle;
}

.table th, .table td {
    white-space: nowrap;
}

.pull-right {
    float: right;
}

.sweet-alert {
    border: 2px solid #007000;
}

.multiselect-input-search {
    margin-bottom: 5px;
    width: 167px;
}

.input-group-text-sm {
    padding: 0 10px 0 10px !important;
}

.input-group-action-button {
    background-color: #00ac69;
    color: white;
}

.separator-10 {
    margin-top: 10px;
}

.separator-20 {
    margin-top: 20px;
}

.fix-header {
    overflow: auto;
    height: 320px;
}

.fix-header thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: none transparent;
}

.embed-container {
    position: relative;
    padding-bottom: 50.25%;
    height: 0;
    overflow: hidden;
}



.price-blur {
    filter: blur(5px);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.button-font-style {
    font-weight: 400;
    color: #000
}

.custom-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.custom-table th,
.custom-table td {
    border: 1px solid #ccc;
    padding: 8px;
}

.fixed-column {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 2;
    font-size: small;
    padding: 1px;
}

.fixed-column:first-child {
    width: 204px;
    padding-right: 10px;
}

.fixed-column:nth-child(2) {
    width: 204px;
    padding-right: 10px;
}

.studyRequestVersionColumn {
    width: 180px;
    font-size: small;
}

.first-row-column {
    top: 0;
    position: sticky;
    background-color: #fff;
}

.tableDesignClient {
    overflow: auto;
    max-height: 1050px
}

.custom-actions-only-buttons {
    align-items: center;
    justify-content: space-evenly;
    display: inline-flex;
    width: 100%;
    max-width: 100px;
    min-width: 80px;
}

.chart-totals {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.total-label {
    font-weight: bold;
    margin-right: 5px;
}

.total-value {
    color: #007bff;
}

.small-box > .inner {
    padding: 20px;
    color: #fff !important;
}

.small-box {
    border-radius: .25rem;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    display: block;
    margin-bottom: 20px;
    position: relative;
}

.small-box .icon {
    color: rgba(0, 0, 0, .15);
    z-index: 0;
}

.small-box .icon > svg {
    font-size: 60px;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: -webkit-transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear, -webkit-transform .3s linear;
}

.small-box .icon > svg {
    display: inline-block;
    font-family: "Ionicons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 600px) {
    .embed-container {
        padding-bottom: 700px;
    }

    .custom-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card-header_with-loading{
    display:flex;
    justify-content:space-between;
}
/* Icono del menu IA: imagen en lugar del glyph de FontAwesome.
   FontAwesome corre en modo SVG-with-JS: cada icono es un <svg> con height: 1em,
   o sea 0.9rem. El logo se pone mas grande que eso a proposito: es un anillo de
   trazo fino con las letras chicas al medio, asi que con el mismo tamano que los
   glyphs se ve mas liviano que ellos.
   Los tres valores van juntos: si cambia el tamano, los margenes negativos y el
   desplazamiento horizontal tienen que acompanar. */
.sidenav .sidenav-menu .nav-link .nav-link-icon .ia-menu-icon,
img.ia-menu-icon {
    width: 1.65em;
    height: 1.65em;
    object-fit: contain;
    display: inline-block;
    vertical-align: -.125em;
    /* el .nav-link-icon es inline-flex: su alto lo define esta imagen. Sin estos
       margenes negativos el item "IA" quedaria mas alto que los demas del menu.
       Si se cambia el tamano de arriba, este margen tiene que acompanar. */
    margin-top: -.28em;
    margin-bottom: -.28em;
    /* Los glyphs miden ~1em y este logo 1.65em. Alineados por el borde izquierdo,
       el centro del logo queda ~0.3em mas a la derecha que el de los vecinos y en
       una columna vertical el ojo compara los centros. Se corre con position para
       mover solo el dibujo: el hueco no cambia y el texto "IA" no se desalinea. */
    position: relative;
    left: -.3em;
}
