.login-client {
  border-radius: 10px;
  background-color: white;
  width: 40%;
  padding: 10px;
  top: 25%;
  left: 5%;
  position: absolute;
  text-align: center;
}

.login-user {
  
  border-radius: 10px;
  background-color: white;
  width: 40%;
  padding: 10px;
  top: 25%;
  left: 50%;
  position: absolute;
  text-align: center;
}

.image-medium {
  height: 200px;
  margin: 20px;
  border-radius: 5px;
}

.image-small {
  height: 100px;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.title {
  top: 5%;
  padding: 10px;
  position: absolute;
  text-align: center;
}

h5 {
  color: black;
}

h1 {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
padding: 15px;
  font-size: 3vw;
  color: #231F30;
}

h2 {
font-size: 3vw;
color: #231F30;
}

.menu_app {
padding: 30px;
/* z-index: 1000; */
/* padding: 10px; */
text-align: left;
background-color: #231F30;
height: 100%;
/* width: 260px; */
/* width: 20%; */
/* position: absolute; */
left: 0px;
overflow: scroll;
}

.menu_app a {
border-bottom: #110f17 solid 1px;
padding: 10px;
line-height: 15px; 
vertical-align: middle;
width: 100%;
display: block;
}

.content_app {
  /* padding: 20px; */
  background-color: white;
  height: 100%;
  /* width: 80%; */
  /* width: 82%; */
  /* position: absolute; */
  /* left: 260px; */
  top: 0px;
  bottom: 0px;
  right: 0px;
  overflow: scroll;
  /* overflow-y: auto; */
}

.indicator-dashboard {
  /* height: 150px; */
  text-align: center;
  /* margin: 2px; */
  padding: 10px;
  border-radius: 5px;
  background-color: rgb(255, 245, 212);
  
}

.row-seven {
  width: 100%;
}

.new {
  display: none;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.97;
  overflow-y: auto;
  left: 0%;
  top: 0px;
  right: 0px;
  position: absolute;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
}

.edit {
  display: none;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.97;
  overflow-y: auto;
  left: 0%;
  top: 0px;
  right: 0px;
  position: absolute;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
}

.table {
text-align: left;
}

.table-seven {
  width: 60%;
}

.alert-message {
  display: none;
}

.description-seven {
  height: 100px;
}

.product {
  text-align: left;
  padding: 10px;
}











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

:root {
/* generic */
--gutterSm: 0.4rem;
--gutterMd: 0.8rem;
--gutterLg: 1.6rem;
--gutterXl: 2.4rem;
--gutterXx: 0.2rem;
--colorPrimary400: #7e57c2;
--colorPrimary600: #5e35b1;
--colorPrimary800: #4527a0;
--fontFamily: "Dosis", sans-serif;
--fontSizeSm: 1.2rem;
--fontSizeMd: 1.6rem;
--fontSizeLg: 2.1rem;
--fontSizeXl: 2.8rem;
--fontSizeXx: 3.6rem;
--lineHeightSm: 1.1;
--lineHeightMd: 1.8;
--transitionDuration: 300ms;
--transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);

/* floated labels */
--inputPaddingV: var(--gutterMd);
--inputPaddingH: var(--gutterLg);
--inputFontSize: var(--fontSizeLg);
--inputLineHeight: var(--lineHeightMd);
--labelScaleFactor: 0.8;
--labelDefaultPosY: 50%;
--labelTransformedPosY: calc(
  (var(--labelDefaultPosY)) - 
  (var(--inputPaddingV) * var(--labelScaleFactor)) - 
  (var(--inputFontSize) * var(--inputLineHeight))
);
--inputTransitionDuration: var(--transitionDuration);
--inputTransitionTF: var(--transitionTF);
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
font-size: 10px;
}

body {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: 100vw;
height: 100vh;
color: #455A64;
background-color: #231F30;
font-family: var(--fontFamily);
font-size: var(--fontSizeMd);
line-height: var(--lineHeightMd);
}

.Wrapper {
  padding: 1vw;
  border-radius: 10px;
  border-color: #F8D148;
  border-style: solid;
  text-align: center;
  /* flex: 0 0 80%;
  max-width: 80%; */
}

.Title {
margin: 0 0 var(--gutterXx) 0;
padding: 0;
color: #fff;
font-size: var(--fontSizeXx);
font-weight: 400;
line-height: var(--lineHeightSm);
text-align: center;
text-shadow: -0.1rem 0.1rem 0.2rem var(--colorPrimary800);
}

.Input {
position: relative;
}

.Input-text {
display: block;
margin: 0;
padding: var(--inputPaddingV) var(--inputPaddingH);
color: inherit;
width: 100%;
font-family: inherit;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
border: none;
border-radius: 0.4rem;
transition: box-shadow var(--transitionDuration);
}

.Input-text::placeholder {
color: #9b9b9b;
}

.Input-text:focus {
outline: none;
box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
}

.Input-label {
display: block;
position: absolute;
bottom: 50%;
left: 1rem;
color: #fff;
font-family: inherit;
font-size: var(--inputFontSize);
font-weight: inherit;
line-height: var(--inputLineHeight);
opacity: 0;
transform: 
  translate3d(0, var(--labelDefaultPosY), 0)
  scale(1);
transform-origin: 0 0;
transition:
  opacity var(--inputTransitionDuration) var(--inputTransitionTF),
  transform var(--inputTransitionDuration) var(--inputTransitionTF),
  visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
  z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}

.Input-text:placeholder-shown + .Input-label {
visibility: hidden;
z-index: -1;
}

.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
visibility: visible;
z-index: 1;
opacity: 1;
transform:
  translate3d(0, var(--labelTransformedPosY), 0)
  scale(var(--labelScaleFactor));
transition:
  transform var(--inputTransitionDuration),
  visibility 0ms,
  z-index 0ms;
}














/* @import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700'; */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700');

*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


.flex {
min-height:20vh;
display: flex;
align-items:center;
justify-content:center;
}

.flexnew {
min-height:10vh;
display: flex;
align-items:center;
justify-content:center;
}

a.bttnnew {
color: black;
background-color:#F8D148;
text-decoration:none;
-webkit-transition:0.3s all ease;
transition:0.3s ease all;
}

a.bttnnew:hover {
color:rgb(182, 152, 46);
}

a.bttnnew:focus {
color:rgb(182, 152, 46);
}





a.bttndelete {

text-decoration:none;
-webkit-transition:0.3s all ease;
transition:0.3s ease all;
}

a.bttndelete:hover {
color:rgb(150, 0, 0);
}

a.bttndelete:focus {
color:rgb(150, 0, 0);
}





a.bttnok {
color: white;
background-color:#231F30;
text-decoration:none;
-webkit-transition:0.3s all ease;
transition:0.3s ease all;
}

a.bttnok:hover {
color:#FFF;
}

a.bttnok:focus {
color:#FFF;
}






a.bttn {
color:#F8D148;
text-decoration:none;
-webkit-transition:0.3s all ease;
transition:0.3s ease all;
}

a.bttn:hover {
color:#FFF;
}

a.bttn:focus {
color:#FFF;
}

.bttn {
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
display:inline-block;
text-align:center;
width:270px;
font-weight:bold;
padding:14px 0px;
border:3px solid #F8D148;
border-radius:2px;
position: relative;
box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
}

.bttn:before{
-webkit-transition:0.5s all ease;
  transition:0.5s all ease;
  position:absolute;
  top:0;
  left:50%;
  right:50%;
  bottom:0;
  opacity:0;
  content:'';
  background-color:#F8D148;
  z-index:-2;
}

.bttn:focus:before{
transition:0.5s all ease;
  left:0;
  right:0;
  opacity:1;
}

.bttn:hover:before{
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}




.bttnnew {
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
display:inline-block;
text-align:center;
width:270px;
font-weight:bold;
padding:14px 0px;
border:3px solid #F8D148;
border-radius:2px;
position: relative;
/* box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1); */
}



.bttnnew:before{
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
position:absolute;
top:0;
left:50%;
right:50%;
bottom:0;
opacity:0;
content:'';
background-color:#F8D148;
z-index:-2;
}

.bttnnew:focus:before{
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}

.bttnnew:hover:before{
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}








.bttndelete {
margin-top: 25px;
color: black;
background-color: #F8D148;
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
display:inline-block;
text-align:center;
width:50%;
font-weight:bold;
padding:14px 0px;
/* border:3px solid rgb(255, 8, 0); */
border-radius:2px;
position: relative;
/* box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1); */
}



.bttndelete:before{
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
position:absolute;
top:0;
left:50%;
right:50%;
bottom:0;
opacity:0;
content:'';
background-color:rgb(255, 8, 0);
z-index:-2;
}

.bttndelete:focus:before{
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}

.bttndelete:hover:before{
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}






.bttnok {
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
display:inline-block;
text-align:center;
width:270px;
font-weight:bold;
padding:14px 0px;
border:3px solid #231F30;
border-radius:2px;
position: relative;
box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
}



.bttnok:before{
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
position:absolute;
top:0;
left:50%;
right:50%;
bottom:0;
opacity:0;
content:'';
background-color:#231F30;
z-index:-2;
}

.bttnok:focus:before{
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}

.bttnok:hover:before{
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}















.rule {
  margin: 10px 0;
  border: none;
  height: 1.5px;
  background-image: linear-gradient(left, #f0f0f0, #c9bbae, #f0f0f0);
}

/* ===== Select Box ===== */
.sel {
  font-size: 1rem;
  display: inline-block;
  margin: 3em 2em;
  width: 350px;
  background-color: transparent;
  position: relative;
  cursor: pointer;
}

.sel::before {
  position: absolute;
  content: '\f063';
  font-family: 'FontAwesome';
  font-size: 2em;
  color: #FFF;
  right: 20px;
  top: calc(50% - 0.5em);
}

.sel.active::before {
  transform: rotateX(-180deg);
}

.sel__placeholder {
  display: block;
  font-family: 'Quicksand';
  font-size: 2.3em;
  color: #8d8d8d;
  padding: 0.2em 0.5em;
  text-align: left;
  pointer-events: none;
  user-select: none;
  visibility: visible;
}

.sel.active .sel__placeholder {
  visibility: hidden;
}

.sel__placeholder::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.2em 0.5em;
  content: attr(data-placeholder);
  visibility: hidden;
}

.sel.active .sel__placeholder::before {
  visibility: visible;
}

.sel__box {
  position: absolute;
  top: calc(100% + 4px);
  left: -4px;
  display: none;
  list-style-type: none;
  text-align: left;
  font-size: 1em;
  background-color: #ebedef;
  width: calc(100% + 8px);
  box-sizing: border-box;
}

.sel.active .sel__box {
  display: block;
  animation: fadeInUp 500ms;
}

.sel__box__options {
  display: list-item;
  font-family: 'Quicksand';
  font-size: 1.5em;
  color: #838e95;
  padding: 0.5em 1em;
  user-select: none;
}

.sel__box__options::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  font-size: 0.5em;
  margin-left: 5px;
  display: none;
}

.sel__box__options.selected::after {
  display: inline;
}

.sel__box__options:hover {
  background-color: #F8D148;
}

/* ----- Select Box Black Panther ----- */
.sel {
  border-bottom: 4px solid rgba(0, 0, 0, 0.3);
}

.sel--black-panther {
  z-index: 3;
}

/* ----- Select Box Superman ----- */
.sel--superman {
/*   display: none; */
  z-index: 2;
}

/* ===== Keyframes ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
















.select-css {
  display: block;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 700;
  color: #444;
  line-height: 1.3;
  padding: .6em 1.4em .5em .8em;
  width: 100%;
  max-width: 100%; 
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: .5em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
  display: none;
}
.select-css:hover {
  border-color: #888;
}
.select-css:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222; 
  outline: none;
}
.select-css option {
  font-weight:normal;
}











.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}

.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}



.image-activity {
width: 300px;
}

.image-activity-2 {
height: 300px;
}

.messages{
float: left;
font-family: sans-serif;
display: none;
}
.info{
padding: 10px;
border-radius: 10px;
background: orange;
color: #fff;
font-size: 18px;
text-align: center;
}
.before{
padding: 10px;
border-radius: 10px;
background: blue;
color: #fff;
font-size: 18px;
text-align: center;
}
.success{
padding: 10px;
border-radius: 10px;
background: green;
color: #fff;
font-size: 18px;
text-align: center;
}
.error{
padding: 10px;
border-radius: 10px;
background: red;
color: #fff;
font-size: 18px;
text-align: center;
}

@media (max-width: 767px) {
.menu_app {
    display: block;
    border: red solid 1px;
}
a.bttnnew:before {
  content: "+";
}
}