|
|
@@ -0,0 +1,925 @@
|
|
|
+@charset "UTF-8";
|
|
|
+/*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;
|
|
|
+}
|
|
|
+
|
|
|
+.card.active {
|
|
|
+ border: 1px solid gray;
|
|
|
+}
|
|
|
+
|
|
|
+.card.active::before {
|
|
|
+ position: absolute;
|
|
|
+ content: "✓";
|
|
|
+ bottom: 0;
|
|
|
+ right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.zoomin {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.script_err {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+/* .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;
|
|
|
+ display: flex;
|
|
|
+ font-size: .9rem;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ margin-left: 2rem;
|
|
|
+ margin-right: 2rem;
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+#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;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+#avatarmega .modal-content {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+#avatarmega .modal-title {
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+#avatarmega .btn-close {
|
|
|
+ background: none;
|
|
|
+}
|
|
|
+
|
|
|
+#avatarmega .modal-header {
|
|
|
+ position: absolute;
|
|
|
+ top: -.5rem;
|
|
|
+ right: 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.linker__box {
|
|
|
+ padding: .5rem 1rem;
|
|
|
+ border-radius: 1rem;
|
|
|
+ box-shadow: 1px 1px 5px 1px rgb(201, 201, 201);
|
|
|
+ width: max-content;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.linker__box p {
|
|
|
+ margin-bottom: 0;
|
|
|
+ color: gray;
|
|
|
+}
|
|
|
+
|
|
|
+.linker__box i {
|
|
|
+ color: gray;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.linker__box i::after {
|
|
|
+ position: absolute;
|
|
|
+ content: " ";
|
|
|
+ right: -5px;
|
|
|
+ top: -10%;
|
|
|
+ border-right: 2px solid rgb(163, 163, 163);
|
|
|
+ width: 1px;
|
|
|
+ height: 120%;
|
|
|
+}
|
|
|
+
|
|
|
+.item_imgfr {
|
|
|
+ width: 15%;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: auto .5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.item_imgfr img {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.content-box {
|
|
|
+ width: 75%;
|
|
|
+}
|
|
|
+
|
|
|
+.box-title {
|
|
|
+ margin-bottom: .2rem;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.box-title:hover {
|
|
|
+ color: grey;
|
|
|
+ text-decoration: underline;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.box-link {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.img_uploader {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+#msform input[type="text"].imgsrc {
|
|
|
+ width: calc(100% - 8rem);
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-btn {
|
|
|
+ display: inline-block;
|
|
|
+ width: 6rem;
|
|
|
+ background-color: #75a7dd;
|
|
|
+ color: white;
|
|
|
+ padding: .4rem .5rem;
|
|
|
+ font-size: .9rem;
|
|
|
+ border-radius: 3px;
|
|
|
+ transition: all .3s;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-btn img{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-btn:hover {
|
|
|
+ background-color: #3b86d6;
|
|
|
+}
|
|
|
+
|
|
|
+.add, .addimg {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ width: 2rem;
|
|
|
+ height: 2rem;
|
|
|
+ background-color: #67abf3;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ transition: all .3s;
|
|
|
+}
|
|
|
+.add:hover, .addimg:hover {
|
|
|
+ background-color: #398ee9;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+body {
|
|
|
+ font-family: "Lato", sans-serif;
|
|
|
+}
|
|
|
+.sidenav {
|
|
|
+ height: 100%;
|
|
|
+ width: 250px;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: linear-gradient(to bottom, #1C7CE0, #150051);
|
|
|
+ overflow-x: hidden;
|
|
|
+ transition: 0.5s;
|
|
|
+}
|
|
|
+
|
|
|
+.sidenav a {
|
|
|
+ text-decoration: none;
|
|
|
+ font-size: 25px;
|
|
|
+ color: #818181;
|
|
|
+ display: block;
|
|
|
+ transition: 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.sidenav a:hover {
|
|
|
+ color: #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+.sidenav .closebtn {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 25px;
|
|
|
+ font-size: 36px;
|
|
|
+ margin-left: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.container-login {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ grid-gap :7rem;
|
|
|
+ padding: 0 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar-nav button {
|
|
|
+ background: white;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+.img-wave {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100%;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+
|
|
|
+.img-wave-profile {
|
|
|
+ height: 80%;
|
|
|
+}
|
|
|
+
|
|
|
+.row-img {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.row-login {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content {
|
|
|
+ width: 80%;
|
|
|
+ min-width: 350px;
|
|
|
+}
|
|
|
+
|
|
|
+.link_privacy {
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content img {
|
|
|
+ height: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+.row-img img {
|
|
|
+ width: 450px;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content .form-floating input{
|
|
|
+ border: none;
|
|
|
+ border-bottom: 2px solid #d9d9d9;
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content .form-floating input:focus{
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content #btn_login {
|
|
|
+ background: linear-gradient(90deg, #0162c8, #55e7fc);
|
|
|
+ font-weight: bold;
|
|
|
+ color: white;
|
|
|
+ border: 0 none;
|
|
|
+ border-radius: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 10px 50px;
|
|
|
+ margin: 10px auto;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content #btn_login:hover {
|
|
|
+ box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content .nav-tabs {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content .nav {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content .nav-tabs .nav-link {
|
|
|
+ color: grey;
|
|
|
+}
|
|
|
+
|
|
|
+.login-content .nav-tabs .nav-link.active {
|
|
|
+ border-color: #fff;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+
|
|
|
+.navbar .btn-gocreate {
|
|
|
+ background: linear-gradient(90deg, #0162c8, #55e7fc);
|
|
|
+ color: white;
|
|
|
+ border: 0 none;
|
|
|
+ border-radius: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 10px 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.container-profile {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ overflow-y: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.container-bg {
|
|
|
+ position: absolute;
|
|
|
+ width: 600px;
|
|
|
+ height: 400px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.container-profile .card-profile {
|
|
|
+ width: 25%;
|
|
|
+ min-width: 320px;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 4rem;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 2rem;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0px 0px 20px 1px rgb(180, 180, 180);
|
|
|
+}
|
|
|
+
|
|
|
+.container-profile .card-profile img {
|
|
|
+ width: 120px;
|
|
|
+ margin: 1rem auto;
|
|
|
+}
|
|
|
+
|
|
|
+.card-profile-txt {
|
|
|
+ color: rgb(109, 109, 109);
|
|
|
+ font-size: 1.2rem;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.card-profile-cnt {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 900px){
|
|
|
+ .container-login{
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-img{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-wave {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-login{
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .container-bg {
|
|
|
+ width: 400px;
|
|
|
+ height: 300px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-height: 450px) {
|
|
|
+ .sidenav {padding-top: 15px;}
|
|
|
+ .sidenav a {font-size: 18px;}
|
|
|
+}
|
huaisianhuang