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

}

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

.dialog-modal,
.dialog-modal > div{
    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{        
    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-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;
    min-height: 25vh;
    background: #666;
    padding-bottom: 1vh;
	font-size: initial;
	overflow: auto;

}


.dialog-tab {
	display: inline-block;
	max-width: 18vh;
	padding: .75vh 1.75vh;
	overflow: hidden;
  	text-overflow: ellipsis;
	font-size: initial;
	margin-bottom:-.06%;
	vertical-align: bottom;
		
}

.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: #666;
	color:rgba(226, 224, 224, 1);
}

.dialog-tab-unclicked {
	background: #555;
}

.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: 35vh;
	width: 66vh;
	overflow: auto;
	overflow-x:hidden;
	
}
.dialog-detail-wrapper {
	margin-left:.2vh;
}
.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-content{
	margin-bottom: 1vh;
	margin-left: .8vh;
	width: 98%;
}

.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;
	/*background: rgba(226, 224, 224, 1);
	*/
	padding-top:.5vh;
	white-space:nowrap;
}

.dialog-host-textbox {
	width:12vh;
	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;
}

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

.shorter-input {
	width: 12vh !important;
}

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

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

}