/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*/

/* ------------- FIBRE:ROOT ------------- */

:root{
	--fibreDashboardTileCountColour: var(--bgColor);
}

/* ------------- DOCUMENT ------------- */

/* Fibre */
#fibre{}

	.fibre-status{
		width: 10px;
		height: 10px;
		display: inline-block;
	}
			
	.fibre-status.red{
		background-color: var(--redColor);
	}
	
	.fibre-status.blue{
		background-color: var(--blueColor);
	}
	
	.fibre-status.green{
		background-color: var(--greenColor);
	}

	/* Fibre Add */
	.fibre-add{
		padding: 10px;
		border: 2px dashed var(--softBorderColor);
	}

	/* Fibre Tables */
	.fibre-table{
		padding: 10px;
		font-size: var(--fontSize90);
		background-color: var(--softBgColor);
		border: 1px solid var(--softBorderColor);
	}
	
		.fibre-table .title{
			text-align: center;
			margin-bottom: 10px;
			padding-bottom: 10px;
			font-size: var(--fontSize110);
			border-bottom: 1px solid var(--softBorderColor);
		}
		
			.fibre-table .title .fibre-status{
				margin-left: 10px;
			}
	
		.fibre-table table{
			width: 100%;
		}
		
			.fibre-table table tbody{}
				
				.fibre-table table tbody tr{}
					
					.fibre-table table tbody tr td{
						padding: 5px;
						width: 50%;
					}
					
					.fibre-table table tbody tr td:nth-child(1){
						text-align: right;
					}
					
					.fibre-table table tbody tr td:nth-child(2){
						font-weight: bold;
					}

	/* Fibre Prompt */
	#fibre .fibre-prompt{}

	#fibre .fibre-prompt.get-fibre{
		width: 800px;
	}

		#fibre .fibre-prompt .description{
			text-align: center;
			margin-bottom: 20px;
			font-size: var(--fontSize120);
		}

		#fibre .fibre-prompt .package-terms{
			margin-bottom: 20px;
		}

		#fibre .fibre-prompt .terms{
			padding: 10px;
			height: 100px;
			overflow-y: scroll;
			margin-bottom: 20px;
			background-color: var(--softBgColor);
			border: 1px solid var(--softBorderColor);
		}
		
		#fibre .fibre-prompt .buttons{
			text-align: center;
		}

	/* Options */
	#fibre .options{
		margin-top: 20px;
	}
	
		#fibre .options .option.btn{
			width: 100%;
			padding: 15px 0;
			text-align: center;
			color: var(--color) !important;
			background-color: var(--softBgColor);
			border: 1px solid var(--softBorderColor);
		}

	/* Devices */
	#fibre .devices{}

	/* Get Fibre */
	#fibre .get-fibre{}
		
		#fibre .get-fibre .info{
			text-align: center;
			margin-bottom: 20px;
			color: var(--softColor);
			font-size: var(--fontSize90);
		}

		#fibre .get-fibre .requirements{
			padding-bottom: 20px;
			border-bottom: 1px solid var(--softBorderColor);
		}
		
			#fibre .get-fibre .requirements .info{}
			
			#fibre .get-fibre .requirements .buttons{}
			
				#fibre .get-fibre .requirements .buttons .btn{
					width: 100%;
					padding-left: 0;
					padding-right: 0;
					text-align: center;
				}

		#fibre .get-fibre .coverage{
			padding-top: 20px;
		}
		
			#fibre .get-fibre .coverage .info{
				width: 500px;
				margin: 0 auto;
				max-width: 100%;
			}
		
				#fibre .get-fibre .coverage .info .location-types{}
			
					#fibre .get-fibre .coverage .info .location-types .btn.selected{
						background-color: var(--bgColor2);
					}
			
			#fibre .get-fibre .coverage .buttons{
				text-align: center;
			}

		#fibre .get-fibre .packages{
			margin-top: 20px;
			padding-top: 20px;
			border-top: 1px solid var(--softBorderColor);
		}
		
			#fibre .get-fibre .packages .info{
				margin-top: 20px;
			}
		
			#fibre .get-fibre .packages .categories{
				text-align: center;
				padding-bottom: 20px;
				border-bottom: 1px solid var(--softBorderColor);
			}
		
				#fibre .get-fibre .packages .categories select{
					min-width: calc(100% / 3 - 20px);
				}
		
			#fibre .get-fibre .packages .table{
				padding-top: 20px;
			}
			
				#fibre .get-fibre .packages .table table{}
				
					#fibre .get-fibre .packages .table table tbody{}
					
						#fibre .get-fibre .packages .table table tbody tr{}
						
						#fibre .get-fibre .packages .table table tbody tr:hover{
							color: var(--btnColor);
							background-color: var(--btnBgColor);
						}
						
							#fibre .get-fibre .packages .table table tbody tr td{}
							
								#fibre .get-fibre .packages .table table tbody tr td .btn{
									width: 100%;
									padding-left: 0;
									padding-right: 0;
									text-align: center;
								}
								
	
	/* Form Terms */
	#fibre form .terms{
		padding: 10px;
		height: 200px;
		overflow-y: scroll;
		background-color: var(--softBgColor);
		border: 1px solid var(--softBorderColor);
	}

	/* Subscriptions */
	#fibre .subscriptions{}
		
		#fibre .subscriptions .subscription{
			cursor: pointer;
		}
		
			#fibre .subscriptions .subscription .address{
				text-align: center;
				margin-top: 10px;
				padding-top: 10px;
				border-top: 1px solid var(--softBorderColor);
			}
		
			#fibre .subscriptions .subscription .buttons{
				text-align: center;
				margin-top: 10px;
				padding-top: 10px;
				border-top: 1px solid var(--softBorderColor);
			}

	/* Subscription */
	#fibre .subscription{}
	
		#fibre .subscription .fibre-status{
			margin-right: 10px;
		}

	/* Get Fibre Steps */
	#fibre .get-fibre-steps{}
		
		#fibre .get-fibre-steps .step-1{
			width: 50%;
			margin: 6% auto;
		}
		
			#fibre .get-fibre-steps .step-1 .location-types{}
		
				#fibre .get-fibre-steps .step-1 .location-types .btn.selected{
					background-color: var(--bgColor2);
				}
		
			#fibre .get-fibre-steps .step-1 .address-container{}

	/* Dashboard */
	#fibre .dashboard{}
	
		#fibre .dashboard .tile{
			padding: 50px 0;
			text-align: center;
			background-color: #fff;
		}
			
			#fibre .dashboard .tile .count{
				font-weight: bold;
				font-size: var(--fontSize240);
				color: var(--fibreDashboardTileCountColour);
			}
	
			#fibre .dashboard .tile .heading{
				font-size: var(--fontSize110);
			}

	/* Core Tabs */
	#fibre .core-tabs{}
	
		#fibre .core-tabs{}
	
			#fibre .core-tabs .menu{
				border-bottom: 1px solid var(--softBgColor);
			}
			
				#fibre .core-tabs .menu .tabs{}
				
					#fibre .core-tabs .menu .tabs .tab{}
				
					#fibre .core-tabs .menu .tabs .tab.selected{
						font-weight: bold;
						border-bottom: 3px solid var(--bgColor);
					}
	
/*1024px*/		
@media screen and (max-width: 1024px){
	#fibre .get-fibre .packages .table table tbody tr th:nth-child(4),
	#fibre .get-fibre .packages .table table tbody tr td:nth-child(4){
		display: none;
	}
}
	
/*600px*/		
@media screen and (max-width: 600px){
	#fibre .get-fibre .packages .categories select{
		width: calc(100% - 20px);
	}

	#fibre .get-fibre .packages .table table tr{
		border-left: 5px solid var(--bgColor);
	}
					
		#fibre .get-fibre .packages .table table tbody tr:hover{
			color: var(--color);
		}
	
		#fibre .get-fibre .packages .table table tbody tr th:nth-child(4),
		#fibre .get-fibre .packages .table table tbody tr td:nth-child(4){
			display: block;
		}
			
		#fibre .get-fibre .packages .table table tbody tr td{
			text-align: center;
		}
		
		#fibre .get-fibre .packages .table table tbody tr td:before{
			text-align: center;
		}
	
			#fibre .get-fibre .packages .table table tbody tr td:first-child{
				text-align: center;
			}
		
	#fibre .get-fibre-steps .step-1{
		width: auto;
		margin: 0 auto;
	}
}