#dragitem {
    position: absolute;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    text-align: center;
    touch-action: none;
    user-select: none;
    opacity: 0.4;
}

#dragimg {
    width: 40vw;
    height: auto;
    margin: auto;
    display: block;
    pointer-events: none;
    opacity: 0.7;
}

#main_content {
    background-color: #fbfbfb;
    float: left;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    margin-right: 0%;
    margin-left: 0%;
    margin-top: 0%;
    touch-action: none;
}

#main_content #main {
    width: 100%;
    height: 54.5%;
    background-color: #fbfbfb;
}

#trash {
    position: absolute;
    width: 20%;
    height: 28%;
    left: 78%;
    bottom: 10%;
}

#main_right-sidebar {
    display: block;
    width: 100%;
    height: 25%;
    background-color: #fbfbfb;
}

.tool_btn {
    display: block;
    margin: 0px auto;
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

.colorPanelTable {
    /*
    display: table;
    */
    width: 33%;
    height: 27%;
    float: left;
    padding-bottom: 1%;
    top: 1%;
    left: 1%;
    position: absolute;
}

.colorPanelTableRowH {
    width: 33%;
    height: 20%;
    display: table-row;
    font-size: 1.5vh;
    text-align: center;
    color: #7b7b7b;
}

.colorPanelTableRow {
    display: table-row;
    font-size: 1.5vh;
    text-align: center;
    color: #7b7b7b;
}

.color_img {
    height: 3vh;
    width: auto;
}

.colorPanelTableHead {
    border-radius: 0px;
    border: 1px solid #cbcbcb;
    display: table-cell;
    padding: 1vh 1vh;
    vertical-align: middle;
}

.colorPanelTableHeadL {
    border-top-left-radius: 2vh;
    border-top-right-radius: 2vh;
    border: 1px solid #cbcbcb;
    display: table-cell;
    padding: 1vh 1vh;
    vertical-align: middle;
}

.colorPanelTableHeadR {
    border: 1px solid #cbcbcb;
    display: table-cell;
    padding: 1vh 1vh;
    vertical-align: middle;
}

.colorPanelTableCell0 {
    padding: 1vh 1vh;
    vertical-align: middle;
}

.colorPanelTableCell {
    border-radius: 0px;
    border-left: 1px solid #cbcbcb;
    border-right: 1px solid #cbcbcb;
    display: table-cell;
    padding: 1vh 1vh;
    vertical-align: middle;
}

.colorPanelTableCell2 {
    border-radius: 0px;
    display: table-cell;
    padding: 1vh 1vh;
    vertical-align: middle;
}

.colorPanelTableCell3 {
    border-radius: 0px;
    border-left: 1px solid #cbcbcb;
    border-right: 1px solid #cbcbcb;
    border-bottom: 1px solid #cbcbcb;
    display: table-cell;
    vertical-align: middle;
}

.colorPanelTableCell4 {
    border: 1px solid #cbcbcb;
    display: table-cell;
    vertical-align: middle;
}

#colorPanelTableCell5 {
    height: 14vh;
    overflow-y: auto;
}

.colorPanelTableBody {
    display: table-row-group;
}

#size_menu {
    border-radius: 1vh;
    border: 1px solid #c6c6c6;
    display: table;
    position: absolute;
    width: 30%;
    height: 17%;
    float: left;
    top: 5.8vh;
    padding: 1%;
    left: 66%;
    background-color: #fbfbfb;
    opacity: 0.9;
}

#size_menu .size_select {
    width: 100%;
    height: 30%;
    float: left;
    font-size: 2vh;
    text-align: center;
    margin-bottom: 3%;
    color: #7b7b7b;
}

#size_menu .size_select div {
    border: 1px solid #c6c6c6;
    width: 36%;
    height: 76%;
    float: left;
    padding-top: 2%;
    margin-right: 2%;
}

#size_menu .size_select select {
    border: 1px solid #c6c6c6;
    width: 59%;
    height: 100%;
    font-size: 2vh;
    color: #7b7b7b;
    background-color: #fbfbfb;
}

#rack_del {
    position: absolute;
    width: 30%;
    height: 7%;
    float: left;
    top: 25%;
    left: 67%;
    text-align: center;
}

#rack_del_btn {
    position: relative;
    margin-left: 0%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #4369e9;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    font-size: 3.5vw;
    color: white;
    text-align: center;
    background-position: center center;
    opacity: 0.9;
}

#rack_del_btn:active {
    background-color: #4bbdeb;
}

#rack_connect1 {
    position: absolute;
    width: 30%;
    height: 7%;
    float: left;
    top: 33%;
    left: 67%;
    text-align: center;
}

.rack_connect_btn {
    position: relative;
    margin-left: 0%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #4369e9;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    font-size: 3.5vw;
    color: white;
    text-align: center;
    background-position: center center;
    opacity: 0.9;
}

.rack_connect_btn:active {
    background-color: #4bbdeb;
}

.rack_connect_btn_red {
    position: relative;
    margin-left: 0%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #ec4747;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    font-size: 3.5vw;
    color: white;
    text-align: center;
    background-position: center center;
    opacity: 0.9;
}

.rack_connect_btn_red:active {
    background-color: #7a2424;
}

#rack_connect2 {
    position: absolute;
    width: 30%;
    height: 7%;
    float: left;
    top: 41%;
    left: 67%;
    text-align: center;
}

#item_category {
    float: left;
    width: 30%;
    height: 100%;
    z-index: 12;
}

#item_category .item_category_btn {
    display: block;
    height: 25%;
    width: 100%;
    border: 1px solid #cbcbcb;
    background-color: Transparent;
    font-size: 2.2vh;
    margin-right: 1%;
    color: #7b7b7b;
    outline: none;
}

#item_list {
    float: right;
    width: 70%;
    height: 100%;
    /*850 / 1540  61.68*/
    /*950 / 1540  61.68*/
    overflow-y: scroll;
    white-space: nowrap;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#item_list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera*/
}

.item_list_Table {
    display: table;
    width: 100%;
}

.item_list_TableRow {
    display: table-row;
    width: 100%;
    height: 100%;
}

.item_list_TableRow p {
    text-align: center;
    padding: 1vh 0;
    font-size: 3vw;
    padding-bottom: 2vh;
}

.item_list_TableCell {
    display: table-cell;
    text-align: center;
}

.item_list_TableCell .item_icon {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    text-align: center;
    height: 12vw;
    width: 12vw;
}

.item_list_TableCell .item_icon img {
    width: 100%;
    height: auto;
    margin: auto;
    display: block;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

.item_list_TableBody {
    display: table-row-group;
}

#file_menue {
    display: block;
    width: 100%;
    height: 100%;
}

#file_menue #button1 {
    box-shadow: 0 0 0 1px rgb(216, 216, 216) inset;
    float: left;
    width: 50%;
    height: 100%;
}

#file_menue #button2 {
    box-shadow: 0 0 0 1px rgb(216, 216, 216) inset;
    float: right;
    width: 50%;
    height: 100%;
}

#init_btn {
    margin-left: 0%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: Transparent;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    font-size: 4vw;
    color: white;
    text-align: center;
    background-position: center center;
}

#init_btn:active {
    background-color: #4bbdeb;
}

#save_btn {
    margin-left: 0%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: Transparent;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    font-size: 4vw;
    color: white;
    text-align: center;
    background-position: center center;
}

#save_btn:active {
    background-color: #4bbdeb;
}

#color_btn_menu {
    margin-top: 0%;
    height: 5.5%;
}

#color_btn_menu #color_btn_label {
    float: left;
    width: 30%;
    height: 100%;
    text-align: center;
    color: #fff;
    background-color: #4369e9;
    display: table-cell;
    vertical-align: middle;
}

#color_btn_menu button {
    box-shadow: 0 0 0 1px rgb(216, 216, 216) inset;
    width: 100%;
    height: 100%;
    font-size: 4vw;
    background-color: #4369e9;
    color: #fff;
    cursor: pointer;
    outline: none;
    border: none;
}

#color_btn_menu button:active {
    background-color: #4bbdeb;
}

.modal-content .colorTable {
    width: 100%;
    height: 65%;
    font-size: 2.2vh;
    color: #7b7b7b;
    text-align: center;
    line-height: 150%;
    position: relative;
    overflow-y: scroll;
}

.modal-content .colorTable p {
    position: absolute;
    width: 100%;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#order_menue {
    display: block;
    width: 100%;
    height: 100%;
}

#order_menue #button1 {
    box-shadow: 0 0 0 1px rgb(216, 216, 216) inset;
    float: left;
    width: 100%;
    height: 100%;
}

#send_btn {
    margin-left: 0%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: Transparent;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    font-size: 5vw;
    color: white;
    text-align: center;
    background-position: center center;
}

#send_btn:active {
    background-color: #4bbdeb;
}

.loading-content {
    position: relative;
    border-radius: 2vw;
    background-color: #fefefe;
    margin: 65% auto;
    padding: 3.5%;
    border: 1px solid #888;
    width: 70%;
    height: 10%;
}

.loading-content .message {
    display: table;
    width: 100%;
    height: 100%;
    margin: auto;
    font-size: 5.4vw;
    color: #7b7b7b;
    text-align: center;
    line-height: 150%;
}

#loading_msg {
    display: table-cell;
    vertical-align: middle;
}

#size_btn_menu {
    margin-top: 0%;
    height: 5.5%;
}

#size_btn_menu .size_selbox {
    width: 100%;
    height: 100%;
}

#size_btn_label .size_label {
    float: left;
    margin-top: 6%;
    width: 30%;
    font-size: 2vh;
}

#size_btn_label .size_label2 {
    float: left;
    width: 70%;
    height: 100%;
    font-size: 2vh;
}

#menu_label {
    float: left;
    width: 10%;
    height: 100%;
    text-align: center;
    color: #fff;
    background-color: #4369e9;
    display: table-cell;
    vertical-align: middle;
}

#menu_label div {
    display: inline-block;
    margin-top: 18%;
    font-size: 2vh;
}

#size_btn_menu #size_btn_label {
    float: left;
    width: 30%;
    height: 100%;
    text-align: center;
    color: #fff;
    background-color: #4369e9;
    display: table-cell;
    vertical-align: middle;
}

#tool_guid_label {
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    background-color: #4369e9;
    color: #fff;
    font-size: 2vh;
}

#tool_guid_label span {
    display: inline-block;
    margin: 0.8%;
}

#connet_btn_menu {
    margin-top: 0%;
    height: 5.5%;
}

#connet_btn_menu #connet_btn_label {
    float: left;
    width: 33.3333%;
    height: 100%;
    text-align: center;
    color: #fff;
    background-color: #4369e9;
    display: table-cell;
    vertical-align: middle;
}

#scroll_arrow {
    display: none;
    position: absolute;
    right: 0px;
    color: rgba(79, 180, 248, 0.65);
}

#scroll_arrow2 {
    display: none;
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: rgba(79, 180, 248, 0.65);
}