/* Mobile Devices */
@media (max-width: 768px) {
    .Header {height : 45px;}
    .Header .ToolBox .Group {
        position: relative;
        width: 100%;
    }
    .Header .ToolBox .Group .ElementsContainer {
        position: relative;
        width: 100%;
    }
    .Header .ToolBox .Group .ElementsContainer .Element {
        position: relative;
        width: 100%;
        height: 45px;
        cursor: pointer;
        padding-bottom: 5px;
        padding-top: 5px;
        border-bottom: 1px solid #EDEDED;
    }
    .Header .ToolBox .Group .ElementsContainer .Element:first-child {
        border-top: 1px solid #EDEDED;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Icon {
        position: relative;
        height: 45px;
        width: 45px;
        background-repeat: no-repeat;
        background-size: 42px 42px;
        background-position: center;
        margin-left: 5px;
        float: left;
        text-align: center;
        color: #126DC8;
        line-height: 55px;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Icon i {
        font-size: 31px;
    }
    .Header .ToolBox .Group .Name {
        display: none;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Text {
        position: relative;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        margin-left: 5px;
        width: calc(100% - 60px);
        float: left;
    }
    .Header .ToolBox .web-menu {
        width : calc(100% - 10px);
        height : 35px;
        padding: 5px;
        float : left;
        cursor: pointer;
        background-color: #126DC8;
        color: white;
    }
    .Header .ToolBox .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;
    }
    .Header .ToolBox .web-menu .icon i {
        font-size: 24px;
    }
    .Header .ToolBox .web-menu .text {
        width : calc(100% - 40px);
        height : 100%;
        line-height: 35px;
        text-align: left;
        font-size: 17px;
        display: inline-table;
    }
    .Header .ToolBox .web-menu-toolbox-items {
        position: absolute;
        top: 45px;
        left: 0;
        width: 100%;
        height: calc(100% - 45px);
        overflow: auto;
    }
    .Header .ToolBox .LeftSide .Element, .Header .ToolBox .RightSide .Element {
        width : calc(100% - 10px);
        height : 35px;
        margin: 5px;
        float : left;
        cursor: pointer;
        display: inline-table;
    }
    .Header .ToolBox .LeftSide .Element:hover, .Header .ToolBox .RightSide .Element:hover {
        background-color: #EFE3A7;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -khtml-border-radius: 8px;
        border-radius: 8px;
        cursor: pointer;
    }
    .Header .ToolBox .LeftSide .Element .Icon, .Header .ToolBox .RightSide .Element .Icon {
        width : 40px;
        height : 100%;
        position: relative;
        background: center no-repeat;
        background-size: 32px 32px;
        display: inline-table;
        float: left;
    }
    .Header .ToolBox .LeftSide .Element .Text, .Header .ToolBox .RightSide .Element .Text {
        width : calc(100% - 40px);
        height : 100%;
        line-height: 35px;
        text-align: left;
        font-size: 15px;
        display: inline-table;
    }
}

/* Small Tablets */
@media (min-width: 769px) and (max-width: 970px) {
    .Header {
        height : 45px;
        width: 50%;
        border-right: #bfc8cf 1px solid;
    }
    .Header .ToolBox .Group {
        position: relative;
        width: 100%;
    }
    .Header .ToolBox .Group .ElementsContainer {
        position: relative;
        width: 100%;
    }
    .Header .ToolBox .Group .ElementsContainer .Element {
        position: relative;
        width: 100%;
        height: 45px;
        cursor: pointer;
        border-bottom: 1px solid #EDEDED;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .Header .ToolBox .Group .ElementsContainer .Element:first-child {
        border-top: 1px solid #EDEDED;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Icon {
        position: relative;
        height: 45px;
        width: 45px;
        background-repeat: no-repeat;
        background-size: 42px 42px;
        background-position: center;
        margin-left: 5px;
        float: left;
        text-align: center;
        line-height: 55px;
        color: #126DC8;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Icon i {
        font-size: 31px;
    }
    .Header .ToolBox .web-menu .icon i {
        font-size: 24px;
    }
    .Header .ToolBox .Group .Name {
        display: none;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Text {
        position: relative;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        margin-left: 5px;
        width: calc(100% - 60px);
        float: left;
    }
    .Header .ToolBox .web-menu {
        width: 100%;
        height: 45px;
        float : left;
        cursor: pointer;
        background-color: #126DC8;
        color: white;
    }
    .Header .ToolBox .web-menu .icon {
        width : 40px;
        height : 100%;
        position: relative;
        background: center no-repeat;
        background-size: 32px 32px;
        display: inline-table;
        float: left;
        background-image: url('Mobile/Menu.png');
        text-align: center;
        line-height: 53px;
    }
    .Header .ToolBox .web-menu .text {
        width : calc(100% - 40px);
        height : 100%;
        line-height: 45px;
        text-align: left;
        font-size: 17px;
        display: inline-table;
    }
    .Header .ToolBox .web-menu-toolbox-items {
        position: absolute;
        top: 45px;
        left: 0;
        width: 100%;
        height: calc(100% - 45px);
        overflow: auto;
    }
    .Header .ToolBox .LeftSide .Element, .Header .ToolBox .RightSide .Element {
        width : calc(100% - 10px);
        height : 35px;
        margin: 5px;
        float : left;
        cursor: pointer;
        display: inline-table;
    }
    .Header .ToolBox .LeftSide .Element:hover, .Header .ToolBox .RightSide .Element:hover {
        background-color: #EFE3A7;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -khtml-border-radius: 8px;
        border-radius: 8px;
        cursor: pointer;
    }
    .Header .ToolBox .LeftSide .Element .Icon, .Header .ToolBox .RightSide .Element .Icon {
        width : 40px;
        height : 100%;
        position: relative;
        background: center no-repeat;
        background-size: 32px 32px;
        display: inline-table;
        float: left;
    }
    .Header .ToolBox .LeftSide .Element .Text, .Header .ToolBox .RightSide .Element .Text {
        width : calc(100% - 40px);
        height : 100%;
        line-height: 35px;
        text-align: left;
        font-size: 15px;
        display: inline-table;
    }
}

/* Tablets */
@media (min-width: 971px) and (max-width: 1284px) {
    .Header {height : 130px !important;}
    .Header .ToolBox .web-menu {
        width: 80px !important;
        float: left;
        margin-right: 0px !important;
    }
    .Header .ToolBox .Group, .Header .ToolBox .web-menu {
        width: auto;
        height: 100%;
        border-right: solid 1px #C7D6DD;
        min-width: 70px;
        overflow: hidden;
    }
    .Header .ToolBox .Group .ElementsContainer, .Header .ToolBox .web-menu .ElementsContainer {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 115px;
        min-height: 115px;
    }
    .Header .ToolBox .Group .Name, .Header .ToolBox .web-menu .Name {
        position: relative;
        width: 100%;
        height: calc(100% - 110px);
        background-color: #C0D8F4;
        text-align: center;
        font-size: 10px;
        color : #5D7798;
        cursor: default;
        line-height: 18px;
    }
    .Header .ToolBox .Group .ElementsContainer .Element, .Header .ToolBox .web-menu .ElementsContainer .Element {
        width : 70px;
        height : 115px;
        float : left;
        cursor: pointer;
        margin-left: 5px;
        margin-right: 5px;
    }
    .Header .ToolBox .Group .ElementsContainer .Element:hover, .Header .ToolBox .web-menu .ElementsContainer .Element:hover {
        background-color: #EFE3A7;
        cursor: pointer;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Icon, .Header .ToolBox .web-menu .ElementsContainer .Element .Icon {
        width : 70px;
        height : 85px;
        margin-top : 6px;
        position: relative;
        background: center no-repeat;
        background-size: 64px 64px;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Text, .Header .ToolBox .web-menu .ElementsContainer .Element .Text {
        width : 70px;
        height : 20px;
        line-height: 20px;
        text-align: center;
        font-size: 11px;
        color: #4D5174;
    }
}

/* PC Part */
@media (min-width: 1285px) {
    .Header {height : 110px !important;}
    .Header .ToolBox .web-menu {
        display: none;
    }
    .Header .ToolBox .Group {
        width: auto;
        height: 110px;
        margin-top: 0;
        margin-right: 0;
        min-width: 70px;
        overflow: hidden;
    }
    .Header .ToolBox .Group .ElementsContainer {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 93px;
        min-height: 90px;
    }
    .Header .ToolBox .Group .Name {
        position: relative;
        width: 100%;
        height: calc(100% - 93px);
        line-height: 19px;
        background-color: #1e5090;
        text-align: center;
        font-size: 9px;
        color: #FFFFFF;
        cursor: default;
        text-transform: uppercase;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-top: 1px solid #fff;
    }
    .Header .ToolBox .Group .ElementsContainer .Element {
        width : 70px;
        height : 100%;
        float : left;
        cursor: pointer;
    }
    .Header .ToolBox .Group .ElementsContainer .Element:hover {
        background-color: #fabc1b;
        cursor: pointer;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Icon {
        width: 58px;
        height: 56px;
        margin-top: 6px;
        position: relative;
        background: center no-repeat;
        background-size: 64px 64px;
        margin-left: 5px;
        border: 1px solid #EDEDED;
        text-align: center;
        line-height: 78px;
        display: table;
        border-radius: 40px;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Icon i {
        color: #fff;
        display: table-cell;
        font-size: 32px;
        vertical-align: middle;
    }
    .Header .ToolBox .Group .ElementsContainer .Element .Text {
        width: 70px;
        height: 20px;
        line-height: 25px;
        text-align: center;
        font-size: 11px;
        color: #ffffff;
    }
}