/*==============================================================*/
/*popup template design*/
.popup-background{
  /*position size*/
  position: fixed;
  z-index : 100;
  top : 0;
  left : 0;
  height : 100vh;
  width : 100vw;
  
  /*design*/
  background-color: gray;
  opacity : 0.5
}
.popup{
  /*position size*/
  --height : 250px;
  --width : 420px;
  z-index : 101;
  position: fixed;
  top : calc(50vh - calc(var(--height) / 2));
  left : calc(50vw - calc(var(--width) / 2));
  height : var(--height);
  width : var(--width);

  /*design*/
  overflow : hidden;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 3px 1px gray;

}
.popup > .close-button{
  /*position size*/
  --size : 20px;
  position:absolute;
  top : calc(var(--size)/4);
  left : calc(var(--width) - var(--size) * 5/4);/*css variables are available in children*/
  height : var(--size);
  width : var(--size);

  /*design*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color : gray;
  font-size: var(--size);
  border-radius: calc(var(--size)/5);
}
.popup > .close-button:hover{
  /*design*/
  background-color: red;
  color : white;
  
}
.popup > .content{
  padding: 10px;
  text-align: center;
}

/*hide popup*/
.popup-flag{
  display: none;
}
.popup-flag:not(:checked) + .popup-background{
  display:none;
}
.popup-flag:not(:checked) + * + .popup{
  display:none;
}

/*==============================================================*/
/*custom design*//*
#popupFlag2 + * +.popup{
  /*position size*//*
  --height : 150px;
  --width : 150px;
}
#popupFlag3 + * +.popup{
  /*position size*//*
  --height : 150px;
  --width : 350px;

  /*design*//*
  display:block;
  transform: rotate(30deg);
  box-shadow: 0px 0px 3px 1px gray;
  transition: 0.5s;
}
#popupFlag3:not(:checked) + * + .popup{
  /*position size*//*
  --height : 0px;

  /*design*//*
  transform: rotate(0deg);
  box-shadow: 0px 0px 0px gray;
}



/*==============================================================*/
/*button-container*/
.button-container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  
}
.button-container > *{
  /*margin : 15px;*/  
  position: absolute;
  top: 40%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);;
  content: 'BOX';
  
}

/*button1*/
.button-sample1{
  color: white;
  background-color: blue;
  border : 1px solid white;
  padding: 5px 10px;
  border-radius: 8px;
  transition: 0.2s;
}
.button-sample1:hover{
  color: rgb(43, 191, 236);
  background-color: blue;
}
.button-sample1:active{
  color: rgb(43, 191, 236);
  background-color: rgb(0, 0, 168);
  transition: 0.05s;
}

/*button2*//*
.button-sample2{
  height : 35px;
  width : 85px;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  box-shadow: inset 1px 1px 2px 1px gray;
  font-size: 0.95rem;
  transition: 0.2s;
}
.button-sample2:active{
  box-shadow: inset 0px 0px 0px 0px gray;
  font-size: 1rem;
}

/*button3*//*
.button-sample3{
  height : 35px;
  width : 85px;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  box-shadow: 1px 1px 2px 1px gray;
  font-size: 1.0rem;
  transition: 0.2s;
}
.button-sample3:active{
  box-shadow: 0px 0px 0px 0px gray;
  font-size: 0.95rem;
}

*/