.grid-container {
    display: grid;
    grid-template-columns: .2fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header" "sidenav main";
    height: 100vh;
}

.header {
    grid-area: header;
}

.sidenav {
    grid-area: sidenav;
    overflow: auto;
}

.main {
    grid-area: main;
}

@page {
    size: landscape;
    /*margin: 25mm 25mm 25mm 25mm;*/
}
.customer_add_device div img {
    width: 50px;
    height: 50px;
}

.customer_add_logic div img {
    width: 50px;
    height: 50px;
}

.customer_add_support div img {
    width: 50px;
    height: 50px;
}

#PFD div {
    /*width="100% " !important;
    height="100%" !important;*/
    /*width:100% !important;
  height:100% !important;*/
}

#PFD svg {
    /*width="100%" !important;
  height="100%" !important;*/
    width: 100% !important;
}

#STR div {
    /*width="100% " !important;
    height="100%" !important;*/
    /*width:100% !important;
  height:100% !important;*/
}

#STR svg {
    /*width:="100%" !important;
  height:="100%" !important;*/
    width: 100% !important;
}
       
#div1_voting_single1, #div1_voting_single2, #div1_voting_single3, #div1_voting_double1, #div1_voting_double2, #div1_voting_double3, #div1_voting_triple1, #div1_voting_triple2, #div1_voting_triple3,
#div2_voting_single1, #div2_voting_single2, #div2_voting_single3, #div2_voting_double1, #div2_voting_double2, #div2_voting_double3, #div2_voting_triple1, #div2_voting_triple2, #div2_voting_triple3,
#div3_voting_single1, #div3_voting_single2, #div3_voting_single3, #div3_voting_double1, #div3_voting_double2, #div3_voting_double3, #div3_voting_triple1, #div3_voting_triple2, #div3_voting_triple3,
#div4_voting_single1, #div4_voting_single2, #div4_voting_single3, #div4_voting_double1, #div4_voting_double2, #div4_voting_double3, #div4_voting_triple1, #div4_voting_triple2, #div4_voting_triple3,
#div5_voting_single1, #div5_voting_single2, #div5_voting_single3, #div5_voting_double1, #div5_voting_double2, #div5_voting_double3, #div5_voting_triple1, #div5_voting_triple2, #div5_voting_triple3,
#diva1_voting_single1, #diva1_voting_single2, #diva1_voting_single3, #diva1_voting_double1, #diva1_voting_double2, #diva1_voting_double3, #diva1_voting_triple1, #diva1_voting_triple2, #diva1_voting_triple3,
#diva2_voting_single1, #diva2_voting_single2, #diva2_voting_single3, #diva2_voting_double1, #diva2_voting_double2, #diva2_voting_double3, #diva2_voting_triple1, #diva2_voting_triple2, #diva2_voting_triple3,
#diva3_voting_single1, #diva3_voting_single2, #diva3_voting_single3, #diva3_voting_double1, #diva3_voting_double2, #diva3_voting_double3, #diva3_voting_triple1, #diva3_voting_triple2, #diva3_voting_triple3,
#diva4_voting_single1, #diva4_voting_single2, #diva4_voting_single3, #diva4_voting_double1, #diva4_voting_double2, #diva4_voting_double3, #diva4_voting_triple1, #diva4_voting_triple2, #diva4_voting_triple3,
#diva5_voting_single1, #diva5_voting_single2, #diva5_voting_single3, #diva5_voting_double1, #diva5_voting_double2, #diva5_voting_double3, #diva5_voting_triple1, #diva5_voting_triple2, #diva5_voting_triple3,
#change_diva1_simp, #change_diva1_dual, #change_diva1_tri, #change_diva1_simp1, #change_diva1_dual1, #change_diva1_tri1, #change_diva1_simp2, #change_diva1_dual2, #change_diva1_tri2,
#change_diva2_simp, #change_diva2_simp1, #change_diva2_simp2, #change_diva2_dual, #change_diva2_dual1, #change_diva2_dual2, #change_diva2_tri, #change_diva2_tri1, #change_diva2_tri2,
#change_diva3_simp, #change_diva3_simp1, #change_diva3_simp2, #change_diva3_dual, #change_diva3_dual1, #change_diva3_dual2, #change_diva3_tri, #change_diva3_tri1, #change_diva3_tri2,
#change_diva4_simp, #change_diva4_simp1, #change_diva4_simp2, #change_diva4_dual, #change_diva4_dual1, #change_diva4_dual2, #change_diva4_tri, #change_diva4_tri1, #change_diva4_tri2,
#change_diva5_simp, #change_diva5_simp1, #change_diva5_simp2, #change_diva5_dual, #change_diva5_dual1, #change_diva5_dual2, #change_diva5_tri, #change_diva5_tri1, #change_diva5_tri2,
#voting_label_div1, #voting_label_div2, #voting_label_div3, #voting_label_div4, #voting_label_div5, #voting_label_diva1, #voting_label_diva2, #voting_label_diva3, #voting_label_diva4,
#input_voting_div1, #input_voting_div2, #input_voting_div3, #input_voting_div4, #input_voting_div5, #action_voting_diva1, #action_voting_diva2, #action_voting_diva3, #action_voting_diva4, #action_voting_diva5,
#voting_label_diva5, #div1boxes, #div2boxes, #div3boxes, #div4boxes, #div5boxes, #diva1boxes, #diva2boxes, #diva3boxes, #diva4boxes, #diva5boxes,
#linediv1, #linediv2, #linediv3, #linediv4, #linediv5, #linediva1, #linediva2, #linediva3, #linediva4, #linediva5,
#Customer_Device_Update, #Customer_Logic_Update, #Customer_Support_Update, #logicdiv, #devicediv, #supportingdiv, #templatediv img:nth-of-type(1) {
    display: none;
}

textarea {
    resize: none;
}

#div1_voting_single1 img, #div1_voting_single2 img, #div1_voting_double1 img, #div1_voting_double2 img, #div1_voting_triple1 img, #div1_voting_triple2 img,
#div2_voting_single1 img, #div2_voting_single2 img, #div2_voting_double1 img, #div2_voting_double2 img, #div2_voting_triple1 img, #div2_voting_triple2 img,
#div3_voting_single1 img, #div3_voting_single2 img, #div3_voting_double1 img, #div3_voting_double2 img, #div3_voting_triple1 img, #div3_voting_triple2 img,
#div4_voting_single1 img, #div4_voting_single2 img, #div4_voting_double1 img, #div4_voting_double2 img, #div4_voting_triple1 img, #div4_voting_triple2 img,
#div5_voting_single1 img, #div5_voting_single2 img, #div5_voting_double1 img, #div5_voting_double2 img, #div5_voting_triple1 img, #div5_voting_triple2 img {
    width: 50px;
    height: 18px;
}

#div1_voting_single3 img, #div1_voting_double3 img, #div1_voting_triple3 img, #div2_voting_single3 img, #div2_voting_double3 img, #div4_voting_single3 img, #div4_voting_double3 img, #div4_voting_triple3 img {
    width: 50px;
    height: 17px;
}

#div3_voting_single3 img, #div3_voting_double3 img, #div3_voting_triple3 img, #div2_voting_triple3 img, #div5_voting_single3 img, #div5_voting_double3 img, #div5_voting_triple3 img {
    width: 50px;
    height: 16px;
}

#diva1_voting_single1 img, #diva1_voting_double1 img, #diva1_voting_triple1 img {
    width: 62px;
    height: 24px;
}

#diva1_voting_single2 img, #diva1_voting_single3 img, #diva1_voting_double2 img, #diva1_voting_double3 img, #diva1_voting_triple2 img, #diva1_voting_triple3 img {
    width: 62px;
    height: 26px;
}

#diva2_voting_single1 img, #diva2_voting_double1 img, #diva2_voting_triple1 img {
    width: 60px;
    height: 23px;
}

#diva3_voting_single1 img, #diva3_voting_double1 img, #diva3_voting_triple1 img,
#diva4_voting_single1 img, #diva4_voting_double1 img, #diva4_voting_triple1 img,
#diva5_voting_single1 img, #diva5_voting_double1 img, #diva5_voting_triple1 img {
    width: 60px;
    height: 24px;
}

#diva2_voting_single2 img, #diva2_voting_single3 img, #diva2_voting_double2 img, #diva2_voting_double3 img, #diva2_voting_triple2 img, #diva2_voting_triple3 img,
#diva3_voting_single2 img, #diva3_voting_single3 img, #diva3_voting_double2 img, #diva3_voting_double3 img, #diva3_voting_triple2 img, #diva3_voting_triple3 img,
#diva4_voting_single2 img, #diva4_voting_single3 img, #diva4_voting_double2 img, #diva4_voting_double3 img, #diva4_voting_triple2 img, #diva4_voting_triple3 img,
#diva5_voting_single2 img, #diva5_voting_single3 img, #diva5_voting_double2 img, #diva5_voting_double3 img, #diva5_voting_triple2 img, #diva5_voting_triple3 img {
    width: 60px;
    height: 26px;
}

.customer_add_device div, .customer_add_logic div, .customer_add_support div {
    width: 160px;
    height: 20px;
    display: table;
}

.customer_add_device label, .customer_add_logic label, .customer_add_support label {
    width: 160px;
    height: 20px;
    display: table;
}

.summary_tab_container td input[type="text"].readonlyCell {
    background-color: #EEEEEE;
}

.customer_add_device label, .customer_add_logic label, .customer_add_support label {
    padding-top: 5px;
    /*padding-right:8px;*/
}

#logicdiv div img, #devicediv div img, #supportingdiv div img {
    width: 36px;
    height: 36px;
}

#supportdiv1 div img{
    position: absolute;
    margin: auto;
    top: 5px;
    left: 0px;
    width: 50px;
    height: 42px;
}
#supportdiv2 div img {
    position: absolute;
    margin: auto;
    top: 9px;
    left: 0px;
    width: 50px;
    height: 42px;
}

.supportconfig li div img {
    width: 50px;
    height: 50px;
}

.customerdevicetable {
    padding-top: 10px;
    padding-left: 0px;
}

.customertext {
    padding-left: 15px;
    padding-top: 10px;
}

.customerdevicetable_right {
    /*padding-top: 10px;
    padding-left: 5px;*/
    margin-top: 15px;
    display: table;
    margin-left: 15px;
}

.customertext_right {
    padding-left: 5px;
    padding-top: 10px;
}

.customerLogictable {
    padding-top: 10px;
    padding-left: 10px;
}

.customerlogictext {
    padding-top: 10px;
    padding-left: 20px;
}

.customeralign {
    padding-top: 10px;
    padding-left: 0px;
}

#zoomout, #zoomin {
    width: 21px;
    height: 19px;
    margin: 2px;
    cursor:pointer;
}

#back, #Forth {
    height: 19px;
    margin: 2px;
    background: url(../images/pattern-bg.jpg) repeat;
    cursor:pointer;
}

#div1:hover, #test:hover, #div2:hover, #div3:hover, #div4:hover, #div5:hover, #diva1:hover, #diva2:hover, #diva3:hover, #diva4:hover, #diva5:hover, #divs1:hover, #divs2:hover, #manual_input:hover, #manual_action:hover {
  background-color: #cccccc;
}

.empty-config-location {
  position: absolute;
  pointer-events: all;
  z-index: 10; 
  overflow: visible;
}

.empty-config-location:hover {
  background-color: #cccccc;
}

.ui-dialog-titlebar {
    background: #62A669;
}

.menu_nav ul, .menu_nav ul li, .inputtoggle ul li, .actiontoggle ul li {
    background-color: #B8B8B8;
}


.support li div img, .logicsolver li div img {
    width: 30px;
    height: 30px;
    margin: 2px;
}

.Onedevice li div img, .twodevice li div img, .Line-Element li div img, .threedevice li div img, .complex li div img, .simplexaction li div img, .duplexaction li div img, .tripleaction li div img {
    width: 140px;
    margin: 2px;
}

.Onedevice li div img, .twodevice li div img, .threedevice li div img {
    margin-top: -50px;
}

.draggable {
    filter: alpha(opacity=60);
    opacity: 0.6;
}

.dropped {
    position: relative !important;
}

.dialog {
    display: none;
    z-index: 888888;
}

#popup, #templatepopup, #devicepopup, #logicpopup, #supportpopup, #tabellogic, #tabeldevice, #tabelsupport, #Printpopup, #target_popup {
    display: none;
    z-index: 888888;
}

#ccfinput1, #ccfinput2, #ccfinput3, #ccfinput4, #ccfinput5, #ccfaction1, #ccfaction2, #ccfaction3, #ccfaction4, #ccfaction5 {
    display: none;
    z-index: 888888;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: arial;
}

.menu_nav {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

    .menu_nav li {
        margin: 0 0 0 0px;
        position: relative;
        cursor: pointer;
        list-style-type: none;
        padding: 10px;
        background-color: #62A669;
        color: #FFFFFF;
        text-transform: uppercase;
        font-weight: 300;
    }

.menu_nav ul {
    margin-left: -40px;
}

#drag1 {
    height: 400px;
    overflow: auto;
}

/*.menu_nav ul {
    display: none;
}*/

    .menu_nav ul li {
        cursor: pointer;
        color: black;
    }

.menu_nav li ul {
    display: none;
}

    .menu_nav li ul li ul {
        display: none;
    }

.tbllogic {
    font-family: verdana,arial,sans-serif;
    font-size: 10px;
    color: #333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
    position: fixed;
    bottom: 20px;
    width: 100%;
}

.style {
    padding: 10px;
}

.summary_tab_container {
    margin: 0px;
    padding: 0px;
    width: 100%;
}

    .summary_tab_container th {
        background-color: #62A669;
        border-bottom: 5px solid #428649;
        border-right: 1px solid #428649;
        color: #ffffff;
        display: table-cell;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
        margin: 0;
        padding: 3px 0px;
        /*text-transform: uppercase;*/
        box-sizing: border-box;
    }

        .summary_tab_container th:last-child {
            border-right: none;
        }

    .summary_tab_container td {
        vertical-align: top;
    }

        .summary_tab_container td label {
            border: 1px solid #cccccc;
            color: black;
            font-size: 14px;
            font-weight: 600;
            margin: 0;
            padding: 3px 6px;
            text-transform: uppercase;
            width: 100%;
            box-sizing: border-box;
        }

        .summary_tab_container td input[type="text"] {
            background-color: #FFFFFF;
            border: 1px solid #cccccc;
            font-size: 14px;
            padding: 3px 10px;
            margin: 0px;
            color: #484848;
            box-sizing: border-box;
            font-weight: 300;
            width: 100%;
        }

        .summary_tab_container td input[type="number"] {
            background-color: #FFFFFF;
            border: 1px solid #cccccc;
            font-size: 14px;
            padding: 3px 10px;
            margin: 0px;
            color: #484848;
            box-sizing: border-box;
            font-weight: 300;
            width: 100%;
        }

            .summary_tab_container td input[type="text"]:hover, .summary_tab_container td input[type="text"]:focus {
                border: 1px solid #428649;
            }

.style1 {
    padding-left: 350px;
}

.wid_30 {
    width: 30px;
}

.wid_20 {
    width: 20px;
}

.wid_70 {
    width: 70px;
}

.label1 {
    font-size: 10px;
    font-weight: 100;
}
.menuItems, .device_menuItems, .support_menuItems, .logic_menuItems, .support_config_menuItems, .manualInput_menuItems, .manualAction_menuItems {
    position: absolute;
    width: 70px;
    background-color: #B8B8B8;
    padding: 2px 10px;
    display: none;
    z-index: 8888888;
}

.menuItems, .support_config_menuItems, .manualInput_menuItems, .manualAction_menuItems  {
    font-weight: bold;
}

.device_menuItems {
    font-style: oblique;
}

.customer_menu, .device_menu, .logic_menu, .support_menu {
    position: absolute;
    width: 135px;
    background-color: #62A669;
    padding: 2px 10px;
    display: none;
    z-index: 8888888;
}

.menuItems span:hover, .device_menuItems span:hover, .device_menuItems div:hover, .support_menuItems span:hover, logic_menuItems span:hover, .support_config_menuItems span:hover {
    background-color: #dedede;
}

.customer_menu span:hover, .device_menu span:hover, .logic_menu span:hover, .support_menu span:hover {
    background-color: #387C44;
}

.label_device {
    font-size: 10px;
    font-weight: 900;
    text-align: left !important;
    padding-left: 10px;
    display: table;
}


.tag_device {
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    display: inline-block;
    width: 70px;
}

#reset, #print, #save_div, #calculations, #backpage {
    background-color: #62A669;
    border-radius: 2px;
    margin: 0px 0px 3px;
    padding: 3px 6px;
    color: #fff;
    border: none;
    font-size: 14px;
}

#calculations[disabled], .edit-button[disabled] {
  background-color: gray;
}


.green-button {
    background-color: #62A669;
    border-radius: 2px;
    margin: 0px 0px 3px;
    padding: 3px 6px;
    color: #fff;
    border: none;
    font-size: 14px;
}


.tab_part1 {
    padding: 17px 20px 0px;
    margin: 0px;
    box-sizing: border-box;
}

    .tab_part1 h3 {
        padding: 0px 0px 10px;
        margin: 0px;
        font-size: 21px;
        text-align: center;
        font-weight: 400;
    }

.tab_list_part {
    padding: 0px;
    margin: -10px auto;
    width: 220px;
    display: table;
}

    .tab_list_part li {
        padding: 0px 0px 20px;
        margin: 0px;
        list-style: none;
        width: 76px;
        background: url(../images/pattern-bg.jpg) repeat;
        float: left;
    }

        .tab_list_part li img {
            padding: 0px;
            margin: 0px;
        }

        .tab_list_part li input[type="button"] {
            padding: 0px;
            margin: 0px;
        }

        .tab_list_part li:nth-of-type(1) {
            width: 55px;
        }

        .tab_list_part li:nth-of-type(2) {
            width: 67px;
            padding: 0px 0px 0px 10px;
        }

        .tab_list_part li:nth-of-type(3) {
            width: 60px;
        }

        .tab_list_part li:nth-of-type(4) {
            width: 20px;
            margin: 0px 0px 0px 4px;
        }

        .tab_list_part li:nth-of-type(5) {
            width: 90px;
            padding-left: 15px;
        }

        .tab_list_part li:nth-of-type(6) {
            width: 40px;
            margin: 0px 0px 0px 77px;
        }

.custom_device_text {
    padding-left: 13px;
    padding-top: 10px;
}

.custom_device {
    padding-top: 10px;
}

#div1_single1 div img, #div1_single2 div img, #div1_single3 div img, #div1_double1 div img, #div1_double2 div img, #div1_double3 div img, #div1_triple1 div img, #div1_triple2 div img, #div1_triple3 div img,
#div2_single1 div img, #div2_single2 div img, #div2_single3 div img, #div2_double1 div img, #div2_double2 div img, #div2_double3 div img, #div2_triple1 div img, #div2_triple2 div img, #div2_triple3 div img,
#div3_single1 div img, #div3_single2 div img, #div3_single3 div img, #div3_double1 div img, #div3_double2 div img, #div3_double3 div img, #div3_triple1 div img, #div3_triple2 div img, #div3_triple3 div img,
#div4_single1 div img, #div4_single2 div img, #div4_single3 div img, #div4_double1 div img, #div4_double2 div img, #div4_double3 div img, #div4_triple1 div img, #div4_triple2 div img, #div4_triple3 div img,
#div5_single1 div img, #div5_single2 div img, #div5_single3 div img, #div5_double1 div img, #div5_double2 div img, #div5_double3 div img, #div5_triple1 div img, #div5_triple2 div img, #div5_triple3 div img
{
    position: absolute;
    margin: auto;
    top: 2px;
    left: 2px;
    width: 43px;
    height: 42px;
    
}
#diva1_single1 div img, #diva1_single2 div img, #diva1_single3 div img, #diva1_double1 div img, #diva1_double2 div img, #diva1_double3 div img, #diva1_triple1 div img, #diva1_triple2 div img, #diva1_triple3 div img,
#diva2_single1 div img, #diva2_single2 div img, #diva2_single3 div img, #diva2_double1 div img, #diva2_double2 div img, #diva2_double3 div img, #diva2_triple1 div img, #diva2_triple2 div img, #diva2_triple3 div img,
#diva3_single1 div img, #diva3_single2 div img, #diva3_single3 div img, #diva3_double1 div img, #diva3_double2 div img, #diva3_double3 div img, #diva3_triple1 div img, #diva3_triple2 div img, #diva3_triple3 div img,
#diva4_single1 div img, #diva4_single2 div img, #diva4_single3 div img, #diva4_double1 div img, #diva4_double2 div img, #diva4_double3 div img, #diva4_triple1 div img, #diva4_triple2 div img, #diva4_triple3 div img,
#diva5_single1 div img, #diva5_single2 div img, #diva5_single3 div img, #diva5_double1 div img, #diva5_double2 div img, #diva5_double3 div img, #diva5_triple1 div img, #diva5_triple2 div img, #diva5_triple3 div img {
    position: absolute;
    margin: auto;
    top: 4px;
    left: 2px;
    width:46px;
    height:38px;
}

#userlogin {
    background: green;
    color: #fff !important;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    padding: 6px 0px;
}

#support_manual_input div img{
    position: absolute;
    margin: auto;
    top: 5px;
    left: 0px;
    width: 50px;
    height: 42px;
}
#support_manual_action div img {
    position: absolute;
    margin: auto;
    top: 9px;
    left: 0px;
    width: 50px;
    height: 42px;
}
 #manual_input_voting  img, #manual_action_voting img {
    width: 62px;
    height: 25px;
}

 .device_label{
    padding-left:10px;
    padding-top:10px;
}

.device_text{
    padding-left:40px;
    padding-top:10px;
}

.device_textlabel{
    padding-left:60px;
    padding-top:10px;
}

@media print {
    .report-hft-in {
        -webkit-print-color-adjust: exact !important;
    }

    .table-borderless > tbody > tr > td,
    .table-borderless > tbody > tr > th,
    .table-borderless > tfoot > tr > td,
    .table-borderless > tfoot > tr > th,
    .table-borderless > thead > tr > td,
    .table-borderless > thead > tr > th {
        border: none;
    }

    table, 
    table tr, 
    table tr td, 
    table tr th {
        margin: 0;
    }

    .report-hft-breakdown {
        padding: 0;
    }
}


.modal-content .sil-modal-title {
  background: #62A669;
  border: 1px solid #e3a1a1;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: #FFFFFF;
  font-weight: 700;
  display: flex;
}

.modal-title-text{
  flex-grow:1;
}

.sil-modal .modal-header {
  padding: 0px;
}

.sil-modal-close {
  display: flex;
  align-items: center;
  margin-right:-.75em;
}


.sil-modal-hover-box {
  height: 18px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.sil-modal-hover-box:hover {
  border: 1px solid #cdd5da;
  background: #f6f6f6 url(images/ui-bg_highlight-hard_100_f6f6f6_1x100.png) 50% 50% repeat-x;
  font-weight: bold;
  color: #111111;
}

.sil-modal-close span {
  background-image: url(http://code.jquery.com/ui/1.8.24/themes/blitzer/images/ui-icons_ffffff_256x240.png);
}

.sil-modal-close:hover span {
  background-image: url(http://code.jquery.com/ui/1.8.24/themes/blitzer/images/ui-icons_cc0000_256x240.png);
}

.warning-footer {
  display:flex;
}

.warning-footer .left-div {
  flex-grow:1;
}

.warning-footer .green-button{
  min-width:50px;
}

.green-button {
  background-color: #62A669;
  border-radius: 2px;
  margin: 0px 0px 3px;
  padding: 3px 6px;
  color: #fff;
  border: none;
  font-size: 14px;
}

.disabled {
  opacity:.5;
}

.support-row {
  display:flex;
}

.support-label {
  width: 200px;
}

.support-text-area {
  flex-grow: 1;
}

.selected-device {
  background-color:#888888 !important;
}

.custom-errors{
  color:red;
}

.custom-support-input {
  width: 100%;
}

#supportpopup textarea{
  width:100%;
}


#supportpopup select{
  width: 35px;
}