/*****************/
/*general styling*/
/*****************/
body {
    color: whitesmoke;
    padding: 0;
    margin: 0;
    font-family: Open Sans;
    font-weight: 300;
}

.html-gui-header-icon.html-gui-header-icon-sep {
    background: rgb(242, 105, 37) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hg-input-text-warning {
    white-space:initial !important;
    font-style:italic;  
    color:#ff671b;  
}

.hg-input-wrapper select{
	/*fix for default browser margins*/
	margin-top:0;
}

/*0 to 500px height*/
@media screen and (max-height: 568px) {
    /*****************/ /*gui main*/ /*****************/ .html-gui {
        border-radius: 1vh;
        box-shadow: 0px 0px 1vh #ff671b;
    }

    /*****************/
    /*gui header*/
    /*****************/
    .html-gui-header {
        padding: 1.5vh 3vh;
        font-size: 5vh;
        border-top-left-radius: 1vh;
        border-top-right-radius: 1vh;
    }

    .html-gui-header svg, .html-gui-header img, .hg-dialog-warning-wrapper svg {
        height: 10vh;
        width: 10vh;
    }

    .html-gui-header-text {
        margin-left: 2vh;
    }

    .html-gui-icon {
        margin-left: 3.5vh;
    }

    .html-gui-icon svg {
        height: 7vh;
        width: 7vh;
    }

    .html-gui-header-icon-svg, .html-gui-connection-status-icon svg, .html-gui-connection-nav svg, .printer-list-container svg {
        height: 5vh;
        width: 5vh;
    }

    .html-gui-connection-status-svg svg {
        height: 10vh;
        width: 10vh;
    }

    .html-gui-header-icon-text, .html-gui-horizontal-inner-title-text {
        font-size: 2.5vh;
        padding: 1vh;
    }

    .html-gui-wifi-container .html-gui-horizontal-inner-title-text {
        height:10vh;
        line-height:10vh;
    }

    .html-gui-header-icon-wrapper .html-gui-header-icon {
        padding: 1.5vh;
    }

    .html-gui-header-icon.html-gui-header-icon-sep {
        width: .25vh !important;
        height: 12vh !important;
    }

    /*****************/
    /*gui body*/
    /*****************/
    .html-gui-body {
        font-size: 4vh;
        /*max-height: 70vh;*/
    }

    .html-gui-padding {
        padding: 3vh;
    }

    /*****************/
    /*gui nav*/
    /*****************/
    .html-gui-body-nav {
        height: 60vh;
        /* width: 110vh; */
    }

    /*****************/
    /*gui nav list*/
    /*****************/
    .html-gui-nav-list {
        /*padding-top:5vh;*/
    }

    .html-gui-nav-item {
        padding: 3vh;
    }

    /*****************/
    /*gui nav content*/
    /*****************/
    .hg-content-header {
        /* /height: 5vh; */
        /* /padding: 5vh; */
    }

    .hg-content-sub-header {
        border-bottom: .25vh solid #ff671b;
        margin-bottom: 1.5vh;
        padding-bottom: 1.5vh;
    }

    /*****************/
    /*hg content body*/
    /*****************/
    .hg-content-body {
        top: 6vh;
        padding: 1.5vh;
    }

    .hg-input-wrapper {
        /*margin: 1.5vh 0;*/
        padding: 1.5vh 1.5vh;
    }

    .hg-input-label {
        min-width: 12vh;
    }

    .hg-input-input > input, .hg-input-input > select {
        border-radius: .5vh;
        border: .5vh solid transparent;
        font-size: 4vh;
    }

    .hg-input-input [type=checkbox],
    .hg-input-input [type=radio] {
        height: 4vh;
        width: 4vh;
        margin: 1vh;
        padding: 0;
    }

    .hg-input-wrapper-list {
        border: .25vh solid #444;
        height: 6vh;
        max-width: 40vh;
    }

    .hg-input-error {
        /*border-radius: 1vh !important;*/
        border: .5vh solid red !important;
        /* border-color: red !important; */
    }

    .scs-reader-info {
    }

    .hg-image-logo {
        height: 35vh;
    }

    /*****************/
    /*gui footer*/
    /*****************/
    .html-gui-footer {
        font-size: 2.5vh;
        padding-left: .5vh;
        padding-right: .5vh;
        border-bottom-left-radius: .5vh;
        border-bottom-right-radius: .5vh;
    }

    .html-gui-button {
        margin: 1.5vh 1vh;
        padding: .75vh 1.5vh;
        border-radius: .5vh;
        font-size: 4vh;
        /*font-weight: bold;*/
    }

    .html-gui-vertical-layout {
        /* margin: 3vh; */
    }

    .html-gui-vertical-layout-header {
        padding: 1.5vh;
    }

    .html-gui-vertical-layout-content-wrapper {
        margin: 1vh;
        padding: 1vh;
    }

    .html-gui-vertical-layout-content-wrapper-content > input, .html-gui-vertical-layout-content-wrapper-content > select {
        border-radius: 1vh;
        border: 0vh solid transparent;
        font-size: 5vh;
        height: 6vh;
        width: 36vh;
        padding: 0vh 2vh;
    }

    .html-gui-horizontal-layout-scroll {
        max-height: 60vh;
        /*padding-right: 12vh;*/
        padding: 3vh;
    }

    .html-gui-space-tab {
        margin-left: 2vh;
    }

    .html-gui-space-tab-tab {
        margin-left: 4vh;
    }

    .html-gui-space-vert {
        margin-top: 2vh;
    }

    /*****************/
    /*content input*/
    /*****************/
    .input-password-wrap input, .input-password-wrap svg {
        border-top-left-radius: 1vh;
        border-bottom-left-radius: 1vh;
        /* border:0vh solid transparent; */
    }

    .icon-wrapper-show-pass svg {
        border-top-right-radius: 1vh;
        border-bottom-right-radius: 1vh;
        width: 3vh;
        height: 3vh;
        padding: 1.5vh;
    }

    .input-password-wrap .icon-wrapper-show-pass {
        border-top-right-radius: 1vh;
        border-bottom-left-radius: 1vh;
    }

    .input-password-wrap input {
        border-top-left-radius: 1vh;
        border-bottom-left-radius: 1vh;
        width: 29vh;
    }

    /*****************/
    /*display grid*/
    /*****************/
    .d-grid {
        border: .5vh solid #444;
        margin: 1.5vh;
    }

    .display-grid-icon {
        width: 9vh;
        height: 9vh;
    }

    .display-grid-icon-image svg {
        width: 3vh;
        height: 3vh;
        margin-top: 1.5vh;
    }

    .dgrid-element {
        width: 9vh;
        height: 9vh;
        line-height: 9vh;
        outline: .25vh dashed rgba(226, 224, 224, .15);
    }

    .display-grid-icon-label {
        font-size: 2.5vh;
    }

    /*****************/
    /*cbox*/
    /*****************/
    .cbox {
        height: 5vh;
        min-height: 5vh;
        max-height: 5vh;
    }

    .cbox div {
        cursor: default;
    }

    .cbox-input, .cbox-button {
        min-height: 6vh;
        max-height: 6vh;
        height: 6vh;
        border: 0vh solid transparent;
        font-size: 5vh;
    }

    .cbox-input {
        border-top-left-radius: 1vh;
        border-bottom-left-radius: 1vh;
        padding-left: 1vh;
        width: 23vh;
    }

    .cbox-input-open {
        border-bottom-left-radius: 0vh !important;
    }

    .cbox-button {
        padding: 0vh 2vh;
        border-top-right-radius: 1vh;
        border-bottom-right-radius: 1vh;
    }

    .cbox-button-open {
        border-bottom-right-radius: 0vh;
    }

    .cbox-button:after {
        font-size: 3.5vh;
        line-height: 6vh;
    }

    /*cbox drop box*/
    .cbox-drop-box {
        border-bottom-left-radius: 1vh;
        border-bottom-right-radius: 1vh;
        max-width: 36vh;
        /* max height instead of height allows for animation */
        max-height: 0px;
        box-shadow: 0.5vh 0.5vh 3vh #212121;
    }

    .cbox-drop-box-open {
        /* max height instead of height allows for animation */
        max-height: 30vh;
        border-top: .5vh solid rgb(242, 105, 37);
    }

    .cbox-drop-box-item-wrapper {
        max-height: 10vh;
        /* border-top: .1vh solid #333; */
        border-bottom: .2vh solid #333;
    }

    .cbox-drop-box-item {
        padding: .3vh;
        width: 23vh;
        max-width: 23vh;
        font-size: 4vh;
    }

    .cbox-drop-box-item-remove {
        /* max height instead of height allows for animation */
        max-height: 0px;
        border: 0;
    }

    .cbox-drop-box-item, .cbox-drop-box-item-button {
        height: 5vh;
        padding: 1vh;
    }

    .cbox-drop-box-item-button {
        width: 5vh;
        font-size: 2vh;
        line-height: 5vh;
    }

     /*****************/
    /*sortable*/
    /*****************/
    .dialog-text.dialog-text-user-applet {
        width: 120vh;
    }

    .dialog-text-user-applet .applet-user-available,
    .dialog-text-user-applet .applet-user-not-available{
        height: 40vh;
    }        

    .html-gui-vert-sep {
        border-right: .25vh solid #ff671b;
    }

    .html-gui-bottom-bar{
        border-bottom: .25vh solid #ff671b;
    }
    
    .dialog-text-user-applet > .applet-sort-div {
        outline: .25vh solid #444;
    }

    .applet-sort-placeholder{
        height:6vh;
    }

    /*****************/
    /*results*/
    /*****************/
    .html-gui-result-icon svg {
        height:6vh;
        width:6vh;
        vertical-align:middle;
    }

    /*****************/
    /*split*/
    /*****************/

    .html-gui-horizontal-split, 
    .html-gui-horizontal-split-div:last-child {
        max-height: 65vh;        
    }    
    
}

/*500px to 1000px height*/
@media screen and (max-height: 1080px) and (min-height: 568px) {
    /*****************/ /*gui main*/ /*****************/ .html-gui {
        border-radius: .5vh;
        box-shadow: 0px 0px .5vh #ff671b;
    }

    /*****************/
    /*gui header*/
    /*****************/
    .html-gui-header {
        padding: 1.5vh 2vh;
        font-size: 3vh;
        border-top-left-radius: .5vh;
        border-top-right-radius: .5vh;
    }

    .html-gui-header svg, .html-gui-header img, .hg-dialog-warning-wrapper svg {
        height: 6vh;
        width: 6vh;
    }

    .html-gui-header-text {
        margin-left: 1vh;
    }

    .html-gui-icon {
        margin-left: 2vh;
    }

    .html-gui-icon svg {
        height: 4vh;
        width: 4vh;
    }

    .html-gui-header-icon-svg, .html-gui-connection-status-icon svg, .html-gui-connection-nav svg, .printer-list-container svg {
        height: 3vh;
        width: 3vh;
    }

    .html-gui-connection-status-svg svg {
        height: 6vh;
        width: 6vh;
    }

    .html-gui-header-icon-text, .html-gui-horizontal-inner-title-text {
        font-size: 2.5vh;
        padding: 1vh;
    }

    .html-gui-wifi-container .html-gui-horizontal-inner-title-text {
        height: 6.5vh;
        line-height: 6.5vh;
    }

    .html-gui-header-icon-wrapper .html-gui-header-icon {
        padding: 1.5vh;
    }

    .html-gui-header-icon.html-gui-header-icon-sep {
        width: .2vh !important;
        height: 11vh !important;
    }

    /*****************/
    /*gui body*/
    /*****************/
    .html-gui-body {
        font-size: 2.5vh;
        /*max-height: 70vh;*/
    }

    .html-gui-padding {
        padding: 3vh;
    }

    /*****************/
    /*gui nav*/
    /*****************/
    .html-gui-body-nav {
        height: 60vh;
        /* width: 110vh; */
    }

    /*****************/
    /*gui nav list*/
    /*****************/
    .html-gui-nav-list {
        /*padding-top: 2vh;*/
    }

    .html-gui-nav-item {
        padding: 2vh 2vh;
    }

    /*****************/
    /*gui nav content*/
    /*****************/
    .hg-content-header {
        height: 4vh;
        padding: 1vh;
    }

    .hg-content-sub-header {
        border-bottom: .15vh solid #ff671b;
        margin-bottom: 1vh;
        padding-bottom: 1vh;
    }

    /*****************/
    /*hg content body*/
    /*****************/
    .hg-content-body {
        top: 6vh;
        padding: 1.5vh;
    }

    .hg-input-wrapper {
        /*margin: 1.5vh 0;*/
        padding: 1.5vh 1.5vh;
    }

    .hg-input-label {
        min-width: 12vh;
    }

    .hg-input-input > input, .hg-input-input > select {
        border-radius: .5vh;
        border: .5vh solid transparent;
        font-size: 2vh;
    }

    .hg-input-input [type=checkbox],
    .hg-input-input [type=radio] {
        height: 2.5vh;
        width: 2.5vh;
        margin: 1vh;
        padding: 0;
    }

    .hg-input-wrapper-list {
        border: .25vh solid #444;
        height: 10vh;
        max-width: 24vh;
    }

    .hg-input-error {
        /*border-radius: .5vh !important;*/
        border: .25vh solid red !important;
        /* border-color: red !important; */
    }

    .scs-reader-info {
        padding: .15vh .5vh;
    }

    .hg-image-logo {
        height: 25vh;
    }

    /*****************/
    /*gui footer*/
    /*****************/
    .html-gui-footer {
        font-size: 2.5vh;
        border-bottom-left-radius: .25vh;
        border-bottom-right-radius: .25vh;
        padding-right: .75vh;
        padding-left: .75vh;
    }

    .html-gui-button {
        margin: 1.5vh .75vh;
        padding: .75vh 1vh;
        border-radius: .5vh;
    }

    .html-gui-vertical-layout {
        /* margin: 2.5vh; */
    }

    .html-gui-vertical-layout-header {
        padding: .5vh;
    }

    .html-gui-vertical-layout-content-wrapper {
        margin: 1vh;
        padding: 1vh;
    }

    .html-gui-vertical-layout-content-wrapper-content > input, .html-gui-vertical-layout-content-wrapper-content > select {
        border-radius: .5vh;
        border: 0vh solid transparent;
        font-size: 2.5vh;
        height: 3.5vh;
        width: 26vh;
        padding: 0vh 1vh;
    }

    /*****************/
    /*content input*/
    /*****************/
    .input-password-wrap input, .input-password-wrap svg {
        border-top-left-radius: .5vh;
        border-bottom-left-radius: .5vh;
        /* border:0vh solid transparent; */
    }

    .icon-wrapper-show-pass svg {
        border-top-right-radius: .5vh;
        border-bottom-right-radius: .5vh;
        width: 2.15vh;
        height: 2.5vh;
        padding: .5vh;
    }

    .input-password-wrap .icon-wrapper-show-pass {
        border-top-right-radius: .5vh;
        border-bottom-left-radius: .5vh;
    }

    .input-password-wrap input {
        border-top-left-radius: .5vh;
        border-bottom-left-radius: .5vh;
        width: 23vh;
    }

    .html-gui-horizontal-layout-scroll {
        max-height: 50vh;
        /* padding-right: 8vh; */
        padding: 2.5vh;
    }

    .html-gui-space-tab {
        margin-left: 1vh;
    }

    .html-gui-space-tab-tab {
        margin-left: 2vh;
    }

    .html-gui-space-vert {
        margin-top: 1vh;
    }

    /*****************/
    /*display grid*/
    /*****************/
    .d-grid {
        border: .35vh solid #444;
        margin: .5vh;
    }

    .display-grid-icon {
        width: 10vh;
        height: 10vh;
    }

    .display-grid-icon-image svg {
        width: 6vh;
        height: 6vh;
        margin-top: 1vh;
    }

    .dgrid-element {
        width: 10vh;
        height: 10vh;
        line-height: 10vh;
        outline: .15vh dashed rgba(226, 224, 224, .15);
    }

    .display-grid-icon-label {
        font-size: 1.5vh;
    }

    /*****************/
    /*cbox*/
    /*****************/
    .cbox {
        height: 3.5vh;
        min-height: 3.5vh;
        max-height: 3.5vh;
    }

    .cbox div {
        cursor: default;
    }

    .cbox-input, .cbox-button {
        min-height: 3.5vh;
        max-height: 3.5vh;
        height: 3.5vh;
        border: 0vh solid transparent;
        font-size: 2.5vh;
    }

    .cbox-input {
        border-top-left-radius: .5vh;
        border-bottom-left-radius: .5vh;
        padding-left: 1vh;
        width: 16vh;
    }

    .cbox-input-open {
        border-bottom-left-radius: 0vh !important;
    }

    .cbox-button {
        padding: 0vh 1vh;
        border-top-right-radius: .5vh;
        border-bottom-right-radius: .5vh;
    }

    .cbox-button-open {
        border-bottom-right-radius: 0vh;
    }

    .cbox-button:after {
        font-size: 2vh;
        line-height: 3vh;
    }

    /*cbox drop box*/
    .cbox-drop-box {
        border-bottom-left-radius: .5vh;
        border-bottom-right-radius: .5vh;
        max-width: 26vh;
        /* max height instead of height allows for animation */
        max-height: 0px;
        box-shadow: 0.25vh 0.25vh 1.5vh #212121;
    }

    .cbox-drop-box-open {
        /* max height instead of height allows for animation */
        max-height: 20vh;
        border-top: .2vh solid rgb(242, 105, 37);
    }

    .cbox-drop-box-item-wrapper {
        max-height: 5vh;
        /border-top: .1vh solid #333;
        border-bottom: .1vh solid #333;
    }

    .cbox-drop-box-item {
        padding: .3vh;
        width: 18vh;
        max-width: 18vh;
        font-size: 2vh;
    }

    .cbox-drop-box-item-remove {
        /* max height instead of height allows for animation */
        max-height: 0px;
        border: 0;
    }

    .cbox-drop-box-item, .cbox-drop-box-item-button {
        height: 2.5vh;
        padding: 1vh;
    }

    .cbox-drop-box-item-button {
        width: 1.5vh;
        font-size: 1.5vh;
        line-height: 2.5vh;
    }

    /*****************/
    /*sortable*/
    /*****************/
    .dialog-text.dialog-text-user-applet {
        width: 75vh;
    }

    .dialog-text-user-applet .applet-user-available,
    .dialog-text-user-applet .applet-user-not-available{
        height: 45vh;
    }        

    .html-gui-vert-sep {
        border-right: .15vh solid #ff671b;
    }

    .html-gui-bottom-bar{
        border-bottom: .15vh solid #ff671b;
    }
    
    .dialog-text-user-applet > .applet-sort-div {
        outline: .15vh solid #444;
    }

    .applet-sort-placeholder{
        height:3vh;
    }

      /*****************/
    /*results*/
    /*****************/
    .html-gui-result-icon svg {
        height:4vh;
        width:4vh;
        vertical-align:middle;
    }

    /*****************/
    /*split*/
    /*****************/

    .html-gui-horizontal-split, 
    .html-gui-horizontal-split-div:last-child {
        max-height: 65vh;        
    } 

}

/*1000px + height*/
@media screen and (min-height: 1080px) {
    /*****************/ /*gui main*/ /*****************/ .html-gui {
        border-radius: .25vh;
        box-shadow: 0px 0px .25vh #ff671b;
    }

    /*****************/
    /*gui header*/
    /*****************/
    .html-gui-header {
        padding: .75vh 1vh;
        font-size: 1.5vh;
        border-top-left-radius: .25vh;
        border-top-right-radius: .25vh;
    }

    .html-gui-header svg, .html-gui-header img, .hg-dialog-warning-wrapper svg {
        height: 3vh;
        width: 3vh;
    }

    .html-gui-icon {
        margin-left: 1vh;
    }

    .html-gui-icon svg {
        height: 3vh;
        width: 3vh;
    }

    .html-gui-header-text {
        margin-left: 1vh;
    }

    .html-gui-icon svg {
        height: 2vh;
        width: 2vh;
    }

    .html-gui-header-icon-svg, .html-gui-connection-status-icon svg, .html-gui-connection-nav svg, .printer-list-container svg {
        height: 2vh;
        width: 2vh;
    }

    .html-gui-connection-status-svg svg {
        height: 4vh;
        width: 4vh;
    }

    .html-gui-header-icon-text, .html-gui-horizontal-inner-title-text {
        font-size: 1.25vh;
        padding: .5vh;
    }

    .html-gui-wifi-container .html-gui-horizontal-inner-title-text {
        height: 5vh;
        line-height: 5vh;
    }

    .html-gui-header-icon-wrapper .html-gui-header-icon {
        padding: .5vh;
    }

    .html-gui-header-icon.html-gui-header-icon-sep {
        width: .1vh !important;
        height: 5vh !important;
    }

    /*****************/
    /*gui body*/
    /*****************/
    .html-gui-body {
        font-size: 1.25vh;
    }

    .html-gui-padding {
        padding: 1.5vh;
    }

    /*****************/
    /*gui nav*/
    /*****************/
    .html-gui-body-nav {
        height: 30vh;
        /* width: 55vh; */
    }

    /*****************/
    /*gui nav list*/
    /*****************/
    .html-gui-nav-list {
        /*padding-top: 1vh;*/
    }

    .html-gui-nav-item {
        padding: 1vh 1vh;
    }

    /*****************/
    /*gui nav content*/
    /*****************/
    .hg-content-header {
        height: 2vh;
        padding: .5vh;
    }

    .hg-content-sub-header {
        border-bottom: .05vh solid #ff671b;
        margin-bottom: .5vh;
        padding-bottom: .5vh;
    }

    /*****************/
    /*hg content body*/
    /*****************/
    .hg-content-body {
        top: 3vh;
        padding: .75vh;
    }

    .hg-input-wrapper {
        /*margin: .75vh 0;*/
        padding: .75vh .75vh;
    }

    .hg-input-label {
        min-width: 6vh;
    }

    .hg-input-input > input, .hg-input-input > select, .input-password-wrap input {
        border-radius: .25vh;
        border: .25vh solid transparent;
        font-size: 1vh;
    }

    .hg-input-input [type=checkbox],
    .hg-input-input [type=radio] {
        height: 1.25vh;
        width: 1.25vh;
        margin: .5vh;
        padding: 0;
    }

    .hg-input-wrapper-list {
        border: .15vh solid #444;
        height: 20vh;
        max-width: 22vh;
    }

    .hg-input-error {
        /*border-radius: .25vh !important;*/
        border: .15vh solid red !important;
        /* border-color: red !important; */
    }

    .scs-reader-info {
        padding: .25vh 1vh;
    }

    .hg-image-logo {
        height: 15vh;
    }

    /*****************/
    /*gui footer*/
    /*****************/
    .html-gui-footer {
        font-size: 1.25vh;
        padding-right: .75vh;
        padding-left: .75vh;
        border-bottom-left-radius: .25vh;
        border-bottom-right-radius: .25vh;
    }

    .html-gui-button {
        margin: .75vh .5vh;
        padding: .5vh .75vh;
        border-radius: .25vh;
    }

    .html-gui-vertical-layout {
        /* margin: 1.5vh; */
    }

    .html-gui-vertical-layout-header {
        padding: .5vh;
    }

    .html-gui-vertical-layout-content-wrapper {
        margin: .5vh;
        padding: .5vh;
    }

    .html-gui-vertical-layout-content-wrapper-content > input, .html-gui-vertical-layout-content-wrapper-content > select {
        border-radius: .25vh;
        border: 0vh solid transparent;
        font-size: 1vh;
        height: 2vh;
        width: 13vh;
        padding: 0vh .5vh;
    }

    .html-gui-horizontal-layout-scroll {
        max-height: 45vh;
        /*padding-right: 4vh;*/
        padding: 1.5vh;
    }

    .html-gui-space-tab {
        margin-left: 1vh;
    }

    .html-gui-space-tab-tab {
        margin-left: 2vh;
    }

    .html-gui-space-vert {
        margin-top: 1vh;
    }
    
    /*****************/
    /*content input*/
    /*****************/
    .input-password-wrap input, .input-password-wrap svg {
        border-top-left-radius: .25vh;
        border-bottom-left-radius: .25vh;
        /* border:0vh solid transparent; */
    }

    .icon-wrapper-show-pass svg {
        border-top-right-radius: .25vh;
        border-bottom-right-radius: .25vh;
        width: 1.15vh;
        height: 1.25vh;
        padding: .25vh;
    }

    .input-password-wrap .icon-wrapper-show-pass {
        border-top-right-radius: .25vh;
        border-bottom-left-radius: .25vh;
    }

    .input-password-wrap input {
        border-top-left-radius: .25vh;
        border-bottom-left-radius: .25vh;
        width: 11vh;
    }

    /*****************/
    /*display grid*/
    /*****************/
    .d-grid {
        border: .25vh solid #444;
        margin: 1.5vh;
    }

    .display-grid-icon {
        width: 6vh;
        height: 6vh;
    }

    .display-grid-icon-image svg {
        width: 3vh;
        height: 3vh;
        margin-top: .5vh;
    }

    .dgrid-element {
        width: 6vh;
        height: 6vh;
        line-height: 6vh;
        outline: .1vh dashed rgba(226, 224, 224, .15);
    }

    /*****************/
    /*cbox*/
    /*****************/
    .cbox {
        height: 2vh;
        min-height: 2vh;
        max-height: 2vh;
    }

    .cbox div {
        cursor: default;
    }

    .cbox-input, .cbox-button {
        min-height: 2vh;
        max-height: 2vh;
        height: 2vh;
        border: 0vh solid transparent;
        font-size: 1vh;
    }

    .cbox-input {
        border-top-left-radius: .25vh;
        border-bottom-left-radius: .25vh;
        padding-left: .5vh;
        width: 8vh;
    }

    .cbox-input-open {
        border-bottom-left-radius: 0vh !important;
    }

    .cbox-button {
        padding: 0vh .5vh;
        border-top-right-radius: .25vh;
        border-bottom-right-radius: .25vh;
    }

    .cbox-button-open {
        border-bottom-right-radius: 0vh;
    }

    .cbox-button:after {
        font-size: 1vh;
        line-height: 2vh;
    }

    /*cbox drop box*/
    .cbox-drop-box {
        border-bottom-left-radius: .25vh;
        border-bottom-right-radius: .25vh;
        max-width: 13vh;
        /* max height instead of height allows for animation */
        max-height: 0px;
        box-shadow: 0.15vh 0.15vh 0.75vh #212121;
    }

    .cbox-drop-box-open {
        /* max height instead of height allows for animation */
        max-height: 10vh;
        border-top: .1vh solid rgb(242, 105, 37);
    }

    .cbox-drop-box-item-wrapper {
        max-height: 2.5vh;
        /border-top: .1vh solid #333;
        border-bottom: .05vh solid #333;
    }

    .cbox-drop-box-item {
        padding: .15vh;
        width: 9vh;
        max-width: 9vh;
        font-size: 1vh;
    }

    .cbox-drop-box-item-remove {
        /* max height instead of height allows for animation */
        max-height: 0px;
        border: 0;
    }

    .cbox-drop-box-item, .cbox-drop-box-item-button {
        height: 1.25vh;
        padding: .5vh;
    }

    .cbox-drop-box-item-button {
        width: .75vh;
        font-size: .75vh;
        line-height: 1.25vh;
    }

    /*****************/
    /*sortable*/
    /*****************/
    .dialog-text.dialog-text-user-applet {
        width: 50vh;
    }

    .dialog-text-user-applet .applet-user-available,
    .dialog-text-user-applet .applet-user-not-available{
        height: 47vh;
    }        

    .html-gui-vert-sep {
        border-right: .1vh solid #ff671b;
    }

    .html-gui-bottom-bar{
        border-bottom: .1vh solid #ff671b;
    }
    
    .dialog-text-user-applet > .applet-sort-div {
        outline: .1vh solid #444;
    }

    .applet-sort-placeholder{
        height:1.5vh;
    }

    /*****************/
    /*results*/
    /*****************/
    .html-gui-result-icon svg {
        height:2vh;
        width:2vh;
        vertical-align:middle;
    }

    /*****************/
    /*split*/
    /*****************/

    .html-gui-horizontal-split, 
    .html-gui-horizontal-split-div:last-child {
        max-height: 65vh;        
    } 

}

/*****************/
/*gui main*/
/*****************/
.html-gui-modal {
    /*display:none;*/
}

.html-gui-modal, .html-gui {
    position: absolute;
}

.html-gui-modal {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(68, 68, 68, 1);
    z-index: 0;
    cursor: default;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    overflow: hidden;
}

.html-gui {
    height: initial !important;
    width: initial !important;
    color: rgba(226, 224, 224, 0.8);
    background: #555;
    z-index: 1;
}

/*****************/
/*gui header*/
/*****************/
.html-gui-header {
    background: #323232;
    color: rgb(242, 105, 37);
    cursor: move;
}

.html-gui-header > div, 
.hg-dialog-warning-wrapper > div {
    display: inline-block;
    vertical-align: middle;
}

.html-gui-header svg, .html-gui-icon svg, .hg-dialog-warning-wrapper svg {
    fill: rgb(242, 105, 37);
}

.hg-dialog-warning-wrapper{
    white-space:nowrap;
}

/*****************/
/*gui body*/
/*****************/
.hg-input-wrapper-list {
    overflow-x: hidden;
    overflow-y: auto;
    text-overflow: ellipsis;
}

.scs-reader-info {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.hg-image-logo {
    background-image: url("images/10ZiG_Logo.png");
    width: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/*****************/
/*gui nav*/
/*****************/
.html-gui-body-nav {
    white-space: nowrap;
    position: relative;
    top: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 0;
}

.html-gui-body-nav-fixed-height {
    overflow-x: hidden;
    overflow-y: auto;
}

.html-gui-body-nav > div:not(.html-gui-horizontal-panel, .printer-container) {
    position: absolute;
    top: 0;
    bottom: 0;
}

.html-gui-nav-list, 
.html-gui-nav-content {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available;
    font-size: initial;    
    height: inherit;
}

/*****************/
/*gui nav list*/
/*****************/
.html-gui-nav-list {
    left: 0;
    width: 25%;
    overflow-x: hidden;
    z-index: 1;
}

.html-gui-nav-item.selected {
    background: #444;
}

.html-gui-nav-item:hover {
    background: #444;
    color: rgb(242, 105, 37);
}

.html-gui-nav-item:active {
    background: #4c4c4c;
    color: rgba(226, 224, 224, 0.8);
}

/*****************/
/*gui nav content*/
/*****************/
.html-gui-nav-content {
    right: 0;
    width: 75%;
    overflow: hidden;
    background: #666;
}

.html-gui-content-item {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 100%;
}

.html-gui-content-item.selected {
    left: 0;
}

.hg-content-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: #444;
}

.hg-content-sub-header {
    font-style: italic;
}

/*****************/
/*hg content body*/
/*****************/
.hg-content-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.hg-input-wrapper > div {
    display: inline-block;
    vertical-align: middle;
}

/*****************/
/*gui footer*/
/*****************/
.html-gui-footer {
    text-align: right;
    background: #444;
}

.html-gui-button {
    display: inline-block;
    background: rgba(226, 224, 224, 1);
    color: #323232;
}

.html-gui-button:hover {
    background: #323232;
    color: rgb(242, 105, 37)
}

.html-gui-button:active {
    background: #4c4c4c;
    color: rgba(226, 224, 224, 0.8);
}

/*disabled buttons*/
.html-gui-button-disabled, 
.html-gui-button-disabled:active,
.html-gui-button-disabled:hover,
svg.gui-disabled,
svg.gui-disabled:active,
svg.gui-disabled:hover,
.gui-disabled svg, 
.gui-disabled svg:active, 
.gui-disabled svg:hover {
    background: #bbb !important;
    fill: #323232 !important;
    color: #888 !important;
}

/*results*/

.html-gui-result-text {
    color: #ff671b;
}

.html-gui-result-icon svg, .html-gui-result-icon svg:hover {
    background:none !important;
    fill: #ff671b !important;
}

/*****************/
/*gui animation*/
/*****************/
.html-gui-modal, .html-gui-button, .html-gui-button:hover, .html-gui-button:active, .html-gui-nav-item, .html-gui-nav-item:hover, .html-gui-nav-item:active, .html-gui-content-item, .hg-input-label, .hg-input-label:hover, input, input:hover, input:active, svg, svg:hover, svg:active, .keyboard-layouts div, .keyboard-layouts div:hover, .keyboard-layouts div:active, .ui-slider-handle:hover, .ui-slider-handle:active, .html-gui-header-icon, .html-gui-header-icon:hover, .html-gui-header-icon:active, .html-gui-header-icon-text, .html-gui-header-icon-text:hover, .html-gui-header-icon-text:active, .html-gui-horizontal-inner-title-text, .html-gui-horizontal-inner-title-text:hover, .html-gui-horizontal-inner-title-text:active, .dialog-speed-duplex-property:active, .lan-connection-wrapper:hover, .lan-connection-wrapper:active, .dialog-speed-duplex-property:hover, .html-gui-cert-info-wrapper, .html-gui-cert-info-wrapper:hover, .html-gui-cert-info-wrapper:active, .html-gui-cert-info-wrapper div, .html-gui-cert-info-wrapper:hover div, .html-gui-cert-info-wrapper:active div {
    -webkit-transition: all.2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

/*****************/
/*vertical layout*/
/*****************/
.html-gui-vertical-layout {
}

.html-gui-vertical-layout-header {
    text-align: center;
    background: #444;
}

.html-gui-vertical-layout-content-wrapper {
    white-space: nowrap;
    /* overflow:hidden; */
}

/*.html-gui-vertical-layout-content-wrapper > div:not(.html-gui-icon):first-child {*/
.html-gui-vertical-layout-content-wrapper-label {
    text-align: right;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*.html-gui-vertical-layout-content-wrapper > div:not(.html-gui-icon):last-child {*/
.html-gui-vertical-layout-content-wrapper-content {
    /* width: 50%; */
    width: 40%;
}

.html-gui-vertical-layout-content-wrapper-content > input, .html-gui-vertical-layout-content-wrapper-content > select {
    background: whitesmoke;
    color: #323232;
    /* max-width: 85%; */
    padding: .25vh;
}

.html-gui-vertical-layout-content-wrapper > div:last-child {
    /text-align: left;
    /padding-left: 1vh;
}

.html-gui-vertical-layout-content-wrapper > div {
    display: inline-block;
    vertical-align: middle;
}

.input-password-wrap {
    white-space: nowrap;
    /*remove the space between*/
    font-size: 0;
}

.html-gui-vertical-layout-content-wrapper-input-password, .input-password-wrap .icon-wrapper-show-pass {
    display: inline-block;
    vertical-align: top;
}

.input-password-wrap .icon-wrapper-show-pass {
    /position: relative;
    /width: 0;
    /z-index: 1;
}

/*show password*/
.input-password-wrap .icon-wrapper-show-pass svg, .cbox-button {
    border-left: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.input-password-wrap input {
    border-right: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.html-gui-body input, .icon-wrapper-show-pass svg, .cbox-button, .cbox-drop-box {
    /*background:rgba(226, 224, 224, 1);*/
    background: whitesmoke;
    fill: #323232;
    color: #323232;
}

.icon-wrapper-show-pass:hover svg, .cbox-button-hover, .cbox-button-open, .cbox-drop-box-item-active {
    background: #323232;
    fill: rgb(242, 105, 37);
    color: rgb(242, 105, 37);
}

.icon-wrapper-show-pass:active svg, .cbox-button:active {
    background: #4c4c4c;
    fill: rgba(226, 224, 224, 0.8);
}

.html-gui-body input:active, .html-gui-body input:focus {
    outline: none;
}

.html-gui-body .gui-disabled .hg-input-label {
    color: #999;
}

.html-gui-body .gui-disabled input, .html-gui-body .gui-disabled select {
    background: #bbb;
}

/*****************/
/*cbox*/
/*****************/
/*general*/
.cbox {
    white-space: nowrap;
}

.cbox div {
    cursor: default;
}

/*combination*/
.cbox-input, .cbox-button {
    display: inline-block;
    vertical-align: top;
}

/*cbox input*/
.cbox-input-open {
    border-bottom-left-radius: 0vh;
}

.cbox-button-open {
    border-bottom-right-radius: 0vh;
}

.cbox-button:after {
    content: "\25C0";
    vertical-align: top;
}

.cbox-button-open:after {
    content: "\25BC";
}

/*cbox drop box*/
.cbox-drop-box {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: scroll;
}

/*cbox drop box item*/
.cbox-drop-box-item-wrapper {
    overflow: hidden;
    white-space: nowrap;
    /text-overflow: ellipsis;
}

.cbox-drop-box-item {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cbox-drop-box-item-remove {
    /* max height instead of height allows for animation */
    max-height: 0px;
    border: 0;
}

.cbox-drop-box-item, .cbox-drop-box-item-button {
    display: inline-block;
    vertical-align: top;
    font-weight: 400;
}

.cbox-drop-box-item-button-hover:active, .cbox-drop-box-item-active {
    background: #333;
    color: #888;
}

.cbox-drop-box-item-hover, .cbox-drop-box-item-button-hover {
    background: #888;
    color: #333;
}

.cbox-drop-box-item-button {
    text-align: center;
}

.cbox-drop-box-item-button:after {
    content: "\2573";
}

/*cbox animation*/
.cbox, .cbox-input, .cbox-input-active, .cbox-input-open, .cbox-input-hover, .cbox-button, .cbox-button-active, .cbox-button-open, .cbox-button-hover, .cbox-button:after, .cbox-button-active:after, .cbox-drop-box, .cbox-drop-box-open, .cbox-drop-box-item-button-hover, .cbox-drop-box-item-button-hover:active {
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}

.cbox-drop-box-item, .cbox-drop-box-item-active, .cbox-drop-box-item-hover {
    -webkit-transition: all .15s ease;
    -moz-transition: all .15s ease;
    -ms-transition: all .15s ease;
    -o-transition: all .15s ease;
    transition: all .15s ease;
}

.cbox-drop-box-item-wrapper, .cbox-drop-box-item-remove {
    -webkit-transition: all .35s linear;
    -moz-transition: all .35s linear;
    -ms-transition: all .35s linear;
    -o-transition: all .35s linear;
    transition: all .35s linear;
}

/*****************/
/*display grid*/
/*****************/
.display-grid-icon {
    overflow: hidden;
    text-align: center;
}

.display-grid-icon-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*dgrid*/
.dgrid-grid, .dgrid-grid div {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
}

.dgrid-grid {
    white-space: nowrap;
}

.dgrid-col {
    display: inline-block;
}

.dgrid-element {
    background: #555;
    color: rgba(226, 224, 224, .0);
    text-align: center;
}

.dgrid-item {
    position: absolute;
    z-index: 1;
    cursor: move;
    background: #444;
    fill: rgba(226, 224, 224, 0.8)
}

.dgrid-item-hover {
    background: #333;
    color: rgba(226, 224, 224, 1);
    fill: rgba(226, 224, 224, 1);
}

.dgrid-item-active, .dgrid-item-active svg {
    background: #323232;
    color: rgb(242, 105, 37);
    fill: rgb(242, 105, 37);
}

.dgrid-item-drag {
    background: #323232;
    z-index: 2;
    color: rgba(226, 224, 224, 1);
    fill: rgba(226, 224, 224, 1);
    box-shadow: none;
}

/*animation/transition*/
.dgrid-grid, .dgrid-grid div, .dgrid-grid svg {
    transition: all .15s linear !important;
}

/*****************/
/*horizontal layout*/
/*****************/
.html-gui-horizontal-layout {
    display: inline-block;
    vertical-align: top;
}

.html-gui-horizontal-layout-left {
    padding: 1vh;
}

.html-gui-horizontal-layout-content {
    background: #666;
    padding-left: 1vh;
}

.html-gui-horizontal-layout-center {
    text-align: center;
}

.html-gui-horizontal-layout-sep {
    background: #ff671b;
    height: .05vh;
    margin: 1vh 0;
}

.html-gui-horizontal-layout-left-border {
    border-left: .25vh solid #444;
}

.html-gui-horizontal-layout-right-border {
    border-right: .15vh solid #444;
}

.html-gui-horizontal-layout-scroll {
    overflow-x: hidden;
}

.html-gui-input-disabled {
    background: #ccc !important;
    color: #666 !important;
}

.display-main-display .display-grid-icon-label {
    border-bottom: .2vh solid #ff671b;
}

.display-grid-icon-name {
    margin: 0 .5vh;
}

.html-gui-vertical-layout-content-wrapper-content-center {
    text-align: center;
}

.html-gui-horizontal-layout-min-width {
    min-width: 40vh;
}

/*split*/
.html-gui-vertical-layout.html-gui-horizontal-split {
    white-space:nowrap;
    overflow: hidden;	
}

.html-gui-vertical-layout.html-gui-horizontal-split > div {
    display:inline-block;
    vertical-align:top;
}

.html-gui-horizontal-split-div:last-child {
    overflow-x: hidden;
    overflow-y: scroll;        
}

/***************************/
/*tabs*/
/***************************/
.html-gui-tabs {
    /*margin:1vh;*/
}

.html-gui-tabs-wrapper {
    white-space: nowrap;
    font-size: 0;
}

.html-gui-tabs-tab {
    /*shares with html gui button*/
    display: inline-block;
    vertical-align: middle;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    font-size: initial !important;
    border-radius: 0 !important;
    background: #777;
    color: rgba(226, 224, 224, 0.8);
    padding: .75vh;
}

.html-gui-tabs-tab.html-gui-tabs-active {
    background: #666;
}

.html-gui-tab-content-wrapper {
    min-height: 22vh;
    min-width: 22vh;
}

.html-gui-tabs-content > div {
    min-height: 22vh;
    min-width: 22vh;
}

.keyboard-layouts-wrapper {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 20vh;
    background: #555;
}

.keyboard-layout {
    padding: .5vh;
}

.keyboard-layout-variant {
    padding-left: 1vh;
    background: #777;
}

.keyboard-layout-selected {
    background: #323232;
    color: rgb(242, 105, 37);
}

.keyboard-layout:hover:not(.keyboard-layout-selected) {
    background: #444;
    color: rgba(226, 224, 224, 0.8);
}

/*tabs collapse*/
.keyboard-layout-open .keyboard-layout-variant {
    display: block;
}

.keyboard-layout-open .keyboard-layout-variant-root {
    background: #444;
}

.keyboard-layout-closed .keyboard-layout-variant {
    display: none;
}

.keyboard-test-wrapper {
    margin-left: .75vh;
    padding: .75vh;
}

/*slider*/
.hg-slider-input {
    width: 50%;
}

.hg-input-float-right {
    float: right;
}

.hg-input-float-left {
    float: left;
}

.hg-input-alt-style:nth-child(even) {
    background: #323232;
}

.hg-input-alt-style:nth-child(odd) {
    background: #444444;
}

.hg-input-inline-middle > svg, .hg-input-inline-middle > div {
    display: inline-block;
    vertical-align: middle;
}

.hg-input-inline-top > div {
    display: inline-block;
    vertical-align: top;
}

/***********************/
/* VNC Settings Styles*/
/**********************/
.html-gui-vnc-timeout-seconds {
    width: 25%;
}

.html-gui-vnc-start-option-container {
    margin-right: 4%;
}

.html-gui-vnc-align-inner {
    margin-left: 10%;
}

.html-gui-vnc-password-label {
    min-width: 30%;
}

.html-gui-vnc-password-textbox {
    min-height: 3vh;
}

.html-gui-vnc-container-wrapper {
    /border-bottom: solid;
    /border-width: .3vh;
    /border-color: #323232;
    padding-bottom: 2vh;
    white-space: nowrap;
}

.html-gui-vnc-content-wrapper {
    padding-left: 2vh;
    padding-right: 2vh;
}

.html-gui-vnc-header {
    background: #444;
    padding: 1vh;
}

/***********************/
/* VNC Settings Styles*/
/**********************/
.html-gui-logging-info-wrapper {
    -moz-user-select: text !important;
    -khtml-user-select: text !important;
    -webkit-user-select: text !important;
    -o-user-select: text !important;
}

.html-gui-logging-info-wrapper {
    white-space: initial !important;
}

/***********************/
/* Cert Manager Styles*/
/**********************/
.html-gui-cert-info-wrapper {
    padding: .75vh;
}

.html-gui-cert-info-wrapper:hover {
    background: #444;
    color: rgb(242, 105, 37);
}

.html-gui-cert-info-wrapper:active, .html-gui-cert-info-wrapper:focus {
    background: #555;
    color: inherit;
}

.html-gui-cert-info-wrapper.cert-active {
    background: #444;
}

.cert-info {
    font-size: initial;
    -moz-user-select: text !important;
    -khtml-user-select: text !important;
    -webkit-user-select: text !important;
    -o-user-select: text !important;
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
}

.cert-verify {
    background: initial;
    color: inherit;
    display: inherit !important;
}

.cert-verify > div {
    display: inline-block;
    vertical-align: top;
}

.cert-verify > div:first-child {
    margin-right: 1vh;
}

.cert-verify > div:last-child {
    max-width: 85%;
}

/*****************/
/*Icons*/
/*****************/

.html-gui-header-icon-wrapper .html-gui-header-icon {
    display: inline-block;
    fill: rgba(226, 224, 224, 0.8);
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    /*padding: .5vh;*/
}

.html-gui-header-icon {
    color: rgba(226, 224, 224, 0.8);
}

.html-gui-header-icon-wrapper .html-gui-header-icon:hover:not(.icon-disabled) {
    background: #323232;
    color: rgb(242, 105, 37);
    fill: rgb(242, 105, 37);
}

.html-gui-header-icon-wrapper .html-gui-header-icon:active:not(.icon-disabled) {
    background: #4c4c4c;
    color: rgba(226, 224, 224, 0.8);
    fill: rgba(226, 224, 224, 0.8);
}


.html-gui-header-icon-wrapper {
    white-space: nowrap;
    font-size: 0;
    background: #4e4e4e;
}


.html-gui-header-icon-wrapper .html-gui-header-icon.icon-disabled {
    color: rgba(138, 138, 138, 0.8) !important;
    fill: rgba(138, 138, 138, 0.8) !important;
}

/*****************/

/*Sortable / Security Applets*/

/*****************/

.dialog-text.dialog-text-user-applet {
    white-space: nowrap;
    height: 75vh;
    overflow: hidden;
}

.dialog-text-user-applet>div {
    display: inline-block;
    vertical-align: top;
    height: 100%;    
}

.dialog-text-user-applet .applet-user-available,
.dialog-text-user-applet .applet-user-not-available{
    overflow-y:auto;
    overflow-x: hidden;
}

.dialog-text-user-applet>.applet-sort-div {
    width: 49.5%;
}

.dialog-text-user-applet>div li {
    list-style-type: none;
}

.dialog-text-user-applet>div li:not(.force-enabled):not(.force-disabled) {
    cursor: move;
}

.dialog-text-user-applet>div li:not(.force-enabled):not(.force-disabled):hover {
    background: #444;
    color: rgb(242, 105, 37);
}

.dialog-text-user-applet>div li:not(.force-enabled):not(.force-disabled):active {
    background: #4c4c4c;
    color: rgba(226, 224, 224, 0.8);
}

.applet-sort-placeholder{
    background:#888;
}

.applet-sort-label{
    overflow:hidden;
    text-overflow: ellipsis;
}

/*****************/
/*cloud agent*/
/*****************/
.cc-status {
    -webkit-transition: all .15s ease;
    -moz-transition: all .15s ease;
    -ms-transition: all .15s ease;
    -o-transition: all .15s ease;
    transition: all .15s ease;
}

.cc-status {
    font-style: italic;
    color:#ff671b;
}

.cc-test {    
    color:#c2ce61
}

.cc-warn{
    /* color:#ff671b */

}

.cc-connected {
    color: #72ce61;
}

.cc-error {
    color:red

}

/*****************/
/*Jordan's Work*/
/*****************/
.selected-connection-detail-container{
	margin: 2vh;
	border-top: .05vh solid rgb(242, 105, 37);
	padding-top: 1vh;
	display:none;
}

.printer-list-container svg{
    /* height: 3.5vh; */
    /* width: 3.5vh; */
}

.html-gui-connection-svg-container {
	/* width: 15vh; */
	text-align:center;
}

.html-gui-connection-svg .wifi{
	fill:#E2E0E0;
	
}

.printer-list-svg-default{
	display:none;
}
.printer-list-container{fill: rgba(226, 224, 224, 0.8);padding: 1vh;/* width: 95%; *//* height: 21%; */white-space: nowrap;}

.printer-list-svg{
	padding: .5vh;
}

.printer-list-text{
	/* margin-bottom:4vh; */
	padding-left: .4vh;
	font-size: initial;
}

.reconnection-time-input,
.keepalive-interval-input
{
	width: 10vh !important;

}
.content-wrapper {
	margin-bottom:3vh;
}

.ui-icon-triangle-1-n {
    background-position: 0 -14px !important;
    vertical-align: top !important;
}

.ui-icon-triangle-1-s {
    background-position: -65px -14px !important;
}

.tab-content-container{
	width:50%;
	text-align:right;
	margin-top:5%;
}

.ui-timespinner .ui-spinner a.ui-spinner-down {
    margin-bottom: 1px;
    height: 1.8vh !important;
}

.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_ffffff_256x240.png) !important;
	
}

.ui-button .ui-icon {
	background-image: url(images/ui-icons_f26925_256x240.png) !important;
}

.ui-button .ui-icon png {
    background-image: url(..images/ui-icons_cccccc_256x240.png) !important;
}

.ui-state-active .ui-icon, .ui-button:active .ui-icon {
    background-image: url(images/ui-icons_cccccc_256x240.png) !important;
}

.ui-button .ui-icon {
    background-image: url(images/ui-icons_ffffff_256x240.png) !important;
}

.ui-datepicker {
	background:#555 !important;
	border:none !important;

}

.ui-datepicker-calendar {
	color:rgba(226, 224, 224, 0.8) !important;
}
.ui-state-highlight{
	color: #555 !important;
}
.ui-state-default {
	border: .5px solid #555 !important;
	color: rgba(226, 224, 224, 0.8) !important;
}

.ui-state-default .ui-state-active {

}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    border: .5px solid rgb(242, 105, 37) !important;
    font-weight: normal !important;
    color: #ffffff  !important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
	background: #444!important;
}

.ui-datepicker-next, .ui-datepicker-prev  {
	background: #555 !important;

}
.ui-datepicker-header {
	background:#323232 !important;
	color:rgb(242, 105, 37) !important;
	font-weight: normal !important;
	border:none !important;
}

.time-apply-button {
	display: block !important;
	margin-left:73%;
	
}

.date-picker-textbox
{
	height: 3vh;
    width: 23vh;
	font-size: inherit;
}

.timezone-label{
	margin-top: 3vh;
}

.clock-inputs{
    height: 2vh !important;
    width: 17vh !important;
	margin-left: 1vh !important;
}
.clock-container {
	/* height: 3.5vh; */
	margin-left: 1vh;
	/* margin-top: 1vh; */
}

.time-server-container
{
	margin-top:4%;
	margin-bottom: 3%;

}

.ntp-server-address-textbox
{
	width: 23vh;
	height:3vh;
	font-size:middle;

}

.select-timezone-region{
	  width: 19vh;
}

.select-timezone-continent,
.select-timezone-region
{
	font-size: 2vh;
	height: 3vh;
	margin-top: 2vh;

}

.custom-time-checkbox,
.timezone-checkbox{
	display: block !important;
}
.timezone-checkbox-container{
	margin-top: 4vh;
}

/*****************/
/*Icons*/
/*****************/

/* .html-gui-wifi-container:hover, */
.html-gui-wifi-toggle,
.html-gui-wifi-active,
.html-gui-active,
.lan-connection-wrapper:hover,
.ui-datepicker-next:hover, 
.ui-datepicker-prev:hover,
.printer-list-container:hover{
    background: #323232  ;
    color: rgba(226, 224, 224, 1);
    fill: rgba(226, 224, 224, 1);
}

.html-gui-header-icon-wrapper .html-gui-header-icon:active, .printer-list-container:active
{
    background: #4c4c4c;
    color: rgba(226, 224, 224, 0.8);
    fill: rgba(226, 224, 224, 0.8);
}

.html-gui-wifi-container:active,
.ui-datepicker-next:active, 
.ui-datepicker-prev:active,
.printer-list-container:active{
    background: #4c4c4c  !important;
    color: rgba(226, 224, 224, 0.8) !important;
    fill: rgba(226, 224, 224, 0.8) !important;
}

.lan-connection:not(.html-gui-wifi-active) > .html-gui-horizontal-network-connection:hover,
.wan-connection:not(.html-gui-wifi-active) > .html-gui-horizontal-network-connection:hover {
    background: #444444;
}

.html-gui-horizontal-network-connection:hover .html-gui-wifi-container, 
.html-gui-horizontal-network-connection:hover .html-gui-wifi-container svg {    
    color: rgb(242, 105, 37);
    fill: rgb(242, 105, 37) !important;
}

.html-gui-connection-status-icon {
    /* display: inline-block;
    vertical-align: top;
    margin-left: 5%;
    margin-top: 5%; */
}


.html-gui-horizontal-inner-title-text-network-text {
    margin: .5vh;
    font-size: 1.5vh;
	
}

/*****************/

.html-gui-vertical-layout-content-wrapper .extented-label {
    width: 52% !important;
}

/*  Slider     */
/* 
	other attributes -> ui-state-default ui-corner-all
	hover attribute  -> ui-state-hover
*/

/*****************/
/*Slider bar*/
/*****************/

.ui-slider-horizontal {
    background: rgba(226, 224, 224, 0.8);
}

/*Slider adjuster*/
.ui-slider-horizontal .ui-slider-handle {
    background: #444;
    border: .2vh solid #CCC;
    outline: none !important;
}

.ui-slider-handle:hover {
    border: .2vh solid rgb(242, 105, 37);
}

.ui-slider-handle:active {
    border: .2vh solid rgb(242, 105, 37);
    background: #323232;
}


/*****************/
/*horizontal layout*/
/*****************/

.html-gui-horizontal-body {
    white-space: nowrap;
    margin: 1vh;
    height: 25vh;
	overflow-y:auto;
}

.html-gui-horizontal-panel {
    display: inline-block;
    vertical-align: top;
    top: 0;
    width: 27vh;
    height: 25vh;
    margin: 0px .5vh;
    text-align: left;
}


/*	
	All titles/labels in the body of the horizontal layout 	
*/

.html-gui-horizontal-inner-title-text {
    display: inline-block;
    vertical-align: top;
    padding-left: 1vh;
    padding-top: 1.05vh;
}

/*
	Defines min size for the network config app
*/
.html-gui-network-config {
    min-width: 58vh;
}

.html-gui-horizontal-network-connection:hover .html-gui-wifi-container, 
.html-gui-horizontal-network-connection:hover .html-gui-wifi-container svg {    
    color: rgb(242, 105, 37);
    fill: rgb(242, 105, 37) !important;
}

/*
	Container that holds all the network connections
*/
.html-gui-horizontal-network-container {
    overflow-x: hidden;
    overflow-y: auto;
    /* height: 100%; */
    font-size: 0;
}

/*
	The 'Local Area' connection div for lan connection
	which is fixed in position
*/
.html-gui-horizontal-title-fixed {
    overflow: hidden;
    border-bottom: solid;
    border-width: .07vh;
    border-color: rgba(226, 224, 224, 0.8);    
}

.lan-connection > div {
    padding:1.5vh
}
    


/**************************/
/* Connection Navigation */
/*************************/
.html-gui-connection-status-icon svg,
.html-gui-nav-arrow svg{
	fill:rgba(226, 224, 224, 0.8);
}
/*

	Parent container of arrow nav (.html-gui-nav-up and .html-gui-nav-down) and
	connections (.html-gui-wifi-container)

*/
/* .html-gui-horizontal-network-connection {
    position: relative;
    width: 100%;
    height: 4.5vh;
} */

.html-gui-horizontal-network-connection > div, 
.html-gui-wifi-container > div,
.html-gui-horizontal-network-connection.ui-sortable-helper > div {
    display:inline-block !important;
    vertical-align:middle !important;    
}

.html-gui-horizontal-network-connection.ui-sortable-helper > div{   
    height:auto;
    display:inline-block !important;
    vertical-align:middle !important;
}

.wan-connection-wrapper {
    cursor:move;
}


/* 
	The container that is to the right of arrow navigation option
	which contains the wifi connection name or ssid
*/
.html-gui-wifi-container {
    /* display: inline-block; */
    /* vertical-align: top; */
    min-width: 98%;
    height: 100%;
}

.html-gui-wifi-container {
    padding-left:2vh;
}

.html-gui-connection-nav {
    display: inline-block
}


.html-gui-nav-arrow {
    padding: .6vh;
}

/* .html-gui-nav-up svg {
    width: 1.5vh;
    height: 1.5vh;
}

.html-gui-nav-up {
    padding: .4vh;
}

.html-gui-nav-down svg {
    width: 1.5vh;
    height: 1.5vh;
}

.html-gui-nav-down {
    padding: .4vh;
} */

.html-gui-nav-up:hover,
.html-gui-nav-down:hover,
.printer-list-container:hover{
	background: #333;
	fill: rgb(242, 105, 37);
	color: rgb(242, 105, 37);
}

.html-gui-nav-up:active,
.html-gui-nav-down:active{
	background: #4c4c4c;
	fill: rgba(226, 224, 224, 0.8);
	color: rgba(226, 224, 224, 0.8);
}

.html-gui-horizontal-title-fixed:hover div, 
.html-gui-horizontal-title-fixed:hover svg,
.html-gui-wifi-container:hover svg{
	color: rgb(242, 105, 37);
    fill: rgb(242, 105, 37) !important;
}

.network-connection-wrapper {
    white-space:nowrap;
}