/****************/
/* GENERAL HTML */
/****************/

:root {
    /* Interactive elements */
    --main-color: #008cc9;
    --main-color-dark: #007eb4;
    --main-color-dark-rgb: 0, 126, 180;
    --main-color-light: #7fc4e5;
    --main-color-lighter: #b2dcef;
    --main-color-rgb: 0, 140, 201;
    /* Interactive elements of secondary importance */
    --secondary-color: #6c757d;
    --secondary-color-dark: #5c636a;
    --secondary-color-light: #8a929a;
    --secondary-color-rgb: 108, 117, 12501;
    /* Informative elements */
    --accent-color: #003865;
    --accent-color-light: #7f9bb2;
    --accent-color-lighter: #b2c3d0;
    --accent-color-rgb: 0, 56, 101;
    /* Other */
    --border-color: #b9bec4;
    --shadow: 0 .25rem .25rem rgba(.3,.3,.3,.2);
    /* Animation */
    --slide-in-bottom-from: auto;
    --slide-in-bottom-to: auto;
    --slide-in-left-from: auto;
    --slide-in-left-to: auto;
    --slide-in-right-from: auto;
    --slide-in-right-to: auto;
    --slide-in-top-from: auto;
    --slide-in-top-to: auto;
    --stretch-from: auto;
    --stretch-to: auto;
}


@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 100;
    src: url(/fonts/lato.hairline-italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 200;
    src: url(/fonts/lato.thin-italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 300;
    src: url(/fonts/lato.light-italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: url(/fonts/lato.italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 500;
    src: url(/fonts/lato.medium-italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 600;
    src: url(/fonts/lato.semibold-italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    src: url(/fonts/lato.bold-italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 800;
    src: url(/fonts/lato.heavy-italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 900;
    src: url(/fonts/lato.black-italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    src: url(/fonts/lato.hairline.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 200;
    src: url(/fonts/lato.thin.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/lato.light.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/lato.regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/lato.medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/lato.semibold.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/lato.bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 800;
    src: url(/fonts/lato.heavy.ttf) format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: url(/fonts/lato.black.ttf) format('truetype');
}



html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: Lato;
}

footer {
    color: #a6a6a6;
    text-align: center;
    font-size: .85em;
}


/************************/
/* BOOTSTRAP ADJUTMENTS */
/************************/

:root {
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-pill: 0;
    --bs-code-color: var(--accent-color-light);
    --bs-info: var(--accent-color);
    --bs-info-rgb: var(--accent-color-rgb);
    --bs-link-color: var(--main-color);
    --bs-link-color-rgb: var(--main-color-rgb);
    --bs-link-hover-color: var(--main-color-dark);
    --bs-link-hover-color-rgb: var(--main-color-dark-rgb);
    --bs-primary: var(--main-color);
    --bs-primary-rgb: var(--main-color-rgb);
}


/* Navigation */

#main-navbar {
    --active-border-color-rgb: var(--accent-color-rgb);
    --bs-navbar-active-color: var(--main-color);
    --bs-navbar-padding-y: 0rem;
    /*box-shadow: var(--shadow);*/
}

#main-navbar .nav-link {
    color: var(--main-color);
    --bs-nav-link-hover-color: var(--main-color-dark);
    --bs-nav-link-padding-x: .5rem;
    --bs-nav-link-padding-y: 1rem;
    --border-color: transparent;
    border-bottom: 2px solid var(--border-color)
}

#main-navbar .nav-link:hover {
    --border-color: rgba(var(--active-border-color-rgb), .5);
}

#main-navbar .nav-link.active {
    --border-color: rgb(var(--active-border-color-rgb));
}

#main-navbar .dropdown {
    position: static;
}

#main-navbar .dropdown-toggle.show {
    --bs-navbar-active-color: #fff;
    --border-color: rgb(var(--active-border-color-rgb));
    background-color: var(--main-color);
}

#main-navbar .dropdown-menu {
    --bs-dropdown-bg: var(--main-color);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-item-padding-y: .5rem;
    --bs-dropdown-link-color: rgba(255,255,255,.9);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-bg: var(--main-color-dark);
    --bs-dropdown-padding-y: 0;
    --bs-dropdown-spacer: 0;
    left: 0;
    right: 0;
    top: 100%;
    box-shadow: var(--shadow);
}

#main-navbar .dropdown-menu.show {
    display: flex;
}

#main-navbar .dropdown-item {
    border-bottom: 2px solid transparent;
    font-size: .9rem;
}

#main-navbar .dropdown-menu li.active .dropdown-item {
    border-bottom: 2px solid rgb(var(--active-border-color-rgb));
}

#main-navbar .dropdown-menu li:not(.active) .dropdown-item:hover {
    border-bottom: 2px solid rgba(var(--active-border-color-rgb),.7);
}

#main-navbar .dropdown-item .icon {
    filter: brightness(0) invert(1);
}

.navbar-toggler span{
    color: var(--main-color);
    font-size: x-large;
}

.navbar-collapse {
    border: solid 1px var(--main-color);
    background-color: aliceblue;
    }

    .card-header {
    background-color: #D0CFCD;
    border-radius: 0;
}


/* PRODUCT PAGE */

.barcode {
    font-family: "Libre Barcode EAN13 Text", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 6rem;
}




/* LOGIN PAGE */

.bg-techagent {
    background-image: url('/img/bg-techagent-home.jpg');
}

.btn-primary {
    background-color: var(--main-color);
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    background-color: #1e40af;
}


.login-card {
    /*width: 100%;
    max-width: 420px;*/
    background-color: #D0CFCD;
}

.login-logo {
    max-width: 180px;
}


.login-card {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 576px) {
    .navbar-collapse {
        border: none;
        background-color: transparent;
    }
}