/************************************ CUSTOM STYLES ************************************/
body {
background: transparent;
background-image: url(../images/background-tl.png), url(../images/background-br.png);
background-repeat: no-repeat;
background-position: top 10px left 0, bottom 0 right 0;
background-size: 20%;
}
#container-header {
border: 0;
}
#header {
background-color: transparent;
border-bottom: 0;
}
#logo {
max-width: 99%;
min-width: 99%;
background: url(../images/Logo2.png) no-repeat;
background-size: contain;
background-position: right;
height: 50px;
}
#container .header-title {
display: none;
}
#container #uap-steps {
clear: both;
background-image: -ms-radial-gradient(center, ellipse farthest-corner, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.61) 100%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.61) 100%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.61) 100%);
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.61) 100%);
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.61) 100%);
}
#header_menu {
float: right !important;
}
#header {
border-top: 10px solid #e30421;
max-width: 100% !important;
}
#header-bar {
min-width: 100%;
}
#header-bar-locale {
display: none;
}
#header-bar-menu {
display: none;
}
#container {
box-shadow: none;
margin: 0 auto;
background: transparent;
border: 0;
max-width: 1000px;
min-width: 1000px;
min-height: 600px;
}
.uap-input {
background-color: transparent;
border-radius: 0;
border: 0;
border-bottom: 1px solid rgb(227, 4, 33);
}
.uap-input:focus {
outline: none;
}
label[for] {
color: black;
font-weight: normal;
}
label[for].empty {
font-size: 14px;
}
#uap-errorBox div.INFO {
color: #333333;
}
.buttons input.submit, .uap-button.submit {
color: black;
}
.buttons input, .uap-button {
background: white;
border-radius: 0;
border: 2px solid rgb(227, 4, 33);
color: black;
font-size: 14px;
}
.buttons input:hover, .uap-button:hover, .buttons input.cancel:hover {
background: rgb(227, 4, 33);
color: white;
border-color: rgb(227, 4, 33);
-webkit-transition: background 1s;
transition: background 1s;
}
#uap-waiting-button {
background-color: rgb(227, 4, 33);
border-color: rgb(227, 4, 33);
color: white;
}
#uap-waiting-button:hover {
background-color: rgb(227, 4, 33);
border-color: rgb(227, 4, 33);
color: white;
}
#uap-waiting-button > span {
line-height: 34px;
}
#main-panel {
background-image: -ms-radial-gradient(center, ellipse farthest-corner, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.61) 100%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.61) 100%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.61) 100%);
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.61) 100%);
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.61) 100%);
}
#main-panel > div:not(.inner-footer) {
width: 90% !important;
}
.left-panel, .right-panel {
padding: 1em;
}
.login-panel .login-form {
border-left: 2px solid rgb(227, 4, 33);
border-left-style: dashed;
}
.left-panel.dropdown {
visibility: visible;
}
a {
color: #e30421;
}
.USERID .form-wrapper > .uap-display, .login-title, .select-locale, .selected-locale {
display: none !important;
}
.login-information {
position: relative;
padding-right: 2em;
}
.login-information > span {
display: block;
clear: both;
}
.login-information > .info-title {
font-weight: bold;
margin-bottom: 1em;
}
.login-information .info-text.warning{
margin-right: 10px;
}
.login-information .info-text.warning:after {
content: "!";
position: absolute;
right: 10px;
top: 55px;
text-align: left;
color: black;
font-size: 100px;
}
form > footer {
background-color: rgba(220, 220, 220, 0.85);
}
.help-message {
margin-top: 20px;
float: left;
font-size: 12px;
}
.buttons {
clear: right;
float: right;
}
.inner-footer {
width: 100% !important;
}
footer > div {
width: 1000px;
}
footer [class^=footer-] {
color: black;
display: inline-block;
padding: 0 20px;
display: block;
text-align: center;
}
footer .footer-left {
float: left;
width: 40%;
max-width: 40%;
}
footer .footer-right {
float: right;
width: 60%;
max-width: 60%;
}
footer .footer-right .line {
display: block;
clear: both;
width: 100%;
}
footer .footer-right .line span {
float: left;
min-width: 130px;
text-align: left;
}
footer .footer-right .line span.phone-number {
width: 70%;
max-width: 70%;
}
.uap-resetOtanToken-newToken, .uap-resetOtanToken-activateNewDevice {
max-width: 100%;
clear: both;
}
#uap-resetOtanToken-newToken-label, #uap-resetOtanToken-activateNewDevice-label {
min-height: 0;
margin-bottom: 20px;
}
.ACTIVATION_OTAN_REGISTER_NOTIFICATION_ID_CRYPTOGRAM_SCREEN .buttons {
float: left;
}
.ACTIVATION_OTAN_REGISTER_NOTIFICATION_ID_CRYPTOGRAM_SCREEN .buttons input.cancel {
max-width: 100%;
white-space: normal;
}
.INVITATION_OTAN_PUSH_NOTIFICATION .buttons input {
display: inline-block;
float: left;
margin-bottom: 1em;
}
.new-cronto-app {
float: none;
display: block;
margin: 0 auto;
}
.app-download-image-label {
width: 100%;
}
.CHALLENGE_OTAN .form-wrapper > span.clear.block {
margin-top: 30px;
}
.ACTIVATION_OTAN_CRYPTOGRAM_SCREEN .form-wrapper > span.uap-display:nth-of-type(2) {
margin-top: 30px;
}
.password-rule-cat_img-wrapper {
float: right !important;
}
#bottom-panel-dynamic {
width: 100%;
margin-top: 40px;
}
#bottom-panel-dynamic .box {
width: 300px;
height: 300px;
display: inline-block;
background: rgba(255, 255, 255, 0.6);
border: solid 1px #D9D9D8;
padding: 10px;
text-align: justify;
float: left;
}
#bottom-panel-dynamic .box.center {
margin: 0 50px;
}
#bottom-panel-dynamic .box.right {
float: right;
}
#bottom-panel-dynamic .box h1.info-title {
font-size: 18px;
color: rgb(227, 4, 33);
}
.app-download-image.windows {
display: none;
}
.app-download-image.windows + .app-download-image-label {
display: none;
}
/*** logout ***/
.logout .login-panel .left-panel {
display: none;
}
.logout .login-panel .login-form {
border: 0;
width: 100%;
text-align: center;
}
.logout .form-wrapper > .uap-display > div {
margin-bottom: 20px;
display: block;
}
.logout .form-wrapper > .uap-display span {
display: block;
clear: both;
}
.logout .inner-footer {
border: 0;
}
.logout .inner-footer span {
display: block;
width: 100%;
text-align: left;
margin: 20px 0;
}
.logout .inner-footer a {
display: inline-block;
width: 33%;
color: black;
font-weight: bold;
}
.logout .inner-footer a:before {
content: "";
display: block;
width: 60px;
height: 60px;
background-size: contain;
background-repeat: no-repeat;
margin: 0 auto;
}
.logout .inner-footer a.to_website:before {
background-image: url(../img/glkb/logo-img.png);
}
.logout .inner-footer a.to_login:before {
background-image: url(../img/glkb/login-icon.png);
}
.logout .inner-footer a.feedback:before {
background-image: url(../img/glkb/feedback-icon.png);
}
/*** error ***/
.error #main-panel > * {
text-align: center;
}
.error #main-panel .header-text {
font-size: 20px;
}
.error #main-panel .main-button {
width: 400px;
height: 50px;
display: block;
margin: 0 auto;
text-decoration: none;
color: white;
background-color: #e30421;
font-size: 20px;
line-height: 50px;
}
.error .login-panel .login-form {
border: 0;
width: 100%;
}
.error .login-panel .left-panel {
display: none;
}
.error .inner-footer {
border: 0;
}
.PASSWORD_SELF_UNBLOCK_SUCCESS .uap-button.cancel {
display: none;
}
.PASSWORD_SELFCHANGE_ERROR .selfUnblockHelp {
font-size: 15px;
}
.login-panel.CHALLENGE_OTAN #uap-disable-push {
display: none;
}
/********************* responsive design *********************/
@media only screen and (max-width: 1380px) {
body {
background-size: 30%;
}
body > form > div {
min-width: 1000px !important;
max-width: 1000px !important;
}
#main-panel > div {
width: 70%;
}
div.password-rule > .password-rule-message {
width: 90%;
}
div.password-rule span.password-rule-category {
display: none;
}
#bottom-panel-dynamic .box.center {
margin: 0 30px;
}
}
@media only screen and (max-width: 1000px) {
body > form > div {
min-width: 100% !important;
max-width: 100% !important;
}
#bottom-panel-dynamic .box {
width: 100%;
height: auto;
margin-bottom: 30px !important;
display: block;
clear: both;
}
#bottom-panel-dynamic .box.center {
margin-left: 0;
margin-right: 0;
}
footer > div {
width: 100%;
}
}
@media only screen and (max-width: 768px) {
body {
background-size: 40%;
}
#container {
padding-bottom: 150px;
background-size: 150px;
}
#main-panel > div {
text-align: center;
}
.login-panel .left-panel {
text-align: center;
margin-bottom: 1em;
}
.login-information {
width: 260px;
margin: 0 auto;
text-align: left;
}
.login-panel .login-form {
border-left: 0;
border-top: 2px solid rgb(227, 4, 33);
border-top-style: dashed;
width: 260px;
padding-top: 1em;
}
div.labelInputWrapper {
width: 260px;
}
.uap-input {
width: 260px;
}
.buttons {
width: 100%;
}
.USERID .help-message, .buttons {
margin-top: 1em;
}
footer span {
float: left !important;
margin-bottom: 1em;
}
.ACTIVATION_OTAN_APP_DOWNLOAD .app-download-image {
float: none;
display: block;
margin: 0 auto;
}
.ACTIVATION_OTAN_APP_DOWNLOAD .app-download-image-label {
float: none;
}
.INVITATION_OTAN_PUSH_NOTIFICATION .buttons input {
width: 100%;
display: block;
margin-bottom: 1em;
}
.RESET_OTAN_CHOICE .buttons input.cancel {
margin-right: 0;
}
#bottom-panel-dynamic .box {
width: 300px;
height: 300px;
margin-bottom: 20px !important;
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
footer [class^=footer-] {
color: black;
display: inline-block;
padding: 0 20px;
display: block;
text-align: center;
}
footer .footer-left {
width: 100%;
max-width: 100%;
}
footer .footer-right {
width: 100%;
max-width: 100%;
}
}
@font-face { font-family: Futura-0_0; src: url("webfonts/298E0C_0_0.eot"); }
@font-face { font-family: Futura-0_0; src: url("webfonts/298E0C_0_0.woff") format("woff"); }
@font-face { font-family: Futura-1_0; src: url("webfonts/298E0C_1_0.eot"); }
@font-face { font-family: Futura-1_0; src: url("webfonts/298E0C_1_0.woff") format("woff"); }
@font-face { font-family: Futura-2_0; src: url("webfonts/298E0C_2_0.eot"); }
@font-face { font-family: Futura-2_0; src: url("webfonts/298E0C_2_0.woff") format("woff"); }
@font-face { font-family: Futura-3_0; src: url("webfonts/298E0C_3_0.eot"); }
@font-face { font-family: Futura-3_0; src: url("webfonts/298E0C_3_0.woff") format("woff"); }
.device-image.otan-smartphone {
             display: none;
}