/*
Copyright (c) 07/10/2020, llokopickup - llokopickup
Todos los derechos reservados. El uso no autorizado de este programa está
estrictamente prohibido sin la autorización previa y por escrito del autor.
*/
/* 
    Created on : 07/10/2020, 18:56:34
    Author     : Fernando García - fgarcia@novasys.com.mx
*/

html,
body,
header,
.view {
    height: 100%;
}

@media (max-width: 740px) {
    html,
    body,
    header,
    .view {
        height: 1000px;
    }
}

@media (min-width: 800px) and (max-width: 850px) {
    html,
    body,
    header,
    .view {
        height: 650px;
    }
}
.navbar {
    background-color: #FF8800;
}
a {
    color: #FF8800;
}
.font-lloko {
    color: #FF8800;
}

.br-20 {
    border-radius: 20px !important;
}
.br-15 {
    border-radius: 15px !important;
}
.font-header {
    font-size: 26px;
}
.font-subheader {
    font-size: 18px !important; font-weight: bold;
}
.font-subheader {
    font-size: 18px !important; font-weight: bold;
}
.ff-bookos {font-family: Bookos !important;}
.font-normal {
    font-size: 16px;
}
.font-small {
    font-size: 14px;
}
.icon-compact {
    display: block; float: left;
    height: 48px;
    line-height: 48px;
    opacity: 0.56;
}
.icon-first {
    display: block; float: left;
    width: 36px; height: 48px;
    line-height: 48px;
    opacity: 0.56;
}
.icon-between {
    display: block; float: left;
    width: 48px; height: 48px;
    line-height: 48px; text-align: center;
    cursor: pointer;
}
.icon-last {
    display: block; float: left; margin-left: 12px;
    width: 24px; height: 48px;
    line-height: 48px;
}

/* Efectos Hover */
.hover-blue {
    -webkit-transition:all .30s ease-in-out;-o-transition:all .30s ease-in-out;transition:all .30s ease-in-out;
}
.hover-blue:hover {
    color: blue !important;
    -webkit-transition:all .30s ease-in-out;-o-transition:all .30s ease-in-out;transition:all .30s ease-in-out;
}
.hover-red {
    -webkit-transition:all .30s ease-in-out;-o-transition:all .30s ease-in-out;transition:all .30s ease-in-out;
}
.hover-red:hover {
    color: red !important;
    -webkit-transition:all .30s ease-in-out;-o-transition:all .30s ease-in-out;transition:all .30s ease-in-out;
}

/* Auxiliares */
.noselect {
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;  /* Non-prefixed version, currently
                         supported by Chrome and Opera */
}
.timeline-event-selected {background-color: #f2f2f2 !important;}
.bg-lighter {background-color: #f2f2f2 !important;}
.cursor-pointer {cursor: pointer;}
.cursor-move {cursor: grab;}
.cursor-default{cursor: default !important;}
.cursor-disallowed{cursor: not-allowed !important;}
.custom-modal-btn {line-height: 48px; text-align: center; text-transform: uppercase;}
.text-small{font-size:.95rem}
.text-smaller{font-size:.85rem}
.text-bold{font-weight: bold;}
.text-underline{text-decoration: underline;}
.line-height-48 {line-height: 48px;}
.line-height-38 {line-height: 38px; height: 38px;}
.line-height-24 {line-height: 24px;}
.line-height-74 {line-height: 74px;}
.force-height-48 {height: 48px !important;}
.custom-stepper {width: 48px; border: 1px solid #e4e4e4;}
.custom-border {border: 1px solid #f2f2f2;}
*:focus {
    outline: none !important;
}
.transparent {
    background-color: transparent !important;
}
.blink_me {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.bg-white-important {
    background-color: white !important;
}
.square-48{
    width: 48px; height: 48px; line-height: 48px; text-align: center;
}
.h-48px {
    height: 48px;
}
.h-24px {
    height: 24px;
}
.h-38px {
    height: 48px;
}
.h-56px {
    height: 56px;
}
.w-150px {
    width: 150px;
}
.w-75px {
    width: 75px;
}
.w-234px {
    display: inline-block;
    width: 234px !important;
    margin-right: 4px;
}
.w-100px {
    width: 100px;
}
.w-48px {
    width: 48px;
}
.producto-card-nombre {
    position: fixed; 
    bottom: 0; left: 0; 
    opacity: 0.8; 
    max-height: 70px; overflow-y: auto; background-color: white;
}
.h-250px {
    height: 250px;
}
.h-300px {
    height: 250px;
}
.h-350px {
    height: 350px;
}
.h-1px {
    width: 24px;
    background-color: red;
    content: "----"
}
.rounded-pill-left {
    border-top-left-radius: 50rem!important;
    border-bottom-left-radius: 50rem!important;
}
.rounded-pill-right {
    border-top-right-radius: 50rem!important;
    border-bottom-right-radius: 50rem!important;
}
.rounded-left {
    border-top-left-radius: .25rem!important;
    border-bottom-left-radius: .25rem!important;
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}
.opacity-1{
    opacity: 1 !important;
}

.w100-48px {
    width: calc(100% - 48px);
}
.w100-96px {
    width: calc(100% - 96px);
}
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
textarea {
  resize: none;
}
.gray-gradient {
background: rgb(56,56,56);
background: linear-gradient(280deg, rgba(56,56,56,1) 0%, rgba(102,102,102,1) 35%, rgba(154,154,154,1) 100%);
}
.ns-nombre-producto{
    font-weight: bold;
}
.ns-observaciones-titulo {
    
}
.ns-observaciones-texto {
    font-size: 12px;
    text-align: justify;
    color: grey;
}

.ns-comp-cantidad:nth-child(even) {
    color: black;
    background-color: #f2f2f2;
    min-width: 50px;
    text-align: center;
    border-radius: 3px;
}

.text-orange {
    color: #FF8800 !important;
}
body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    background-color: #E9E9E9;
    font-family: 'Candara', sans-serif;
    font-weight: 300;
}
.ns-input-error {
    border-color: red !important;
    background-color: #ffc9c9;
}