*{
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{
  text-decoration: none;
}
img.small{
  max-height: 8rem;
  width: 100%;
}
button{
  padding: 0.3rem;
  border: 0.1rem #404040 solid;
  background-color: #f0c040;
  width: 100%;
  cursor: pointer;
}
button.badge{
  background-color: #f04040;
  border: none;
  color: #ffffff;
  width: 1.5rem;
}
button.add{
  background-color: #40c0f0;
  width:1.5rem
}

button.remove{
  background-color: #f04040;
  width:1.5rem
}
.p-1{
  padding:1rem
}
.card{
  background-color: white;
  padding: 1rem;
  margin:0.5rem
}
.row{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.row.center{
  align-items: center;
}
.col-1{
  flex-basis: 100%;
}

.col-2{
  flex-basis: 100%;
}

@media  screen and (min-width:800px) {
  .col-1{
    flex: 1;
  }
  
  .col-2{
    flex: 2;
  }
  
}

.block{
  background-color: #bee8f7;
  padding:1rem;
  margin:0.5rem;
}

.text-right{
  text-align: right;
}

#hiddenSpan{
  display: none;
  color: darkgreen;
  font-weight: bold;
}

#hiddenSpanForCancel{
  display: none;
  color: red;
  font-weight: bold;
}

#cancelButtonId{
  display: none;
}