button:hover {
    opacity:1;
}
  
  /* Float cancel and delete buttons and add an equal width */
.cancelBtn, .deleteBtn {
    float: center;
    width: 10vw;
    margin-left: .5vw;
}
  
/* Add a color to the cancel button */
.cancelBtn {
    background-color:rgb(149, 172, 170);
    color: black;
}
  
/* Add a color to the delete button */
.deleteBtn {
    background-color:rgb(149, 172, 170);
    color: black;
}

#modalTop {
    top: 0vw;
    left: 0vw;
    right: 0vw;
    bottom: 10vw;
    /*border: 1px solid rgb(18, 122, 114);*/
    overflow: hidden;
    overflow-y:scroll;
    background-color: lightgrey;
}

  /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left:0;
    right:0;
}
  
.modalContainer {
  top:1vw;
  position: relative;
  /* overflow-x: hidden; */
  margin-bottom: 3vw;

}
  /* Modal Content/Box */
.modalFormContent {
    position:relative;
    top: 15vw;
    left: 31vw;
    width: 35vw;
    padding-bottom: 2vw;;
    background-color: #eceaea;
    border: .2vw solid rgb(2, 71, 62) ;
    border-radius: 2vw;

}

/* Add padding and center-align text to the container */
.modalFormContainer {
    /* padding: 16px; */
    text-align: center;
    top:2vw;
    overflow:hidden;
}  

.modalFullframeContainer {
  position: relative;
  top: 0vw;
  left: 0vw;
  right: 0vw;
  bottom: 11vw;
  width: 100%;
  overflow-y: scroll; 
  margin-left: 2vw;
  /* scaling container always from top left */
  transform-origin: top left;
}

  /* The Modal Close Button (x) */

  .modal .close {
    z-index: 100;
    position: fixed;
    right: 1vw;
    top: 1vw;
    width: 5vw;
    height: 5vw;
    background-color:white;
    border-radius: 50%;
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 2vw;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=50);
    opacity: .5;
  }

  .modal .close .closeBtn {
    display: inline-block;
    height: 100%;
    width: 100%;
    margin: auto;
    padding: 25%;
  }

  .modal .close .closeBtn::after {
    border: none;
    border-bottom: 2px solid steelblue;
    box-shadow: 0px 1px 5px grey;
    background: linear-gradient(#55480f,#6f8315);
    color: #FFF;
  }

  
  
  .close:hover,
  .close:focus {
    color: #f44336;
    cursor: pointer;
  }

  .close:active{
    border: none;
    border-bottom: 2px solid steelblue;
    box-shadow: 0px 1px 5px grey;
    background: linear-gradient(#8f124c,#a31035);
    color: #FFF;
  }
/*    */


/* The modal back button (<<) */

.modal .back {
  z-index: 100;
  position: fixed;
  left: 1vw;
  top: 1vw;
  width: 5vw;
  height: 5vw;
  background-color:white;
  border-radius: 50%;
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=50);
  opacity: .5;
}

.modal .back .backBtn {
  display: inline-block;
  height: 100%;
  width: 100%;
  margin: auto;
  padding: 25%;
}

.back:hover,
.back:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=70);
  opacity: .7;
}

/* */