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

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

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

:root {
    --color-1: rgb(40, 65, 87);
    --color-1-light: rgba(40, 65, 87,0.5);
    --color-2: rgb(224,91,40);
    --color-2-light: rgba(224,91,40,0.5);
    --color-3: rgb(183,183,183);
    --color-3-light: rgba(183,183,183,0.5);
    --color-green: rgba(104,221,189);
    --color-green-light: rgba(104,221,189,0.5);
    --color-red: rgba(238,143,127);
    --color-red-light: rgba(238,143,127,0.5);
    --color-yellow: rgba(241,241,175);
    --color-yellow-light: rgba(241,241,175,0.5);
    --color-clear: rgba(224,91,40,0.1);
    --color-clear-light: rgba(224,91,40,0.5);
    --color-readonly: rgba(40, 65, 87,0.1);
    --color-return: rgb(54, 135, 228);
    --color-return-light: rgba(54, 135, 228, 0.5);
}

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

body {
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: .80rem !important;
    background-color: #FFFFFF !important;
}

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

thead {
    background-color: var(--color-clear) !important;
}

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

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

input:read-only, textarea:read-only {
    background-color: var(--color-readonly) !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;
}

/* ========== 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: .70rem !important;
    color: white !important;
}

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

h5 {
    color: var(--color-1) !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: .75rem !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

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

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

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

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

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

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

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

.btn-return:hover {
    background-color: var(--color-return-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;
}

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

.btn-green:hover {
    background-color: var(--color-green-light) !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;
}

/* ========== 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-clear {
    background-color: var(--color-clear) !important;
}

.bg-modal-header {
    background-color: var(--color-1) !important;
    color: white !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: var(--color-1);
        float: left;
        padding: 6px 12px;
        text-decoration: none;
        transition: background-color .3s;
        border: 0 !important;
        font-size: .75rem !important;
        border-radius: 8%;
    }

    .pagination a:hover {
        color: white;
        background-color: var(--color-2);
        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);
        color: white !important;
    }

    .pagination-size {
        font-size: .75rem !important;
    }

/* ========== 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 {
    min-width: 150px !important;
    max-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: 'Nunito Sans', 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.5) !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;
}