﻿#btn-64-0 {
    display: none;
    position: absolute;
    top: 1px;
    right: 4px;
    z-index: 28;
}
#btn-64-0:active, #btn-64-0.active
 {
    background-position: 0px -34px;
}
#btn-64-0 span{
    width: 28px;
    height: 2px;
    display: block;
    background: white;
    margin: 5px 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#btn-64-0 span:first-child{
    margin-top: 10px;
}

@media screen and (max-width: 940px){
    #modalWindow{
        padding-right: 10px;
        padding-left: 10px;
    }
    #btn-64-0 {
        display: block;
    }
    #toolbar {
        display: none;
        padding-right: 65px;
        height: 94px;
        z-index:27;
        background: rgba(0,0,0,0.8);
    }
    .tooblar_group {
        float: none;
        margin: 0;
        padding: 0;
    }
    #toolbar .button {
        margin: 6px 10px;
    }
    .separator {
        display: none;
    }
    #btn-62-0,#btn-9-0, #btn-10-0 {
        background-position: 0px 0px;
        width: 47px;
        margin-right: 3px;
    }
    #btn-62-0 .btn-fg {
        background-position: -327px -102px;
    }
    #btn-62-0:active, #btn-62-0.active {
        background-position: 0px -34px;
    }

    #btn-9-0 .btn-fg {
        background-position: -92px -102px;
    }
    #btn-9-0:active, #btn-9-0.active {
        background-position: 0px -34px;
    }

    #btn-10-0 .btn-fg {
        background-position:-185px -102px;
    }
    #btn-10-0:active,
    #btn-10-0.active {
        background-position: 0px -34px;
    }

    .nm_zoom_ {
        background-position: 0px 0px;
        height:34px;
        width: 47px;
    }
    .nm_zoom_.active, .nm_zoom_:active {
        background-position: 0px -34px;
        height: 34px;
    }
    .nm_zoom_.active .btn-fg, .nm_zoom_:active .btn-fg {
        margin-top: 0;
    }
    

    .nm_zoom_ .btn-fg {
        height: 25px;
    }
    /* zoom 2x*/
    #btn-1-0 .btn-fg {
        background-position: -603px -141px;
        height: 25px;
    }

    /* zoom 5x */
    #btn-2-0 .btn-fg {
        background-position: -603px -174px;
    }

    /* zoom 10x */
    #btn-3-0 .btn-fg {
        background-position: -603px -208px;
    }

    /* zoom 20x */
    #btn-4-0 .btn-fg {
        background-position: -603px -242px;
    }

    /* zoom 40x */
    #btn-5-0 .btn-fg {
        background-position: -603px -276px;
    }
    #btn-7-0.default {
        margin: 6px 10px;
    }
    #toolbarbuttons-right {
        float: left;
    }

    #toolbar-slideoperation-arrow,
    #toolbar-createannot-arrow,
    #toolbar-rotate-arrow,
    #toolbar-snapshot-arrow,
    #toolbar-help-arrow {
        visibility: hidden;
    }
    #toolbar-slideoperation,
    #toolbar-createannot,
    #toolbar-rotate,
    #toolbar-snapshot,
    #toolbar-help
    {
        left: 10px;
        top: 10px;
    }

    #toolbar-rotate,
    #toolbar-createannot{
        height: auto;

    }
    #toolbar-createannot .buttongroup{
        float: none;
    }
    #toolbar-help {
        right: auto;
    }
    
    #fl-al-content, #fl-ap-props, #floating-annotprop #fl-ap-notes
    {
        background-color: rgba(229,229,229,0.6);
    }
    
    #fl-ap-notes-textarea {
        width: 292px;
    }

    .al_name,
    .al_name.wo_scroll, .al_nametextbox.wo_scroll,
    .al_name.w_scroll, .al_nametextbox.w_scroll {
        width: 190px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    #floating-annotcolor {
        left: 310px;
    }
}
@media screen and (max-width: 730px) {
    #toolbar-createannot,
    #toolbar-rotate
    {
        left: 0px;
        top: 50px;
    }
}
@media screen and (max-width: 716px) {
    #toolbar {
        height: 140px;
    }
}
@media screen and (max-width: 515px) {
    #toolbar {
        height: 186px;
    }
}
@media screen and (max-width: 500px) {
    #floating-annotcolor {
        left: 0px;
        top: 60px;
    }
}

@media screen and (max-width: 401px) {
    #toolbar {
        height: 232px;
    }

    #floating-annotlist {
        width: 300px;
    }
}

@media screen and (max-height: 400px) {
    #floating-annotmain {
        height: 125px;
    }
    #floating-annotmain #fl-al-content {
        height: 76px;
    }
    #floating-annotcolor {
        height: 130px !important;
    }
    #floating-annotprop {
        top: 165px !important;
    }
    #fl-ac-separator,
    #fl-ac-slider {
        display: none;
        visibility: hidden;
    }
    #settings > div#page_container{
        height: 227px;
    }
}

@media screen and (max-width: 337px) {
    #toolbar {
        height: 278px;
    }
}

@media screen and (max-width: 314px) {
    #toolbar {
        height: 324px;
    }
}
@media screen and (max-width: 267px) {
    #toolbar {
        height: 462px;
    }
}

@media screen and (max-device-width: 600px) {
    textarea {
        max-width: 80vw !important;
    }

    #fl-ap-prop-measure {
        width: 130px;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .al_name {
        width: 130px;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (max-device-width: 600px) {
    .al_name {
        width: 130px;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (max-device-width: 600px) {
    .ui-dialog {
        min-width: 200px;
    }
}

@media (max-device-width: 400px) {
    #modalWindow {
        min-width: 280px !important;
    }
}