.demo-device-container .demo-device-orientation-selector > div {
    margin: 0 auto;
    width: 520px;
    text-align: right;
}
.demo-device-container.large .demo-device-orientation-selector > div {
    width: 750px;
}
.demo-device-container.horizontal .demo-device-orientation-selector > div {
    width: 830px;
}
.demo-device-container.horizontal.large .demo-device-orientation-selector > div {
    width: 1060px;
}
.demo-device-orientation-selector button {
    display: block;
    float: right;
    clear: both;
    font-size: 2.5em;
    padding: 0 0.5em;
    margin-bottom: 0.2em;
    margin-right: -2.2em;
}
.demo-device-orientation-selector button.horizontal > span {
    transform: rotate(90deg);
}
.demo-device-container .demo-device {
    height: 830px;
    width: 520px;
    margin: 0 auto;
    padding: 30px 20px;
    border-radius: 15px;
}
.demo-device-container.large .demo-device {
    height: 1060px;
    width: 750px;
}
.demo-device-container.horizontal .demo-device {
    width: 830px;
    height: 520px;
    padding: 20px 30px;
}
.demo-device-container.horizontal.large .demo-device {
    width: 1060px;
    height: 750px;
}
.demo-device-container .demo-display {
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 2px;

    position: relative;
}
.demo-device .demo-display > iframe {
    height: 100%;
    width: 100%;
    min-height: 450px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
}
.demo-device .demo-display > iframe.loading {
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 10000px;
}
.demo-load-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: white;
}
.demo-load-panel > span {
    position: absolute;
    top: 50%;
    left: 50%;

    font-size: 3em;
    opacity: 0.3;

    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@media (max-width: 1100px) {
    .demo-device-orientation-selector {
        display: none;
    }
    .demo-device-container .demo-device {
        width: 100%;
        min-width: 300px;
        height: 830px;
    }
}
@media (max-width: 1330px) {
    .demo-device-container.large .demo-device-orientation-selector {
        display: none;
    }
    .demo-device-container.large .demo-device {
        width: 100%;
        min-width: 300px;
        height: 1060px;
    }
}
@media (max-width: 1400px) {
    .demo-device-container.horizontal .demo-device-orientation-selector {
        display: none;
    }
    .demo-device-container.horizontal .demo-device {
        width: 100%;
        min-width: 320px;
        height: 520px;
    }
}
@media (max-width: 1630px) {
    .demo-device-container.horizontal.large .demo-device-orientation-selector {
        display: none;
    }
    .demo-device-container.horizontal.large .demo-device {
        width: 100%;
        min-width: 320px;
        height: 750px;
    }
}

.dxTouchUI.dxMobileUI .qrcode ~ span {
    display: block;
}
.dxTouchUI.dxMobileUI .qrcode {
    
}
.dxTouchUI.dxMobileUI .demo-display,
.dxTouchUI.dxMobileUI .demo-device-orientation-selector {
    display: none;
}
.dxTouchUI.dxMobileUI .demo-device-container .demo-device {
    border: none!important;
}
.dxTouchUI.dxMobileUI .demo-device-container .demo-device.qrcode-container {
    height: auto;
    padding: 0;
    background: none!important;
}
.dxTouchUI.dxMobileUI .qrcode-link,
.dxTouchUI.dxMobileUI .qrcode-link:hover {
    position: static;
    display: block;
    box-shadow: none !important;
    border: 0;
    border-radius: 0;
    width: 100%;
    height: auto;
}
    .dxTouchUI.dxMobileUI .qrcode-link [data-toggle="show-qrcode"] {
        display: none;
    }

.dxTouchUI.dxMobileUI .qrcode-popover {
    position: static;
    top:0;
    opacity:1;
    margin:0;
    border:none;
    max-width:inherit;
    box-shadow:none;
}
.dxTouchUI.dxMobileUI .qrcode-popover .popover-body {
    display:flex;
    align-items:center;
    flex-direction:column;
}
.dxTouchUI.dxMobileUI .qrcode-popover .arrow {
    display:none;
}

.qrcode ~ span {
    display: none;
}

.qrcode-container.demo-device {
    position: relative;
    margin-top: 24px;
}

.qrcode-link {
    position: absolute;
    top: -24px;
    right: 24px;
    border-radius: 50%;
}
.demo-device-container.horizontal .qrcode-link {
    top: -32px;
}
.qrcode-link:hover {
    width: 10em;
    height: 5em;
}
.qrcode-link [data-toggle="show-qrcode"] {
    width: 24px;
    height: 24px;
    margin: 0.75em;
}

.qrcode-popover {
    position:fixed;
    top: -1000px;
    right: 0;
    left: inherit;
    opacity: 0;
    transition: opacity 0.25s ease-in;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.qrcode-image-container {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    position: absolute;
    right: 0;
}

    .qrcode-link:hover .qrcode-popover,
    .qrcode-popover:hover {
        opacity: 1;
        top:4em;
        position:absolute;
    }
  
    .qrcode-popover .popover-body {
        padding: 0.3em;

    }

    .qrcode-popover .arrow {
        right: 0.6em;
    }

    .qrcode-popover .arrow::after {
        border-bottom-color: white;
    }