.alert{margin-bottom:15px;border-radius:.5px;z-index:1111;position:fixed;top:30%;left:50%;width:400px;margin-left:-200px} @media (min-width:992px){ .alert{width:600px;margin-left:-300px} } .alert .dismissible{display:flex;align-items:center;padding:1rem;overflow:hidden;margin-bottom:1.5rem;transition:opacity 1.5s;opacity:1;border-radius:3px;position:relative;} .alert .dismissible .message-icon{margin-right:.5rem;} .alert .dismissible .message-body{} .alert .fade-out{opacity:0} .alert .link{font-weight:700;color:inherit} .alert .theme-primary{color:#052c65;background-color:#cfe2ff;border-color:#9ec5fe;box-shadow:0 0 0 8px rgba(13,110,253,.1)} .alert .theme-secondary{color:#2b2f32;background-color:#e2e3e5;border-color:#c4c8cb;box-shadow:0 0 0 8px rgba(108,117,125,.1)} .alert .theme-success{color:#0a3622;background-color:#d1e7dd;border-color:#a3cfbb;box-shadow:0 0 0 8px rgba(25,135,84,.1);} .alert .theme-info{color:#055160;background-color:#cff4fc;border-color:#9eeaf9;box-shadow:0 0 0 8px rgba(13,202,240,.1)} .alert .theme-warning{color:#664d03;background-color:#fff3cd;border-color:#ffe69c;box-shadow:0 0 0 8px rgba(255,193,7,.1)} .alert .theme-danger{color:#58151c;background-color:#f8d7da;border-color:#f1aeb5;box-shadow:0 0 0 8px rgba(220,53,69,.1);} .alert .theme-light{color:#495057;background-color:#fcfcfd;border-color:#e9ecef;box-shadow:0 0 0 8px rgba(248,249,250,.1)} .alert .theme-dark{color:#495057;background-color:#ced4da;border-color:#adb5bd;box-shadow:0 0 0 8px rgba(33,37,41,.1)} .alert .iconfont{font-size:22px;} .alert .icon-success:before {content: "\e6f3";} .alert .icon-danger:before {content: "\e60c";} .alert .icon-warning:before {content: "\e60b";} .alert .icon-primary, .alert .icon-secondary, .alert .icon-light, .alert .icon-dark, .alert .icon-info:before {content: "\e625";} .entry{display:flex;justify-content:space-between;align-items:center;width:100%;height:600px;background:#f6f7f8;box-shadow:none;border-radius:0;overflow:hidden;margin: 0 auto;} .entry-form{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;padding:20px} .entry-form form{width:95%;} .entry-form .form-title{font-size:35px;font-weight:700;color:#181818} .entry-form .form-intro{color:#666;font-size:16px;margin:10px 0 30px 0} .entry-form .form-input{position:relative;display:flex;flex-direction:column;margin-top:10px} .entry-form .invalid-feedback{padding-left:20px} .entry-form .form-input>i{width:30px;position:absolute;top:7px;left:15px;font-size:22px;font-weight:300;color:#ddd} .entry-form .form-input>img{border-radius:0 22px 22px 0;padding:0;width:120px;height:44px;cursor:pointer;position:absolute;top:1px;right:1px;border-left:1px solid #eee} .entry-form .form-input>input{width:100%;height:46px;padding-left:50px;border:1px solid #ddd;border-radius:50px;font-size:16px;transition:linear .2s} .entry-form .form-input>input:focus{outline:0;border:1px solid var(--ace-color-main)} .entry-form .forgotten{margin-top:5px;text-align:right} .entry-form .form-switch{margin-top:5px;display:flex;align-items:flex-start;} .entry-form .form-check-input{margin-right:10px} .entry-form .form-check-label b{font-weight:400} .entry-form .form-button{display:flex;width:100%;height:50px;border-radius:25px;padding:10px 20px;box-sizing:border-box;justify-content:center;font-size:18px;font-weight:500;align-items:center;transition:linear .2s;color:#fff;border:1px solid var(--ace-color-main);margin-top:15px;background:#5138ee} .entry-form .form-button:hover{box-shadow:0 0 4px 0 #ddd;background:#1f0098} .entry-form .switch-button{display:flex;justify-content:center;align-items:center;width:100%;height:50px;border:1px solid #ddd;border-radius:25px;padding:12px 20px;font-size:16px;margin-top:15px;margin-bottom:15px} .entry-form .switch-button:hover{box-shadow:0 0 4px 0 #ddd} .entry-form .switch-button a{margin:0 15px} .entry-side{display:none;width:380px;height:100%;overflow:hidden;box-shadow:none;border-radius:0;background-color:#131673;background-image:url(../image/texture.png),radial-gradient(150% 100% at 50% 30%,#6132b8 0,#131673 100%);background-image:url(../image/texture.png),-webkit-radial-gradient(50% 30%,150% 100%,#6132b8 0,#131673 100%);background-repeat:repeat,no-repeat;background-size:80px,auto;background-position:top center,center;background-blend-mode:overlay,normal;padding-top:60px;padding-left:60px;position:relative} .entry-side>.side-logo{width:100%;height:35px;line-height:35px;cursor:pointer} .entry-side>.side-logo>img{width:auto;height:35px;overflow:hidden} .entry-side>.side-slogan{white-space:nowrap;color:#fff;margin-top:50px} .entry-side>.side-slogan>p:first-child{line-height:1.5;font-size:24px;font-weight:600} .entry-side>.side-slogan>p:last-child{font-size:18px;margin-top:5px} .entry-side>.side-card{position:absolute;bottom:90px;left:65px;width:250px;height:144px} .entry-side>.side-card img{width:90px;height:144px;position:absolute;left:calc(50% - 45px);user-select:none;transform-origin:50% 125%;bottom:0} .entry-side>.side-card .card-1{transform:rotate(-30deg);z-index:1} .entry-side>.side-card .card-2{transform:rotate(-15deg);z-index:2} .entry-side>.side-card .card-3{transform:rotate(0);z-index:3} .entry-side>.side-card .card-4{transform:rotate(15deg);z-index:2} .entry-side>.side-card .card-5{transform:rotate(30deg);z-index:1} @media (min-width:768px){ .entry-form form{width:90%;} .entry-form .form-input{margin-top:15px;} } @media (min-width:992px){ .entry{width:960px;background:#fff;} .entry-form{width:580px;overflow:hidden} .entry-form form{width:80%;} .entry-form .form-input{margin-top:20px;} .entry-side{display:block} } .vertical-center { display: flex;align-items: center;justify-content: center;min-height: calc(100vh - 155px);} .entry { border-radius: 10px;box-shadow: none;overflow: hidden;} .entry-form { padding: 20px;} .entry-side { box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;} @media (min-width: 992px) { header { display: none;} .entry { box-shadow: 10px 10px 10px #d1d9e6;} }