/* --------------------------------------------------------------------------- */
/* dropdown-submenu */
@media (max-width: 767px)   {

    .dropdown-submenu > .dropdown-menu {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding-top: 0.25em;        /*4px*/
        padding-bottom: 0.25em;     /*4px*/
        margin-bottom: 0.25em;      /*4px*/
        margin-left: 0;
    }

    .dropdown-submenu > a:after {
        margin-right: 0.625em;      /*10px*/
        border-width: 0.3125em 0.3125em 0px 0.3125em;   /*5px 5px 0px 5px*/
        border-bottom-color: rgba(0,0,0,0.5);
        border-top-color: rgba(0,0,0,0.5);
        border-left-color: rgba(60, 3, 3, 0);
        border-right-color: rgba(0,0,0,0);
    }
}

/* --------------------------------------------------------------------------- */
/* popover */
.popover {
    font-size: min(16px, calc(100vmin / 34.625));
}

/* --------------------------------------------------------------------------- */
/* modal-dialog */
.modal-dialog {
    font-size: min(16px, calc(100vmin / 34.625));
}

/* --------------------------------------------------------------------------- */
/* logo */
div.company-logo   {
    font-size: min(16px, calc(100vmin / 34.625));
}

/* --------------------------------------------------------------------------- */
/* bg-loading-display */
.bg-loading-display {
    font-size: min(10px, calc(100vmin / 50));
}

/* --------------------------------------------------------------------------- */
/* context menu */
.context-menu   {
    font-size: min(16px, calc(100vmin / 34.625));
}

/* --------------------------------------------------------------------------- */
/* tutor */
div.tutor {
    font-size: min(16px, calc(100vmin / 50));
}

/* --------------------------------------------------------------------------- */
/* main menu */
.main-menu {
    font-size: min(16px, calc(100vmin / 40));
}

/* --------------------------------------------------------------------------- */
/* main menu control button bar*/
.main-menu-control-button-bar {
    font-size: min(16px, calc(100vmin / 40));
}

/* --------------------------------------------------------------------------- */
/* right top bar */
div.right-top-bar {
    font-size: min(16px, calc(100vmin / 40));
}

/* bottom widget toolbar */
.bottom-widget-toolbar {
    font-size: min(16px, calc(100vmin / 34.625));
}

/* ---------------------------------------------------------------------------- */
/* cap-bar */
div.cap-bar {
    font-size: min(16px, calc(100vmin / 40));
}

/* --------------------------------------------------------------------------- */
/* loading screen */
.loading-screen {
    font-size: min(16px, calc(100vmin / 34.625));
}

/* --------------------------------------------------------------------------- */
/* zeiss uv welcome view */
@media (orientation: landscape) {
    .zeiss-uv-welcome-view .content .line-4  {
        margin-top: 8em;            /*128px*/
    }
}

/* --------------------------------------------------------------------------- */
/* std modal controller */
@media (max-width: 576px)   {
    .modal.std-modal-controller .modal-dialog {
        margin: 12vh 1.875em 0.625em 1.875em;       /*12vh 30px 10px 30px*/
    }
}

.modal.std-modal-controller .modal-dialog {
    font-size: min(16px, calc(100vmin / 34.625));
}

/* --------------------------------------------------------------------------- */
/* flow navigation view system */
@media (max-width: 612px), (max-height: 612px)   {

    .modal.std-modal-controller.flow-nav-modal .modal-dialog {
        max-width: 90% !important;
    }

    .modal.std-modal-controller.flow-nav-modal.center .modal-dialog {
        width: 90% !important;
    }
}

.modal.std-modal-controller.flow-nav-modal.manual-view .modal-dialog {
    width: 80% !important;
    max-width: 120vh !important;
}

@media (max-width: 612px)   {
    .modal.std-modal-controller.flow-nav-modal.manual-view .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.modal.std-modal-controller.flow-nav-modal .modal-dialog {
    font-size: min(16px, calc(100vmin / 34.625));
}

/* --------------------------------------------------------------------------- */
/* media center */
.media-center   {
    font-size: min(16px, calc(100vmin / 34.625));
}

@media (max-width: 1536px)   {
    .media-center .right-bar .std-content    {
        width: 16.125em;            /*258px*/
    }

    .media-center .right-bar .body    {
        padding-left: 0.25em;       /*4px*/
    }

    .media-center-category-collection  {
        font-size: 0.921875em;      /*14.75px*/
        margin-right: 0.27118644em; /*4px*/
        padding: 0.27118644em;      /*4px*/
    }

    .media-center-item-pres li.presentation-item    {
        height: 8.125em;            /*130px*/
    }

    .media-center-item-pres div.header  {
        padding: 0.1538462em;       /*2px*/
    }
    
    .media-center-item-pres.selected div.header .border-frame {
        border-width: 0.1538462em;  /*2px*/
    }
    
    .media-center-item-pres .header  {
        font-size: 0.8125em;        /*13px*/
    }

    .media-center-item-pres .presentation-item div div.detail .index {
        font-size: 1.25em;          /*20px*/
    }

    .media-center-item-pres .presentation-item div div.detail .name {
        font-size: 0.75em;          /*12px*/
        line-height: 1.333333;      /*16px*/
    }

    .media-center .bottom-bar {
        right: 16.125em;            /*258px*/
    }
}

@media (max-width: 768px)   {
    .media-center .right-bar .std-content    {
        width: 8.125em;              /*130px*/
    }

    .media-center .right-bar .body    {
        top: 1.51041667em;
    }

    .media-center .right-bar .widget-header {
        font-size: 0.625em;         /*10px*/
    }

    .media-center .right-bar .widget-header .title span {
        margin-left: 0.2em;         /*2px*/
    }

    .media-center-category-collection  {
        font-size: 0.765625em;      /*12.25px*/
        margin-right: 0;
        padding: 0.3265306em;       /*4px*/
    }

    .media-center .right-bar .track-vertical    {
        width: 0.25em;              /*4px*/
    }

    .media-center .central-view .media-viewer   {
        margin: 0.125em;             /*2px*/
    }

    .media-center .right-bar .media-center-item-collection  {
        margin-left: 0.125em;       /*2px*/
    }

    div.media-center-item-std.item-type-separator  {
        width: calc(100% - 0.875em);    /*calc(100% - 14px)*/
    }

    .media-center-item-pres li.presentation-item    {
        height: 4.125em;            /*66px*/
    }

    .media-center-item-pres div.header  {
        padding: 0.1666667em;       /*2px*/
    }
    
    .media-center-item-pres.selected div.header .border-frame   {
        border-width: 0.1666667em;  /*2px*/
    }
    
    .media-center-item-pres .header  {
        font-size: 0.75em;          /*12px*/
    }

    .media-center-item-pres .header .toggle {
        padding: 0.25em 0.5em 0.25em 0.5em;     /*3px 6px 3px 6px*/
    }

    .media-center-item-pres .header .label  {
        padding: 0.25em 0.25em 0.25em 0.5em;    /*3px 3px 3px 6px*/
        overflow: hidden;
    }

    .media-center-item-pres .header .duration {
        display: none;
    }

    .media-center-item-pres .header .sound-icon {
        padding: 0.33333em 0.5em 0.25em 0.5em;  /*4px 6px 3px 6px*/
        display: none;
    }

    .media-center-item-pres .presentation-item div div.detail {
        margin-left: 0.25em;        /*4px*/
    }

    .media-center-item-pres .presentation-item div div.detail .index {
        font-size: 0.875em;         /*14px*/
    }

    .media-center-item-pres .presentation-item div div.detail .name {
        font-size: 0.5em;           /*8px*/
        line-height: 1.125em;       /*9px*/
    }

    .media-center .bottom-bar {
        right: 8.125em;             /*130px*/
    }

    .media-center .bottom-bar .control-bar  {
        padding: 0.25em 0.5em;      /*4px 8px*/
    }
    
    .media-center .bottom-bar .control-bar .right   {
        width: auto;
    }
}

@media (max-height: 640px), (max-width: 640px)   {

    .bottom-bar .media-center-item-collection {
        height: 5.625em !important;     /*90px !important*/
    }

    .bottom-bar .media-center-item-collection.vertical-layout {
        height: 100% !important;
        width: 5.625em !important;   /*90px !important*/
    }

    .bottom-bar div.media-center-item-std  {
        width: 4.75em;              /*76px*/
        height: 4.75em;             /*76px*/
    }

    .bottom-bar div.media-center-item-std .head {
        height: 0.875em;            /*14px*/
    }

    .bottom-bar div.media-center-item-std .head .number {
        font-size: 0.75em;          /*12px*/
    }
    
    .bottom-bar div.media-center-item-std .head .icon {
        font-size: 0.5625em;        /*9px*/
    }

    .bottom-bar div.media-center-item-std .label {
        font-size: 0.5625em;        /*9px*/
        top: 1.7777778em;           /*16px*/
    }

    .bottom-bar div.media-center-item-std .name-top .label {
        top: auto;
    }
    
    .bottom-bar div.media-center-item-std .footer .content .stats {
        font-size: 0.5625em;        /*9px*/
    }
    
    .bottom-bar div.media-center-item-std .footer .content .duration .icon {
        margin-right: 0.444444em;   /*4px*/
    }
}

/* --------------------------------------------------------------------------- */
/* overlays */
.overlay-container {
    font-size: min(16px, calc(100vmin / 40));
}

@media (max-height: 330px)   {
    .overlay.zeiss-uv .view.display.wavelength
    .overlay.zeiss-uv .view.display.age,
    .overlay.zeiss-uv .view.display.anatomy {
        top: 5.625em;                /*90px*/
        transform: translateY(0px);
    }
}

@media (max-width: 920px)   {
    .overlay.zeiss-opti .view.container .preview {
        font-size: 11.43px;
    }
}

@media (max-width: 575px)   {
    .overlay.zeiss-opti .view.container .preview {
        font-size: 8px;
    }

    .overlay.zeiss-opti .view.container.zoom-perspectives .item {
        margin: 0.0625em 0;         /*1px 0*/
    }
}

@media (max-width: 450px)   {
    .overlay.zeiss-opti .view.container .preview {
        font-size: 5.714286px;
    }
}

/* --------------------------------------------------------------------------- */
/* presentation slide toolbar */
@media (max-height: 575px)   {

    .presentation-slide-toolbar .presentation-slides-view {
        height: 4.125em !important; /*66px !important*/
    }

    .presentation-slide-toolbar li.presentation-item  {
        width: 3.375em;             /*54px*/
        height: 3.375em;            /*54px*/
    }

    .presentation-slide-toolbar .presentation-item div {
        width: 3.125em;             /*50px*/
        height: 3.125em;            /*50px*/
    }
}