/*custom font*/ @import url(https://fonts.googleapis.com/css?family=Montserrat); /*basic reset*/ * {margin: 0; padding: 0;} html { min-height: 100%; height: auto; /*Image only BG fallback*/ /*background = gradient + image pattern combo*/ /* background: linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */ } body { font-family: 'Montserrat', sans-serif; background-color: white; font-size: 1.05rem; } .ml { margin-left: 10px; } .mr { margin-right: 10px; } .mb { margin-bottom: 12px; } .top { margin-top: 20px; position: sticky; top: 0; left: 50%; z-index: 20; background-color: inherit; } .navbar { background-color: white; } /* .imf { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; } */ .img_banner { background-image: url('images/banner_top1.jpg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 100%; height: 65px; } /*form styles*/ .img_logo { display: inline-block; margin: 0 auto; margin-bottom: 10px; } .title__block { display: flex; justify-content: center; align-items: center; margin: 0px auto; } .sub-logo { display: inline-block; font-weight: 700; font-size: 1.4rem; color: white; } .slogan { display: block; font-weight: 700; font-size: 1.2rem; color: white; } .notice_card { box-sizing: border-box; width: 80%; margin: 0 10%; margin-bottom: 1.5rem; background: white; border: 0 none; border-radius: 3px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 10px 20px; line-height: 1.5rem; } #myProgress { width: 100%; background-color: #ddd; } #myBar { width: 10%; height: 30px; background-color: #1C7CE0; text-align: center; line-height: 30px; color: white; } .go_title { color: white; font-family: 'Montserrat', sans-serif; padding: 1rem; } .nav-list { color: white; margin-top: 3rem; } .nav-list-item { font-size: 1.2rem; cursor: pointer; position: relative; } .nav-list-item::after { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-bottom: 1px solid white; opacity: 0; transition: all .4s; } .nav-list-item:hover::after { opacity: 1; } .right-text { position: absolute; bottom: 0rem; } .loader { position: absolute; top: 30%; left: 45%; } .imgfr { width:90px; height: 90px; border-radius: 50%; overflow: hidden; margin: 1rem auto 0 auto; } .card-title { font-family: 'Montserrat', sans-serif; } .strong { font-weight: 600; } .card { border: none; position: relative; } .zoomin { display: none; position: absolute; bottom: 0; left: 0; } /* .history-modal { height: 80vh; } .history-modal .modal-content{ height: 80vh; } .history-modal .modal-conten .modal-terms { height: 90%; overflow: scroll; } */ .historyList-item { padding: 1rem; display: block; width: 80%; margin: 1rem auto; border: 1px solid rgb(177, 177, 177); border-radius: 10px; text-align: center; } .historyList-link { text-decoration: none; color: rgb(73, 73, 73); } .historyList-link:hover { color: rgb(124, 124, 124); } .content { width: calc(100% - 250px); } /*form styles*/ #msform { max-width: 1000px; min-width: 370px; margin: 50px auto; margin-bottom: 20px; text-align: center; position: relative; } #msform fieldset { background: white; border: 0 none; border-radius: 3px; box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 20px 30px; box-sizing: border-box; width: 80%; margin: 3rem 10%; /*stacking fieldsets above each other*/ position: relative; } /*Hide all except first fieldset*/ /*inputs*/ #msform input[type="text"], #msform textarea, #msform input[type="email"] { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 16px; width: 100%; box-sizing: border-box; font-family: montserrat; color: #2C3E50; font-size: 14px; } /*buttons*/ #msform .action-button { width: 100px; background: #1C7CE0; font-weight: bold; color: white; border: 0 none; border-radius: 1px; cursor: pointer; padding: 10px 5px; margin: 10px auto; display: block; } #msform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0; } #msform .next[disabled] { background-color: grey; } /*headings*/ .fs-title { font-size: 15px; text-transform: uppercase; color: #2C3E50; margin-bottom: 10px; } .fs-subtitle { display: inline-block; font-weight: normal; font-size: 18px; color: #666; margin-bottom: 20px; padding-bottom: 3px; border-bottom: 2px solid #1C7CE0; } .fs-label { display: block; text-align: left; margin-bottom: 8px; } .fs-label > i { margin-right: 3px; } /*progressbar*/ #progressbar { margin-bottom: 30px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: black; text-transform: uppercase; font-size: 12px; width: 33.33%; float: left; position: relative; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 12px; color: #333; background: white; border-radius: 3px; margin: 0 auto 5px auto; } /*progressbar connectors*/ #progressbar li:after { content: ''; width: 100%; height: 2px; background: white; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/ } #progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ #progressbar li.active:before, #progressbar li.active:after{ background: #27AE60; color: white; } p.error-text { bottom: -23px; left: 24px; color: rgba(255, 0, 0, .7); font-size: .8em; margin-bottom: 0; } #term-error { color: rgba(255, 0, 0, .7); font-size: .8em; bottom: -23px; left: 24px; } select { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 10px; width: 100%; box-sizing: border-box; font-family: montserrat; color: #2C3E50; font-size: 13px; background-color: transparent; } .pl-0 { padding-left: 0; } .terms { font-size: .9rem; width: 95%; min-width: 250px; height: auto; overflow: scroll; margin-bottom: 1rem; margin-left: auto; margin-right: auto; border: 1px solid rgb(163, 163, 163); line-height: 1.5rem; } .term-link a { text-decoration: none; color: black; } .h2 { text-align: center; font-size: 1.2rem; font-weight: 500; margin-top: 2rem; } .left_align { font-size: 18px; text-align: left; } #overlay { position: fixed; /* Sit on top of the page content */ display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2; cursor: pointer; } .thankyou { margin: auto; min-width: 350px; height: 250px; margin-top: 190px; background: #fff; padding: 15px 20px; line-height: 25px; border-radius: 4px; text-align: center; } .thankyou input { margin-top: 40px; } .thankyou h3 { font-size: 2rem; font-weight: 700; color: #21ba45; line-height: 2.5rem; margin-bottom: 1.5rem; } .check_button { display: none; } .fs-label-type { background: transparent; padding: 5px; border: 1px solid black; border-radius: 5px; display: inline-block; } .check_button:checked + .fs-label-type{ background-color: #27AE60; color: white; padding: 5px; border: 1px solid #27AE60; border-radius: 5px; } input[type="checkbox"] { display: none; } #checker1, #checker2 { display: inline; } .fs-label-info { background: transparent; padding: 5px; border: 1px solid black; border-radius: 5px; display: inline-block; margin-bottom: 8px; } input[type="radio"] { display: none; } input[type="radio"]:checked + .fs-label-info { background-color: #27AE60; color: white; padding: 5px; border: 1px solid #27AE60; border-radius: 5px; } input[type="checkbox"]:checked + .fs-label-info { background-color: #27AE60; color: white; padding: 5px; border: 1px solid #27AE60; border-radius: 5px; } .btn-exit { padding: .5rem .75rem; background-color: transparent; border: 1px solid black; margin-top: .3rem; } .btn-term-exit { padding: .5rem .75rem; background-color: transparent; border: 1px solid black; margin-top: .3rem; display: block; margin-left: auto; margin-right: auto; margin-bottom: 2rem; } footer { padding: 2rem; padding-top: .5rem; } .footer { display: flex; justify-content: center; } .img_fr { width: 80%; max-width: 850px; min-width: 300px; height: 60px; object-fit: contain; object-position: center; } .img_fr img { width: 100%; height: 90%; } #msform #userid, #msform #area { height: 0; padding: 0; margin: 0; border: none; } #msform input[type="text"].error { border-color: red; }