login.css 16.25 KiB
@import "./fonts/notosans/notosans.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap');
body{
    font-family: "Noto Sans";
    position: relative;
    letter-spacing: 0.2px;
    /* background: #edf4f9; */
.fullpage-background-image{
    width: 100% !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #EDF4F9;
    display: flex;
    align-items: center;
    min-height: auto;
.fs-14{
    font-size: 14px !important;
.fs-22{
    font-size: 22px !important;
.passwdchk {
    margin-top: 10px;
    font-size: 10.0002px!important;
    color: #999999;
.passwderr {
    margin-top: 10px;
    font-size: 10.0002px!important;
    color: #ff6979 !important;
.confpasswderr {
    margin-top: 10px;
    color: #ff6979 !important;
.ui.button:focus{
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.16) !important;
.w-100 {
    width: 100px !important;
.w-95 {
    width: 95px !important;
.activeLabelColor{
    color:#024f9d !important;
input{
    border: 1px solid #9B9B9B !important;
input:focus{
    border: 1px solid rgba(236,73,51,1) !important;
.signInWithGoogle{
    position: absolute;
    left: 1px;
    top: 1px;
    width: 34px;
.ui.basic.blue.button.googleButton{
    color: #333 !important;
    vertical-align: middle;
    line-height: 18px;
.ui.basic.blue.button.googleButton:hover,
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
.ui.basic.blue.button.googleButton:focus{ color: #024f9d !important; } .ui.basic.blue.button.stateButton{ margin-top: 10px !important; box-shadow: 0 0 0 1px #2CA58D inset!important; } .ui.basic.blue.button.stateButton:hover, .ui.basic.blue.button.stateButton:focus{ color: #2CA58D !important; } .ui.fluid.large.submit.button { color: #F9F9F9; } .or{ color: #4E5255; background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc); background-size:45% 1px; background-position:center left,center right; background-repeat:no-repeat; font-weight: 700; font-size: 12px; opacity: 50%; } .signUpMsg{ font-size: 12px; line-height: 17px; text-align: left; /*margin-top: auto !important;*/ margin-bottom: 10px !important; display: flex; align-items: baseline; justify-content: space-between; } .formMsg{ font-size: 16px; line-height: 22px; } .signInHead{ color: #024F9D; font-size: 24px; font-weight: bold; letter-spacing: 0; line-height: 32px; text-align: center; } p.subtitle { opacity: 1; color: rgba(0,0,0,1); font-size: 24px; font-weight: 700; font-style: normal; letter-spacing: 0px; text-align: center; margin-bottom: 8px; } .ui.form .field>label { font-size: 14px; font-weight: 500; } .forgetPasswordLink{ color: #024f9d; font-size: 12px; line-height: 17px; float: right; } .forgetPasswordLink:hover, .forgetPasswordLink:focus{ color: #002e50; outline: none;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
cursor: pointer; /* font-weight:bold; */ } .textCenter { text-align: center !important; } .textRight{ text-align: right !important; } .mb-16{ margin-bottom: 16px !important; } .mb-24{ margin-bottom: 24px !important; } .mb-28{ margin-bottom: 28px !important; } .mb-0{ margin-bottom: 0px !important; } .mb-4 { margin-bottom: 4px !important; } .ml-4 { margin-left: 4px !important; } .mb-8 { margin-bottom: 8px !important; } .mt-4 { margin-top: 4px !important; } .mt-8 { margin-top: 8px !important; } .mt-46{ margin-top: 46px; } .mt-40{ margin-top: 40px; } .mt-8 { margin-top: 8px !important; } .mt-16 { margin-top: 16px !important; } .mt-24 { margin-top: 24px !important; } .mb-18 { margin-bottom: 18px !important; } .mt-90{ margin-top: 90px; } .mt-65{ margin-top: 65px !important; } .mt-127{ margin-top: 127px; } .mt-27{ margin-top: 27px; } .mb-36 { margin-bottom: 36px !important; }
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
.mt-36{ margin-top: 36px !important; } .mb-30 { margin-bottom: 30px !important; } .mt-30{ margin-top: 30px !important; } .mb-56{ margin-bottom: 56px; } .mt-76{ margin-top: 76px; } .backToLogin { color: #E76026 !important; font-size: 14px; line-height: 19px; margin-top: 10px; display: block; } .logo-image{ max-width: 100% !important; width: auto !important; max-height: 56px !important; } .button{ color: #F9F9F9 !important; font-size: 14px; line-height: 19px; background-color:#2CA58D !important; } .ui.text.success{ color: #008840; } .ui.text.warning{ color: #e55a28; } .ui.text.error{ color:#A80011; font-size: 14px; display: block; margin-top: 8px;margin-bottom: 8px; } .ui.text.info{ color:#024f9d; } .hide{ display: none !important; } i.icon.eye.slash:before { content: "\f070"; } .mt-45{ margin-top: 45px; } a{ color: #024f9d !important; } .registerLink{ opacity: 1; font-size: 14px; font-weight: 700; font-style: normal; letter-spacing: 0px; text-align: right; } .registerLink:hover,
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
.registerLink:focus{ font-weight: bold; outline:none; cursor: pointer; } .register-btn:hover.registerLink{ color: rgba(236,73,51,1); } .register-btn { color: rgba(236,73,51,1); } .pointer { cursor: pointer; } .ui.blue.button{ box-shadow: 0 0 0 1px #024f9d inset!important; } .smsinput{ letter-spacing: 3px; } .ui.form input:not([type]), .ui.form input[type=date], .ui.form input[type=datetime-local], .ui.form input[type=email], .ui.form input[type=file], .ui.form input[type=number], .ui.form input[type=password], .ui.form input[type=search], .ui.form input[type=tel], .ui.form input[type=text], .ui.form input[type=time], .ui.form input[type=url]{ font-family: inherit !important; } .loginupdate .ui.text.warning { color: #333; } button,input,textarea,optgroup,select, h1, h2, h3, h4, h5, .ui.header, .ui.text.container, .ui.input input, .ui.list .list>.item .header, .ui.list>.item .header, .ui.steps .step .title, .ui.ordered.steps .step:before, .ui.ordered.steps .step.completed:before, .ui.message .header, .ui.sortable.table thead th:after, .ui.card>.content>.header, .ui.cards>.card>.content>.header, .ui.items>.item>.content>.header, .ui.statistic>.value, .ui.statistics .statistic>.value, .ui.statistic>.label, .ui.statistics .statistic>.label, .ui.accordion .title:not(.ui), .ui.checkbox label, .ui.modal>.header, .ui.popup>.header, .ui.search>.results .result .title, .ui.search>.results>.message .header, .ui.button, .ui.form input:not([type]), .ui.form input[type=date], .ui.form input[type=datetime-local], .ui.form input[type=email], .ui.form input[type=file], .ui.form input[type=number], .ui.form input[type=password], .ui.form input[type=search], .ui.form input[type=tel], .ui.form input[type=text], .ui.form input[type=time], .ui.form input[type=url], .ui.menu, .ui.dropdown, .ui.category.search>.results .category>.name {
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
font-family: inherit; } .height-fix{ min-height:90vh; display: flex !important; flex-direction: column; justify-content: center; } .cursor-pointer { cursor: pointer } .width-100 { width: 100%; } /* Design System Utilities */ /* 1. Button Utilities */ .sb-btn { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 0; display: inline-block; border: 1px solid; color: #fff; cursor: pointer; min-width: 64px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; position: relative; text-transform: inherit; text-decoration: none; } .sb-btn-normal { padding: 8px 16px; height: 36px; font-size: 12px; } .sb-btn-primary { border-color: #024f9d; background-color: #024f9d; color: white; } .sb-btn-primary:hover { background-color: #FFF5F3; border-color: rgba(236,73,51,1); color: rgba(236,73,51,1); } .sb-btn-success { border-color: #07bc81; background-color: #07bc81; color: white; } .sb-btn-success:hover { background-color: #008840; border-color: #008840; }
421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
.sb-btn-outline-primary { background-color: white; color: #024f9d; border-color: #024f9d; } .sb-btn-outline-primary:hover { border-color: #002e50; color: #002e50; background-color: #edf4f9; } /* Margin Utilities */ .mb-16 { margin-bottom: 16px !important; } .my-16 { margin: 16px 0 !important; } .mx-16 { margin: 0 16px !important; } /* Flex Utilities */ .d-flex { display: flex !important; } .flex-ai-center { align-items: center !important; } .flex-jc-center { justify-content: center !important; } .instruction p { font-size:14px; } .line-height-normal { line-height: normal; } /* new layout */ #kc-form-wrapper { display: flex !important; align-items: center; justify-content: center; height: 100%; padding: 32px; /* background-image: linear-gradient(180deg, rgba(246, 170, 156, 1) 0%, rgba(253, 227, 222, 1) 100%) !important; */ } .container-wrapper { max-width: 328px; width:100%; margin:0 auto; min-height: auto; display: flex; flex-direction: column; justify-content: center; } .remember-forgot-row { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
.forgot-password { font-size:11px; color:#333; display: flex; justify-content: space-between; width: 100%; align-items: baseline; } .forgot-password p{ opacity: 1; color: rgba(0,0,0,1); font-size: 14px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-align: left; } .forgot-password:hover { color:#024f9d; text-decoration: underline; cursor: pointer; } .sb-checkbox, .sb-radio-btn-checkbox { position: relative; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 0; font-style: normal; line-height: 1rem; min-height: 1rem; min-width: 1rem; } .sb-checkbox input[type="checkbox"] { outline: 0; opacity: 0; } .sb-checkbox input[type="radio"], .sb-checkbox input[type="checkbox"], .sb-radio-btn-checkbox input[type="radio"], .sb-radio-btn-checkbox input[type="checkbox"] { cursor: pointer; position: absolute; top: 0; left: 0; opacity: 0; z-index: 3; width: 1rem; height: 1rem; } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } .sb-checkbox label, .sb-radio-btn-checkbox label { cursor: pointer; position: relative; display: block; padding-left: 1.5rem; outline: 0; font-size: 0.8571rem; font-weight: normal; margin-right: 0.5rem; } .sb-checkbox.sb-checkbox-secondary input:checked ~ label:before { background-color: #00c786; border-color: #00c786; border-radius: 50%; } .sb-checkbox input:checked ~ label:before { background-color: #024f9d; border-color: #024f9d; }
561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
.sb-checkbox label:before { border-radius: 0.25rem; } .sb-checkbox label:before, .sb-radio-btn-checkbox label:before { content: "\2713"; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; background: #fff; transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; border: 0.0625rem solid #999; border-radius: 50%; color: #999; padding-left:1px; } .sb-checkbox input:checked ~ .box:after, .sb-checkbox input:checked ~ label:after { content: "\2713"; border-radius: 0.25rem; font-weight: normal; color: #fff !important; } .sb-checkbox input:checked ~ .box:after, .sb-checkbox input:checked ~ label:after { opacity: 1; } .sb-checkbox label:after { position: absolute; font-size: 0.8571rem; top: 0; left: 0; width: 1rem; height: 1rem; text-align: center; opacity: 0; color: #fff; transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; } .sb-btn-outline-gray { background-color: #fff; color: #024f9d; border-color:#999; } .back-btn { position: absolute; left: 8px; top: 16px; min-width: auto; display: flex; justify-content: center; align-items: center; } .pull-left { float:left; } .pull-right { float:right; } .sb-btn-link { background: none; border: 0; } .sb-btn-link-primary { background: none; border: 0px; color: #024f9d; }
631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700
@media screen and (min-width: 768px) { body{ background-size: cover; background-repeat: no-repeat; min-height: 100vh; background: url(../img/bg.png) no-repeat center center fixed; background-size: cover; background-color: #000; } .fullpage-background-image{ max-width: 1008px !important; width:100%; padding: 40px !important; /* box-shadow: 0 2px 16px 0 rgba(0,0,0,0.2) !important; */ border-radius: 8px !important; min-height: 600px; } #kc-form-wrapper { height: 100vh; padding: 32px; background: none; } .container-wrapper { min-height: auto; } } .btn-signInWithGoogle { background: #0B51C1; border: #0B51C1; } /* tab accessibility css fix */ *:focus-visible{ border: 1px #fe0000 solid !important; border-radius: 5px; outline: none; } input:focus-visible{ outline: 1px #fe0000 solid !important; border-radius: 5px; } .kc-container-wrapper{ /* opacity: 1; */ /* background-image: linear-gradient(90deg, rgba(236, 80, 51, 1) 0%, rgba(253, 235, 232, 1) 100%); */ } .fullpage-background-image { background: #ffffff; max-width: 661px !important; width: 100%; padding: 40px !important; /* box-shadow: 0 2px 16px 0 rgba(0,0,0,0.2) !important; */ border-radius: 8px !important; min-height: 480px; opacity: 1; } .activeLabelColor{ color: #000000 !important; } .forgetPasswordLink{ color: #024f9d; font-size: 12px; line-height: 17px; float: right; color: rgba(236,73,51,1) !important; font-size: 14px; font-weight: 700; font-style: normal; letter-spacing: 0px; text-align: right; display: block !important; } .sb-btn-primary{
701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764
border-color: rgba(236,73,51,1); background-color: rgba(236,73,51,1); color: white; opacity: 1; color: rgba(255,255,255,1); font-size: 14px; font-weight: 400; font-style: normal; letter-spacing: 0px; text-align: center; } header .navigation { display: flex; justify-content: space-between; align-items: center; position: fixed; min-height: 80px; max-height: 80px; min-width: 100%; z-index: 10; background: white; border-bottom: 2px solid white; } .register-lbl { font-size: 11px; color: #333; display: flex; justify-content: space-between; width: 100%; align-items: baseline; } header .navigation .logo{ margin-left: 20px; } header .navigation .logo img { width: 291px; height: 48px; } header .navigation .logo h1{ color: #b1d4e0; font-size: 30px; line-height: 38px; } .info { opacity: 1; color: rgba(0,0,0,0.8); font-family: "NotoSans"; font-size: 14px; font-weight: 400; font-style: normal; letter-spacing: 0px; } span.required { color: #e55a28; font-size: 14px; }