@charset "utf-8";
/* CSS Document */

:root {
    --app-color-red: #FF4500;
    --app-color-yellow: #FFD700;
    --app-color-blue: #87CEEB;
    --app-color-green: #32CD32;
    --app-color-orange: #FFA500;
    --app-color-white: #FFFFFF;
    --app-color-black: #000000;
    --app-color-dark-gray: #333333;

    --app-input-border-color: #cdd0d4;
}

/*scroll bar*/
.app-scroll-bar::-webkit-scrollbar {
    width: 8px;     /* Tamaño del scroll en vertical */
    height: 8px;    /* Tamaño del scroll en horizontal */
    display: block;  /* Ocultar scroll */
}

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
.app-scroll-bar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
.app-scroll-bar::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */
.app-scroll-bar::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}

/* Ponemos un color de fondo y redondeamos las esquinas del track */
.app-scroll-bar::-webkit-scrollbar-track {
    background: #e1e1e1;
    border-radius: 4px;
}

/* Cambiamos el fondo cuando esté en active o hover */
.app-scroll-bar::-webkit-scrollbar-track:hover,
.app-scroll-bar::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}

/* end scrollbar */

.app-margin-header {
    margin-top: 160px;
}

.app-row-min-height {
    min-height: 500px;
}

.app-input {
    display: block;
    border: solid 1px var(--app-input-border-color);
    line-height: 1.5;
    padding: 5px;
    border-radius: 2px;
}

.app-input-label {
    margin: 0;
    padding: 0;
    display: block;
    color: #6c757d;
    font-size: .7rem;
    font-weight: 600;
}

.app-button-upload-order-image {
    border: solid 2px silver;
    padding: 8px 10px;
    border-radius: 5px;
    color: var(--app-color-black-gray);
    opacity: .4;
}

.app-button-upload-order-image:hover {
    opacity: .5;
}