.modal {
   position: fixed;
   z-index: 5000;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   visibility: hidden;
   overflow: hidden;
   text-align: center;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   padding: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: rgba(118, 190, 240, 0.8);
   cursor: pointer;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;
   transition: all 0.4s;
}

.modal.open {
   opacity: 1;
   visibility: visible;
}

.modal.open {
   visibility: visible;
}

.modal-container {
   background: rgba(118, 190, 240, 0.6);
   position: relative;
   display: inline;
   max-width: 630px;
   min-width: 320px;
   height: auto;
   vertical-align: middle;
   z-index: 2000;
   backface-visibility: hidden;
   cursor: auto;
   -webkit-transform: scale(0.7);
   -moz-transform: scale(0.7);
   -ms-transform: scale(0.7);
   transform: scale(0.7);
   opacity: 0;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;

   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: space-between;
   text-align: center;
}

.modal-container.third {
   min-width: 33vw;
}

.modal-container.half {
   min-width: 50vw;
}

.modal-container.twothirds {
   min-width: 66vw;
}

.modal-container.height-half .modal-content {
   min-height: 60vh;
}

.modal-container.left {
   text-align: left;
}

.modal.open .modal-container {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   opacity: 1;
   max-height: 100vh;
}

.modal-content {
   padding: 15px;
   max-height: 100vh;
   overflow-y: auto;
}

.next-field-modal {
   margin-bottom: 70px;
}

.modal-content.white {
   background: #fff;
   border-radius: 9px;
}

.modal .close {
   text-align: left;
   display: block;
   height: 50px;
   margin: 0;
   padding-left: 50px;
   cursor: pointer;
   -webkit-transition: color 0.2s;
   -o-transition: color 0.2s;
   transition: color 0.2s;
   text-decoration: none;
   color: #fff;
   font-size: 1.5rem;
   background: transparent;
}

.modal .close:before {
   font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
   font-size: 50px;
   line-height: 50px;
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 35px;
   content: "\00d7";
   text-align: center;
}

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

html.modal-is-locked {
   overflow: hidden;
   -ms-touch-action: none;
   touch-action: none;
}

.modal-input {
   padding: 16px 15px;
   width: 100%;
   border: 0;
   background: rgb(151, 210, 245);
   color: #fff;
   font-size: 1.6rem;
   border-bottom: 3px solid #fff;
}

.modal-input.center {
   text-align: center;
}

.modal-input::-webkit-input-placeholder {
   color: #fff;
}

.modal-input:-ms-input-placeholder {
   color: #fff;
}