/**************************\
  Basic Modal Styles
\**************************/
.modal { display: none; }
.modal.is-open { display: block; }

.modal_overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0,0,0,0.6);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 198;
}
.modal_container {
 padding: 30px 20px;
 width: 90%;
 max-width: 760px;
 height: auto;
 max-height: 80vh;
 background-color: #fff;
 border-radius: 4px;
 overflow-y: auto;
 box-sizing: border-box;
}
.modal_close {
  background: transparent;
  border: 0;
}

.modal header { position: relative; }
.modal header h5 {
 margin: 0 0 1rem;
 font-size: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
}
.modal button:focus, .modal button:hover { text-decoration: none; }
.modal .modal_close {
 padding: 0;
 font-size: clamp(2.6rem, 2.455rem + 0.73vw, 3rem);
 position: absolute;
 top: -25px;
 right: -10px;
}
.modal header .modal_close:before {
 font-family: "Material Symbols Outlined";
 content: "\e5c9";
 font-variation-settings:
 'FILL' 1,
 'wght' 200,
 'GRAD' 0,
 'opsz' 24
}

.modal_btn {
 margin: 0.8rem 0 0;
 padding: 0.3rem 0.7rem 0.3rem 1.2rem;
 background-color: #7fa6c3;
 border-radius: 50px;
 border-style: none;
 border-width: 0;
 color: #fff;
 font-size: clamp(0.781rem, 0.747rem + 0.17vw, 0.875rem);
 font-weight: normal;
 line-height: 1;
 display: flex;
 align-items: center; 
 cursor: pointer;
 -webkit-appearance: button;
 text-transform: none;
 overflow: visible;
 will-change: transform;
 -moz-osx-font-smoothing: grayscale;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transform: translateZ(0);
 transform: translateZ(0);
 transition: -webkit-transform .25s ease-out;
 transition: transform .25s ease-out;
 transition: transform .25s ease-out,-webkit-transform .25s ease-out;
}
.modal_btn:focus, .modal_btn:hover {
 -webkit-transform: scale(1.05);
 transform: scale(1.05);
 text-decoration: none;
}
.modal_btn::after {
 margin: 1px 0 0 0.2rem;
 font-size: 140%;
 font-family: "Material Symbols Outlined";
 content: "\eaaa";
 font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24;
}

/**************************\
  Animation Style
\**************************/
@keyframes mmfadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes mmfadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}
@keyframes mmslideIn {
  from { transform: translateY(15%); }
    to { transform: translateY(0); }
}
@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}

.micromodal-slide { display: none; }
.micromodal-slide.is-open { display: block; }
.micromodal-slide[aria-hidden="false"] .modal_overlay {
 animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="false"] .modal_container {
 animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal_overlay {
 animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal_container {
 animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide .modal_container,
.micromodal-slide .modal_overlay { will-change: transform; }