/* Mobile Devices */
@media (max-width: 768px) {
    .Menu {
        position: absolute;
        top : 46px;
        height: 45px;
        left : 0;
        width : 100%;
        border-bottom: #bfc8cf 1px solid;
        background: white;
    }
    .Menu .web-menu {
        width : calc(100% - 10px);
        height : 35px;
        padding: 5px;
        float : left;
        cursor: pointer;
        background-color: #126DC8;
        color: white;
    }
    .Menu .web-menu .icon {
        width : 40px;
        height : 100%;
        position: relative;
        background: center no-repeat;
        background-size: 32px 32px;
        display: inline-table;
        float: left;
        text-align: center;
        line-height: 44px;
    }
    .Menu .web-menu .icon i {
        font-size: 24px;
    }
    .Menu .web-menu .text {
        width : calc(100% - 40px);
        height : 100%;
        line-height: 37px;
        text-align: left;
        font-size: 17px;
        display: inline-table;
    }
    .RulerX {
        display:none;
    }
    .RulerY {
        display:none;
    }
    .Modul {
        display: none;
        position: absolute;
        bottom : 0;
        left : 0;
        height : 100px;
        width: 100%;
        border-top: 1px solid gray;
        overflow: auto;
    }
    .Modul .Element {
        width : 100%;
        height: 42px;
        cursor: pointer;
        color : #1D446F;
        border-radius: 0px;
        display: inline-table;
        border-bottom: solid #EDEDED 1px;
        text-transform: uppercase;
    }
    .Modul .Element:last-child {
        border-bottom: none;
    }
    .Modul .Selected {
        background-color: #126DC8;
        color: #FFFFFF !important;
        text-transform: uppercase;
    }
    .Modul .Element .Image {
        width : 50px;
        height: 40px;
        float : left;
        text-align: center;
    }
    .Modul .Element .Image i {
        font-size: 35px;
        line-height: 40px;
    }
    .Modul .Element .Caption {
        float : left;
        width : calc(100% - 50px);
        line-height: 43px;
        height: 40px;
        font-size: 17px;
    }
    .Menu .ShortCut {
        position: absolute;
        width: 100%;
        top : 40px;
        left : 0;
        display:none;
        overflow: auto !important;
    }
    .filetree span.folder, .filetree span.file {
        font-size: 16px !important;
        padding-left: 15px;
        line-height: 36px;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: 35px;
    }
    .treeview li.collapsable, .treeview li.expandable {
        padding-left: 0 !important;
    }
    .filetree li.expandable span.folder {
        line-height: 36px;
    }
    .treeview ul li ul {
        padding-left: 15px;
    }
}

/* Small Tablets */
@media (min-width: 769px) and (max-width: 970px) {
    .Menu {
        position: absolute;
        top : 0;
        height: 45px;
        right : 0;
        width : 50%;
        border-bottom: #bfc8cf 1px solid;
        border-left: #bfc8cf 1px solid;
        background: white;
    }
    .Menu .web-menu {
        width: 100%;
        height: 45px;
        float : left;
        cursor: pointer;
        background-color: #126DC8;
        color: white;
    }
    .Menu .web-menu .icon {
        width : 40px;
        height : 100%;
        position: relative;
        background: center no-repeat;
        background-size: 32px 32px;
        display: inline-table;
        float: left;
        text-align: center;
        line-height: 53px;
    }
    .Menu .web-menu .icon i {
        font-size: 24px;
    }
    .Menu .web-menu .text {
        width : calc(100% - 40px);
        height : 100%;
        line-height: 45px;
        text-align: left;
        font-size: 17px;
        display: inline-table;
        color: white;
    }
    .RulerX {
        display:none;
    }
    .RulerY {
        display:none;
    }
    .Modul {
        display: none;
        position: absolute;
        bottom : 0;
        left : 0;
        height : 100px;
        width: 100%;
        border-top: 1px solid gray;
        overflow: auto;
    }
    .Modul .Element {
        width : 100%;
        height: 40px;
        cursor: pointer;
        color: #1D446F;
        border-radius: 0px;
        display: inline-table;
        text-transform: uppercase;
        border-bottom: solid #EDEDED 1px;
    }
    .Modul .Element:last-child {
        border-bottom: none;
    }
    .Modul .Selected {
        background-color: #126DC8;
        color: #FFFFFF !important;
        text-transform: uppercase;
    }
    .Modul .Element .Image {
        width : 50px;
        height: 40px;
        float : left;
        text-align: center;
        line-height: 37px;
    }
    .Modul .Element .Image i {
        font-size: 35px;
        line-height: 40px;
    }
    .Modul .Element .Caption {
        float : left;
        width : calc(100% - 50px);
        line-height: 40px;
        height: 40px;
        font-size: 17px;
    }
    .Menu .ShortCut {
        position: absolute;
        width: 100%;
        top: 45px;
        left : 0;
        display:none;
        overflow: auto !important;
    }
    .filetree span.folder, .filetree span.file {
        font-size: 16px !important;
    }
    .filetree span.folder, .filetree span.file {
        font-size: 15px !important;
        padding-left: 15px;
        line-height: 36px;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
        height: 35px;
    }
    .treeview li.collapsable, .treeview li.expandable {
        padding-left: 0 !important;
    }
    .filetree li.expandable span.folder {
        line-height: 36px;
    }
    .treeview ul li ul {
        padding-left: 15px;
    }
}

/* Tablets */
@media (min-width: 971px) and (max-width: 1284px) {
    .Menu {
        position: absolute;
        top : 131px;
        height: calc(100% - 131px) !important;
        left : -350px;
        width : 350px;
        background: #e6eff8;
        z-index: 10000;
    }
    .Menu .web-menu {
        display: none;
    }
    .RulerX {
        position: absolute;
        top : 0;
        left : 346px;
        height : 100%;
        width : 3px;
        background-image: -o-linear-gradient(bottom, #e6eff8 0%, #d3d3d3 100%);
        background-image: -moz-linear-gradient(bottom, #e6eff8 0%, #d3d3d3 100%);
        background-image: -webkit-linear-gradient(bottom, #e6eff8 0%, #d3d3d3 100%);
        background-image: -ms-linear-gradient(bottom, #e6eff8 0%, #d3d3d3 100%);
        background-image: linear-gradient(to bottom, #e6eff8 0%, #d3d3d3 100%);
        cursor: ew-resize;
        border-right: #bfc8cf 1px solid;
    }
    .RulerY {
        position: absolute;
        left : 0;
        bottom : 100px;
        cursor: n-resize;
        height: 4px;
        width: 100%;
        background-image: -o-linear-gradient(right, #e6eff8 0%, #d3d3d3 100%);
        background-image: -moz-linear-gradient(right, #e6eff8 0%, #d3d3d3 100%);
        background-image: -webkit-linear-gradient(right, #e6eff8 0%, #d3d3d3 100%);
        background-image: -ms-linear-gradient(right, #e6eff8 0%, #d3d3d3 100%);
        background-image: linear-gradient(to right, #e6eff8 0%, #d3d3d3 100%);
    }
    .Modul {
        position: absolute;
        bottom : 0;
        left : 0;
        height : 100px;
        width: calc(100% - 4px);
        display: inherit !important;
    }
    .Modul .Element {
        width : 100%;
        height: 65px;
        cursor: pointer;
        color : #1D446F;
        font-weight: bold;
        font-size: 13px;
        background-image: -o-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: -moz-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: -webkit-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: -ms-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: linear-gradient(to bottom, #DCF1FF 0%, #B4D5FE 100%);
        border-bottom: solid #738CAB 1px;
    }
    .Modul .Element-HighLight {
        width : 100%;
        height: 50px;
        cursor: pointer;
        color : #1D446F;
        font-weight: bold;
        font-size: 13px;
        background-image: -o-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -moz-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -webkit-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -ms-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: linear-gradient(to bottom, #EFE3A7 0%, #FCB249 100%);
        border-bottom: solid #738CAB 1px;
    }
    .Modul .Element:last-child {
        border-bottom: none;
    }
    .Modul .Selected {
        background-image: -o-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -moz-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -webkit-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -ms-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: linear-gradient(to bottom, #EFE3A7 0%, #FCB249 100%);
    }
    .Modul .Element .Image {
        width : 65px;
        height: 65px;
        float : left;
        background: center no-repeat;
    }
    .Modul .Element .Caption {
        float : left;
        width : calc(100% - 75px);
        line-height: 65px;
        height: 65px;
        font-size: 18px;
    }
    .Modul .Element .ui-icon {
        float: left;
        margin-top: 13px;
    }
    .Modul .SmallElements {
        position: absolute;
        bottom: 0;
        left: 0;
        width : 100%;
        height: 30px;
        background-image: -o-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: -moz-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: -webkit-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: -ms-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: linear-gradient(to bottom, #DCF1FF 0%, #B4D5FE 100%);
        border-top: solid #738CAB 1px;
    }
    .Modul .SmallElements .SmallElement {
        position: relative;
        display: inline-block;
        width: 24px;
        height: 24px;
        float: right;
        margin-top: 3px;
        margin-right: 3px;
        border-radius: 6px;
    }
    .Modul .SmallElements .SmallElement .Image {
        background: center no-repeat;
        background-size: 20px 20px;
        width: 24px;
        height: 24px;
    }
    .Modul .SmallElements .SmallElement:hover {
        background-image: -o-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -moz-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -webkit-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -ms-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: linear-gradient(to bottom, #EFE3A7 0%, #FCB249 100%);
    }
    .Modul .SmallElements .Selected {
        background-image: -o-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -moz-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -webkit-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -ms-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: linear-gradient(to bottom, #EFE3A7 0%, #FCB249 100%);
    }
    .Menu .ShortCut {
        position: absolute;
        width: calc(100% - 4px);
        top : 0;
        left : 0;
        display: inherit !important;
        overflow-y: auto;
    }
}

/* PC Part */
@media (min-width: 1285px) {
    .Menu {
        position: absolute;
        top : 111px;
        height: calc(100% - 111px) !important;
        left : 0;
        width : 250px;
        background: #FFFFFF;
    }
    .Menu .web-menu {
        display: none;
    }
    .RulerX {
        position: absolute;
        top : 0;
        left: 248px;
        height : 100%;
        width: 1px;
        background-image: -o-linear-gradient(bottom, #e6eff8 0%, #d3d3d3 100%);
        background-image: -moz-linear-gradient(bottom, #e6eff8 0%, #d3d3d3 100%);
        background-image: -ms-linear-gradient(bottom, #e6eff8 0%, #d3d3d3 100%);
        cursor: ew-resize;
        border-right: #EDEDED 1px solid;
    }
    .RulerY {
        position: absolute;
        left : 0;
        bottom : 100px;
        cursor: n-resize;
        height: 1px;
        width: 100%;
        border-top: 1px solid #EDEDED;
    }
    .Modul {
        position: absolute;
        bottom : 0;
        left : 0;
        height : 100px;
        width: 100%;
        display: inherit !important;
    }
    .Modul .Element {
        width : 100%;
        height: 40px;
        cursor: pointer;
        color : #1D446F;
        font-weight: bold;
        font-size: 13px;
        border-bottom: solid #EDEDED 1px;
        text-transform: uppercase;
    }
    .Modul .Element-HighLight {
        width : 100%;
        height: 40px;
        cursor: pointer;
        color : #1D446F;
        font-weight: bold;
        font-size: 13px;
        background-image: -o-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -moz-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -webkit-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -ms-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: linear-gradient(to bottom, #EFE3A7 0%, #FCB249 100%);
        border-bottom: solid #738CAB 1px;
    }
    .Modul .Element:last-child {
        border-bottom: none;
    }
    .Modul .Selected {
    background-color: #fabc1b;
    color: #FFFFFF !important;
    text-transform: uppercase;
    }
    .Modul .Element .Image {
        width : 50px;
        height: 40px;
        float : left;
        text-align: center;
    }
    .Modul .Element .Image i {
        font-size: 35px;
        line-height: 40px;
    }
    .Modul .Element .Caption {
        float : left;
        width : calc(100% - 70px);
        line-height: 40px;
        height: 40px;
        font-size: 15px;
        font-weight: normal;
    }
    .Modul .Element .ui-icon {
        float: left;
        margin-top: 13px;
    }
    .Modul .SmallElements {
        position: absolute;
        bottom: 0;
        left: 0;
        width : 100%;
        height: 30px;
        background-image: -o-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: -moz-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: -webkit-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: -ms-linear-gradient(bottom, #DCF1FF 0%, #B4D5FE 100%);
        background-image: linear-gradient(to bottom, #DCF1FF 0%, #B4D5FE 100%);
        border-top: solid #738CAB 1px;
    }
    .Modul .SmallElements .SmallElement {
        position: relative;
        display: inline-block;
        width: 24px;
        height: 24px;
        float: right;
        margin-top: 3px;
        margin-right: 3px;
        border-radius: 6px;
    }
    .Modul .SmallElements .SmallElement .Image {
        background: center no-repeat;
        background-size: 20px 20px;
        width: 24px;
        height: 24px;
    }
    .Modul .SmallElements .SmallElement:hover {
        background-image: -o-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -moz-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -webkit-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -ms-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: linear-gradient(to bottom, #EFE3A7 0%, #FCB249 100%);
    }
    .Modul .SmallElements .Selected {
        background-image: -o-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -moz-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -webkit-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: -ms-linear-gradient(bottom, #EFE3A7 0%, #FCB249 100%);
        background-image: linear-gradient(to bottom, #EFE3A7 0%, #FCB249 100%);
    }
    .Menu .ShortCut {
        position: absolute;
        width: calc(100% - 4px);
        top : 0;
        left : 0;
        display: inherit !important;
        overflow-y: auto;
    }
}

.Menu .ShortCut .treeview label {
    margin-left: 2%;
}

.filetree li[subtype="shortcut"] span.selected {
    color: #fabc1b;
}