@import url(https://fonts.googleapis.com/css2?family=Itim&display=swap);.wrapper{height:100vh;overflow:hidden;background-color:green;margin:auto;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%}.loading_overlay,.wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.loading_overlay{position:fixed;bottom:0;left:0;height:100%;background-color:rgba(0,0,0,.5);z-index:1000}.loading_spinner{width:70px;height:70px;border:10px solid #fff;border-top:10px solid #fc0;border-radius:50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.error_overlay{position:fixed;bottom:0;left:0;width:100%;height:100%;background-color:rgba(255,0,0,.5);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1000}.error_message{font-size:1.5rem;font-family:Itim,cursive;color:#fff;background-color:#f44;padding:20px 40px;border-radius:10px;-webkit-box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:0 4px 6px rgba(0,0,0,.1);text-align:center}.container_wrapper{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.container_wrapper,.title_section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}.title_section{-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:15%;background-color:#fc0;border-bottom:2px solid #f90}.title{width:50%;font-size:2.5rem;font-family:Itim,cursive;color:#333;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.scan{width:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px}.scan_input{width:70%;padding:10px 15px;font-size:1.2rem;font-family:Itim,cursive;border:2px solid #fc0;border-radius:10px;background-size:cover;color:#333;-webkit-box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:0 4px 6px rgba(0,0,0,.1);outline:none;-webkit-transition:all .3s ease;transition:all .3s ease}.scan_input:focus{border-color:#f90;-webkit-box-shadow:0 6px 8px rgba(0,0,0,.2);box-shadow:0 6px 8px rgba(0,0,0,.2)}.scan_input::-webkit-input-placeholder{color:#999;font-style:italic}.scan_input::-moz-placeholder{color:#999;font-style:italic}.scan_input:-ms-input-placeholder{color:#999;font-style:italic}.scan_input::-ms-input-placeholder{color:#999;font-style:italic}.scan_input::placeholder{color:#999;font-style:italic}.btn_scan{padding:10px 20px;font-size:1.2rem;font-family:Itim,cursive;color:#fff;background-color:#f90;border:2px solid #fc0;border-radius:10px;cursor:pointer;-webkit-box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:0 4px 6px rgba(0,0,0,.1);-webkit-transition:all .3s ease;transition:all .3s ease}.btn_scan:hover{background-color:#fc0;border-color:#f90;-webkit-box-shadow:0 6px 8px rgba(0,0,0,.2);box-shadow:0 6px 8px rgba(0,0,0,.2)}.btn_scan:active{background-color:#f80;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2)}.btn_clear{padding:10px 20px;font-size:1.2rem;font-family:Itim,cursive;color:#fff;background-color:#f44;border:2px solid #f66;border-radius:10px;cursor:pointer;-webkit-box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:0 4px 6px rgba(0,0,0,.1);-webkit-transition:all .3s ease;transition:all .3s ease}.btn_clear:hover{background-color:#f66;border-color:#f44;-webkit-box-shadow:0 6px 8px rgba(0,0,0,.2);box-shadow:0 6px 8px rgba(0,0,0,.2)}.btn_clear:active{background-color:#c33;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2)}.card_header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:20px;margin-bottom:4px}.card_gender img{width:30px}.content_section{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:20px;background-color:#fff}.in_section,.out_section{padding:10px 20px;width:100%;height:48%;background-color:#f9f9f9;border:2px dashed #fc0;border-radius:10px;-webkit-box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:0 4px 6px rgba(0,0,0,.1);-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.card_container,.in_section,.out_section{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.card_container{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:calc(100% - 200px);height:100%}.button_submit_container{max-width:10%;width:10%;height:60%;background-color:#4caf50;border:2px solid #66bb6a;border-radius:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px}.button_submit_container:hover{background-color:#66bb6a;border-color:#4caf50;-webkit-box-shadow:0 6px 8px rgba(0,0,0,.2);box-shadow:0 6px 8px rgba(0,0,0,.2)}.button_submit_container:active{background-color:#388e3c;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2)}.button_submit_container_checkout{max-width:10%;width:10%;height:60%;background-color:#f44;border:2px solid #f66;border-radius:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px}.button_submit_container_checkout:hover{background-color:#f66;border-color:#f44;-webkit-box-shadow:0 6px 8px rgba(0,0,0,.2);box-shadow:0 6px 8px rgba(0,0,0,.2)}.button_submit_container_checkout:active{background-color:#c33;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2)}.text_checkin{font-size:1.5rem;font-family:Itim,cursive;color:#fff}.btn_checkin{width:25%;height:auto}.btn_checkin img{width:100%;height:auto}.card1{width:100%;height:100%;-webkit-box-flex:1;-ms-flex:1 1 calc(25% - 20px);flex:1 1 calc(25% - 20px);max-width:calc(30% - 20px);max-height:calc(100% - 20px);background-color:#fc0;border:2px solid #f90;border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:Itim,cursive;font-size:1.2rem;color:#333;-webkit-box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:0 4px 6px rgba(0,0,0,.1);padding:10px}.selected{-webkit-box-shadow:0 0 15px #007bff;box-shadow:0 0 15px #007bff;-webkit-transition:.2s;transition:.2s}.card_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.card_title{font-size:1.5rem;font-weight:700;text-align:center;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card_body{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;gap:20px;height:calc(100% - 99px)}.card_body,.card_body_left{display:-webkit-box;display:-ms-flexbox;display:flex}.card_body_left{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}.card_body_left,.card_body_right{width:50%;height:100%;max-width:50%}.card_image{width:100%;max-width:100%;background-color:#fff;border:2px solid #f90;border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.2rem;color:#999}.card_image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card_text{width:100%;text-align:left;font-size:15px;color:#333;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card_footer,.card_text{display:-webkit-box;display:-ms-flexbox;display:flex}.card_footer{margin-top:10px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.card_footer .btn{padding:8px 15px;font-size:1rem;font-family:Itim,cursive;color:#fff;background-color:#f90;border:2px solid #fc0;border-radius:10px;cursor:pointer;-webkit-box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:0 4px 6px rgba(0,0,0,.1);-webkit-transition:all .3s ease;transition:all .3s ease}.card_footer .btn:hover{background-color:#fc0;border-color:#f90;-webkit-box-shadow:0 6px 8px rgba(0,0,0,.2);box-shadow:0 6px 8px rgba(0,0,0,.2)}.card_footer .btn:active{background-color:#f80;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2)}