/*****************/
/*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, .file-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, .html-gui-horizontal-split-div {
        font-size: 4vh;
        /*max-height: 70vh;*/
        height: 90vh;
    }
    .html-gui-padding {
        padding: 3vh;
    }
    /*****************/
    /*gui nav*/
    /*****************/
    .html-gui-body-nav {
        height: 78vh;
        /* width: 110vh; */
    }

    .html-gui-body-nav-fixed-height {
        height: 78vh !important;
    }

    /*****************/
    /*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;
    }

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

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

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

    .html-gui-space-vert {
        margin-top: 2vh;
    }
    /*****************/
    /*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] {
        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; */
    }
    .hg-input-wrapper input[type=radio] {
        height: 4.5vh;
        width: 4.5vh;
    }
    .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 {
        /* padding-left: 3vh; */
        /* padding-top: 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;*/
        height: 75vh;
        padding: 3vh;
    }
    /*****************/
    /*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; */
        height: 51%;
        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: 17vh;
        height: 17vh;
    }
    .display-grid-icon-image svg {
        width: 8vh;
        height: 8vh;
        margin-top: 1.5vh;
    }
    .dgrid-element {
        width: 15vh;
        height: 100%;
        line-height: 15vh;
        outline: .35vh dashed rgb(68, 68, 68);
    }
    .dgrid-row{
        height:15vh;
    }
    .display-grid-icon-label {
        font-size: 2.5vh;
    }

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

    /*****************/
    /*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;
    }
    /*****************/
    /*tabs*/
    /*****************/
    .html-gui-tabs-content {
        height: 72vh;
    }
    /*****************/
    /*keyboard layout*/
    /*****************/
    .keyboard-layouts-wrapper {
        max-height: 43vh;
    }

    /*****************/
    /*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;
    }

    /*****************/
    /*netowrk*/
    /*****************/
    .html-gui-horizontal-network-container {
        /* height: 67vh; */
    }

    .dialog-wan-security-modes .hg-input-label,
    .dialog-lan-security-modes .hg-input-label {
        min-width:35vh;
    }    

    .dialog-body-scep-body {
        max-height:60vh;
    }

    .dialog-body-scep .hg-input-label {
        min-width:45vh;
    }

    .hg-input-max-width select{
        max-width: 75vh;
    }

}

/*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, .file-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, .html-gui-horizontal-split-div {
        font-size: 2.5vh;
        /*max-height: 70vh;*/
        height: 92vh;
    }
    .html-gui-padding {
        padding: 3vh;
    }
    /*****************/
    /*gui nav*/
    /*****************/
    .html-gui-body-nav {
        height: 81vh;
        /* width: 110vh; */
    }

    .html-gui-body-nav-fixed-height {
        height: 81vh !important;
    }

    /*****************/
    /*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;
    }
    .html-gui-space-tab {
        margin-left: 1vh;
    }
    .html-gui-space-tab-tab {
        margin-left: 2vh;
    }

    .html-gui-space-tab-tab-tab {
        margin-left: 4vh;
    }
    .html-gui-space-vert {
        margin-top: 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] {
        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; */
    }
    .hg-input-wrapper input[type=radio] {
        height: 2.5vh;
        width: 2.5vh;
    }
    .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 {
        /* padding-left: 2.5vh; */
        /* padding-top: 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;
        min-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; */
        height: 71%;
        padding: .5vh;
    }
    .input-password-wrap .icon-wrapper-show-pass {
        border-top-right-radius: .5vh;
        /* border-bottom-left-radius: .5vh; */
        border-bottom-right-radius: .5vh;
    }
    .input-password-wrap input {
        border-top-left-radius: .5vh;
        border-bottom-left-radius: .5vh;
        /*width: 23vh;*/
    }
    .html-gui-horizontal-layout-scroll,
    .html-gui-vertical-layout-max {
        /* max-height: 50vh; */
        /*padding-right: 8vh;*/
        height: 82.25vh;
        padding: 2.5vh;
    }
    /*****************/
    /*display grid*/
    /*****************/
    .d-grid {
        /* border: .35vh solid #444; */
        margin: .5vh;
    }
    .display-grid-icon {
        width: 12vh;
        height: 12vh;
    }
    .display-grid-icon-image svg {
        width: 6vh;
        height: 6vh;
        margin-top: 1vh;
    }
    .dgrid-element {
        width: 12vh;
        height: 100%;
        line-height: 12vh;
        outline: .25vh dashed rgb(68,68,68);
    }    
    .dgrid-row{
        height:12vh;
    }
    .display-grid-icon-label {
        font-size: 1.5vh;
    }

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

    /*****************/
    /*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;
    }
    /*****************/
    /*tabs*/
    /*****************/
    .html-gui-tabs-content {
        height: 80vh;
    }
    /*****************/
    /*keyboard layout*/
    /*****************/
    .keyboard-layouts-wrapper {
        max-height: 58vh;
    }

    /*****************/
    /*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;
    }

    .dialog-wan-security-modes .hg-input-label,
    .dialog-lan-security-modes .hg-input-label {
        min-width:24vh;
    }

    .dialog-adv-net-options .hg-input-label {
        min-width: 30vh;
    }

    .dialog-body-scep-body {
        max-height:65vh;
    }

    .dialog-body-scep .hg-input-label {
        min-width:28vh;
    }

    .hg-input-max-width select{
        max-width: 40vh;
    }

    /*****************************************/
    /*cloud manager registration dialog*/
    /*****************************************/
    .dialog-modal-registration .text-field-label {
        width: 10vw;
    }

    /*.dialog-modal-registration .non-password-field {
        width: 26vh;
    }*/

}

/*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, .file-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: 5.5vh;
        line-height: 5.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, .html-gui-horizontal-split-div {
        font-size: 1.25vh;
        height: 96vh;
    }
    .html-gui-padding {
        padding: 1.5vh;
    }
    /*****************/
    /*gui nav*/
    /*****************/
    .html-gui-body-nav {
        height: 92vh;
        /* width: 55vh; */
    }

    .html-gui-body-nav-fixed-height {
        height: 92vh !important;
    }

    /*****************/
    /*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;
    }
    .html-gui-space-tab {
        margin-left: 1vh;
    }
    .html-gui-space-tab-tab {
        margin-left: 2vh;
    }

    .html-gui-space-tab-tab-tab {
        margin-left: 4vh;
    }
    .html-gui-space-vert {
        margin-top: 1vh;
    }
    /*****************/
    /*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] {
        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; */
    }
    .hg-input-wrapper input[type=radio] {
        height: 1.5vh;
        width: 1.5vh;
    }
    .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 {
        /* padding-left: 1.5vh; */
        /* padding-top: 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;*/
        /* height: 100%; */
        height: 90.15vh;
        padding: 1.5vh;
    }
    /*****************/
    /*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; */
        height: 71%;
        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: 8vh;
        height: 8vh;
    }
    .display-grid-icon-image svg {
        width: 3vh;
        height: 3vh;
        margin-top: .5vh;
    }
    .dgrid-element {
        width: 8vh;
        height: 100%;
        line-height: 8vh;
        outline: .2vh dashed rgb(68, 68, 68);
    }

    .dgrid-row{
        height:8vh;
    }
    .display-main-display .display-grid-icon-label {
        padding-bottom: 1vh;
        border-bottom: .2vh solid #ff671b;
    }

    /*****************/
    /*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;
    }
    /*****************/
    /*tabs*/
    /*****************/
    .html-gui-tabs-content {
        height: 88.5vh;
    }
    /*****************/
    /*keyboard layout*/
    /*****************/
    .keyboard-layouts-wrapper {
        max-height: 77vh;
    }

    /*****************/
    /*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;
    }

    .dialog-wan-security-modes .hg-input-label,
    .dialog-lan-security-modes .hg-input-label {
        min-width:13vh;
    }

    .dialog-body-scep-body {
        max-height:55vh;
    }

    .dialog-body-scep .hg-input-label {
        min-width:16vh;
    }

    .hg-input-max-width select{
        max-width: 20vh;
    }

}

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

/*gui main*/

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

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

.html-gui-modal, .html-gui {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.html-gui-modal {
    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;
    box-shadow: none !important;
    border-radius: 0 !important;
}

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

/*gui header*/

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

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

.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*/

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

.html-gui-body {
    overflow: hidden;
}

.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;
}

.html-gui-vertical-layout-scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

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

/*gui nav*/

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

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

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

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

/*gui nav list*/

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

.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;
}

.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:not(.selected) {
    display: none;
}

.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, .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, 
.modem-connection-wrapper:hover,
.modem-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, 
.dialog-host-list-element {
    -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 {
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available;
    overflow-y: auto;
}

.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: 36%;
    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%;
}

.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;
    position: relative;
}

/*.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;*/
}

.icon-wrapper-show-pass {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    right:0;
    height: 103%;
}

.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.no-hover:hover svg {
    background: whitesmoke !important;
    fill: #323232 !important;
    color: #323232 !important;
}

.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,
.dialog-modal .gui-disabled.hg-input-label {
    color: #999;
}

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

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

/*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;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available;
}

.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-scroll {
    overflow-x: hidden;
}

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

.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-horizontal-split {
    white-space:nowrap;
    font-size:0;
}

.html-gui-horizontal-split-div:first-child {
    width:50%;
    height: auto;
}

.html-gui-horizontal-split-div:last-child {
    width:50%;
    /* height: -moz-available; */
    height: -webkit-fill-available;
    height: fill-available;
}


.html-gui-horizontal-split-div {    
    display:inline-block;
    vertical-align:top;    
    overflow-x:hidden;
    overflow-y: auto;
}

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

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

/*tabs*/

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

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

.html-gui-tabs-content {
    overflow-x: hidden;
    overflow-y: auto;
}

.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; */
    /* height: 100%; */
}

.html-gui-tabs-content > div {
    /* min-height: 22vh; */
    /* min-width: 22vh; */
    /* width: 100%; */
    display: block;
}

.html-gui-tabs-content {    
    overflow-x: hidden;
    overflow-y: auto;
}

.keyboard-layouts-wrapper {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* max-height: 55vh; */
    background: #555;
    border: .15vh solid #444;
}

.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-layout-wrapper {
    /* border-bottom: .15vh solid #444;     */
}

.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;
}

/***********************/
/*Logging*/
/**********************/

.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;
}

.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;
}

.html-gui-margin-top-5-percent {
    margin-top: 5%;
}

/*****************/
/*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;
}

.security-container{
    overflow-x: scroll;
}

/*****************/
/*slider*/
/*****************/
/* .ui-slider .ui-slider-handle.ui-state-hover {
    background:#666 !important;
} */

.ui-slider .ui-slider-handle.ui-state-active {
    background:#666 !important;
}

/*****************/
/*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

}

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

/*****************/
/*network*/
/*****************/
.static-ip-wrapper input, .static-dns-wrapper input {
    border-width:initial !important;
}

/*****************/
/*Jordan's Work*/
/*****************/
.cbox-container-connections {
	width:65%;

}

.cbox-wireless-connections > .cbox-drop-box,
.cbox-wireless-connections > .cbox-drop-box-open,
.cbox-wireless-connections > .cbox-input-active
{
	width: 90% !important;
	max-width: 90% !important;

}

.cbox-wireless-connections > .cbox-input
{
	width: 90% !important;
	max-width: 90% !important;

}

.selected-connection-detail-label{
	margin: .8vh;
}

.selected-connection-detail-fields{
	margin-left: 2vh;
}

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

.parent-signal-bar {
	height: 12vh;
	width: 5vh;
	background: rgb(242, 105, 37);
	text-align: center;
	 position: relative;
}

.signal-strength-bar {
	height: 50%;
	width: 96%;
	background: #323232;
	display: inline-block;
	position: absolute;
  	bottom: 0;
  	left: 2.2%;
}

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

.html-gui-connection-svg .wifi{
	fill:#E2E0E0;
	
}
.wifi-status-container{
	margin-top: 1vh;
    display:none;
}

.printer-list-container svg, .file-list-container svg{
     height: 3.5vh; 
     width: 3.5vh; 
}

.printer-list-svg-default{
	display:none;
}

.printer-list-container .st1 {
	fill:green;
}
.printer-list-container, .file-list-container
{
    fill: rgba(226, 224, 224, 0.8);
    padding: 1vh;
    /* width: 95%; *//* height: 15%; */
}

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

.printer-list-text, .file-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;
}

.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-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: #323232 !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%;
	
}

.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%;
}

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

.select-timezone-continent,
.select-timezone-region
{
	margin-top: 2vh;
    width: 20vh;
}

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

/*****************/
/*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: 1vh;
}

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

.lan-connection:not(.html-gui-wifi-active) > .html-gui-horizontal-network-connection:hover,
.modem-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-nav-arrow:hover svg
{
    background: #323232;
    fill: rgb(242, 105, 37) !important;
}
.html-gui-horizontal-title-fixed:hover div, 
.html-gui-horizontal-title-fixed:hover svg,
.html-gui-wifi-container:hover svg,
.modem-connection:hover div,
.modem-connection:hover svg{    
	color: rgb(242, 105, 37);
    fill: rgb(242, 105, 37) !important;
}

.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, .file-list-container:hover {
    background: #323232 !important;
    color: rgba(226, 224, 224, 1);
    fill: rgba(226, 224, 224, 1);
}
.printer-list-container:hover svg circle, .file-list-container:hover svg circle{
    fill: #333 !important;
  
  }

.html-gui-header-icon-wrapper .html-gui-header-icon:active, .printer-list-container:active, .file-list-container:active
{
    background: #4c4c4c;
    color: rgba(226, 224, 224, 0.8);
    fill: rgba(226, 224, 224, 0.8);
}
#host-list-svg
{
	/* background: none !important; */
}
/*.html-gui-wifi-container:active,*/
.ui-datepicker-next:active, 
.ui-datepicker-prev:active,
.printer-list-container:active, .file-list-container:active{
    background: #4c4c4c  !important;
    color: rgba(226, 224, 224, 0.8)  !important;
    fill: rgba(226, 224, 224, 0.8)  !important;
}

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


.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;
}


/*

	Body panels that are ment for two equally sized
	body panels
	
*/
.html-gui-horizontal-panel {
    display: inline-block;
    vertical-align: top;
    /* top: 0; */
   	width: 100%;
    /* height: 25vh; */
    /* margin: 0px .5vh; */
    /* text-align: left; */
    white-space: nowrap;
    overflow-y: auto;
    overflow: hidden;
}


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

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


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

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

/*
	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, 
.modem-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);
}

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

.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-connection-nav {
    display: inline-block;
}

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

/*
.html-gui-nav-arrow svg {
    width: 2vh;
    height: 2vh;
}
*/

.html-gui-nav-up:hover,
.html-gui-nav-down:hover,
.printer-list-container:hover, .file-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);
}
.wan-wep-key,
.network-password{
	width: 92%;
	vertical-align:middle;
}

.lan-password-peap
{
	width: 92%;
}

.host-parent-container{
	height: 7vh;
}

.dialog-body-network-wifi .cbox-drop-box-item,
.cbox-connected-printers .cbox-drop-box-item {
    min-width:80% !important;
}

.error-cbox {
	border: red;
	border-style: solid;
	border-width: .3vh;
	border-radius: .7vh;
}
.printer-name-error{
	display:none;
	padding-left:3vh;
}

.full-desktop-image, .wbt-image, .kiosk-image, .tbt-image {
	width:4vh;
	height:2vh;
	background:black;
}
.preview-desktop {
	float: right;
}
.desktop-background-container{
	width:36vh;
}
.theme-screensaver-container select {
	width:22vh;
	margin-bottom:1vh;
}
.desktop-background-container select {
	width:22vh;
}
.desktop-preview-pane{
	width:98%;
	height:50vh;
	background: #323232;
}
.field-title{
	width:12vh;
}
.desktop-background-container .dialog-button{
	width: 19vh;
	text-align: center;
}
.theme-screensaver-container{
	margin-right:2vh;
}

.input-label-container {
	margin-bottom: 1vh;
}
.dialog-inline-top {
	display:inline-block;
	vertical-align: top;
	top:0;
	white-space: nowrap;
}
.screen-saver-text-input{
	width:50vh;
}
.selected-custom-color{
	width:2.5vh;
	height:2.5vh;
	background:black;
	vertical-align: middle;
	display:none;
	margin-right:.5vh;
	border-style:solid;
	border-width:.2vh;
	border-color:#444;
}

.inputfile {
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
	width:20vh;
	height: 3vh;
    display: inline-block;
	cursor: pointer; /* "hand" cursor */
}

.timeout-input{
	width: 9vh;
}

.password-dialog-body{
    margin:2vh;
}

.foot-options{
    float:left;
}
    
.align-fields-without-label {
    margin-left:34vh !important;
}

.network-share-table-fields {
    width:20vh;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.network-share-table-small {
    width:12vh;       
}

.network-share-table-large {
    width:27vh;
}

.dialog-body-add-shared-folder{
    margin: 1vh;
}

.add-shared-folder-header{
    margin-bottom: 1vh;
}

.folder-share-header{
    margin-left:-5px;
}

.shared-folder-value{
    text-overflow: ellipsis;
}

.network-share-body{
    white-space: nowrap;
    overflow: hidden;
}

.selected-shared-folder{
    background: rgb(226, 224, 224) !important;
    color: #323232 !important;
}

/*network share list*/
.networkshare-list-container{
    /* overflow-y: scroll;
    overflow-x:hidden;
    height: 71vh; */
}

.networkshare-list-container > div {
    width: 100%;
}

.networkshare-list-container .hg-input-label{
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.networkshare-list-container .hg-input-label > div{
    overflow: hidden;
    text-overflow:ellipsis;
}

.overflow-auto{
    overflow: auto;
}

.overflow-auto > div {
    width:fit-content;
}

.force-select {  
    -webkit-user-select: all;  /* Chrome 49+ */
    -moz-user-select: all;     /* Firefox 43+ */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future */   
}

.no-wrap-container {
    white-space: nowrap;
    overflow:hidden;
}

.test-button {
    height: 1.5vh !important;
    font-size: small !important;
    margin-top: .5vh !important;
    padding: .6vh !important;
    width: 5vh !important;
    text-align: center !important;
    padding-bottom: 1.5vh !important;
}

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

.dialog-wan-security-modes .hg-input-wrapper,
.dialog-lan-security-modes .hg-input-wrapper,
.dialog-body-scep .hg-input-wrapper {
    padding-top:0 !important;
}

.dialog-wan-security-modes .dialog-button,
.dialog-lan-security-modes .dialog-button,
.dialog-body-scep .dialog-button,
.dialog-body-scep {
    margin:0 !important;
}

.dialog-body-scep {
    padding: 2vh;
    margin-left: 1vh;
    margin-right: 1vh;
    background: #666;
    padding-bottom: 1vh;
    font-size: initial;
    overflow: auto;
    min-height: 37vh;
    max-height: 59vh;
}

.dialog-body-scep-body {
    white-space: nowrap;    
}

.hg-content-overflow {
    overflow: hidden;
}

/*USB*/
.connected-usb-devices-wrapper .hg-input-label{
    max-width:85%;
}

.connected-usb-devices-wrapper .hg-input-label div {
    max-width:100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*shellscript*/
.shellscript-text-area {
    width:93vw;
    height:60vh;
    resize:none;
    border-width: .5vh;
    border-radius: .5vh;
    border-style: solid;
    border-color: transparent;
}

.shellscript-name-field{
    width:93vw;
}

/*icaglobal*/
.icaglobal-text-area {
    width:80vw;
    height:60vh;
    margin:1vh;
    resize:none;
    border-width: .5vh;
    border-style: solid;
    border-color: transparent;
}
.file-list-container {
    outline: none;
}

/*systemlogs*/
@media screen and (min-width: 600px){
    .long-left-label {
        width: 14vw;
        text-align: left;
        padding: .2vh;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .short-left-label {
        width: 9vw;
        text-align: left;
        padding: .2vh;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.citrix-nav-content .hg-input-label {
    width: 22vw;
    text-align: right;
    padding: .2vh;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-width: 12vh; */
}

.vmware-nav .hg-input-label {
    width: 22vw;
    text-align: right;
    padding: .2vh;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-width: 12vh; */
}

.rdp-nav .hg-input-label {
    width: 22vw;
    text-align: right;
    padding: .2vh;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-width: 12vh; */
}

.parallels-nav .hg-input-label {
    width: 22vw;
    text-align: right;
    padding: .2vh;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-width: 12vh; */
}

.display-aligned-columns .hg-input-label {
    width: 22vw;
    text-align: right;
    padding: .2vh;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-width: 12vh; */
}

.sec-aligned-columns .hg-input-label {
    width: 10vw;
    text-align: right;
    padding: .2vh;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-width: 12vh; */
}

.desktop-set-password-div {
    margin-left: 13vw;
}

.aligned-columns .hg-input-label {
    width: 12vw;
    text-align: right;
    padding: .2vh;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-width: 12vh; */
}

.aligned-columns-long-labels .hg-input-label {
    width: 18vw;
    text-align: right;
    padding: .2vh;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-width: 12vh; */
}

.html-gui-footer .html-gui-button {
    min-width: 10vh;
    text-align: center;
}

.aligned-checkbox-columns .hg-input-label{
    width: 30vw;
    text-align: left;
}

.ok-text {	
    color:rgb(242, 105, 37) !important;
}

.imprivata-tab {
    height: initial !important;
}

.imprivata-reboot-info {
    font-size: 2.25vh;
}

.disp-contrast-slider-input {
    width: 40%;
}