/* reset code */ html { scroll-behavior: smooth;--radius: 5px; } * { box-sizing: border-box; font-family: 'Kumbh Sans', sans-serif; } .panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc} .panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc} .panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b} .panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc} .panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px} .panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit} .modal-open{ overflow: hidden; } button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0;opacity: .5;} /*button样式开始*/ .btn{ transition-property: all; transition-duration: .3s; padding: 0.45rem 2.152rem; font-size: 0.92rem; font-weight: bold; border-radius: var(--radius); } .btn.focus, .btn:focus, .btn:hover{ box-shadow: 0px 1px 5px 0px rgba(28, 28, 28, 0.28); } .btn-link:focus, .btn-link:hover{ box-shadow:none; } .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus{ outline: none; } .btn.active, .btn:active{ -webkit-box-shadow: none; box-shadow: none; } .btn-circle{ border-radius: var(--radius); padding: 10px 22px; } .btn-pill-left { border-radius: var(--radius); } .btn-pill-right { border-radius: var(--radius); } /*默认样式开始*/ .btn-default{ border-color: #bbbbbb; color:#666; background-color: #FFFFFF; margin: 5px; } .btn-default:hover{ color:#666666; background-color: #e8fff5; } .btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover{ color: #bbbbbb; border-color: #bbbbbb; background-color: #f2f2f2; } .btn-default:focus{ background-color: #FFFFFF; border-color: #bbbbbb; color:#666666; border: 1px solid #bbb; } .btn-default:active{ background-color: #f2f2f2; border-color: #bbbbbb; color: #bbbbbb; text-shadow: 0px 1px 0px rgba(255, 255, 255, 1); } .btn-default-3d{ box-shadow: 0px 2px 0px 0px rgba(187, 187, 187, 1); position:relative } .btn-default-3d:active{ box-shadow: 0px 0px 0px 0px rgba(187, 187, 187, 1); top: 1px; background-color: #f2f2f2; border-color: #bbbbbb; color: #bbbbbb; text-shadow: 0px 1px 0px rgba(255, 255, 255, 1); } /*边框默认样式*/ .btn-default-outline{ background: none; border: 1px solid #cccccc; color: #666; transition:0.5s linear; } .btn-default-outline:hover{ background: #F2F2F2; border: 1px solid #CCCCCC; color: #666; } .btn-default-outline:focus{ background:#DDDDDD; border: 1px solid #CCCCCC; color: #666; } .btn-default-outline:active{ background-color: #DDDDDD; border: 1px solid #CCCCCC; color: #666; text-shadow: 0rem 1rem 0rem rgba(255, 255, 255, 0.20); } /*成功样式*/ .btn-success{ color:#FFFFFF; background-color: #00aa63; border-color: transparent; } .btn-success-3d{ box-shadow: 0 3px 0 #009253, 0 4px 1px rgba(0, 0, 0, 0.3); position: relative; top: 0px; } .btn-success:hover{ color:#FFFFFF; background-color: #05be6d; border-color: transparent; } .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover{ background-color: #05be6d; color: #009253; border-color: transparent; } .btn-success:focus{ color:#FFFFFF; background-color: #00aa63; border-color: transparent; } .btn-success-3d:focus{ color:#FFFFFF; background-color: #00aa63; box-shadow: 0 3px 0 #009253, 0 4px 1px rgba(0, 0, 0, 0.3); } .btn-success:active{ background-color: #05be6d; color: #009253; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.20); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .15s; transition-duration: .15s; } .btn-success-3d:active{ box-shadow: 0 1px 0 #009253, 0 1px 1px rgba(0, 0, 0, 0.2); top: 2px; background-color: #05be6d; color: #009253; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.20); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .15s; transition-duration: .15s; } /*边框成功样式*/ .btn-success-outline{ background: none; border: 1px solid #00aa63; color: #00aa63; } .btn-success-outline:hover{ background:#05be6d; border: 1px solid #05be6d; color: #FFFFFF; } .btn-success-outline:focus{ background:#05be6d; border: 1px solid #05be6d; color: #FFFFFF; } .btn-success-outline:active{ background-color: #05be6d; color: #009253; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.20); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .15s; transition-duration: .15s; } /*小图标*/ .btn .icon { width: 1em; margin: -1px 5px 0; line-height: inherit; text-align: center; } .btn-icon, .btn.icon { padding: 10px; line-height: 1em; } .btn-icon.btn-xs, .btn.icon.btn-xs { padding: 4px; font-size: 12px; } .btn-icon.btn-sm, .btn.icon.btn-sm { padding: 8px; font-size: 14px; } .btn-icon.btn-lg, .btn.icon.btn-lg { padding: 12px; font-size: 20px; } .btn-icon.disabled, .btn.icon.disabled { color: #a3afb7; } .btn-icon .icon { margin: -1px 0 0; } .modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0} .modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)} .modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)} .modal-open .modal{overflow-x:hidden;overflow-y:auto} .modal-dialog{position:relative;width:auto;margin:10px} .modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)} .modal-backdrop{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5} .modal-header{min-height:16.43px;padding:15px;}.modal-header .close{margin-top:-2px;}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px} .modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px} .modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll} @media (min-width:768px){ .modal-dialog{width:600px;margin:30px auto} .modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)} .modal-sm{width:300px} } @media (min-width:992px){ .modal-lg{width:900px} } .modal-open .in.modal{ display: -moz-flex!important; display: -webkit-flex!important; display: -ms-flexbox!important; display:flex !important; } .modal .modal-header,.modal-open .modal .modal-body{ clear:both; } .modal .modal-dialog{ margin: auto; padding: 30px 0; } .modal .modal-footer{ border: 0; padding: 0 20px 15px 20px; } .error-msg{ color: #FF0000; } .help-msg{ color: #FF0000; } /* wrapper */ .wrapper { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .wrapper { max-width: 540px; } } @media (min-width: 768px) { .wrapper { max-width: 720px; } } @media (min-width: 992px) { .wrapper { max-width: 960px; } } @media (min-width: 1200px) { .wrapper { max-width: 1140px; } } /* /wrapper */ .d-grid { display: grid; } button, input, select { -webkit-appearance: none; outline: none; } button, .btn, select { cursor: pointer; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; padding: 0; } form, fieldset { border: 0; padding: 0; margin: 0; } /*-- //Reset-Code --*/ /*-- form styling --*/ .signinform { padding: 40px 40px; justify-content: center; display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; min-height: 100vh; } input[type="text"], input[type="email"], input[type="Password"] { font-size: 17px; font-weight: 500; color: #999; text-align: left; width: 100%; display: inline-block; box-sizing: border-box; border: none; outline: none; background: transparent; letter-spacing: .5px; } .input-group { margin-bottom: 25px; padding: 0px 0px; border-bottom: 1px solid #e5e5e5; position: relative; } .btn-block { display: block; width: 50%; margin: 0 auto; } .btn:active { outline: none; } .btn-primary { color: #fff; background-color: #6769e8; margin-top: 30px; outline: none; width: 100%; padding: 15px 15px; cursor: pointer; font-size: 18px; font-weight: 600; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border: none; text-transform: capitalize; } .btn-primary:hover { background-color: #4d50c4; color: #fff; } .form-row.bottom { display: flex; justify-content: space-between; } .form-row .form-check input[type="checkbox"] { display: none; } .form-row .form-check input[type="checkbox"]+label:before { border-radius: 3px; border: 1px solid #e2e2e2; color: transparent; content: "\2714"; display: inline-block; height: 18px; margin-right: 5px; transition: 0.2s; vertical-align: inherit; width: 18px; text-align: center; line-height: 20px; } .form-row .form-check input[type="checkbox"]:checked+label:before { background-color: #4d61fc; border-color: #4d61fc; color: #fff; } .form-row .form-check input[type="checkbox"]+label { cursor: pointer; color: #888; } .w3_info h2 { display: inline-block; font-size: 25px; line-height: 35px; margin-bottom: 20px; font-weight: 600; color: #3b3663; } .w3_info h4 { display: inline-block; font-size: 15px; padding: 8px 0px; color: #444; text-transform: capitalize; } a.btn.btn-block.btn-social.btn-qqlogin { display: block; width: 100%; padding: 10px 0px; text-align: center; font-size: 16px; font-weight: 600; } .w3_info { flex-basis: 50%; -webkit-flex-basis: 50%; box-sizing: border-box; padding: 3em 3.5em; background: #fff; box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1); border-radius: .5rem; } .w3l-form-info { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ margin: 40px 0; } .w3_info p { padding: 10px; text-align: center; } p.account, p.account a { text-align: center; padding-top: 20px; padding-bottom: 0px; font-size: 16px; color: #888; } p.account a { color: #6769e8; } p.account a:hover { text-decoration: underline; } a.forgot { color: #3b3663; margin-top: 2px; } a.forgot:hover { text-decoration: underline; } h3.w3ls { margin: 10px 0px; padding-left: 60px; } h3.agileits { padding-left: 10px; } .container { max-width: 890px; margin: 0 auto; } .input-group i.fa, .input-group i.fas { font-size: 16px; vertical-align: middle; box-sizing: border-box; float: left; width: 6%; margin-top: 13px; text-align: center; color: #999; opacity: .5; position: absolute; left: 0; } h5 { text-align: center; margin: 10px 0px; font-size: 15px; font-weight: 600; color: #000; } .footer p { text-align: center; font-size: 18px; line-height: 28px; color: #777; } .footer p a { color: #6769e8; } .footer p a:hover { text-decoration: underline; } p.continue { margin-top: 25px; padding: 0; margin-bottom: 20px; color: #999; opacity: .8; } p.continue span { position: relative; } p.continue span:before { position: absolute; content: ''; height: 1px; background: #999; width: 89%; left: -100%; top: 5px; opacity: .5; } p.continue span:after { position: absolute; content: ''; height: 1px; background: #999; width: 89%; right: -100%; top: 5px; opacity: .5; } .social-login { display: grid; grid-auto-flow: column; grid-gap: 20px; margin-bottom: 10px; } .qqlogin { padding: 13px 20px; border: 2px solid #3b5998; border-radius: 35px; text-align: center; font-size: 16px; color: #3b5998; } .qqlogin:hover { background: #3b5998; color: #fff; } .admin { padding: 13px 20px; border: 2px solid #ea4335; border-radius: 35px; text-align: center; font-size: 16px; color: #ea4335; } .admin:hover { background: #ea4335; color: #fff; } .qqlogin span { margin-right: 5px; } .admin span { margin-right: 5px; } ::-webkit-input-placeholder { /* Edge */ color: #aaa; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #aaa; } ::placeholder { color: #aaa; } /** Responsive **/ @media screen and (max-width: 1440px) {} @media screen and (max-width: 1080px) { .w3_info { padding: 3em 3em; } } @media screen and (max-width: 991px) { .w3_info h2 { font-size: 24px; } h1 { font-size: 35px; } } @media screen and (max-width: 900px) { .w3_info { padding: 3em 2.5em; } } @media screen and (max-width: 800px) { .w3_info h2 { font-size: 23px; } .w3l-form-info { flex-direction: column; } .container { max-width: 550px; } } @media screen and (max-width: 736px) { .w3_info h2 { font-size: 22px; } .w3_info { padding: 3em 2em; } } @media screen and (max-width: 667px) { .w3_info { padding: 3em 3em; } .w3l-form-info { margin: 20px 0 30px; } } @media screen and (max-width: 640px) { h1 { font-size: 37px; } } @media screen and (max-width: 480px) { .w3_info { padding: 2em 2em; } h1 { font-size: 34px; } } @media screen and (max-width: 415px) { h1 { font-size: 32px; } .signinform { padding: 40px 20px; } } @media screen and (max-width: 384px) { .signinform { padding: 30px 15px; } .social-login { grid-auto-flow: row; } } @media screen and (max-width: 375px) { .form-row.bottom { flex-direction: column; } a.forgot { margin-top: 17px; } } @media screen and (max-width: 320px) { h1 { font-size: 25px; } .w3_info h2 { font-size: 18px; } .btn-primary { padding: 13px 12px; font-size: 13px; } input[type="text"], input[type="email"], input[type="password"] { font-size: 13px; } .footer p { font-size: 13px; } .footer p a { font-size: 13px; } } /** /Responsive **/ /*-- //form styling --*/