/* Structured Values */

.d {
    --taskbar-height: 60px;
    --desktop-covers-color: hsla(0, 0%, 0%, .4);
}


/* Page and Desktop */

html, body {
    margin: 0;
    padding: 0;
    background: #424242;    /* login background color */
}

#wing-icons-database {
    position: absolute;
}

#wing-page {
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
    cursor: wait;
    z-index: 1;
}

#wing-desktop {
    position: absolute;
    display: none;
    top: 0; left: 0;
    bottom: 0; right: 0;
    cursor: default;
    z-index: 1;
}
#wing-desktop.w-visible {
    display: block;
}

.d #wing-logout {
    position: absolute;
    top: 14px;
    right: 24px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--window-back-color);
    --button-hover-back-color: var(--window-back-color);    /* no focus highlight */
    border: none;
    text-align: center;
    z-index: 99998;     /* above block panel */
}
.d #wing-logout:hover {
    background: hsl(0, 0%, 95%)  !important;                /* only hover highlight */
}
.d #wing-logout i {
    font-size: 25px;
    color: var(--pal-smoke);
    font-weight: 600  !important;
    margin: 0;
    top: -2px;
}


/* Taskbar */

.d #wing-taskbar, .d #wing-taskbar * {
    box-sizing: border-box;
    outline: none;
}

#wing-page.d.w-modal-open #wing-taskbar::after{
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    background: var(--desktop-covers-color);
    z-index: 2;
}

.d #wing-taskbar {
    position: absolute;
    top: 0;
    left: 0; right: 0;
    height: var(--taskbar-height);
    padding: 0 64px 0 16px;
    line-height: var(--taskbar-height);
    color: var(--pal-dark-smoke);
    background: var(--window-back-color);
    box-shadow: var(--shadow-small);
    overflow: hidden;
    z-index: 5;
}
.d #wing-taskbar > * {
    flex-shrink: 0;
}
.d #wing-taskbar-menu-button {
    width: 32px;
    height: 32px;
    padding: 0;
    margin-top: 1px;
    background: none;
    --button-hover-back-color: none;    /* no focus highlight */
    border: none;
    text-align: center;
    vertical-align: top;
}
.d #wing-taskbar-menu-button:hover {
    background: var(--pal-black-05)  !important;    /* only hover highlight */
}
.d #wing-taskbar-menu-button i {
    margin: 0;
    color: var(--pal-dark-smoke);
}
.d #wing-taskbar-logo {
    margin: 2px 18px 0 8px;
    height: 34px;
    width: 106px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: top;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.d #wing-taskbar-tabs {
    height: inherit;
    font-family: "PT Sans Caption", sans-serif;
    font-weight: bold;
    font-size: 14px;
    line-height: inherit;
    margin: 0 6px;
    background: var(--pal-white);
    --sel-back-color: var(--pal-snow);
    --button-hover-back-color: var(--pal-snow-40);
}
.d #wing-taskbar-tabs .w-list-tabs-scroll-button {
    width: 32px;
}
.d #wing-taskbar-tabs li {
    min-width: 128px;
}
.d #wing-taskbar-tabs li i {
    /* default: small */
}
.d #wing-taskbar-tabs li > .w-dismiss-button {
    --button-hover-back-color: hsla(0, 0%, 0%, .03);
}
.d #wing-taskbar-tabs li:first-child {
    border-left: 1px solid var(--pal-dark-snow)  !important;
}
.d #wing-taskbar-tabs .w-list-tabs-scroll-button {
    border: none;
    font-weight: normal;
}
.d #wing-taskbar-tabs:not(.w-tabs-scroll-visible) .w-list-tabs-scroll-button {
    color: transparent;
}
.d #wing-taskbar-tabs.w-tabs-scroll-visible .w-list-tabs-scroll-button-left {
    box-shadow: 1px 0 0 0 var(--pal-dark-snow)  !important;
    z-index: 1;
}
.d #wing-taskbar-tabs.w-tabs-scroll-visible .w-list-tabs-scroll-button-right {
    border-left: 1px solid var(--pal-dark-snow)  !important;
}
.d #wing-taskbar-hourglass {
    width: 36px; height: 36px;
    margin: 0 8px;
    border-radius: 4px;
    background: url("loading3.png") no-repeat center;
    opacity: 0;
}
.d #wing-desktop {
    --desktop-waiting-delay: 0ms;
}
.d #wing-desktop.w-waiting #wing-taskbar-hourglass {
    opacity: 1;
    transition: opacity 0s step-start;
    transition-delay: var(--desktop-waiting-delay);
}
.d #wing-taskbar-server-time {
    line-height: 16px;
    white-space: pre;
}

/* Desktop Menu */

.d #wing-desktop-menu {
    display: flex;
    position: absolute;
    top: var(--taskbar-height); bottom: 0;
    padding: 0 12px;
    left: 0; right: 0;
    font-weight: normal;
    font-size: 14px;
    background: hsla(0, 0%, 20%, .82);
    backdrop-filter: blur(9px);             /* does not work in FF */
    overflow: hidden;
    z-index: 4;
}
.d #wing-desktop-menu ::-webkit-scrollbar-track {
    background: none;
}
#wing-page.d.w-modal-open #wing-desktop-menu {
    display: none  !important;
}
.d #wing-desktop-menu i {
    pointer-events: none;
}

.d #wing-desktop-menu #wing-desktop-menu-close {
    position: absolute;
    top: 24px; right: 24px;
    --button-hover-back-color: none;
}

.d #wing-desktop-menu-top {
    padding: 48px 8.333% 0;         /* 1 cols both sides */
}
.d #wing-desktop-menu-logo {
    padding: 0 12px;
    color: var(--pal-white);
    font-size: 28px;
    line-height: 32px;
    white-space: nowrap;
}
.d #wing-desktop-menu-about {
    height: 32px  !important;
    margin: 8px 12px 0  !important;
    padding: 0  !important;
}
.d #wing-desktop-menu-top .w-desktop-menu-page {
    margin-left: auto;
}
.d #wing-desktop-menu-top .w-desktop-menu-section {
    height: 32px;
    padding: 0 12px 0 0;
    text-align: right;
    overflow: hidden;
}
.d #wing-desktop-menu-top .w-desktop-menu-section > label {
    display: none;
}
.d #wing-desktop-menu-shortcuts .w-desktop-menu-entry {
    max-width: 240px;
    margin-left: 16px;
    color: var(--pal-white);
    background: #6c6c6c  !important;
    border-color: transparent;
    --icon-color: var(--pal-white);
    --button-hover-back-color: var(--pal-blue);
}
.d #wing-desktop-menu-shortcuts .w-desktop-menu-entry:hover {
    background: var(--pal-blue)  !important;
}

.d #wing-desktop-menu-options {
    padding: 24px 0 0;
    justify-content: flex-end;
}
.d #wing-desktop-menu-options #wing-desktop-menu-pages-radio {
    padding: 0 12px;
    --text-color: var(--pal-smoke)  !important;
}
.d #wing-desktop-menu-options #wing-desktop-menu-pages-radio li::before {
    background: none;
    border-color: var(--pal-smoke);
}
.d #wing-desktop-menu-options #wing-desktop-menu-pages-radio li.w-item-selected::after {
    background-color: var(--pal-white);
}
.d #wing-desktop-menu-options #wing-desktop-menu-search {
    width: 224px;
    padding: 0 12px;
}
.d #wing-desktop-menu-options #wing-desktop-menu-search input {
    color: var(--pal-white);
    background: #6c6c6c;
    border-color: var(--pal-smoke);
}
.d #wing-desktop-menu-options #wing-desktop-menu-search input:focus {
    border-color: var(--pal-blue);
}
.d #wing-desktop-menu-options #wing-desktop-menu-search input::placeholder {
    color: var(--pal-dark-snow);
}
.d #wing-desktop-menu-options #wing-desktop-menu-search i {
    position: absolute;
    right: 0;
    margin: 8px 24px 0 0;
    color: var(--pal-dark-snow);
}

.d #wing-desktop-menu-bottom {
    padding: 48px 8.333% 48px;      /* 1 cols both sides */
}
.d #wing-desktop-menu-bottom .w-desktop-menu-page {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: stretch;
}
.d #wing-desktop-menu-bottom .w-desktop-menu-section {
    max-width: 33.3%;
    padding: 0 12px;
    overflow-x: auto  !important;
    flex: 1  !important;
}
.d #wing-desktop-menu-bottom label {
    padding: 0 0 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-shrink: 0;
}
.d #wing-desktop-menu-bottom label > i {
    top: -2px;
}
.d #wing-desktop-menu-bottom .w-desktop-menu-section > div {
    overflow-y: hidden;
}
.d #wing-desktop-menu-bottom .w-desktop-menu-section > div:hover {
    overflow-y: auto;
}
.d #wing-desktop-menu-bottom button,
.d #wing-desktop-menu-about {
    width: 100%;
    height: 26px;
    line-height: 26px;
    padding: 0 12px 0 0;
    margin: 4px 0;
    color: var(--pal-white);
    background: none  !important;
    border: none;
    text-align: left;
}
.d #wing-desktop-menu-bottom .w-desktop-menu-entry:hover,
.d #wing-desktop-menu-about:hover {
    color: var(--pal-blue);
}
.d #wing-desktop-menu-bottom .w-desktop-menu-section .w-no-items-message,
.d #wing-desktop-menu-bottom .w-desktop-menu-section .w-no-results-message {
    color: var(--pal-smoke)  !important;        /* no hover effect */
    font-style: italic;
    cursor: unset;
}
.d #wing-desktop-menu-bottom .w-desktop-menu-section .w-no-results-message {
    display: none;
}
.d #wing-desktop-menu-bottom .w-desktop-menu-section.w-no-results .w-no-results-message {
    display: block;
}
.d #wing-desktop-menu-bottom .w-desktop-menu-section.w-no-results .w-no-items-message {
    display: none;
}

.d #wing-about-box {
    background: var(--desktop-covers-color);
}
.d #wing-about-box-logo {
    margin: 22px 8px 6px;
    height: 42px;
    width: 158px;
    background: no-repeat center;
    background-size: contain;
}


/* Tasks Space */

.d #wing-tasks {
    position: absolute;
    top: var(--taskbar-height);
    bottom: 0;
    left: 0; right: 0;
    background: hsl(0, 0%, 85%);
    overflow: auto;
    z-index: 3;
}

.d .w-task {
    display: none;
}
.d .w-task.w-active {
    display: block;
}


/* Modal Covers */

.d #wing-tasks-modal-cover {       /* Receives w-dialog-centered class */
    position: sticky;
    position: -webkit-sticky;
    background: var(--desktop-covers-color);
}
.d #wing-tasks-modal-cover.w-visible {
    z-index: 50;
}
.d #wing-tasks-modal-cover.w-modal-messagebox-open {
    z-index: 70;
}


/* Block Panel */

.d #wing-block-panel {
    display: flex;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    visibility: hidden;
    overflow: hidden;
    cursor: wait;
    background: none;
    z-index: 99997;         /* covers entire interface, behind wing-logout button and tooltip only */

    --block-panel-visible-delay: 0ms;
    --block-panel-visible-bg: none;
}
.d #wing-block-panel.w-visible {
    animation: block-panel-visibility 1700ms linear normal forwards;
    animation-delay: var(--block-panel-visible-delay);
}
.d #wing-block-panel.w-instant {
    animation-delay: 0ms;
    animation-duration: 0ms;
}
.d #wing-block-panel.w-darken {
    --block-panel-visible-bg: hsla(0, 0%, 20%, .30);
}
.d #wing-block-panel.w-blocking-message {
    --block-panel-visible-bg: var(--desktop-covers-color);
}

@keyframes block-panel-visibility {
    75% {                                       /* 1200ms */
        background: none;
    }
    to {                                        /* 1700ms */
        visibility: visible;
        background: var(--block-panel-visible-bg);
    }
}



/* Login/Welcome Interface */

.d #wing-xdata-panel {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #424242;
    cursor: default;
    z-index: 9999;
}
.d #wing-xdata-panel.w-visible {
    display: block;
}
.d #wing-xdata-contents {
    position: relative;
    display: flex;
    height: 100%;
    min-height: 540px;
    justify-content: center;
    align-items: center;
}
.d #wing-xdata-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}
.d #wing-xdata-title, .d #wing-xdata-subtitle {
    width: 370px;
    font-weight: normal;
    color: var(--pal-white);
    text-align: center;
}
.d #wing-xdata-title {
    font-size: 40px;
    width: 218px;
    height: 64px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.d #wing-xdata-middle {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.d #wing-xdata-window {
    display: none;
    width: 430px;
    margin-top: var(--space-extra-large);
    background: var(--pal-white);
    box-shadow: var(--shadow-large);
    border-radius: 4px;
}
.d #wing-xdata-window.w-large {
    width: 560px;
}
.d #wing-xdata-panel.w-login-open #wing-xdata-window {
    display: flex;
}
.d #wing-adata, .d #wing-bdata, .d #wing-cdata, .d #wing-cdata > label {
    color: var(--pal-dark-smoke);
}
.d #wing-cdata > label > span + span {
    color: var(--pal-dark-blue);
    white-space: pre;
}
.d #wing-xdata-window input {
    border-color: var(--pal-smoke);
}
.d #wing-xdata-window input:focus,
.d #wing-cdata.w-focus > input {
    border-color: var(--pal-blue);
}
.d #wing-xdata-error {
    cursor: pointer;
}
.d #wing-xdata-loading {
    position: absolute;
    width: 32px;
    height: 32px;
    margin-left: 6px;
    background: url(loading3.png) no-repeat center;
}
.d #wing-xdata-welcome {
    display: none;
}
.d #wing-xdata-panel.w-welcome-open #wing-xdata-welcome {
    display: flex;
}
.d #wing-xdata-welcome-server-tag {
    min-height: 24px;       /* take space even when empty */
}
.d #wing-xdata-welcome-hourglass {
    width: 28px; height: 28px;
    margin-right: 12px;
    background: url("loading2.png") no-repeat center;
    background-size: cover;
}
.d #wing-xdata-welcome-message {
    font-size: 22px;
    line-height: 26px;
}
.d #wing-xdata-welcome-logout {
    font-size: 16px;
    line-height: 20px;
}
.d #wing-xdata-footer {
    width: 251px;
    height: 46px;
    padding: 0;
    margin-top: var(--space-extra-large);
    line-height: 45px;  
    letter-spacing: 4px;
    font-size: 10px;
    background-size: 146px;
    background-repeat: no-repeat;
    background-position: right;
}

/* Background image */
.d #wing-xdata-contents::before,
.d #wing-xdata-contents::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
}
.d #wing-xdata-contents::before {
    background: var(--pal-dark-smoke) url("login-back.png") no-repeat center bottom;
    background-size: cover;
}
.d #wing-xdata-contents::after {
    background: -o-linear-gradient(45deg, rgba(0,0,0,0.86) 0%, rgba(70,70,70,0.8) 100%); /* opera 11.10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#000000',GradientType=0 ); /* ie6-9 */
    background: -ms-linear-gradient(45deg, rgba(0,0,0,0.86) 0%, rgba(70,70,70,0.8) 100%); /* ie10+ */
    background: -moz-linear-gradient(45deg, rgba(0,0,0,0.86) 0%, rgba(70,70,70,0.8) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(0,0,0,0.86)), color-stop(100%, rgba(70,70,70,0.8))); /* safari4+,chrome */
    background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.86) 0%, rgba(70,70,70,0.8) 100%); /* safari5.1+,chrome10+ */
    background: linear-gradient(45deg, rgba(0,0,0,0.86) 0%, rgba(70,70,70,0.8) 100%); /* w3c */
}


/* Controllers */

wing-controller,
wing-component {
    display: block;
}

.w .w-fill-space > wing-controller,
.w .w-fill-height > wing-controller,
.w .w-align-fill > wing-controller,
.w .w-all-space > wing-controller,
.w .w-all-vertical-space > wing-controller {
    height: 100%;
}


/* Main Sections (Components) */

.w wing-main-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* Dialogs */

.w wing-main-dialog,
.w wing-dialog,
.w wing-modal-dialog {
    display: none  !important;          /* hidden initially */
    flex-direction: column;
    position: relative;
    padding: 0;
    margin: 0;
    background: var(--window-back-color);
    text-align: initial;
    overflow: hidden;
}

.w wing-main-dialog > header,
.w wing-dialog > header,
.w wing-modal-dialog > header {
    position: relative;
    color: var(--pal-snow);
    font-family: "PT Sans Caption", sans-serif;
    font-weight: bold;
    font-size: 18px;
    height: var(--dialog-title-height);
    line-height: var(--dialog-title-height);
    padding: 0 var(--space-medium) 0 var(--space-large);
    background: var(--pal-dark-smoke);
    align-items: center;
    flex-shrink: 0;
}
.w wing-main-dialog > header > span,
.w wing-dialog > header > span,
.w wing-modal-dialog > header > span {
    padding-right: 16px;
    padding-left: 4px; margin-left: -4px;           /* make non-overflowed space for moving icon to the left (above) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.w wing-main-dialog > header i,
.w wing-dialog > header i,
.w wing-modal-dialog > header i {
    font-size: 26px;		/* medium */
    color: inherit;
    flex-shrink: 0;
}
.w wing-main-dialog > header > i:first-child, .w wing-main-dialog > header > span:first-child > i:first-child,
.w wing-dialog > header > i:first-child, .w wing-dialog > header > span:first-child > i:first-child,
.w wing-modal-dialog > header > i:first-child, .w wing-modal-dialog > header > span:first-child > i:first-child {
    margin: 0 20px 0 -4px;
}
.w wing-main-dialog footer,
.w wing-dialog footer,
.w wing-modal-dialog footer {
    padding: var(--space-medium) var(--space-field-half-large-compl) var(--space-medium);
    border-top: 1px solid var(--pal-dark-snow);
    justify-content: flex-end;
    flex-shrink: 0;
}
.w wing-main-dialog.w-minimal > header,
.w wing-dialog.w-minimal > header,
.w wing-modal-dialog.w-minimal > header {
    height: unset;
    font-size: var(--label-title-medium-fsize);
    line-height: var(--label-title-medium-lheight);
    color: var(--text-color);
    padding: var(--space-medium) var(--space-medium) 0;
    background: none;
}
.w wing-main-dialog.w-minimal > header > i:first-child, .w wing-main-dialog.w-minimal > header > span:first-child > i:first-child,
.w wing-dialog.w-minimal > header > i:first-child, .w wing-dialog.w-minimal > header > span:first-child > i:first-child,
.w wing-modal-dialog.w-minimal > header > i:first-child, .w wing-modal-dialog.w-minimal > header > span:first-child > i:first-child {
    color: var(--pal-dark-smoke);
    margin: 0 8px 0 0;
    font-size: 18px;
}
.w wing-main-dialog.w-minimal > section,
.w wing-dialog.w-minimal > section,
.w wing-modal-dialog.w-minimal > section {
    --section-top-space: var(--space-medium-medium-compl);                  /* alternate (medium) internal spacing */
    --section-horizontal-space: var(--space-field-half-medium-compl);
    --section-bottom-space: var(--space-medium);
}
.w wing-main-dialog.w-minimal footer,
.w wing-dialog.w-minimal footer,
.w wing-modal-dialog.w-minimal footer {
    padding: var(--space-medium) var(--space-field-half-medium-compl);      /* alternate (medium) internal spacing */
    text-align: right;
}
.w wing-main-dialog.w-minimal footer > button.w-flat,
.w wing-dialog.w-minimal footer > button.w-flat,
.w wing-modal-dialog.w-minimal footer > button.w-flat {
    min-width: 40px;
    /*text-transform: uppercase;*/
}

/* Automatic w-fill-space and w-scroll-y-auto for unique Main Section in all Dialogs */
.w wing-main-dialog > section:first-of-type:last-of-type,
.w wing-dialog > section:first-of-type:last-of-type,
.w wing-modal-dialog > section:first-of-type:last-of-type {
    min-height: 0  !important;
    flex: 1 1 auto  !important;
    overflow-y: auto;
    overflow-x: hidden;
}


/* Task Dialogs Wrapper for Positioning, Modal Disablement */

.d .w-page-centered {
    position: absolute;
    display: none;
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    _justify-content: center;
    _align-items: center;
}
.d .w-page-centered.w-visible {
    display: flex;
}
.d .w-page-centered > wing-main-dialog {
    height: 100%  !important;
    max-height: 100%  !important;
    max-width: 100%  !important;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: 0 0 1px 1px var(--pal-black-05);
}

.d .w-dialog-centered {
    position: absolute;
    display: none;
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    _justify-content: center;
    align-items: center;
}
.d .w-dialog-centered.w-visible {
    display: flex;
}
.d .w-dialog-centered::before,
.d .w-dialog-centered::after {      /* Used to make vertical centralization giving less space at the top than at bottom */
    content: "";
    display: block;
    flex: 1 1 200px;
}
.d .w-dialog-centered::after {
    flex: 1 1 550px;
}
.d .w-dialog-centered-lower::after {
    flex: 1 1 265px;
}

.d .w-dialog-centered > wing-main-dialog,
.d .w-dialog-centered > wing-dialog,
.d .w-dialog-centered > wing-modal-dialog {
    box-shadow: var(--shadow-medium);
    border-radius: 4px;
    flex: 0 0 auto;
}

.d .w-visible > wing-main-dialog,
.d .w-visible > wing-dialog,
.d .w-visible > wing-modal-dialog {
    display: flex  !important;
}

.d .w-page-centered,
.d .w-dialog-centered {
    z-index: 51;
}
.d .w-page-centered.w-disabled,
.d .w-dialog-centered.w-disabled {
    z-index: 49;
}


/* Dialog dimensions */

.d .w-page-centered    { --borders-total: 0px; }
.d .w-dialog-centered  { --borders-total: 32px; }

.d wing-main-dialog {
    min-width: 600px;
    min-height: 400px;
}
.d wing-dialog,
.d wing-modal-dialog {
    min-width: 400px;
    min-height: 200px;
}
.d .w-dialog-centered > wing-main-dialog,
.d .w-dialog-centered > wing-dialog,
.d .w-dialog-centered > wing-modal-dialog {
    max-width: calc(100% - var(--borders-total))  !important;
    max-height: calc(100% - var(--borders-total))  !important;
    margin: var(--space-medium);
}

.d .w-dialog-width-400px        { width: 400px;  min-width: calc(400px - var(--borders-total))  !important; }
.d .w-dialog-width-500px        { width: 500px;  min-width: calc(500px - var(--borders-total))  !important; }
.d .w-dialog-width-600px        { width: 600px;  min-width: calc(600px - var(--borders-total))  !important; }
.d .w-dialog-width-800px        { width: 800px;  min-width: calc(800px - var(--borders-total))  !important; }
.d .w-dialog-width-1024px       { width: 1024px; min-width: calc(1024px - var(--borders-total))  !important; }
.d .w-dialog-width-1280px       { width: 1280px; min-width: calc(1280px - var(--borders-total))  !important; }
.d .w-dialog-width-1400px       { width: 1400px; min-width: calc(1400px - var(--borders-total))  !important; }

.d .w-dialog-width-min-400px    { min-width: calc(400px - var(--borders-total))  !important; }
.d .w-dialog-width-min-500px    { min-width: calc(500px - var(--borders-total))  !important; }
.d .w-dialog-width-min-600px    { min-width: calc(600px - var(--borders-total))  !important; }
.d .w-dialog-width-min-800px    { min-width: calc(800px - var(--borders-total))  !important; }
.d .w-dialog-width-min-1024px   { min-width: calc(1024px - var(--borders-total))  !important; }
.d .w-dialog-width-min-1280px   { min-width: calc(1280px - var(--borders-total))  !important; }
.d .w-dialog-width-min-1400px   { min-width: calc(1400px - var(--borders-total))  !important; }

.d .w-dialog-height-300px       { height: 300px  !important; }
.d .w-dialog-height-400px       { height: 400px  !important; }
.d .w-dialog-height-500px       { height: 500px  !important; }
.d .w-dialog-height-600px       { height: 600px  !important; }
.d .w-dialog-height-700px       { height: 700px  !important; }
.d .w-dialog-height-800px       { height: 800px  !important; }
.d .w-dialog-height-900px       { height: 900px  !important; }
.d .w-dialog-height-1000px      { height: 1000px  !important; }

.d .w-dialog-height-min-300px   { min-height: 300px  !important; }
.d .w-dialog-height-min-400px   { min-height: 400px  !important; }
.d .w-dialog-height-min-500px   { min-height: 500px  !important; }
.d .w-dialog-height-min-600px   { min-height: 600px  !important; }
.d .w-dialog-height-min-700px   { min-height: 700px  !important; }
.d .w-dialog-height-min-800px   { min-height: 800px  !important; }
.d .w-dialog-height-min-900px   { min-height: 900px  !important; }
.d .w-dialog-height-min-1000px  { min-height: 1000px  !important; }

.d .w-dialog-centered .w-dialog-height-content  { height: auto; _max-height: unset  !important; }


/* Dialog Header Buttons */

.w wing-title-buttons {
    display: flex;
    height: 100%;
    margin-left: auto;                      /* position to the right */
    align-items: center;
    flex-shrink: 0;
}
.w wing-title-buttons > * {
    border: none;
    border-radius: 4px  !important;
    box-shadow: none;
}
.w wing-title-buttons > * {
    margin: 0 0 0 16px;
}
.w wing-title-buttons > wing-button-group {
    padding: 0;
}
.w wing-title-buttons button {
    min-width: 32px;
    line-height: 32px;
    font-family: var(--font-normal);
    color: var(--pal-snow);
    --button-text-disabled-color: var(--pal-snow-50);
    background: none;
    border: none;
    box-shadow: none;
    --button-hover-back-color: var(--pal-smoke);
    box-sizing: content-box  !important;
}
.w wing-title-buttons i {
    font-size: 24px  !important;	/* special size */
}
.w wing-title-buttons button[wing-close-button],
.w wing-title-buttons button[wing-ok-button] {
    padding: 0;
}
.w wing-title-buttons button[wing-close-button] > i,
.w wing-title-buttons button[wing-ok-button] > i {
    margin: 0;
}
.w wing-title-buttons button[wing-ok-button].w-hidden + button[wing-close-button] {
    border: none;
    border-radius: 4px  !important;
}
.w wing-title-buttons button[wing-close-button] > i::before {
    content: "close";
}
.w wing-title-buttons button[wing-ok-button] > i::before {
    content: "check";
}
.w wing-main-dialog.w-minimal wing-title-buttons button,
.w wing-dialog.w-minimal wing-title-buttons button,
.w wing-modal-dialog.w-minimal wing-title-buttons button {
    min-width: 24px;
    line-height: 24px;
    font-size: 14px;
    color: var(--pal-smoke);
    --button-hover-back-color: var(--pal-snow);
}
.w wing-main-dialog.w-minimal wing-title-buttons button > i,
.w wing-dialog.w-minimal wing-title-buttons button > i,
.w wing-modal-dialog.w-minimal wing-title-buttons button > i {
    font-size: 22px;
}

/* Special rules for NOT Top Controllers */
.d .w-dialog-centered wing-title-buttons button {
    border: none;
    border-radius: 4px  !important;
    background: none  !important;
}

/* Special rules for Top Controllers */
.d .w-page-centered > wing-main-dialog wing-title-buttons {
    padding: 0 var(--space-large) 0 var(--space-small);
    margin-right: -16px;
    background: var(--pal-dark-snow);
}
.d .w-page-centered > wing-main-dialog wing-title-buttons button,
.d .w-page-centered > wing-main-dialog wing-title-buttons > wing-button-group {
    box-shadow: var(--shadow-small)  !important;
}
.d .w-page-centered > wing-main-dialog wing-title-buttons wing-button-group > button {
    box-shadow: none  !important;
}
.d .w-page-centered > wing-main-dialog wing-title-buttons button {
    color: var(--pal-smoke);
    --button-text-disabled-color: var(--pal-dark-snow);
    background: var(--pal-white)  !important;
    --button-hover-back-color: var(--pal-snow);
    box-sizing: content-box  !important;
}
.d .w-page-centered > wing-main-dialog wing-title-buttons button:disabled {
    color: var(--button-text-disabled-color);
}
.d .w-page-centered > wing-main-dialog wing-title-buttons > wing-button-group > button:not(:first-child) {
    border-left: 1px solid var(--pal-dark-snow);
}


/* Modal Message Box */

.d.d.d .wing-message-box {
    display: none  !important; /* hidden initially */
    width: 400px;
    text-align: left;
    cursor: auto;
}
.d.d.d .wing-message-box.w-visible {
    display: flex  !important;
}
.d.d.d .wing-message-box.w-details {
    width: auto;
    max-width: 60%  !important;
    min-width: 600px;
}
.d.d.d .wing-message-box > section {
    padding-top: var(--space-small);
    justify-content: center;
}
.d.d.d .wing-message-box-text,
.d.d.d .wing-message-box-details-text {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    padding: 0 var(--space-medium) 0 var(--space-field-half);
    color: var(--text-color);
    font-size: var(--label-medium-fsize);
    line-height: 20px;
    white-space: pre-line;
    overflow: auto;
}
.d.d.d .wing-message-box-text {
    flex-shrink: 0;
    max-height: 102px;
}

.d.d.d .wing-message-box-details-text {
    margin: var(--space-small) 0 0;
}
.d.d.d .wing-message-box:not(.w-details) .wing-message-box-details-label,
.d.d.d .wing-message-box:not(.w-details) .wing-message-box-details-text {
    display: none;
}

.d.d.d .wing-message-box-prompt-text {
    margin-right: var(--space-field-half);
}
.d.d.d .wing-message-box-prompt-input {
    margin: var(--space-small) var(--space-medium) 0 var(--space-field-half);
}
.d.d.d .wing-message-box:not(.w-prompt) .wing-message-box-prompt-text,
.d.d.d .wing-message-box:not(.w-prompt) .wing-message-box-prompt-input {
    display: none;
}

.d.d.d .wing-message-box > footer {
    direction: rtl;
    justify-content: right;
}
.d.d.d .wing-message-box > footer > button {
    direction: ltr;
    display: none;
}
.d.d.d .wing-message-box >footer > button.w-visible {
    display: inline-block;
}


/* File Transfer Box */

.d #wing-file-transfer-box {
    z-index: 60;
}
.d #wing-file-transfer-box > wing-dialog {
    min-height: 0;
}
.d #wing-file-transfer-box > wing-dialog > wing-row {
    margin: 32px 16px 24px;
    justify-content: flex-end;
}
.d #wing-file-transfer-box button {
    min-width: 120px;
}
.d #wing-file-transfer-box input {
    border: none;
}


/* Tooltip ghost element */

#wing-page.d.w #wing-textover-ghost {
    position: absolute          !important;
    top: 0                      !important;
    left: 0                     !important;
    margin: 0                   !important;
    width: auto                 !important;
    max-width: 100%             !important;
    min-width: auto             !important;
    flex-shrink: 0              !important;
    flex-grow: 0                !important;
    pointer-events: none        !important;
    opacity: 0;                 !important;
    z-index: -99                !important;

    /* Make ghost element visible for debugging */
    /*left: 50%;                  !important;*/
    /*background: yellow          !important;*/
    /*z-index: 99999999999        !important;*/
}


/* Copy ghost element */

.w #wing-copy-text-ghost {
    position: absolute          !important;
    display: inline-block       !important;
    top: 0                      !important;
    left: 0                     !important;
    margin: 0                   !important;
    width: 50px                 !important;
    height: 0                   !important;
    opacity: 0                  !important;
    z-index: -99                !important;
}


/* Item Explorer rules */

.w #wing-ie {
    width: 550px;
    max-width: 35%;
}
.w #wing-ie-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    border-color: transparent;
    box-shadow: 0 0 0 2px hsla(210, 70%, 60%)  !important;
}
.w #wing-ie i {
    color: hsla(210, 70%, 50%);
}
.w.w.w.w.w .w-ie-highlighted {
    box-shadow: 0 0 0 2px hsla(210, 90%, 40%, .4), inset 0 0 0 4000px hsla(210, 90%, 40%, .17)  !important;
}


/* Firefox-specific rules */

@-moz-document url-prefix() {
    .d #wing-desktop-menu {
        background: hsla(0, 0%, 32%, .97) !important;      /* compensate for backdrop-filter absence */
    }
}

/* Regras para iframe Cappta */
#cappta-checkout-iframe {
    z-index: 999999;  /* maior z-index até o momento, deve aparecer sobreposto ao Wing inteiro */
}