@charset "utf-8";

/*
Hive Appier Framework
Copyright (c) 2008-2024 Hive Solutions Lda.

This file is part of Hive Appier Framework.

Hive Appier Framework is free software: you can redistribute it and/or modify
it under the terms of the Apache License as published by the Apache
Foundation, either version 2.0 of the License, or (at your option) any
later version.

Hive Appier Framework is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
Apache License for more details.

You should have received a copy of the Apache License along with
Hive Appier Framework. If not, see <http://www.apache.org/licenses/>.
*/

/*
__author__    = João Magalhães <joamag@hive.pt>
__version__   = 1.0.0
__revision__  = $LastChangedRevision$
__date__      = $LastChangedDate$
__copyright__ = Copyright (c) 2008-2024 Hive Solutions Lda.
__license__   = Apache License, Version 2.0
*/

@-webkit-keyframes fade-into-rise-long {
    from {
        opacity: 0;
        -o-opacity: 0;
        -ms-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
        transform: translateY(18px);
        -o-transform: translateY(18px);
        -ms-transform: translateY(18px);
        -moz-transform: translateY(18px);
        -khtml-transform: translateY(18px);
        -webkit-transform: translateY(18px);
    }
    to {
        opacity: 1;
        -o-opacity: 1;
        -ms-opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -khtml-transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
}

@keyframes fade-into-rise-long {
    from {
        opacity: 0;
        -o-opacity: 0;
        -ms-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
        transform: translateY(18px);
        -o-transform: translateY(18px);
        -ms-transform: translateY(18px);
        -moz-transform: translateY(18px);
        -khtml-transform: translateY(18px);
        -webkit-transform: translateY(18px);
    }
    to {
        opacity: 1;
        -o-opacity: 1;
        -ms-opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -khtml-transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
}

@-webkit-keyframes fade-out-visibility {
    from {
        opacity: 1;
        -o-opacity: 1;
        -ms-opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        -o-opacity: 0;
        -ms-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
    }
}

@keyframes fade-out-visibility {
    from {
        opacity: 1;
        -o-opacity: 1;
        -ms-opacity: 1;
        -moz-opacity: 1;
        -khtml-opacity: 1;
        -webkit-opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        -o-opacity: 0;
        -ms-opacity: 0;
        -moz-opacity: 0;
        -khtml-opacity: 0;
        -webkit-opacity: 0;
    }
}

.balloon {
    display: inline-block;
}

.balloon > .baloon-icon {
    cursor: pointer;
    transition: color 0.10s ease-in;
    -o-transition: color 0.10s ease-in;
    -ms-transition: color 0.10s ease-in;
    -moz-transition: color 0.10s ease-in;
    -khtml-transition: color 0.10s ease-in;
    -webkit-transition: color 0.10s ease-in;
}

.balloon > .baloon-icon:hover {
    color: #3668c6;
    cursor: pointer;
}

body.flat .balloon > .baloon-icon:hover {
    color: #257f96;
}

.balloon > .balloon-contents {
    animation: fade-in 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    -o-animation: fade-in 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    -ms-animation: fade-in 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    -moz-animation: fade-in 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    -khtml-animation: fade-in 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    -webkit-animation: fade-in 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -khtml-animation-delay: 1s;
    -webkit-animation-delay: 1s;
    background-color: #fafafa;
    border: 1px solid #cccccc;
    box-shadow: 0px 1px 4px #dddddd;
    -o-box-shadow: 0px 1px 4px #dddddd;
    -ms-box-shadow: 0px 1px 4px #dddddd;
    -moz-box-shadow: 0px 1px 4px #dddddd;
    -khtml-box-shadow: 0px 1px 4px #dddddd;
    -webkit-box-shadow: 0px 1px 4px #dddddd;
    display: none;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    margin-top: 8px;
    max-width: 300px;
    padding: 10px 12px 10px 12px;
    position: absolute;
    text-transform: none;
    z-index: 1;
}

body.flat .balloon > .balloon-contents {
    animation: fade-into-drop 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    -o-animation: fade-into-drop 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    -ms-animation: fade-into-drop 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    -moz-animation: fade-into-drop 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    -khtml-animation: fade-into-drop 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    -webkit-animation: fade-into-drop 0.25s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0) forwards;
    border-radius: 5px 5px 5px 5px;
    -o-border-radius: 5px 5px 5px 5px;
    -ms-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
    -moz-box-shadow: none;
    -khtml-box-shadow: none;
    -webkit-box-shadow: none;
    font-weight: 600;
    opacity: 0.0;
    -o-opacity: 0.0;
    -ms-opacity: 0.0;
    -moz-opacity: 0.0;
    -khtml-opacity: 0.0;
    -webkit-opacity: 0.0;
}

.balloon:hover > .balloon-contents {
    display: block;
}

.balloon-contents > p {
    line-height: 20px;
    margin: 0px auto 0px auto;
}

.panel-model {
    border: 1px solid #e0e0e0;
    margin: 24px 0px 24px 0px;
    max-width: 100%;
    padding: 0px 0px 0px 0px;
    width: 690px;
}

body.mobile-s .panel-model {
    margin: 12px 0px 12px 0px;
}

.panel-model h3 {
    background-color: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    margin: 0px 0px 0px 0px;
    padding: 14px 16px 14px 16px;
    text-transform: uppercase;
}

.panel-model ul {
    margin: 0px 0px 0px 0px;
}

.panel-model ul li {
    margin: 0px 0px 0px 0px;
    padding: 12px 16px 12px 16px;
}

.panel-model ul li:hover {
    background-color: inherit;
}

.panel-model ul li .button {
    font-size: 13px;
}

.panel-model ul li .left {
    float: left;
}

.panel-model ul li .right {
    float: right;
}

.pages {
    font-size: 0px;
    font-weight: bold;
    padding: 32px 0px 32px 0px;
    text-align: center;
}

body.flat .pages {
    font-weight: 600;
}

.pages > .page {
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    display: inline-block;
    font-size: 14px;
    margin: 0px 0px 0px 0px;
    padding: 4px 10px 4px 10px;
}

body.flat .pages > .page {
    font-size: 13px;
}

.pages > .page:first-child {
    border-radius: 4px 0px 0px 4px;
    -o-border-radius: 4px 0px 0px 4px;
    -ms-border-radius: 4px 0px 0px 4px;
    -moz-border-radius: 4px 0px 0px 4px;
    -khtml-border-radius: 4px 0px 0px 4px;
    -webkit-border-radius: 4px 0px 0px 4px;
}

.pages > .page:last-child {
    border-radius: 0px 4px 4px 0px;
    -o-border-radius: 0px 4px 4px 0px;
    -ms-border-radius: 0px 4px 4px 0px;
    -moz-border-radius: 0px 4px 4px 0px;
    -khtml-border-radius: 0px 4px 4px 0px;
    -webkit-border-radius: 0px 4px 4px 0px;
    border-right: 1px solid #cccccc;
}

.pages > .page:hover {
    background-color: #f2f2f2;
}

.pages > .page.selected {
    background-color: #888888;
    border-color: #888888;
    color: #ffffff;
}

body.mobile-s .pages > .page.other {
    display: none;
}

.pages > .page.disabled {
    color: #aaaaaa;
}

.pages > .page.disabled:hover {
    background-color: #ffffff;
}

.pages > a.page {
    color: #4d4d4d;
}

.header-message .message-contents {
    cursor: pointer;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 6px 24px 6px 24px;
    text-align: center;
}

.header-message .message-contents {
    animation: fade-into-rise-long 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-into-rise-long 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-into-rise-long 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-into-rise-long 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-into-rise-long 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-into-rise-long 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    background-color: #6d6d6d;
    border: 1px solid #4d4d4d;
    border-radius: 3px 3px 3px 3px;
    -o-border-radius: 3px 3px 3px 3px;
    -ms-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -khtml-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    bottom: 32px;
    box-shadow: 0px 1px 4px #999999;
    -o-box-shadow: 0px 1px 4px #999999;
    -ms-box-shadow: 0px 1px 4px #999999;
    -moz-box-shadow: 0px 1px 4px #999999;
    -khtml-box-shadow: 0px 1px 4px #999999;
    -webkit-box-shadow: 0px 1px 4px #999999;
    color: #ffffff;
    font-weight: 600;
    position: fixed;
    right: 32px;
    z-index: 10;
}

.header-message.invisible .message-contents {
    animation: fade-out-visibility 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -o-animation: fade-out-visibility 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -ms-animation: fade-out-visibility 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -moz-animation: fade-out-visibility 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -khtml-animation: fade-out-visibility 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    -webkit-animation: fade-out-visibility 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.0);
    visibility: hidden;
}

.header-message.success .message-contents {
    background-color: #cee6c5;
    border: 1px solid #86c795;
    color: #4d4d4d;
}

.header-message.error .message-contents {
    background-color: #e53935;
    border-color: #ab000d;
}

.window.window-view > form,
.window.window-link > form,
.window.window-operation > form {
    max-width: 420px;
}

.window.window-view .description,
.window.window-link .description,
.window.window-operation .description {
    border-bottom: 1px solid #f2f2f2;
    border-top: 1px solid #f2f2f2;
    font-size: 13px;
    line-height: 20px;
    margin: 0px auto 0px auto;
    padding-bottom: 12px;
    padding-top: 12px;
}

.window.window-view .description > p,
.window.window-link .description > p,
.window.window-operation .description > p {
    line-height: 20px;
    margin: 0px auto 0px auto;
}

.otp-qrcode {
    max-width: 200px;
}

.fido2-register {
    display: none;
}

.fido2-auth {
    display: none;
}