@charset "utf-8";
/* Fonts */
@import "/idp/jakarta.faces.resource/css/museosans-fonts.css.xhtml;jsessionid=46aee33116e31709ae4d641c608e?v=24.3.0";

:root {
    --mitel-dark-blue: #002856;
    --mitel-light-blue: #0073d0;
    --fg-color: #1A1A1A;
    --bg-color: #fff;
    --header-fg-color: #7e8083;
    --header-fg-color-light: #dadbdc;
    --header-bg-color: #fff;
    --footer-bg-color: var(--mitel-dark-blue);
    --footer-fg-color: #fff;
    --headings-fg-color: var(--mitel-dark-blue);
    --form-label-color: #4c4c4c;
    --form-hint-color: #656565;
    --action-color: var(--mitel-light-blue);
    --action-active-color: var(--mitel-dark-blue);
    --action-color-contrast: #fff;
    --form-field-outline-color: #bbb;
    --form-field-outline-focus-color: #707070;
    --form-field-bg-color: #fff;
}

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg-color);
    color: var(--fg-color);
    font-family: museo-sans, "Museo Sans", Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2em;
    text-align: left;
}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vH;
    margin: 0 auto;
}

/*************************************************************************************************************************
HEADER - START
*************************************************************************************************************************/
#header {
    height: 71px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    border-bottom: 1px solid var(--header-fg-color-light);
    background-color: var(--header-bg-color);
    padding: 0 24px;
    overflow: hidden;
}

@media only screen and (max-width: 680px) {
    #header {
        padding: 0 14px;
    }
}

#header .logo {
    height: 29px;
    width: 122px;
    margin-right: 40px;
}

#profile-box {
    display: flex;
    color: var(--header-fg-color);
    cursor: pointer;
}

#profile-box::after {
    content: ' ';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--header-fg-color);
    height: 0;
    width: 0;
    align-self: center;
}

#profile-box img.profile-icon {
    height: 30px;
    margin-right: 8px;
}

#profile-box .user-info {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 11px;
    line-height: 1;
    margin-right: 12px;
}

#profile-box .user-name {
    font-weight: 700;
}

#profile-box .org-name {
    font-style: italic;
}

#user-settings {
    min-width: 190px;
    box-shadow: 1px 1px 5px 0 #003158;
}

#user-settings .ui-overlaypanel-content {
    display: flex;
    flex-direction: column;
    padding: 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

#user-settings .divider {
    border-top: 1px solid #CCC;
    margin: 5px 0;
}

#user-settings .user-name {
    font-weight: 700;
}

#user-settings .labeled {
    display: flex;
    justify-content: space-between;
}

#user-settings .labeled .value {
    font-weight: 700;
}

#user-settings select {
    color: var(--header-fg-color);
    font-size: 0.95em;
    background: var(--header-bg-color);
    border: 1px solid var(--header-fg-color-light);
    letter-spacing: 0.05em;
    border-radius: 2px;
    outline: none;
}

#user-settings .logout-form a {
    color: var(--action-color);
    font-weight: 700;
    letter-spacing: 0.05em;
    display: block;
    width: auto;
    padding: 5px;
}

#user-settings a:hover, #user-settings a:focus {
    text-decoration: none;
    background: var(--header-fg-color);
    color: var(--header-bg-color);
}

#header .language-selection .ui-selectonemenu {
    transition: all .3s;
    color: inherit;
    font-size: 16px;
    border: none;
    box-sizing: content-box;
    background-color: transparent;
}

#header .language-selection .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon,
#header .language-selection .ui-selectonemenu .ui-selectonemenu-label {
    transition: all .3s;
}

#header .language-selection .ui-selectonemenu .ui-selectonemenu-label {
    /* Explicit auto size needed for Safari to not mess up the image on transition */
    background: 0 center / auto url(/idp/jakarta.faces.resource/ci/2024-IDPR3/img/layout/language-select.svg.xhtml;jsessionid=46aee33116e31709ae4d641c608e?v=24.3.0) no-repeat;
    padding: 8px 6px 7px 44px;
    box-sizing: border-box;
}

#header .language-selection .ui-selectonemenu .ui-selectonemenu-trigger {
    border: none;
    background-color: transparent;
}

#header .language-selection .ui-selectonemenu.ui-state-hover .ui-selectonemenu-label,
#header .language-selection .ui-selectonemenu.ui-state-focus .ui-selectonemenu-label {
    color: var(--action-color);
    /* Full background property but WITHOUT auto size needed for Safari to not mess up the image on transition */
    background: 0 center url(/idp/jakarta.faces.resource/ci/2024-IDPR3/img/layout/language-select-blue.svg.xhtml;jsessionid=46aee33116e31709ae4d641c608e?v=24.3.0) no-repeat;
}

#header .language-selection .ui-selectonemenu.ui-state-hover .ui-selectonemenu-trigger .ui-icon,
#header .language-selection .ui-selectonemenu.ui-state-focus .ui-selectonemenu-trigger .ui-icon {
    background-image: url("/idp/jakarta.faces.resource/images/ui-icons_0073d0_256x240.png.xhtml;jsessionid=46aee33116e31709ae4d641c608e?ln=primefaces-custom-idp&v=14.0.6&v=24.3.0");
}

/*************************************************************************************************************************
FOOTER - START
*************************************************************************************************************************/
#footer {
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    padding: 70px 10%;
    background-color: var(--footer-bg-color);
    color: var(--footer-fg-color);
    font-size: 16px;
}

#footer .logo {
    height: 43px;
    width: 183px;
}

#footer p {
    margin: 40px 0 0 0;
}

#footer a {
    color: var(--footer-fg-color);
    font-weight: 500;
    text-decoration: none;
    transition: color .3s;
}

#footer a:hover, #footer a:focus {
    color: var(--action-color);
}

#footer-support-links a {
    display: table;
    margin-top: 14px;
}

#footer-bottom-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    margin-top: 100px;
    line-height: 1;
}

#copyright {
    margin-right: 1em;
    white-space: nowrap;
}

.footer-bottom-line-container {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}

#footer-bottom-line a {
    font-weight: 300;
    white-space: nowrap;
}

#footer-bottom-line .app-version {
    flex-basis: 100%;
}

/*************************************************************************************************************************
CONTENT - START
*************************************************************************************************************************/
#content {
    width: 480px;
    margin: 0 auto;
    font-weight: 500;
}

.content-box {
    margin: 80px 20px;
}

@media only screen and (max-width: 480px) {
    #content {
        width: 100%;
    }

    .content-box {
        margin-top: 60px;
    }
}

.content-box .content-box-inner {
    margin-top: 60px;
}

.error-debug-details {
    margin: 10px 0 0 calc(-50vW + 230px);
    padding: 0;
    width: calc(100vW - 20px);
}

.anc-top {
    float: right;
    margin: 10px 0 0 0;
    clear: both;
    font-size: 0.85em;
}

h1, h2, h3, h4, h5 {
    color: var(--headings-fg-color);
    line-height: normal;
}

h1 {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
}

h1.with-action-link {
    display: flex;
    flex-direction: column;
}

h1.with-action-link a {
    font-size: 16px;
    font-weight: 500;
    color: var(--action-color);
    margin-top: 8px;
}

h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
}

p.central-message, div.central-message {
    text-align: center;
    margin: 60px 0;
}

a {
    outline: none;
    text-decoration: none;
    color: var(--action-color);
}

a img {
    border: 0;
}

a:visited {
    color: var(--action-color);
}

a:hover, a:focus {
    text-decoration: underline;
}

ul {
    margin: 0;
    list-style: none;
}

ul.list-arrows {
    list-style: url(/idp/jakarta.faces.resource/ci/2024-IDPR3/img/layout/anc-more.svg.xhtml;jsessionid=46aee33116e31709ae4d641c608e?v=24.3.0);
}

.tooltip {
    border-bottom: 1px dotted #222;
}

.highlighted-text {
    background-color: yellow;
    font-weight: 700;
}

/*************************************************************************************************************************
FORMS - START
*************************************************************************************************************************/
.form-wrapper {
    width: auto;
}

.form-wrapper > div {
    margin: 24px 0;
}

.form-wrapper label {
    cursor: pointer;
    display: block;
    margin: 8px 0;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    color: var(--form-label-color);
}

.form-wrapper .controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.form-wrapper .controls.wizard-buttons {
    justify-content: space-between;
}

.form-wrapper .controls.wizard-buttons .next, .form-wrapper .controls.wizard-buttons .submit {
    order: 1;
}

.form-wrapper .controls.wizard-buttons .back {
    order: 0;
}

.form-wrapper label a, .form-wrapper .controls a {
    font-weight: 500;
}

.form-wrapper label.with-action-link, .form-wrapper .controls.with-action-link {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
}

.form-wrapper .controls.with-action-link {
    align-items: center;
}

.form-wrapper .controls .required-field-info, .additional-info {
    color: var(--form-hint-color);
    font-size: 0.9em;
}

.form-wrapper .controls .required-field-info {
    flex-basis: 100%;
}

.form-wrapper .controls input, .submit_button {
    background-color: transparent;
    color: var(--action-color);
    border: 2px solid var(--action-color);
    cursor: pointer;
    width: auto;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    outline: 0;
    transition: all .3s;
}

.form-wrapper .controls input.main,
.form-wrapper .controls.wizard-buttons .next,
.form-wrapper .controls.wizard-buttons .submit,
.submit_button.main {
    background-color: var(--action-color);
    color: var(--action-color-contrast);
}

.form-wrapper .controls input:hover, .submit_button:hover,
.form-wrapper .controls input.main:hover, .submit_button.main:hover,
.form-wrapper .controls.wizard-buttons .next:hover, .form-wrapper .controls.wizard-buttons .submit:hover,
.form-wrapper .controls input:focus, .submit_button:focus,
.form-wrapper .controls input.main:focus, .submit_button.main:focus,
.form-wrapper .controls.wizard-buttons .next:focus, .form-wrapper .controls.wizard-buttons .submit:focus {
    background-color: var(--action-active-color);
    border: 2px solid var(--action-active-color);
    color: var(--action-color-contrast);
    box-shadow: 0 4px 6px 0 RGBA(0, 0, 0, .1), 0 1px 3px 0 RGBA(0, 0, 0, .07);
}

.form-wrapper .controls input:active, .submit_button:active,
.form-wrapper .controls input.main:active, .submit_button.main:active {
    border: 2px solid var(--action-active-color);
    background-color: var(--action-active-color);
    color: var(--action-color-contrast);
}

.form-wrapper input:disabled, .submit_button:disabled {
    opacity: .35;
}

.form-wrapper input[type="hidden"] {
    display: none;
}

.form-wrapper input, .form-wrapper select, .form-wrapper textarea, .ui-selectonemenu-input {
    background-color: var(--form-field-bg-color);
    border: 1px solid var(--form-field-outline-color);
    padding: 8px 10px;
}

.form-wrapper input:focus, .form-wrapper textarea:focus, .form-wrapper select:focus, .ui-selectonemenu-input:focus {
    border: 1px solid var(--form-field-outline-focus-color);
}

.form-wrapper input[type="text"], .form-wrapper input[type="password"] {
    width: 100%;
    box-sizing: border-box;
}

span.error_message, .error {
    color: #F00;
}

.form-wrapper input.error, .form-wrapper select.error, .form-wrapper textarea.error {
    border-color: #f00;
}

form .global_form_messages, span.global_form_messages, ul.global_form_messages {
    margin: 20px 0;
    display: block;
    padding-left: 0;
    font-weight: 700;
}

form .global_form_messages li {
    margin-left: 0;
}

.form-wrapper div.no-input > label {
    cursor: auto;
}

.form-wrapper div.no-input > span, .form-wrapper div.no-input > pre {
    display: block;
}

.form-wrapper .checkbox-wrapper label, div.checkbox label, table.checkbox label {
    display: block;
    margin: 4px 0;
    text-align: left;
    width: auto;
    padding-top: 2px;
}

.form-wrapper .checkbox-wrapper .horizontal, .form-wrapper .radio-wrapper .horizontal {
    display: inline;
    margin-right: 10px;
}

.form-wrapper .checkbox-wrapper input, div.checkbox input, table.checkbox input {
    background: none;
    display: inline-block;
    margin-right: 5px;
}

.form-wrapper .radio-wrapper label {
    display: inline-block;
    margin: 0 20px 0 4px;
    text-align: left;
    width: auto;
    padding-top: 2px;
}

.form-wrapper .radio-wrapper input {
    background: none;
    display: inline-block;
    margin-right: 5px;
    width: auto;
}

.form-wrapper select {
    padding: 8px 6px 7px 8px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
}

textarea {
    font-family: "museo-sans", sans-serif;
    font-size: 13px;
}

.form-wrapper textarea {
    height: 77px;
    overflow-y: auto;
    resize: none;
    width: 100%;
    box-sizing: border-box;
}

.form-wrapper .file, .form-wrapper input.checkbox, div.checkbox input, table.checkbox input, .form-wrapper .radio {
    border: none;
    padding: 0;
    width: auto;
}

table.checkbox input {
    margin-top: 7px;
}

div.checkbox span {
    font-weight: 700;
}

table.checkbox, div.checkbox {
    border: 1px solid #CCC;
    width: 260px;
    float: left;
    border-radius: 6px;
    padding: 0;
}

div.checkbox {
    width: 254px;
    margin: 4px 0 4px 0;
    padding: 3px;
    overflow: auto;
}

.form-wrapper select optgroup {
    font-weight: 700;
    font-style: normal;
    color: #808285;
}

.form-wrapper select optgroup option {
    color: #000;
}

.form-wrapper div.editor, .form-wrapper div.editor div {
    margin: 0;
}

/*************************************************************************************************************************
Text formatting styles
*************************************************************************************************************************/
.red_text {
    color: #F00;
}

.green_text {
    color: #090;
}

.blue_text {
    color: #159fda;
}

.violet_text {
    color: #990099;
}

.orange_text {
    color: #F60;
}

b, .bold_text {
    font-weight: 700;
}

.italic_text, .italicText {
    font-style: italic;
}

.no_italic_text {
    font-style: normal !important;
}

.strikethrough_text {
    text-decoration: line-through;
}

.small_text {
    font-size: 10px !important;
}

.uppercase {
    text-transform: uppercase;
}

/*************************************************************************************************************************
CONTEXT - START
*************************************************************************************************************************/
.context-box {
    margin: 60px 0 0 0;
    text-align: right;
}

.context-box h5 {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 7px;
    margin-top: 20px;
}

.context-box p {
    margin: 1em 0;
}

.context-box .context-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/*************************************************************************************************************************
* Ajax status loader style
*************************************************************************************************************************/
#ajaxStatusPanel {
    overflow: visible;
}

#ajaxStatusPanel_prestart, #ajaxStatusPanel_start {
    position: fixed;
    z-index: 9999;
    bottom: 2px;
    right: 2px;
    height: 96px;
    width: 96px;
}

#ajaxStatusPanel_complete {
    z-index: 0;
}

/*******************************
 * Session timeout
 ******************************/
#expiry_information {
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    padding-top: 15%;
    background-color: rgba(0, 0, 0, 0.85);
    width: 100%;
    height: 100%;
    z-index: 999999;
    color: #fff;
    font-weight: bold;
    line-height: 1.5;
}

#expiry_information h1 {
    color: #fff;
    margin-bottom: 20px;
}