.slippeMsg { visibility: hidden; opacity: 0; display: flex; flex-direction: column; flex-wrap: nowrap; position: fixed; bottom: -80px; left: 30px; min-width: 350px; max-width: 500px; z-index: 999999999; -moz-transition: all 350ms; -webkit-transition: all 350ms; } .slippeMsgInner { } .slippeMsgModal { border-radius: 4px; background-color: var(--float-msgs); color: #fff; } .slippeMsgHeader { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; padding: 15px 15px 15px 15px; justify-content: space-around; } .slippeMsgBody { display: flex; flex-direction: column; flex-wrap: nowrap; padding: 0 15px 15px 15px; } .slippeMsgInner { display: flex; flex-direction: row; flex-wrap: nowrap; } .slippeMsgContent { color: #fff; text-align: left; } .slippeMsgTitle { font-size: 1.2em; font-weight: bold; width: 100%; } .slippeMsgMessage { font-size: 1em; line-height: 1.3em; text-align: left; } .slippeMsgInputs { margin-top: 20px; } .slippeMsgInput { } .slippeMsgInputTitle { font-size: 0.78em; font-weight: bold; margin-bottom: 5px; } .slippeMsgInputField { display: inline-flex; flex-wrap: nowrap; align-items: center; } .slippeMsgInputField select { width: 100%; font-size: 0.8em; } .slippeMsgClose { position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; text-align: center; font-weight: bold; font-size: 1.2em; cursor: pointer; margin-left: 10px; } .slippeMsgClose:after { content: '\2715'; } .slippeMsgActions { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; margin-top: 15px; } .slippeMsgAction { background-color: rgba(255,255,255,0.1); padding: 10px 15px; margin-left: 10px; border-radius: 4px; cursor: pointer; -moz-transition: all 300ms; -webkit-transition: all 300ms; background-color: var(--color-blue); } .slippeMsgAction:first-child { margin-left: 0px; } .slippeMsgActionTitle { font-size: 0.95em; color: #fff; } .slippeMsgAction:hover { background-color: #0369b3; } .slippeMsgActionFormat1 { border-color: transparent; background-color: rgba(87,119,186,1); } .slippeMsgActionFormat1 .slippeMsgActionTitle { color: #000; } .slippeMsgActionFormat1:hover { background-color: rgba(111,149,229,1); } .slippeMsgActionLeast { background-color: #e7e6e6; } .slippeMsgActionLeast:hover { background-color: #d7d7d7; } .slippeMsgActionLeast .slippeMsgActionTitle { color: #222; } .slippeMsgCenter { display: flex; justify-content: center; align-items: center; top: 0px; right: 0px; bottom: 0px; left: 0px; max-width: unset; min-width: unset; background-color: rgba(255,255,255,0.85); } .slippeMsgCenter .slippeMsgInner { max-width: 90%; } .slippeMsgCenter .slippeMsgModal { border-radius: 5px; background-color: #fff; color: #444; width: 520px; box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 10%); padding: 20px; box-sizing: border-box; max-width: 100%; } .slippeMsgCenter .slippeMsgContent { text-align: left; font-size: 1.3em; color: #222; } .slippeMsgCenter .slippeMsgHeader { align-items: center; } .slippeMsgCenter .slippeMsgIcon { display: flex; flex-direction: row; justify-content: center; margin-right: 25px; } .slippeMsgCenter .slippeMsgIconPic { width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .slippeMsgCenter .slippeMsgClose { top: 0px; right: 0px; } .slippeMsgCenter .slippeMsgContent { justify-content: center; padding: 20px 0px; } .slippeMsgCenter .slippeMsgText { color: unset; font-size: 1.3em; } .slippeMsgCenter .slippeMsgActions { padding: unset; } .slippeMsgCenter .slippeMsgAction { border: unset; border-radius: 3px; font-size: 1.2em; padding: 10px 25px; } .slippeMsgCenter.slippeMsgOk .slippeMsgIconPic { border: 3px solid #3cb879; } .slippeMsgCenter.slippeMsgOk .slippeMsgIconPic:before { content: '\2714'; font-size: 3em; color: #3cb879; } .slippeMsgCenter.slippeMsgOk .slippeMsgText { color: unset; font-size: 1.3em; } .slippeMsgCenter.slippeMsgOk .slippeMsgAction { background-color: #3cb879; } .slippeMsgError .slippeMsgTitle { color: #ff5656; } .slippeMsgCenter.slippeMsgError .slippeMsgIconPic { border: 3px solid #bf3d3d; } .slippeMsgCenter.slippeMsgError .slippeMsgIconPic:before { content: '\2715'; font-size: 2.8em; color: #bf3d3d; margin-bottom: -3px; } .slippeMsgCenter.slippeMsgError .slippeMsgTitle { color: #bf3d3d; } .slippeMsgCenter.slippeMsgError .slippeMsgMessage { color: unset; font-size: 0.9em; } .slippeMsgCenter.slippeMsgError .slippeMsgAction { background-color: #bf3d3d; } .slippeMsgCenter.slippeMsgWarning { } .slippeMsgCenter.slippeMsgWarning .slippeMsgModal { padding: 0px !important; overflow: hidden; } .slippeMsgCenter.slippeMsgWarning .slippeMsgHeader { background-color: var(--color-2); color: #fff; min-height: 20px; } .slippeMsgCenter.slippeMsgWarning .slippeMsgClose { top: 15px; right: 15px; } .slippeMsgCenter.slippeMsgWarning .slippeMsgIcon { padding: 20px; } .slippeMsgCenter.slippeMsgWarning .slippeMsgIconPic { border: 2px solid #444; } .slippeMsgCenter.slippeMsgWarning .slippeMsgIconPic:before { content: '!'; font-size: 3em; color: #444; } .slippeMsgCenter.slippeMsgWarning .slippeMsgText { color: unset; font-size: 1.3em; } .slippeMsgCenter.slippeMsgWarning .slippeMsgAction { } .slippeMsgConfirm { } .slippeMsgConfirm .slippeMsgModal { padding: 0px !important; overflow: hidden; } .slippeMsgConfirm .slippeMsgHeader { background-color: var(--color-2); color: #fff; } .slippeMsgConfirm .slippeMsgClose { top: 15px; right: 15px; } .slippeMsgConfirm .slippeMsgBody { padding: 20px; } .slippeMsgConfirm .slippeMsgInner { max-width: unset; } .slippeMsgConfirm .slippeMsgIconPic { border: 2px solid var(--color-2);; } .slippeMsgConfirm .slippeMsgIconPic:before { content: '!'; font-size: 3em; color: var(--color-2); font-weight: bold; } .slippeMsgConfirm .slippeMsgContent { padding: 0 0 20px 0; } .slippeMsgConfirmContent { } .slippeMsgConfirmQuestion { color: #222; font-size: 1em; } .slippeMsgConfirmMessage { margin-top: 10px; color: rgba(0,0,0,0.7); font-size: 0.9em; } .slippeMsgConfirmTermMessage { margin-top: 10px; color: rgba(0,0,0,0.5); font-size: 0.8em; } .slippeMsgConfirmTermInput { display: flex; align-items: center; margin-top: 15px; } .slippeMsgConfirmTermInput input[type="text"] { } .slippeMsgConfirmTermInput input[type="button"] { margin-left: 15px; border: unset; padding: 8px 15px; border-radius: 4px; cursor: pointer; } .slippeMsgShow { visibility: visible; opacity: 1; } .slippeMsgTop { left: 0px !important; top: 0px !important; right: 0px; border-radius: unset !important; min-width: unset; max-width: unset; } .slippeMsgTop .slippeMsgModal { border-radius: unset; background-color: var(--color-2); box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.15); } .slippeMsgTop .slippeMsgBody { padding-bottom: 20px; } .slippeMsgTop .slippeMsgContent { justify-content: center; } .slippeMsgTop .slippeMsgText { font-size: 1.1em; } .slippeMsgShow.slippeMsgBottom { bottom: 30px; } .slippeMsgBottom .slippeMsgContent { align-items: center; } .slippeMsgBottom.slippeMsgOk .slippeMsgIconPic { margin-right: 10px; } .slippeMsgBottom.slippeMsgOk .slippeMsgIconPic:before { content: '\2714'; font-size: 2em; color: #3cb879; } @media (max-width: 1000px) { .slippeMsg { left: 0px !important; bottom: 0px !important; right: 0px; border-radius: unset; min-width: unset; max-width: unset; } .slippeMsgModal { border-radius: unset; } .slippeMsgMessage { font-size: 1.1em; } .slippeMsgCenter .slippeMsgModal { } }@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Open+Sans&display=swap'); html { } body, html { margin: 0px; padding: 0px; background-color: #f4f4f4; font-family: 'Open Sans', sans-serif; font-family: 'Lato', sans-serif; font-size: 15px; height:100%; } form { margin:0px; padding:0px; } ul { margin: 0px; padding: 0px; overflow: hidden; list-style: none; } a { font-family: Arial; font-size: 13px; font-weight: normal; color:#006699; } a:hover { text-decoration: none; } #loginContent { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; } #loginBox { display: flex; flex-direction: column; flex-wrap: nowrap; border-radius: 4px; overflow: hidden; text-align: left; -webkit-box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%); box-sizing: border-box; background-color: #fff; max-width: 500px; box-sizing: border-box; } #loginLogo { display: flex; justify-content: center; align-items: center; text-align: center; padding: 50px; } #loginLogo img { max-width: 250px; max-height: 80px; } #loginInputs { padding: 50px; height: 100%; } #loginInputs .description { font-size: 15px; font-weight: normal; margin-bottom: 30px; } #loginInputs .title { font-size:15px; margin-bottom:3px; } #loginInputs .input { margin-bottom:25px; } #loginInputs .input input { width: 100%; height: 40px; line-height: 50px; font-size: 1em; padding-left: 8px; box-sizing: border-box; background-color: #f8f8f8; border: 1px solid rgba(0,0,0,0.05); } #loginPasswordRecovery a { } #loginInputSubmit { clear:both; margin-top:25px; } #loginInputSubmit input { color: #fff; font-size: 1em; font-weight: normal; cursor: pointer; padding: 8px 15px 8px 15px; background: #3460db; border: 1px solid #3460db; font-family: Arial; transition: all 200ms; -moz-transition: all 200ms; -webkit-transition: all 200ms; } #loginInputSubmit input:hover { background: #1154C4; border:1px solid #1154C4; color:#fff; } #loginSpam { padding: 15px 20px; background-color: #dee4f2; font-size: 0.9em; text-align: center; } #loginOk { padding: 50px; text-align: center; } @media screen and (max-width: 480px) { #loginContent { width: 100%; height: 100%; } #loginBox { border: 0px; height: 100%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: unset; } #loginInputs .description { font-size: 1em; } #loginSpam { font-size: 0.9em; } }