@charset "utf-8";

.hookCatch_LoadingPanel { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); display: none; z-index: 2147483647; }

.hookCatch_LoadingPanel_inner { position: fixed; bottom: 50%; left: 50%; margin-left: -165px; width: 330px; background-color: rgba(255, 255, 255, 0.95); border: 10px solid rgba(0, 0, 0, 0.35); padding: 7px 10px 10px 13px; border-radius: 40px; box-shadow: rgba(0, 0, 0, 0.35) 1px 1px 10px; z-index: 2147483647; }

.hookCatch_WaitingPanel { background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 30px; margin: 15px; position: fixed; bottom: 150px; display: none; }

.hookCatch_SpinningWheel { width: 30px; height: 30px; background-color: red; display: block; float: left; }

.dim { opacity: 0.9; }

.hookCatch_Text { margin-left: 45px; padding: 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }

.form-field-error { border: 2px solid red !important; }

.hook_trig_formField { display: block; width: 0px; height: 0px; overflow: hidden; position: absolute; }

.hook_loading_modal { position: fixed; inset: -5px; background-color: rgba(0, 0, 0, 0.6); z-index: 99999999; display: none; }

.hook_loading_modal .hook_loading_modal_loaging_panel { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; border: 2px solid rgba(0, 0, 0, 0.35); border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 30px; text-align: center; display: block; padding: 35px 20px 20px; background-color: rgba(255, 255, 255, 0.9); }

.hook_loading_modal .hook_loading_modal_loaging_panel h2 { font-size: 24px; color: rgb(153, 153, 153); }

.hook_loading_modal .hook_loading_modal_loaging_panel img { margin-bottom: 7px; }

.hook_page_blur { filter: blur(10px); }

.page-wrap { transition: 0.5s; }

.lds-roller { display: inline-block; position: relative; width: 64px; height: 64px; }

.lds-roller div { animation: 1.2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite normal none running lds-roller; transform-origin: 32px 32px; }

.lds-roller div::after { content: " "; display: block; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgb(255, 255, 255); margin: -3px 0px 0px -3px; }

.lds-roller div:nth-child(1) { animation-delay: -0.036s; }

.lds-roller div:nth-child(1)::after { top: 50px; left: 50px; }

.lds-roller div:nth-child(2) { animation-delay: -0.072s; }

.lds-roller div:nth-child(2)::after { top: 54px; left: 45px; }

.lds-roller div:nth-child(3) { animation-delay: -0.108s; }

.lds-roller div:nth-child(3)::after { top: 57px; left: 39px; }

.lds-roller div:nth-child(4) { animation-delay: -0.144s; }

.lds-roller div:nth-child(4)::after { top: 58px; left: 32px; }

.lds-roller div:nth-child(5) { animation-delay: -0.18s; }

.lds-roller div:nth-child(5)::after { top: 57px; left: 25px; }

.lds-roller div:nth-child(6) { animation-delay: -0.216s; }

.lds-roller div:nth-child(6)::after { top: 54px; left: 19px; }

.lds-roller div:nth-child(7) { animation-delay: -0.252s; }

.lds-roller div:nth-child(7)::after { top: 50px; left: 14px; }

.lds-roller div:nth-child(8) { animation-delay: -0.288s; }

.lds-roller div:nth-child(8)::after { top: 45px; left: 10px; }

@keyframes lds-roller { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.text-holder { color: rgb(170, 170, 170); text-align: center; padding-top: 40px; }

.button-holder { padding-top: 100px; }

.ajax-button { position: relative; display: inline-block; width: 100px; height: 40px; left: 50%; top: 50%; margin-left: -50px; margin-top: -20px; text-align: center; }

.submit { transition: 0.5s; outline: none; cursor: pointer !important; }

.form-submit { text-align: center; }

.loading { margin-left: auto; margin-right: auto; font-size: 0px !important; width: 40px !important; height: 40px !important; margin-top: 5px !important; border-radius: 20px !important; padding: 0px !important; border-width: 3px !important; border-style: solid !important; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) !important; border-image: none !important; box-shadow: rgba(3, 3, 3, 0.45) 0px 0px 25px 0px, rgba(3, 3, 3, 0.65) 0px 0px 3px 0px !important; animation-name: wk-rotateAnimation !important; animation-duration: 1s !important; animation-delay: 0.2s !important; animation-iteration-count: infinite !important; }

@keyframes rotateAnimation { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes wk-rotateAnimation { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.finish { transform: scaleX(1) !important; }

.hide-loading { opacity: 0; transform: scale(0) !important; }