/*****************/
/*general styling*/
/*****************/

/*0 to 568px height*/
@media screen and (max-height: 568px) {

	.dialog{
		box-shadow: 0px 0px 1vh rgba(242, 105, 37, 1);
		border-radius:1vh;
		min-width: 50vh;
	}

	.dialog-header{
		padding: 1.5vh 3vh;
		font-size:6vh;
		border-top-left-radius:1vh;
		border-top-right-radius:1vh;
	}

	.dialog-text{
		min-height:20vh;
		/*margin:2.5vh 5vh;
		max-width:100vh;*/
		padding: 1.5vh 3vh;
		font-size:5vh;
		max-height: 50vh;
		overflow-y: auto;
	}

	.dialog-buttons{
		font-size:5vh;
		border-bottom-left-radius:1vh;
		border-bottom-right-radius:1vh;
	}

	.dialog-button {
		margin:1.5vh 1vh;
		padding:.75vh 1.5vh;
		border-radius:1vh;
		border:1px solid transparent;
		font-weight:bold;
	}

	/****************************/
	/*	Jordan's Dialog Styles */
	/***************************/
	.dialog-body-network-status {
		/* max-width: 75vh !important; */
		max-height: 50vh;
	}
	.dialog-security-label {
		font-size: 4vh !important;
	}

	.dialog-refresh-button > .dialog-button-small {
		height: 4.5vh;
		width: 15vh;
		font-size: 3vh;
		margin: .5vh 5.5vh;
		padding: 1.vh 1vh;
	}

	.dialog-connection-status{
		box-shadow: 0px 0px 1vh rgba(242, 105, 37, 1);
		border-radius:1vh;
		min-width: 45vh;
	}


	.dialog-header-connection-status{
		padding: 1.5vh 3vh;
		font-size:4vh;
		border-top-left-radius:1vh;
		border-top-right-radius:1vh;
	}

	.dialog-text-connection-status{
		min-height:20vh;
		margin:2.5vh 5vh;
		max-width:100vh;
		padding: 1.5vh 3vh;
		font-size:2vh;
	}

	.dialog-buttons-connection-status{
		font-size:2vh;
		border-bottom-left-radius:1vh;
		border-bottom-right-radius:1vh;
	}

	.dialog-button-connection-status{
		margin:1.5vh 3vh;
		padding:.75vh 1.5vh;
		border-radius:1vh;
		border:1px solid transparent;
		font-weight:bold;
	}

	.dialog-slim {
		box-shadow: 0px 0px .25vh rgba(242, 105, 37, 1);
		border-radius:.25vh;
		min-width: 40vh;
		max-width: 45vh;
	}
	.dialog-tab-body {
		min-height: 48vh !important;
		font-size: initial !important;

	}
	.dialog-tab {
		min-width: 30vh !important;
	}
	.dialog-tab-header{
			font-size: 3vh !important;
	}

	.dialog-tcp-detail-label{
		min-width: 21vh !important;
	}
	.host-parent-container {
		height: 10vh !important;
	}
	.html-gui-header-icon-wrapper .html-gui-header-icon
	{
		min-width: 3vh !important;
    	min-height: 8vh!important;
	}

	.dialog-content-container {min-width: 127vh !important;height: 59vh !important;}
	.dialog-host-textbox {
		width: 22vh !important;
	}
	.dialog-host-element-value
	{
		font-size: 76% !important;
	}

	.dialog-host-textbox-label {
		font-size: 76% !important;
	}
	.shorter-input {
		width: 20vh !important;
	}

	.longer-input {
		width: 55vh !important
	}

	.cbox-connected-printers > .cbox-input{
		min-width: 50vh !important;
	}
	.cbox-connected-printers > .cbox-drop-box-open, .cbox-connected-printers > .cbox-drop-box{
		min-width: 50vh !important;
	}
	/* Jordan's styles for media max 500 end here*/
}

/*568px to 1080px height*/
@media screen and (min-height: 568px) and (max-height: 1080px) {

	.dialog{
		box-shadow: 0px 0px .5vh rgba(242, 105, 37, 1);
		border-radius:.5vh;
		min-width: 40vh;
	}

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

	.dialog-text{
		min-height:10vh;
		/*margin:1.25vh 2.5vh;
		max-width:50vh;*/
		padding: .75vh 1.5vh;
		font-size:2.5vh;
		max-height: 50vh;
		overflow-y: auto;
	}

	.dialog-buttons{
		font-size:2.5vh;
		border-bottom-left-radius:.5vh;
		border-bottom-right-radius:.5vh;
	}

	.dialog-button {
		margin:1.5vh .75vh;
		padding:.75vh 1.5vh;
		border-radius:.5vh;
		border:1px solid transparent;
	}
	/****************************/
	/*	Jordan's Dialog Styles */
	/***************************/
	.dialog-body-network-status {
		/* max-width: 75vh !important; */
		max-height: 50vh;
	}

 	.host-parent-container {
    	height: 9vh !important;
	}

	.dialog-host-list-remove-container svg {
    	height: 7vh !important;
	}
	.dialog-content-container {
    	width: 79vh !important;
	}
	.dialog-tab-body {
		min-width: 75vh !important;
	}

	.dialog-tcp-detail-container {
   		margin-left: 6vh !important;
	}
	.dialog-tcp-detail-label {
    	width: 14vh !important;
    	padding-right: 2vh !important;
	}
	.dialog-security-label {
    	font-size: 2vh !important;
	}
	.dialog-modal-connection-add > .dialog
	{
		width:53vh;
	}

	.refresh-button-div {
		display: inline-block;
	}
	.dialog-refresh-button{
		text-align: center;
		width:35%;
	}
	.dialog-connection-status{
		box-shadow: 0px 0px 1vh rgba(242, 105, 37, 1);
		border-radius:.5vh;
		min-width: 45vh;
	}


	.dialog-header-connection-status{
		padding: 1.5vh 2vh;
		font-size:3vh;
		border-top-left-radius:.5vh;
		border-top-right-radius:.5vh;
	}

	.dialog-text-connection-status{
		min-height:10vh;
		margin:1.25vh 2.5vh;
		max-width:50vh;
		padding: .75vh 1.5vh;
		font-size:2vh;
	}

	.dialog-buttons-connection-status{
		font-size:1.5vh;
		border-bottom-left-radius:.5vh;
		border-bottom-right-radius:.5vh;
	}

	.dialog-button-connection-status{
		margin:1.5vh 3vh;
		padding:.75vh 1.5vh;
		border-radius:.5vh;
		border:1px solid transparent;
		font-weight:bold;
	}

	.dialog-slim {
		box-shadow: 0px 0px .25vh rgba(242, 105, 37, 1);
		border-radius:.25vh;
		min-width: 45vh;
		max-width: 50vh;
	}
	.shorter-input {
		width: 16vh !important;
	}

	.longer-input {
		width: 40vh !important
	}
	.cbox-connected-printers > .cbox-input{
		min-width: 33vh !important;
	}

	.cbox-connected-printers > .cbox-drop-box-open, .cbox-connected-printers > .cbox-drop-box{
		min-width: 33vh !important;
	}

	.printer-detail-container {
		min-width: 59vh;
	}
	/* Jordan's styles for media max 1080 end here*/
}

/*1080px + height*/
@media screen and (min-height: 1080px) {

	.dialog{
		box-shadow: 0px 0px .25vh rgba(242, 105, 37, 1);
		border-radius:.25vh;
		min-width: 30vh;
	}

	.dialog-header{
		padding: 1vh;
		font-size:1.5vh;
		border-top-left-radius:.5vh;
		border-top-right-radius:.5vh;
	}

	.dialog-text{
		padding: 1vh;
		min-height:5vh;
		/*margin: 1vh;
		max-width:50vh;*/
		font-size:1.25vh;
		max-height: 50vh;
		overflow-y: auto;
	}

	.dialog-buttons{
		font-size:1.25vh;
		border-bottom-left-radius:.25vh;
		border-bottom-right-radius:.25vh;
	}

	.dialog-button {
		margin:.75vh .5vh;
		padding:.5vh .75vh;
		border-radius:.25vh;
		border:.5px solid transparent;
	}
	/* Jordans Styles */
	.dialog-body-network-status {
		/* max-width: 75vh !important; */
		max-height: 50vh;
	}
	.shorter-input {
		width: 12vh !important;
	}

	.longer-input {
		width: 31vh !important
	}
	.cbox-connected-printers > .cbox-input {
		min-width: 20vh !important;
	}
	.cbox-connected-printers > .cbox-drop-box-open, .cbox-connected-printers > .cbox-drop-box{
		min-width: 20vh !important;
	}
}

/*Dialog Menu Items*/
.dialog-modal{
	display:block;
}

.dialog-modal {
    position:absolute;
}

.dialog-modal{
    top:0;
    left:100%;
    right:0;
    bottom:0;
    background: rgba(65, 64, 66, 0.5);
    z-index:100;
    cursor:default;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
	overflow:hidden;
}

.dialog-container {
	display:flex;
	height:100%;
	width:100%;
	z-index:0;
}

.dialog{
	margin:auto;
	/* commented out due to css3 transforms not allowing select drop down
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%); 
	*/
    color: rgba(226, 224, 224, 0.8);
    background: #555;
    z-index:1;
}

.dialog-modal-error{
	z-index:120;
}


.dialog-modal-yes-no{
	z-index:110;
}

.dialog-header{
    background: #323232;
    color: rgb(242, 105, 37);
}

.dialog-buttons{
	text-align:right;
	background:#444;
	padding-right: 1vh;
}

.dialog-button {
    display:inline-block;
    background:rgba(226, 224, 224, 1);
    color:#323232;
    /* border:1px solid transparent; */
}

.dialog-button:hover{
	background: #323232;
    /*border:1px solid rgb(242, 105, 37);*/
	color: rgb(242, 105, 37);
}

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

/*****************/
/*animation*/
/*****************/
.dialog-modal,
.dialog-button,
.dialog-button:hover,
.dialog-button:active{
    -webkit-transition: all.2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

/*****************/
/*Dialog With Tabs (jordan)*/
/*****************/
.dialog-btn-left {
    float:left;
}
.dialog-btn-right{
	float:right;
}

.dialog-text-inline-top {
	display:inline-block;
	vertical-align: top;
}

.dialog-text-inline-mid {
	display:inline-block;
	vertical-align: middle;
}

.dialog-sub-header{
	background:#444;
	min-height:3vh;
	padding:1.5vh 2vh;
}
.dialog-modal-connection-status,
.dialog-modal-connection-add,
.dialog-modal-connection-edit{
	position: absolute;
    top:0;
    left:100%;
    right:0;
    bottom:0;
    background: rgba(65, 64, 66, 0.5);
    cursor:default;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
	overflow:hidden;
	z-index: 0;
}

.dialog-tab-header {
	min-height:3vh;
	padding:1.5vh 2vh;
	font-size: 2vh;
	background: #666;
	margin-left: 1vh;
	/* margin-right: 1vh; */
	border-bottom: .15vh solid #ff671b;
}

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

.dialog-tab {
	text-align: center;
	display: inline-block;
	max-width: 22vh;
	padding: .75vh 1.75vh;
	overflow: hidden;
	text-overflow: hidden;
	font-size: initial;
	margin-bottom:-.06%;
	vertical-align: bottom;
	/* min-width: 19vh; */
}

.dialog-tab:active {
	background: #4c4c4c;
    color: rgba(226, 224, 224, 0.8);
}
.dialog-tab:hover {
	background: #444;
	color: rgb(242, 105, 37);
}

.dialog-tab-clicked {
	/* background: #555; geoffn */
	background: #555;

	color:rgba(226, 224, 224, 1);
}

.dialog-tab-unclicked {
	/* background: #666; geoffn */
	background: #666;
}

.networkcfg-body .dialog-tab-unclicked{
	background: #555;
	color:rgba(226, 224, 224, 1);
}

.networkcfg-body .dialog-tab-clicked{
	background: #666;
}

.dialog-tab-container {
	margin-left:1vh;
	margin-top: 1vh;
	white-space:nowrap;
	font-size:0;
}

/*1000px + height*/
@media screen and (min-height: 1080px) {

	.dialog-detail-field {
   		margin-bottom: 1.5vh !important;
	}

	.dialog-security-content {
		margin-bottom: 1.8vh !important;
	}

	.dialog-security-label {
    	margin-bottom: 1.5vh !important;
	}

}

.dialog-body-network-wifi, 
.dialog-body-network-status {
	padding: 2vh;    
    background: #666;
    padding-bottom: 1vh;
	font-size: initial;
	overflow: auto;
}

.dialog-body-network-wifi {
	min-height: 30vh;
}

.dialog-inline{
	display:inline-block;
	vertical-align: middle;
	top:0;
	white-space: nowrap;
}

.dialog-connection-status{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: rgba(226, 224, 224, 0.8);
    background: #555;
    z-index:1;
}

.dialog-header-connection-status{
    background: #323232;
    color: rgb(242, 105, 37);
}
.dialog-drop-down {
	min-width: 25vh;

}
.dialog-tcp-detail-container{
    margin-left: 10vh;
    width: 30vh;
}

.dialog-button-small{
	height:2.25vh;
	width:10vh;
	font-size: 1.5vh;
	margin:.5vh 1.5vh;
	padding:.25vh 0vh;
	border-radius:.5vh;
	border:1px solid transparent;
	text-align: center;
}
.dialog-connection-status-data {
	margin-left: 6vh;
	padding-bottom: 1vh;
}

.dialog-button-connection-status {
    display:inline-block;
    background:rgba(226, 224, 224, 1);
    color:#323232;
    /* border:1px solid transparent; */
}
.dialog-body-div{
	margin-top: 2vh;
}

.dialog-buttons-connection-status {
    background: #444;
}

.dialog-button-connection-status:hover{
	background: #323232;
    /*border:1px solid rgb(242, 105, 37);*/
	color: rgb(242, 105, 37);
}

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

.dialog-test-select	{
	width: 96%;
	vertical-align: middle;
	margin:0 auto;
	display: inline-block;
}

.dialog-test-select-wrapper {
	text-align: center;
}

.dialog-tcp-detail-textbox {
	width: 100%;
	margin-left: 1vh;
	margin-bottom: 1vh;
}

.dialog-tcp-detail-label {
	width: 10vh;
	white-space: nowrap;
	font-size: inherit;
	padding-bottom: 1vh;
}

.dialog-sub-body-container {
	margin-bottom: 1vh;
}

.dialog-content-container{
	font-size: 0;
	background: #555;
	vertical-align: top;
	height: 47vh;
	width: 66vh;
	overflow-y: auto;
	overflow-x:hidden;
}

.dialog-detail-wrapper {
	margin-left:.2vh;
	width: 62%;
}
.dialog-detail-label{
	margin-bottom: 1vh;
}
.dialog-detail-field{
	margin-bottom: 1vh;
	margin-left: .8vh;
}
.dialog-outer-security-container {
	white-space:nowrap;
}
.dialog-security-label{
    margin-bottom: 1.7vh;
	min-width: 15vh;
}

.dialog-security-label-large{
    margin-bottom: 1.7vh;
	margin-left: 1vh;
	min-width: 32vh
}

#lan-sec-mode-selector{
	/* width: 74%; */
}

.sec-mod-wifi, .sec-mode-lan {
	/* width: initial; */
	max-width: 75%;
}

.dialog-security-content {
	margin-bottom: 1vh;
	margin-left: .8vh;
	width: 34vh;
}

.dialog-security-content-show-icon {
	margin-bottom: 1vh;
}

.dialog-margin-bottom {
	margin-bottom: 2vh;
}

.dialog-disabled {
	pointer-events: none;
    opacity: 0.4;
}

.dialog-lan-advanced-label-container {
	margin-bottom: 1vh;
	margin-left:.8vh;
	width: 19vh;
}

.dialog-lan-advanced-label {
	margin-right: 11vh;
}

.dialog-label-container {
	width:30%;
}

.dialog-body-properties-container{
	width: 15vh;
	height:20vh;
	background: #444;
	margin-right:10%;
}

.dialog-lan-advanced-content{
	display:inline-block;
	vertical-align: top;
	white-space: nowrap;
}

.dialog-body-panel{
	display:inline-block;
	white-space: nowrap;
	vertical-align: top;
	width:45%;
	height: 25vh;
}
.dialog-select{
	width: 15vh;
}

.dialog-speed-duplex-property{
	height: 12%;
	padding: .5vh .5vh;
}

.dialog-password-wrap{
	font-size:0;
}
.dialog-host-textarea{
	width:42vh;
	height:20vh;
	background: rgba(226, 224, 224, 1);
}
.dialog-host-add-container
{
	display:inline-block;
	padding-top:.5vh;
	white-space:nowrap;
}

.dialog-host-textbox {
	width:16vh;
	display:inline-block;
}

.dialog-host-textbox-label {
	display:inline-block;
	padding-right: .3vh;

}
 .dialog-hostname {
	padding-left: 1vh;
}

.dialog-host-list{
	overflow: hidden;

}
.dialog-host-container
{
	display:inline-block;
}

.dialog-host-list-element{
	display:inline-block;
	white-space:nowrap;
	width:90%;
	height:100%;
	/*border:solid;
	border-width: thin;
	border-color: #323232;*/
}
.dialog-host-element-value
{
	display:inline-block;
	max-width:25vh;
	white-space: nowrap;
 	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align:bottom;
}
.dialog-host-list-data-container
{
	display:inline-block;
	width: 80%;
	padding-left: 1vh;

}
.dialog-host-list-remove-container
{
	display:inline-block;
	vertical-align:top;
	height: 100%;
	width: 4vh ;

}

.dialog-host-list-remove-container svg{
	height: 5vh ;
	width: 2vh ;
}

#ipAddress{
	padding-bottom: .2vh;
    padding-top: .5vh;
}

.host-parent-container > div{
	background:none;
}

.host-parent-container:hover > div {
    background: #4c4c4c;
}

.dialog-host-list-remove-container:active {
    background: #4c4c4c;
    color: rgba(226, 224, 224, 0.8);
    fill: rgba(226, 224, 224, 0.8);
}

.dialog-mid-1 {
	white-space:nowrap;
}
.dialog-input-label {
	padding-bottom: 2vh;
	padding-top:1.8vh;
	padding-left:3vh;

}

.dialog-input {
	padding-bottom: 1vh;
	padding-top:1vh;
	padding-left:1vh;
}

.padding-left{
	padding-left:1.5vh;
}

.padding-left-plus{
	padding-left:11vh;

}
.padding-right{
	padding-right:1vh;
}

.cbox-wireless-connections > input::placeholder {
    opacity:.5;
}

.dialog-wide{
	box-shadow: 0px 0px 1vh rgba(242, 105, 37, 1);
	border-radius:1vh;
	min-width: 83vh;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: rgba(226, 224, 224, 0.8);
    background: #555;
	z-index:1;

}

.dialog-body-large {
	max-height: 78vh;
	overflow-y: scroll;
	margin:2vh;
}

.dialog-connection-edit{
	min-height: 59vh;
}

.dialog-button-larger {
	width: 34vh !important;
	text-align: center !important;
}

.renew-cert-button{
	float:right;
	margin-right:2vh;
}