/* View-window */
div.dragonview{top: 0;bottom: 44px;left:0;right: 0;position:fixed;float: none;display: block;z-index:200;-ms-touch-action:default;}
div.dragonview div.udaction{cursor:pointer;}
/* closing */
div.dragonview>div.udaction[action|="CloseViewer"]{position:absolute;z-index:200;right:0;width:64px;height:64px;text-align:center;line-height:64px;vertical-align:middle;color:rgba(34, 34, 34, 1);}
div.dragonview div.udaction[action|="CloseViewer"] i{line-height:inherit;}
/* viewer area with 5 supported views & modes*/
div.dragonview div.view{display:none;position:absolute;top:0;bottom:0;right:0;left:0;} 
div.dragonview[view|="1"] div.view#v1{display:block;} 
div.dragonview[view|="2"] div.view#v1{display:block;left:00%;right:50%;} 
div.dragonview[view|="2"] div.view#v2{display:block;left:50%;right:00%;} 
div.dragonview[view|="3"] div.view#v1{display:block;top:00%;bottom:50%;} 
div.dragonview[view|="3"] div.view#v2{display:block;top:50%;bottom:00%;} 
div.dragonview[view|="4"] div.view#v1{display:block;left:00.00%;right:66.66%;} 
div.dragonview[view|="4"] div.view#v2{display:block;left:33.33%;right:33.33%;} 
div.dragonview[view|="4"] div.view#v3{display:block;left:66.66%;right:00.00%;} 
div.dragonview[view|="5"] div.view#v1{display:block;top:00.00%;bottom:66.66%;} 
div.dragonview[view|="5"] div.view#v2{display:block;top:33.33%;bottom:33.33%;} 
div.dragonview[view|="5"] div.view#v3{display:block;top:66.66%;bottom:00.00%;} 
div.dragonview[view|="6"] div.view#v1{display:block;left:00%;right:50%;top:00%;bottom:50%;} 
div.dragonview[view|="6"] div.view#v2{display:block;left:50%;right:00%;top:00%;bottom:50%;} 
div.dragonview[view|="6"] div.view#v3{display:block;left:00%;right:50%;top:50%;bottom:00%} 
div.dragonview[view|="6"] div.view#v4{display:block;left:50%;right:00%;top:50%;bottom:00%} 
div.dragonview[view|="14"] div.view#v1{display:block;left:00%;right:0%;top:00%;bottom:50%;} 
div.dragonview[view|="14"] div.view#v2{display:block;left:00%;right:50%;top:50%;bottom:00%} 
div.dragonview[view|="14"] div.view#v3{display:block;left:50%;right:00%;top:50%;bottom:00%} 
div.dragonview[view|="50"] div.view#v1{display:block;left:00%;right:50%;top:00%;bottom:50%;} 
div.dragonview[view|="50"] div.view#v2{display:block;left:50%;right:00%;top:00%;bottom:50%;} 
div.dragonview[view|="50"] div.view#v3{display:block;left:00%;right:66.66%;top:50%;bottom:00%} 
div.dragonview[view|="50"] div.view#v4{display:block;left:33.33%;right:33.33%;top:50%;bottom:00%} 
div.dragonview[view|="50"] div.view#v5{display:block;left:66.66%;right:00%;top:50%;bottom:00%} 
/* view-legend */
div.dragonview div.view div.udinfo.udlayer{position: absolute;z-index:2;bottom:8px;right:8px;}
div.dragonview div.view div.udinfo.udlayer>div:nth-child(2){padding:8px;}
div.dragonview div.view div.legend{position:absolute;z-index:2;bottom:32px;
    left:32px;border-bottom-style:solid;border-bottom-width:1px;width:1px;height:32px;line-height:32px;font-size:20px;vertical-align:top;text-align:center;white-space: nowrap;}
div.dragonview div.view div.legend i{display:none;cursor:pointer;position: absolute;right: -48px;color:red;border-width: 1px; border-color:red;border-style: dashed;vertical-align: middle;line-height: 32px;width: 32px;}
div.dragonview div.view div.legend.overzoom i{display:inline-block;}

div#udmsg.udmsg[type|="zoom"] i{display:none;}
div#udmsg.udmsg[type|="zoom"] .txt{line-height: revert!important;}
div#udmsg.udmsg[type|="zoom"]>div.uddata div[type|="msg"]{display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-align: center;-webkit-align-items: center;-webkit-box-align: center;align-items: center;height:auto;height: auto;line-height: revert; padding: 8px;}

/* view controller - buttons and so on */
div.dragonview #udcontrol{position:absolute;right:16px;top:64px;bottom:0px;width:64px;text-align:center;z-index: 100;}
div.dragonview #udcontrol div.udaction{display:inline-block;margin-top:16px;height:64px;width:64px;line-height:64px;position:relative;}
div.dragonview #udcontrol div.udaction i{line-height:inherit;position:relative;z-index:1;}
div.dragonview #udcontrol div.udaction div{position:absolute;width:64px;border-radius:50%;height:64px;}
div.dragonview #udcontrol div.udaction[action="FitScreen"]{display:none;}  
div.dragonview #udcontrol div.udaction[action="ShowInfo"]{display:none;} 
div.dragonview .udcontrol{position:absolute;z-index:100;right:96px;display:none;transition-timing-function:ease-out;}
div.dragonview .udcontrol.viz{display:block;transition-timing-function: ease-in;}
/* view-control */
div.dragonview .udcontrol-view{font-size:20px;line-height:36px;font-weight:normal;vertical-align:middle;top: 160px;width:483px;text-align: left;}    
div.dragonview .udcontrol-view div.udtrnsp{border-radius: 26px;}  
div.dragonview .udcontrol-view div.uddata{padding:16px;font-size:20px;line-height:36px;font-weight:normal;vertical-align:middle;}
div.dragonview .udcontrol-view div.uddata div.udaction[action|="CloseViewerControl"] i{position: absolute;top: 2px;right: 8px;font-size:24px!important;}
div.dragonview .udcontrol-view div.title{font-size:24px;line-height:40px;font-weight:bold;text-align:left;}
div.dragonview .udcontrol-view i[type|="icon"]{font-size:16px!important;line-height:36px;vertical-align:middle;}
div.dragonview .udcontrol-view div.subset.sync i.fa-check-circle{display:none;}
div.dragonview .udcontrol-view div.subset.sync div.item.sel i.fa-check-circle{display:unset;}
div.dragonview .udcontrol-view div.subset.sync div.item.sel i.fa-circle{display:none;}
div.dragonview .udcontrol-view div.subset.view-mode{text-align:center;}
div.dragonview .udcontrol-view div.subset.view-mode div.udaction{position:relative;display:inline-block;width:48px;height:48px;overflow:hidden;text-align:left;margin:2px;}
div.dragonview .udcontrol-view div.subset.view-mode i[type|="icon"]{font-size:48px!important;line-height:48px;position:absolute;left:0;top:0;width:48px;text-align: center;font-weight: 100;}
div.dragonview .udcontrol-view div.subset.view-mode div.udaction[value|="2"] i.fa-minus{transform: rotate(90deg);}
div.dragonview .udcontrol-view div.subset.view-mode div.udaction[value|="4"] i.fa-minus:nth-child(1){transform: rotate(90deg) translateY(-15%);}
div.dragonview .udcontrol-view div.subset.view-mode div.udaction[value|="4"] i.fa-minus:nth-child(2){transform: rotate(90deg) translateY(15%);}
div.dragonview .udcontrol-view div.subset.view-mode div.udaction[value|="5"] i.fa-minus:nth-child(1){transform: translateY(-15%);}
div.dragonview .udcontrol-view div.subset.view-mode div.udaction[value|="5"] i.fa-minus:nth-child(2){transform: translateY(15%);}
div.dragonview .udcontrol-view div.subset.view-mode div.udaction[value|="14"] i.fa-minus:nth-child(1){transform: rotate(90deg)  scaleX(0.5) translateX(40%)}
div.dragonview .udcontrol-view div.subset.view-mode div.udaction[value|="50"] i.fa-minus:nth-child(1){transform: rotate(90deg)  scaleX(0.5) translateX(-40%)}
div.dragonview .udcontrol-view div.subset.view-mode div.udaction[value|="50"] i.fa-minus:nth-child(2){transform: rotate(90deg)  scaleX(0.5) translateX(40%) translateY(15%)}
div.dragonview .udcontrol-view div.subset.view-mode div.udaction[value|="50"] i.fa-minus:nth-child(3){transform: rotate(90deg)  scaleX(0.5) translateX(40%) translateY(-15%)}
/* view-share */
div.dragonview .udcontrol-share{top:210px;right:112px;width:64px;text-align:center;} 
div.dragonview .udcontrol-share div.uddata{padding:16px;font-size:20px;line-height:36px;font-weight:normal;vertical-align:middle;}   
div.dragonview .udcontrol-share div.udaction{margin-top:16px;height:64px;width:64px;line-height:64px;position:relative;}
div.dragonview .udcontrol-share div.udaction i{line-height:inherit;position:relative;z-index:1;}
div.dragonview .udcontrol-share div.udaction div{position:absolute;width:64px;border-radius:50%;height:64px;}
div.dragonview .udcontrol-share div.udaction[action|="FitScreen"]{display:none;}

/*Standard layout titles and so */
div.dragonview .view .udtitle{height:64px;position:absolute;top:0;left:0;right: 0;z-index: 100;}
div.dragonview .view .udtitle .uddata{position:relative;padding-left:64px;}
div.dragonview .view .udtitle .uddata>*{height:64px;}
div.dragonview .view .udtitle .uddata>div:first-child{position:absolute;top:0;left:0;right: 0;}
div.dragonview .view .udtitle .uddata div i{font-size:20px;font-weight:bold;line-height:64px;vertical-align: middle;width: 64px;text-align: center;display:block;position:absolute;left:0;}
div.dragonview .view .udtitle .uddata div[action="ShowImageMenu"]>div{height: 64px;margin-left: 64px;overflow:hidden;}
div.dragonview .view .udtitle .uddata div[action="ShowViewMenu"] i{font-size:20px;}
div.udcontrol.udimagesel .uddata .subaction i{font-weight:bold;}
div.dragonview .view .udtitle .uddata .select{display:none;}
div.dragonview .view[status|="unset"] .udtitle .uddata .select,
div.dragonview .view[status|="fail"] .udtitle .uddata .select{display: table-cell;line-height:64px;}
div.dragonview .view[status|="unset"] .udtitle .uddata .art,
div.dragonview .view[status|="unset"] .udtitle .uddata .mod,
div.dragonview .view[status|="fail"] .udtitle .uddata .art,
div.dragonview .view[status|="fail"] .udtitle .uddata .mod{display:none;}
div.dragonview .view .udtitle .uddata div:nth-child(3){vertical-align:top;}
div.dragonview .view .udtitle .uddata .select,
div.dragonview .view .udtitle .uddata .art{font-size: 20px;font-weight: bold;margin-top: 11px;height:20px;line-height:20px;margin-right: 64px;overflow-wrap: normal;white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
div.dragonview .view .udtitle .uddata .mod{font-size:16px;}
div.dragonview .view .udtitle .uddata div[action|="MaxViewWindow"]{float:right;margin-right:64px;display:none;}
div.dragonview[view|="2"] .view#v1 .udtitle .uddata div[action|="MaxViewWindow"],
div.dragonview[view|="4"] .view#v1 .udtitle .uddata div[action|="MaxViewWindow"],
div.dragonview[view|="4"] .view#v2 .udtitle .uddata div[action|="MaxViewWindow"],
div.dragonview[view|="6"] .view#v1 .udtitle .uddata div[action|="MaxViewWindow"],
div.dragonview[view|="6"] .view#v3 .udtitle .uddata div[action|="MaxViewWindow"],
div.dragonview[view|="14"] .view#v2 .udtitle .uddata div[action|="MaxViewWindow"]{margin-right: -16px;text-align:right;}
div.dragonview .view.maximized{left:0!important;right:0!important;top:0!important;bottom:0!important;z-index:10!important;background-color:inherit!important;}

/* Image selrction menu */
div.dragonview .udcontrol.udimagesel{display:none;position: fixed;}
div.dragonview .udcontrol.udimagesel.vis{display:inline-table;}
div.dragonview .udcontrol.udimagesel .uddata{padding-left: 64px;padding-right:24px;font-size:20px;max-height:480px;overflow-y:auto;-webkit-overflow-scrolling: touch;}
div.dragonview .udcontrol.udimagesel .section{border-top-width:1px; border-top-style:solid;border-top-color:black;padding-top:16px;padding-bottom:16px;    opacity: 1;}
div.dragonview .udcontrol.udimagesel .section:first-child{padding-top:0;border-top-width:0;}
div.dragonview .udcontrol.udimagesel .section .item{cursor:pointer;padding-top: 4px;padding-bottom: 4px; margin-top: 4px;margin-bottom: 4px;}
div.dragonview .udcontrol.udimagesel .section .item.sel{font-weight:bold;}


@media screen and (max-height:580px){
    div.dragonview .udcontrol.udimagesel .uddata{max-height:380px;}
}
@media screen and (max-height:480px){
    div.dragonview .udcontrol.udimagesel .uddata{max-height:280px;}
}
@media screen and (max-width:1023px) , screen and (max-height:700px){
    div.dragonview{bottom:0!important;}
    div.dragonview #udcontrol{top:auto;bottom:32px;}
    div.dragonview .udcontrol-share{top:auto;bottom:48px; right: 96px;}
    div.dragonview .udcontrol-share div.uddata{padding:0!important;}

    div.dragonview .udcontrol-share{top:auto;bottom:16px; right: 96px;}
    div.dragonview .udcontrol-share div.uddata{padding:0!important;}
    
    div.dragonview .view .udtitle .uddata .select, 
    div.dragonview .view .udtitle .uddata .art {font-size: 18px;}

    div.dragonview div.view#v1{display:block;top:0!important;bottom:0!important;left:0!important;right:0!important;} 
    div.dragonview div.view#v2,
    div.dragonview div.view#v3,
    div.dragonview div.view#v4,
    div.dragonview div.view#v5{display:none!important;} 
}

/* image navigator*/
div.dragonview .udnavdragon{top:74px!important;left:10px!important;z-index:-1000;}
div.dragonview .udnavdragon .navigator{height:128px!important;width:170px!important;background:transparent!important;border-color:transparent!important;}
div.dragonview .udnavdragon .navigator .displayregion{border-color:white!important;}

div.dragonview[navigator="show"] .udnavdragon{;z-index:10;}
div.dragonview .udcontrol-view div.subset.options i.fa-check-circle{display:none;}
div.dragonview .udcontrol-view div.subset.options div.item.sel i.fa-check-circle{display:unset;}  
div.dragonview .udcontrol-view div.subset.options div.item.sel i.fa-circle{display:none;}
div.dragonview .udcontrol-view div.item span.LAN{line-height: 36px;vertical-align: middle;}

/* Specific app-modes: override may be needed*/
div.dragonview {touch-action:none!important}
body.fullscreen div.dragonview{position:fixed!important;top:0;left:0;bottom:0;top:0;}
body.kiosk div.dragonview #udcontrol div.udaction[action="ShowShareMenu"],
body.kiosk div.dragonview #udcontrol div.udaction[action="FullScreen"]{display:none;}
@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
  div.dragonview #udcontrol div.udaction[action="FullScreen"]{display:none!important;} 
}
body.kiosk div.dragonview .udcontrol-share{display:none;}