:root{

  --main-red: #991515;
  --dark-red: #770000;
  --gray-green: #48845d;
  --main-green: #009933;
  --dark-green: #00802b;
  --darker-green: #004d1a;
  --dark-gray: #d2d2d2;
  --normal-gray: #eaeaea;
  --light-gray: #f7f7f7;
  --lighter-gray: #fdfdfd;

}

.user-item h4{

  display: inline-block;
  font-weight: normal;

}

.user-item button{

  margin-left: 10px;

}

.user-item{

  margin-bottom: 10px;
  width:100%;
  padding: 10px;
  background-color: var(--normal-gray);
  padding: 5px;

}

.navbar-container{

  width: 100%;
  background-color: var(--normal-gray);
  height: 50px;

}

.navbar{

  width:100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

.navbar-left, .navbar-right{

  background-color: var(--main-green);
  padding: 15px;
  font-size: 17px;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.2s;
  color: black;

}

.navbar-left:hover, .navbar-right:hover{

  background-color: var(--dark-green);

}

.navbar-left{

  float:left;

}

.navbar-right{

  float:right;

}

.body{

  background-color: var(--light-gray);
  min-height: calc(100vh - 70px);
  padding: 10px;

}

.mainInput{

  padding: 10px;
  background-color: var(--lighter-gray);
  border: 1px solid var(--normal-gray);
  margin-bottom: 10px;
  margin-top: 5px;

}

.mainSelect{

  padding: 10px;
  background-color: var(--lighter-gray);
  border: 1px solid var(--normal-gray);
  margin-bottom: 10px;
  margin-top: 5px;

}

.mainButton{

  background-color: var(--main-green);
  padding: 15px;
  border: 1px solid var(--darker-green);
  cursor: pointer;
  border-radius: 3px;

}

.mainButtonNotAllowed{

  background-color: var(--main-red);
  padding: 15px;
  border: 1px solid var(--dark-red);
  cursor: not-allowed;
  border-radius: 3px;
  color: darkgray;

}

.mainButton:hover{

  background-color: var(--dark-green);

}

.menu{

  width: 70%;
  padding: 20px;
  left: 15%;
  position:absolute;
  border: 1px solid var(--light-gray);
  background-color: var(--dark-gray);
  display: none;
  top: 30%;

}

.cover{

  width:100%;
  height:100%;
  position:absolute;
  background-color: rgba(0,0,0,0.5);
  display: none;
  left: 0;
  top: 0;

}

.projectsContainer{

  width:90%;
  margin-left:5%;

}

.project-item{

  width:100%;
  background-color: var(--normal-gray);
  padding: 10px;
  outline: var(--dark-gray) 1px solid;
  margin-bottom: 10px;

}

.right{

  /* float: right; */
  display: inline-block;

}

.left{

  /* float: left; */
  display: inline-block;
  margin-right: 25px;

}

#editor{

  width:100%;
  height: 100%;

}

#alert{

  padding: 10px;
  color: #ff4444;
  border: 1px solid #ffaaaa;
  background-color: #ffeeee;
  display: none;
  width: 20%;
  margin-left: 40%;

}

.responsiveInput{

  width: 20%;
  min-width: 200px;

}

.centered{

  text-align: center;

}

html,body{

  margin: 0;
  padding: 0;
  font-family: Arial;

}