/*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: -webkit-sticky; position: sticky; top: 0; left: 50%; z-index: 20; background-color: inherit; } .copy { cursor: pointer; } .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: -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; 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 { -webkit-box-sizing: border-box; box-sizing: border-box; width: 80%; margin: 0 10%; margin-bottom: 1.5rem; background: white; border: 0 none; border-radius: 3px; -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); 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: 1.5rem; } .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; -webkit-transition: all 0.4s; transition: all 0.4s; } .nav-list-item:hover::after { opacity: 1; } .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; font-size: .95em; } .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; } */ .history { height: 75vh; overflow: scroll; } .historyList-item { padding: 1rem; display: block; width: 80%; margin: 1rem auto; border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0.9rem; -webkit-box-shadow: 1px 1px 4px 1px #cfcfcf; box-shadow: 1px 1px 4px 1px #cfcfcf; background-color: white; } .historyList-link { text-decoration: none; color: #494949; } .historyList-link:hover { color: #7c7c7c; } .listimg__fr { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin: auto .5rem; } .listimg__fr img { width: 100%; height: 100%; } .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; -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); padding: 20px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 90%; margin: 3rem 5%; /*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%; -webkit-box-sizing: border-box; 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 { -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0; box-shadow: 0 0 0 2px white, 0 0 0 3px #1c7ce0; } #msform .next[disabled] { background-color: grey; } .draft-btn { padding: 10px 5px; background-color: #d1d1d1; display: inline-block; position: absolute; left: 1rem; bottom: 1rem; font-size: 1rem; -webkit-transition: all .3s; transition: all .3s; cursor: pointer; } .draft-btn:hover { background-color: #aaaaaa; } /*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; } p.error-text { bottom: -23px; left: 24px; color: rgba(255, 0, 0, 0.7); font-size: 0.8em; margin-bottom: 0; } #term-error { color: rgba(255, 0, 0, 0.7); font-size: 0.8em; bottom: -23px; left: 24px; } select { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 10px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: montserrat; color: #2c3e50; font-size: 13px; background-color: transparent; } .pl-0 { padding-left: 0; } .terms { font-size: 0.9rem; width: 95%; min-width: 250px; height: auto; overflow: scroll; margin-bottom: 1rem; margin-left: auto; margin-right: auto; border: 1px solid #a3a3a3; 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: 0.5rem 0.75rem; background-color: transparent; border: 1px solid black; margin-top: 0.3rem; } .btn-term-exit { padding: 0.5rem 0.75rem; background-color: transparent; border: 1px solid black; margin-top: 0.3rem; display: block; margin-left: auto; margin-right: auto; margin-bottom: 2rem; } footer { padding: 2rem; padding-top: 0.5rem; } .footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .img_fr { width: 80%; max-width: 850px; min-width: 300px; height: 60px; -o-object-fit: contain; object-fit: contain; -o-object-position: center; 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; } .btn-dismiss { background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); font-weight: bold; color: white; border: 0 none; border-radius: 20px; cursor: pointer; padding: 10px 35px; margin: 10px auto; display: block; } #avatarmega .modal-content { background-color: transparent; border: none; } #avatarmega .modal-title { color: white; } #avatarmega .modal-header { position: absolute; top: -0.5rem; right: 1.5rem; } .linker__box { padding: 0.5rem 1rem; border-radius: 1rem; -webkit-box-shadow: 1px 1px 5px 1px #c9c9c9; box-shadow: 1px 1px 5px 1px #c9c9c9; width: -webkit-max-content; width: -moz-max-content; 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 #a3a3a3; width: 1px; height: 120%; } .item_imgfr { width: 15%; height: 50px; border-radius: 50%; overflow: hidden; margin: auto 0.5rem; } .item_imgfr img { height: 100%; width: 100%; } .content-box { width: 75%; } .box-title { margin-bottom: 0.2rem; cursor: pointer; } .box-title:hover { color: grey; text-decoration: underline; } .box-link { cursor: pointer; } .img_uploader { display: none; } #msform input[type="text"].imgsrc, #msform input[type="text"].txtsrc, #msform input[type="text"].subsrc { width: 80%; } .upload-btn { display: inline-block; position: absolute; left: 0; top: 0; width: 20%; height: 100%; background-color: #75a7dd; background-position: center; background-size: cover; background-image: url(./img/upload_img.png); color: white; padding: 0.4rem 0.5rem; font-size: 0.9rem; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; } .upload-btn img { width: 30px; height: 30px; } .upload-btn:hover { background-color: #3b86d6; } .add, .add-subline, .addsec, .addimg { cursor: pointer; display: inline-block; width: 2rem; height: 2rem; background-color: #67abf3; font-size: 1.2rem; color: white; border-radius: 50%; -webkit-transition: all 0.3s; transition: all 0.3s; } .add:hover, .add-subline:hover, .addsec: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: -webkit-gradient(linear, left top, left bottom, from(#1c7ce0), to(#150051)); background: linear-gradient(to bottom, #1c7ce0, #150051); overflow-x: hidden; -webkit-transition: 0.5s; transition: 0.5s; } .sidenav a { text-decoration: none; font-size: 25px; color: #818181; display: block; -webkit-transition: 0.3s; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .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 { position: relative; 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; background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(16, 68, 142, 0.7)), to(rgba(16, 68, 142, 0.7))); background-image: linear-gradient(to right bottom, rgba(16, 68, 142, 0.7), rgba(16, 68, 142, 0.7)); background-size: cover; background-position: center; overflow: hidden; } .row-img .video { height: 100%; z-index: -1; position: absolute; left: -10%; top: 0; } .row-img .row-img-box { color: white; } .row-img .row-img-txt { position: absolute; bottom: 2rem; color: white; left: 2rem; font-size: 1.3rem; } .row-login { 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; text-align: center; position: relative; } .row-login .title { position: relative; color: #052859; } .row-login .title::after { position: absolute; content: ""; left: 45%; top: 20%; width: 10%; height: 100%; border-bottom: 4px solid #052859; } .row-login .login-top { position: absolute; right: 1rem; top: 1rem; } .row-login .login-top .navbar-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .row-login .login-top .navbar-nav .nav-item { margin: 0 0.5rem; } .row-login .login-top .navbar-nav .nav-item a { color: black; } .navbar .btn-gocreate { background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); color: white; border: 0 none; border-radius: 40px; cursor: pointer; padding: 10px 50px; } .container-bg { position: absolute; width: 600px; height: 400px; right: 0; bottom: 0; z-index: -1; } .container-profile .card-profile { margin-top: 4rem; border-radius: 10px; padding: 2rem; text-align: center; -webkit-box-shadow: 0px 0px 20px 1px #b4b4b4; box-shadow: 0px 0px 20px 1px #b4b4b4; } .container-profile .card-profile img { width: 120px; margin: 1rem auto; } .card-profile-txt { color: #6d6d6d; 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 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .row-img { display: none; } .img-wave { display: none; } .row-login { -webkit-box-pack: center; -ms-flex-pack: center; 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; } } @media screen and (max-width: 767px) { .profile-bgimg { width: 100%; height: 300px; -o-object-fit: cover; object-fit: cover; display: none; } } @media screen and (min-width: 1025px) { .profile-bgimg-m { display: none; } } .navbar { background: none !important; } .arrowdoup { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .arrowdown { cursor: pointer; } .userprofile { position: relative; top: -80px; z-index: 20; } @media screen and (max-width: 767px) { .userprofile { top: 10px; z-index: 0; } } .userprofile .userprofile-content { width: 83vw; } @media screen and (max-width: 767px) { .userprofile .userprofile-content { width: 95vw; } } .userprofile .userprofile-content .user-information .information { width: 50%; margin: 0 auto; } .sidenav { width: 250px; height: 100%; z-index: 50; top: 0; left: 0; overflow-x: hidden; -webkit-transition: 0.5s; transition: 0.5s; text-align: center; } @media screen and (max-width: 767px) { .sidenav { display: none; right: 0; } .content { width: 100%; } } @media only screen and (min-width: 1439px) { .sidenav .sidenav-content { -webkit-transform: scale(1); transform: scale(1); } } @media only screen and (max-width: 1280px) { .sidenav .sidenav-content { margin-top: -50px; -webkit-transform: scale(0.85); transform: scale(0.85); } } @media screen and (max-width: 767px) { .sidenav .sidenav-content .choozmologo { margin-top: 10px; } } @media screen and (min-width: 767px) { .navbar-collapse { display: none !important; color: white; } } .sidenav .sidenav-content .reply { margin-left: 70px; } @media screen and (min-width: 1025px) { .sidenav .sidenav-content .reply { display: none; } } .sidenav hr { background: #fff; opacity: 1 !important; height: 1px; width: 85%; margin: 15px auto; } .sidenav .sidebar { width: 80%; margin: 0 auto; } .sidenav .user { -o-object-fit: cover; object-fit: cover; width: 8vw; } @media screen and (max-width: 767px) { .sidenav .user { width: 30vw; } } .sidenav .user-name { font-size: 1.5rem; } .sidenav .navbar-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .sidenav .navbar-nav .btn-gocreate { font-size: 1.7vmin; background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); color: white; border: 0 none; border-radius: 10px; cursor: pointer; margin: 10px 3px; display: inline; } @media screen and (max-width: 767px) { .sidenav .navbar-nav .btn-gocreate { font-size: 3.5vmin; } } .sidenav .navbar-nav .active { background: -webkit-gradient(linear, left top, right top, from(#0162c8), to(#55e7fc)); background: linear-gradient(90deg, #0162c8, #55e7fc); } .sidenav a { text-decoration: none; font-size: 32px; color: #f1f1f1; display: block; -webkit-transition: 0.3s; transition: 0.3s; } .sidenav a:hover { color: #818181; } .sidenav .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .sidenav .nav-list { color: white; list-style: none; text-align: center; } .sidenav .nav-list .nav-list-item { font-size: 18px; cursor: pointer; position: relative; } .sidenav .nav-list .nav-list-item::after { content: " "; position: absolute; width: 50%; height: 100%; left: 25%; top: 5px; border-bottom: 1px solid white; opacity: 0; -webkit-transition: all 0.4s; transition: all 0.4s; } .sidenav .nav-list .nav-list-item:hover::after { opacity: 1; } .sidenav .right-text { position: absolute; bottom: 0; left: 0; color: #fff; } @media only screen and (max-width: 1280px) { .sidenav .right-text { left: 10px; } } .sidenav .right-text a { font-size: 16px; display: inline; margin: 2px; } .sidenav .right-text a img { -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%); filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%); } @media only screen and (max-width: 1280px) { .sidenav .right-text p { font-size: 16px; } } .footer { background-color: #F0F0F0; padding: 3rem; padding-left: 13rem; } @media screen and (max-width: 767px) { .footer { padding: 0.5rem; text-align: center; padding-top: 3rem; padding-left: 0; } } .footer h5 { font-size: 16px; font-weight: 700; color: #555555; } .footer .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer .footer-aigirl { font-weight: 600; font-size: 1.5rem; margin-top: 1rem; margin-bottom: 2.5rem; color: #555555; } @media screen and (max-width: 767px) { .footer .footer-aigirl { font-size: 1.3rem; margin-bottom: 2rem; } } .footer .footer-follow { font-size: 1rem; margin-bottom: 1rem; } @media screen and (max-width: 767px) { .footer-socials { margin-bottom: 2rem; } } .footer .footer-socials a { margin-right: 5px; } @media screen and (max-width: 767px) { .footer .footer-socials a { margin-right: 10px; } } @media screen and (max-width: 767px) { .footer-contacts { font-size: 14px; } } @media screen and (max-width: 576px) { #msform input[type="text"].imgsrc, #msform input[type="text"].txtsrc, #msform input[type="text"].subsrc { width: 100%; } #msform .input-sec>input[type="text"]:nth-of-type(1) { margin-top: 77%; } #msform .input_eng .input-sec>input[type="text"]:nth-of-type(1) { margin-top: 90%; } .upload-btn { width: 100%; height: 60%; } .input_eng .upload-btn { height: 50%; } } .home-btn { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%); } /*# sourceMappingURL=style.css.map */