@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body {
    font-family: sans-serif;
    overflow: hidden;
    height: 100%;
    z-index: 999;
}

div {
}

.scroll-container::-webkit-scrollbar {
    width: 0.25em;
}

.scroll-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(40, 139, 15, 0.205);
  outline: 1px solid #000000a2;
  border-radius: 10px;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
}

input[type=number] {
    /* border: 0 !important; */
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: none !important;
}
input[type=number]:active {
    border-bottom-color: rgba(63, 190, 37, 0.281) !important;
}

button {
    text-transform: uppercase;
    font-weight: bold;
    background-color:  rgba(119, 168, 115, 0.322) !important;
    color: rgb(255, 255, 255)!important;
    padding: 2px !important;
    border: 1px solid rgba(204, 201, 201, 0.774)!important;
}

#clothes-container,
#barber-container,
#tats-container {
    text-transform: uppercase;
    font-weight: bolder;
    border-radius: 25px 25px 25px 25px;
    opacity: 150px;
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid rgb(50, 50, 50);
    box-shadow: 0 0 10px 3px rgba(9, 255, 0, 0.596);
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(77, 167, 35, 0.151), 0 0 40px rgba(34, 168, 85, 0.144) inset;
    overflow: hidden;
    transform: scale(1);
    position: absolute;
    color: #ffffff !important;
    padding-top: 2%;
    top: 80px;
    left: 80px;
    width: 45vh;
    height: 80vh;
    transform: matrix3d(1,0,0.00,.0002,0.00,1,0.00,0,0,0,1,0,0,0,0,1);

}

.scroll-container {
    padding: 0px !important;
    margin: 0px !important;
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100% - 148px);
    width: 100%;
}

#camera-container {
    /* width: 500px; */
    height: 110%;
    /* margin: auto; */
    position: relative;
    top: -10%;
    left: 40%;
    background-color: #4d4e4d5d;
    border-radius: 1px;
    transform: scale(0.75);
}
#button_menu {
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
}
#button_menu > button {
    width: calc(33.3% - 3px) !important;
    /* display: inline-flex !important; */
    /* flex: 0 20%; */
    flex-grow: 1;
}

h6 {
    color: #e7e7e7 !important;
}

.input-number {
    /* margin: 0px 15; */
    color: #fafafa !important;
    text-align: center;
    /* width: 50px !important; */
}

.panel {
    padding: 0px !important;
    margin: 10px 10px !important;
    border-radius: 25px;
    border: 1px solid rgba(3, 3, 3, 0.103);
    width: calc(100% - 20px) !important;
    overflow: hidden;
    background-color:  rgba(133, 141, 131, 0.329) !important;
}

.panel-title {
    background-color:  rgba(15, 15, 15, 0.479) !important;
    color: white;
    color: rgb(255, 255, 255);
}
.panel-title > h6 {
      
    color: white;
    color: rgb(255, 255, 255);
}

.panel-label {
    margin: 5px !important;
}

.panel-bottom {
    color: white;
    color: rgb(255, 255, 255);
    padding: 10px !important;
    background-color:  rgba(15, 15, 15, 0.25) !important;
}

button.button-menu {
    background-color:  rgba(69, 71, 69, 0.226) !important;
    border-radius: 7.5px;
    margin: 5px;
}
button.button-menu.active {
    background-color:  rgba(48, 105, 48, 0.349) !important;
}


.color_palette {
    border-radius: 2px;
    background: rgb(25, 25, 25);
    color: white;
    color: rgb(140, 138, 175);
    margin: 4px;
    width: 40px;
    height: 40px;
    display: inline-flex;
}
.color_palette:hover {
    border: 2px solid rgb(145, 143, 165) !important;
}
.color_palette.active {
    border: 2px solid rgb(132, 130, 156) !important;
}

.collapsible {
    /* background-color: rgba(62, 192, 30, 0.247) !important;
    color: #2ab3313b !important; */
    border-color: rgb(255, 255, 255) !important;
}
.collapsible-header {
    background-color: #47b92a00 !important;
    color: #ffffff !important;
}
.collapsible-body {
    border-color: rgba(44, 145, 31, 0.226) !important;
    padding: 15px !important;
}

.slidecontainer {
    width: 50%;
    margin: 0px 5px;
}

.slider {
    -webkit-appearance: none !important;
    width: 100% !important;
    background: #414141 !important;
    background-color: #414141 !important;
    outline: none !important;
    opacity: 0.7 !important;
    -webkit-transition: opacity .15s ease-in-out !important;
    transition: opacity .15s ease-in-out;
    height: 40px !important;
    border: 0px !important;
}

input[type="range" i] {
    color: #414141 !important;
}

.slider:hover {
    opacity: 1;
}

input:focus,
input:active {
    border-bottom-color: rgba(23, 150, 18, 0.685) !important;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(18, 153, 14, 0.692) !important;
    cursor: pointer;
    border-radius: 2px !important;
}