/* Tema desarrollado por www.suempresa.com (facilaplicaciones @ aol.com) */

/* =================================
========== THEME SETTINGS ==========
================================= */

/* ========== COLORS ========== */

:root {
    --color-1: rgb(196,52,44);
    --color-1-light: rgba(196,52,44,0.2);
    --color-2: rgb(60,60,60);
    --color-2-light: rgba(60,60,60,0.2);
    --color-3: rgb(77, 81, 85);
    --color-3-light: rgba(183,183,183,0.2);
    --color-orange: rgba(255, 165, 0);
    --color-orange-light: rgba(255, 165, 0,0.2);
    --color-green: rgba(0, 128, 0);
    --color-green-light: rgba(0, 128, 0,0.2);
    --color-yellow: rgba(255, 215, 0);
    --color-yellow-light: rgba(255, 215, 0,0.2);
    --color-purple: rgba(128, 0, 128);
    --color-purple-light: rgba(128, 0, 128,0.2);
    --color-red: rgb(232, 8, 8);
    --color-red-light: rgba(232, 8, 8, 0.2);
    --color-readonly: rgba(40, 65, 87,0.1);
}

/* ========== BODY ========== */

body {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: .85rem !important;
    background-color: #FFFFFF !important;
    font-weight: 500 !important;
}

table, tbody, td, th {
    font-size: .85rem !important;
}

/* thead {
    background-color: var(--color-2-light) !important;
} */

/* ========== FORMS ========== */

input, textarea, select{
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

input:read-only, textarea:read-only {
    background-color: var(--color-readonly) !important;
}

textarea {
    min-height: 85px !important;
}

/* ========== IMAGES ========== */

.logo {
    display: block !important;
    margin: 5px auto !important;
    max-width: 150px !important;
    max-height: 100px !important;
}

.logo_gallery {
    display: block !important;
    margin: 5px auto !important;
    max-width: 150px !important;
    max-height: 150px !important;
}

.logo_index {
    display: block !important;
    margin: 5px auto !important;
    max-width: 300px !important;
    max-height: 250px !important;
}

.profile-detail {
    display: block !important;
    margin: 5px auto !important;
    max-width: 150px !important;
    max-height: 150px !important;
}

.inventory_image {
    max-height: 150px!important;
    max-width: 150px!important;
}

.img-thumbnail {
    max-height: 40%!important;
    max-width: 40%!important;
}

.index_icons {
    height: 25px!important;
    width: 25px!important;
}

.facil-logo {
    max-width: 6rem !important;
}

/* ========== FONTS ========== */

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

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

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

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

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: left !important;
}

.text-footer {
    text-align: center !important;
    font-size: .80rem !important;
    color: white !important;
}

.text-labels {
    margin-left: 5px !important;
}

h5 {
    color: var(--color-3) !important;
}

h6 {
    color: var(--color-1) !important;
}

th {
    font-weight:600 !important;
}

.date {
    text-align: left !important;
    font-size: .70rem !important;
    color: red !important;
    font-style: italic !important;
}

.text-justify {
    text-align: justify !important;
}

.text-index {
    text-align: left !important;
    font-size: .90rem !important;
    padding-top: 5px !important;
}

.contact-links {
    text-decoration: none !important;
    color: var(--color-1) !important;
    font-size: .85rem !important;
}

/* ========== BUTTONS ========== */

.btn {
    font-size: .80rem !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-weight: 500 !important;
}

.btn-1 {
    background-color: var(--color-1) !important;
    color: white !important;
}

.btn-1:hover {
    background-color: var(--color-1-light) !important;
}

.btn-1-light {
    background-color: var(--color-1-light) !important;
    color:#000000 !important;
}

.btn-1-light:hover {
    background-color: var(--color-3-light) !important;
}

.btn-2 {
    background-color: var(--color-2) !important;
    color: white !important;
}

.btn-2:hover {
    background-color: var(--color-2-light) !important;
}

.btn-3 {
    background-color: var(--color-3) !important;
    color: white !important;
}

.btn-3:hover {
    background-color: var(--color-3-light) !important;
    color: #333333 !important; 
}

.btn-orange {
    background-color: var(--color-orange) !important;
    color: white !important;
}

.btn-orange:hover {
    background-color: var(--color-orange-light) !important;
}

.btn-green {
    background-color: var(--color-green) !important;
    color: #FFFFFF !important;
}

.btn-green:hover {
    background-color: var(--color-green-light) !important;
    color: #333333 !important;
}

.btn-red {
    background-color: var(--color-red) !important;
    color: white !important;
}

.btn-red:hover {
    background-color: var(--color-red-light) !important;
}

.btn-yellow {
    background-color: var(--color-yellow) !important;
    color: #333333 !important;
}

.btn-yellow:hover {
    background-color: var(--color-yellow-light) !important;
}


.btn-purple {
    background-color: var(--color-purple) !important;
    color: white !important;
}

.btn-purple:hover {
    background-color: var(--color-3-light) !important;
    color: #333333 !important; 
}

/* ========== BACKGROUNDS ========== */

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

.bg-1-light {
    background-color: var(--color-1-light) !important;
}

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

.bg-2-light {
    background-color: var(--color-2-light) !important;
}

.bg-3 {
    background-color: var(--color-2) !important;
}

.bg-3-light {
    background-color: var(--color-2-light) !important;
}

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

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

.bg-yellow {
    background-color: var(--color-yellow) !important;
    color: #333333 !important;
}

.bg-purple {
    background-color: var(--color-purple) !important;
    color: #333333 !important;
}

.bg-modal-header {
    background-color: var(--color-1) !important;
    font-size: .80rem !important;
    color: white !important;
    font-weight: 500 !important;
}

.bg-readonly {
    background-color: var(--color-readonly) !important;
    color: white !important;
}

.bg-total {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: .75rem !important;
    background-color: #ffffff !important;
    border: 1px solid var(--color-1) !important;
    border-radius: 6px !important;
}

/* ========== PAGINATION ========== */

.pagination {
    display:inline-flex!important;
}

    .pagination a {
        color: black;
        float: left;
        padding: 6px 12px;
        text-decoration: none;
        transition: background-color .3s;
        border: 0 !important;
        font-size: .75rem !important;
    }

    .pagination a.active {
        background-color: var(--color-1) !important;
        color: white !important;
    }

    .pagination a:hover:not(.active) {
        background-color: var(--color-thead) !important;
        color: white !important;
    }

    .pagination a:first-child {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .pagination a:last-child {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

/* ========== COLUMNS ========== */

.colfit {
    white-space: nowrap !important;
    width: 1px !important;
    max-width: 250 !important;
}


.column-50 {
    width: 50px !important;
}

.column-100 {
    width: 100px !important;
}

.column-150 {
    width: 150px !important;
}

.column-200 {
    width: 200px !important;
}

.column-250 {
    width: 250px !important;
}

.column-300 {
    width: 300px !important;
}

.column-350 {
    width: 350px !important;
}

.column-400 {
    width: 400px !important;
}

.column-450 {
    width: 450px !important;
}

.column-500 {
    width: 500px !important;
}

.column-550 {
    width: 550px !important;
}

.grid {
    display: grid !important;
    gap: 1rem !important;
    grid-auto-rows: 3rem !important;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)) !important;
}

.mid-grid {
    display: grid !important;
    gap: 0.2rem !important;
    grid-auto-rows: 3rem !important;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)) !important;
}

/* ====================== CATALOGUE ELEMENTS ====================== */

.catalog-grid {
    display: grid !important;
    gap: 2rem !important;
    grid-auto-rows: 16rem !important;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important;
}

.catalog-code {
    text-align: left !important;
    color: var(--color-1) !important;
    font-weight: 600 !important;
}

.catalog-name {
    text-align: left !important;
    color: var(--color-2) !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    padding: 0 !important;
}

.catalog-image {
    height: 150px !important;
    vertical-align: middle !important;
    text-align: left !important;
}


/* ========== MISC ========== */

.pointer {
    cursor: pointer !important;
}

.vertical-middle {
    vertical-align: middle !important;
}

/* ===============================
========== INDEX STYLES ==========
=============================== */

/* ========== INDEX BODY ========== */
#index-body {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: .80rem !important;
    background-image: url('../images/background.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: left top !important;
}

/* ========== INDEX CONTAINER ========== */

.login_container {
    padding: 10px 0px !important;
    position: relative !important;
}

.login_form {
    width: 500px !important;
    display:block !important;
    margin:10px auto !important;
    padding:15px 55px 15px !important;
    background: rgba(255,255,255,0.8) !important;
    border-radius: 6px !important;
    z-index:9 !important;
}

@media screen and (max-width: 600px) {
    .login_form {
        width: 100% !important;
    }
}

/* ========== INDEX IMAGES ========== */

.login_logo {
    display: block !important;
    margin: 5px auto !important;
    max-width: 250px !important;
    max-height: 150px !important;
}

/* ========== INDEX BUTTONS ========== */

.btn-login {
    background-color: var(--color-2) !important;
    color: white !important;
    padding: 10px !important;
}

.btn-login:hover {
    background-color: var(--color-1) !important;
}

/* ===============================
========== MOVIL STYLES ==========
=============================== */

/* ========== MOVIL BODY ========== */
#movil-body {
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: .85rem !important;
}

#movil-body td {
    /* height: 40px !important; */
    vertical-align: middle !important;
    border: 0px !important;
}

/* ========== FORMS ========== */

#movil-body input, textarea, select {
    font-size: 0.80rem !important;
}

/* ========== MOVIL BUTTONS ========== */

#movil-body .btn {
    font-size: .80rem !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* ========== MOVIL BOOTSTRAP ========== */

#movil-body .dropdown-item {
    font-size: .90rem !important;
}

/* ========== MOVIL HIDE COLUMNS ========== */

.reveal {
    display: none !important;
}

@media all and (orientation:portrait) {
	.reveal {
        display: none !important;
	}
}

@media all and (orientation:landscape) {
	.reveal {
        display:inline-block !important;
	}
}

/* ============================
========== BOOTSTRAP ==========
============================ */

/* ========== MENÚ ========== */

.nav-link {
    color: white !important;
}

.active {
    font-weight: 700 !important;
}

.dropdown-item {
    font-size: .80rem !important;
}

.badge {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: .75rem !important;
}