﻿.dx-simulator {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dx-simulator-wrapper {
    height: 100%;
    margin: 0 auto;
}

.dx-simulator iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: white;
}

.dx-simulator-back-wrapper {
    position: relative;
}

/* iPhone */
.dx-simulator-iphone-p {
    width: 320px;
    height: 480px;
    padding: 154px 60px 168px;
    background: url(Images/iphone-p.png) 0 0 no-repeat;
}

.dx-simulator-iphone-l {
    width: 480px;
    height: 320px;
    padding: 50px 158px 70px 164px;
    background: url(Images/iphone-l.png) 0 0 no-repeat;
}

/* iPhone 5 */
.dx-simulator-iphone5-p {
    width: 320px;
    height: 568px;
    padding: 154px 60px 168px 65px;
    background: url(Images/iphone5-p.png) 0 0 no-repeat;
    background-position: center;
}

.dx-simulator-iphone5-l {
    width: 568px;
    height: 320px;
    padding: 65px 158px 70px 147px;
    background: url(Images/iphone5-l.png) 0 0 no-repeat;
    background-position: center;
}

/* iPad */
.dx-simulator-ipad-p {
    width: 768px;
    height: 1024px;
    padding: 165px 173px 202px;
    background: url(Images/ipad-p.png) 0 0 no-repeat;
}

.dx-simulator-ipad-l {
    width: 1024px;
    height: 768px;
    padding: 158px 187px 188px 180px;
    background: url(Images/ipad-l.png) 0 0 no-repeat;
}

/* iPad Mini */
.dx-simulator-ipadmini-p {
    width: 768px;
    height: 1024px;
    padding: 200px 173px 202px;
    background: url(Images/ipad-mini-p.png) 0 0 no-repeat;
    background-position: center;
}

.dx-simulator-ipadmini-l {
    width: 1024px;
    height: 768px;
    padding: 158px 185px 160px 184px;
    background: url(Images/ipad-mini-l.png) 0 0 no-repeat;
    background-position: center;
    margin-top: -50px;
}

/* Android phone */
.dx-simulator-androidphone-p {
    width: 360px;
    height: 640px;
    padding: 98px 52px 138px 58px;
    background: url(Images/androidphone-p.png) 0 0 no-repeat;
}

    .dx-simulator-androidphone-p .dx-simulator-back {
        top: 30px;
        left: 272px;
        position: absolute;
        width: 50px;
        height: 30px;
        cursor: pointer;
    }

.dx-simulator-androidphone-l {
    width: 640px;
    height: 360px;
    padding: 52px 128px 68px 106px;
    background: url(Images/androidphone-l.png) 0 0 no-repeat;
}

    .dx-simulator-androidphone-l .dx-simulator-back {
        position: absolute;
        top: -330px;
        left: 670px;
        width: 35px;
        height: 50px;
        cursor: pointer;
    }

/* Android tablet */
.dx-simulator-androidtablet-p {
    width: 575px;
    height: 815px;
    padding: 198px 147px 243px 146px;
    background: url(Images/androidtablet-p.png) 0 0 no-repeat;
}

    .dx-simulator-androidtablet-p .dx-simulator-back {
        position: absolute;
        width: 100px;
        height: 60px;
        cursor: pointer;
    }

.dx-simulator-androidtablet-l {
    width: 855px;
    height: 534px;
    padding: 123px 183px 156px 197px;
    background: url(Images/androidtablet-l.png) 0 0 no-repeat;
}

    .dx-simulator-androidtablet-l .dx-simulator-back {
        position: absolute;
        width: 100px;
        height: 60px;
        cursor: pointer;
    }

.dx-simulator-nexus7-p {
    width: 608px;
    height: 965px;
}

.dx-simulator-nexus7-l {
    width: 965px;
    height: 608px;
}


/* Win8 Phone */
.dx-simulator-win8phone-p {
    background: url(Images/Win8Phone.png) no-repeat 50% 50%;
    width: 331px;
    height: 568px;
    padding: 123px 41px 131px 42px;
}

.dx-simulator-win8phone-l {
    background: url(Images/Win8Phone-l.png) no-repeat 50% 50%;
    width: 568px;
    height: 330px;
    padding: 41px 130px 42px 123px;
}

.dx-simulator-win8phone-p .dx-simulator-back {
    position: absolute;
    width: 100px;
    height: 80px;
    cursor: pointer;
    top: 4px;
    left: -4px;
}

.dx-simulator-win8phone-l .dx-simulator-back {
    position: absolute;
    width: 80px;
    height: 100px;
    cursor: pointer;
    top: -100px;
    left: 573px;
}

/* Nokia 920 */
.dx-simulator-nokia920-p {
    width: 461px;
    height: 768px;
}

.dx-simulator-nokia920-l {
    width: 768px;
    height: 461px;
}

/* Tizen */
.dx-simulator-tizen-p {
    width: 361px;
    height: 640px;
    padding: 96px 48px 103px 48px;
    background: url(Images/tizen-p.png) 0 0 no-repeat;
}

    .dx-simulator-tizen-p .dx-simulator-back {
        top: 30px;
        left: 272px;
        position: absolute;
        width: 50px;
        height: 30px;
        cursor: pointer;
    }

.dx-simulator-tizen-l {
    width: 640px;
    height: 360px;
    padding: 45px 103px 49px 96px;
    background: url(Images/tizen-l.png) 0 0 no-repeat;
}

    .dx-simulator-tizen-l .dx-simulator-back {
        position: absolute;
        top: -330px;
        left: 670px;
        width: 35px;
        height: 50px;
        cursor: pointer;
    }


/* Generic phone */
.dx-simulator-genericphone-p {
    width: 360px;
    height: 640px;
    padding: 107px 62px 143px;
    background: url(Images/generic-p.png) 0 0 no-repeat;
}



/* MS Surface */

.dx-simulator-mssurface-l {
    width: 1366px;
    height: 768px;
    padding: 130px 154px;
    background: url(Images/mssurface-l.png) 0 0 no-repeat;
}

.dx-simulator-mssurface-p {
    height: 1366px;
    width: 768px;
    padding: 154px 130px;
    background: url(Images/mssurface-p.png) 0 0 no-repeat;
}

/* Desktop */
.dx-simulator-desktop-p {
    background: white;
    width: 100%;
    height: 100%;
}

.dx-simulator-desktop-l {
    background: white;
    width: 766px;
    border-radius: 7px;
    height: 600px;
    padding: 30px;
    margin-top: 53px;
}

.dx-simulator-desktop_1280x720-p {
    width: 720px;
    height: 1280px;
}

.dx-simulator-desktop_1280x720-l {
    width: 1280px;
    height: 720px;
}

.dx-simulator-desktop_1440x900-p {
    width: 900px;
    height: 1440px;
}

.dx-simulator-desktop_1440x900-l {
    width: 1440px;
    height: 900px;
}

.dx-simulator-desktop_1920x1080-p {
    width: 1080px;
    height: 1920px;
}

.dx-simulator-desktop_1920x1080-l {
    width: 1920px;
    height: 1080px;
}

.simulator-small-height .dxm-simulator-desktop-l {
    height: 692px;
}

.dx-simulator.dx-simulator-ipadmini-p, .dx-simulator.dx-simulator-ipadmini-l {
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    -webkit-transform-origin: center 0;
    -moz-transform-origin: center 0;
    -ms-transform-origin: center 0;
    -o-transform-origin: center 0;
    transform-origin: center 0;
}


.dx-simulator.simple-chrome {
    background: none;
    padding: 36px;
    border-radius: 30px;
    border: solid 11px transparent;
}

.dx-simulator.simple-chrome:before {
    top: -6px;
    left: -6px;
    position: absolute;
    z-index: -1;
    border-radius: 30px;
    border: solid 6px transparent;
    width: 100%;
    height: 100%;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,1), 0 0 0 3px rgba(0,0,0,1);
    content: "";
}

.dx-simulator.empty-chrome {
    background: none;
    padding: 0;
}

.spinner {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
  
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.devtools-notice {
    max-width: 600px;
    margin: 0 auto 30px auto;
}

.devtools-notice img {
    float: left;
    margin-right: 15px;
}

@-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
    0%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

.qr-code-container .qr-code {
    margin: auto;
    margin-top: 5px;
}

.qr-code-container  p {
    padding: 0 10px;
    font-size: 10px;
    text-align: center;
}

.toolbar-item.qr-code {
    height: 160px;
}