/* GENERAL SETTINGS */

html, body {
	height: 100%;
}
	
/* BUTTONS */

	.btn {
		cursor: pointer;
		outline: none; 
	}

/* RADIO INPUTS */

	/*-- Radio selector items --*/

	/*-- male - female images --*/
	.gender_m{background-image:url("../images/gender_m-1.png");}
	.gender_f{background-image:url("../images/gender_f-1.png");}

	/*-- body profile images --*/
	.profile_1{background-image:url("../images/profile_1-1.png");}
	.profile_2{background-image:url("../images/profile_2-1.png");}
	.profile_3{background-image:url("../images/profile_3-1.png");}
	.profile_4{background-image:url("../images/profile_4-1.png");}

	/*-- disable radio selector items --*/
	.radio-selector{
		display: inline-block;
		vertical-align: middle;
	}

	.radio-selector input{
		margin:0;padding:0px;
		-webkit-appearance:none;
		   -moz-appearance:none;
				appearance:none;
	}
	
	/* change opacity when hovering/active/checked... */
	.radio-selector input:active +.radio-type{
		opacity: .9;
	}

	.radio-selector input:checked +.radio-type{
		-webkit-filter: none;
		   -moz-filter: none;
				filter: none;
	}
	.radio-type{
		cursor:pointer;
		background-size:contain;
		background-repeat:no-repeat;
		display:inline-block;
		outline: none; /* prevent from showing a blue border when selected...*/
		-webkit-transition: all 100ms ease-in;
		   -moz-transition: all 100ms ease-in;
				transition: all 100ms ease-in;
		-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
		   -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
				filter: brightness(1.8) grayscale(1) opacity(.7);
	}
	.radio-type:hover{
		-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
		   -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
				filter: brightness(1.2) grayscale(.5) opacity(.9);
	}
	
/* IMAGE - ROUNDED CORNERS */

	img.rounded {
		outline: none; /* prevent from showing a blue border when selected... */
	}
	
/* MODALS */
	
/* TABS */

	div.card-body.hide { 
		display: none; 
	}
	div.card-body.show{
		display: block;
	}

/* SLIDERS */
	
	/*.sliders {*/
		/* position: relative; */ 
		/* padding: 40px 60px 50px 30px; */
		/* margin: 20px 0; */
		/* overflow: hidden; */
	/*}*/
	
	/* TOOLTIP */
	
	/* only show the tooltip when dragging a particular slider: */
	.noUi-tooltip {
		display: none;
	}
	.noUi-active .noUi-tooltip {
		display: block;
	}
	
	/* HORIZONTAL (PROFILE) SLIDERS */

	.sliders.profile {
		display: inline-block;
		vertical-align: bottom;
	}
	.sliders.profile .noUi-handle {
		border: none;
	}
	.noUi-pips-horizontal {
		top: 100%;
		left: 0;
		width: 100%;
	}
	
	.sliders.profile .noUi-handle::after {
		display: none;
	}
	
	.sliders.profile .noUi-handle::before {
		display: none;
	}	
	.sliders.profile .noUi-value {
		/* don't show pip values */
		display: none;
	}
	/* VERTICAL (MODULE) SLIDERS */
	
	.sliders.vertical {
		display: inline-block;
	}

	/* show tooltip at right hand side */
	.noUi-vertical .noUi-tooltip {
  		-webkit-transform: translate(220%, -50%);
 		transform: translate(220%, -50%);
	}
	

/* RESPONSIVE DISPLAY SIZE */

	/* Extra small devices (portrait phones, less than 576px) */
	/* No media query since this is the default in Bootstrap  */
		body {
			font-size: 8px;
		}
		h1 {
			font-size: 16px;
		}		
		.btn {
			padding: 3px 5px;
			font-size: 8px;
			border: 1px solid;
			border-radius: 3px;
		}	
		.radio-type {
			width:60px;height:60px;
			border-radius: 3px;
		}
		.img.rounded {
			border-radius: 3px;
		}
		.sliders.vertical {
			width: 16px;
			height: 135px;
			margin: 10px;
		}
		.sliders.vertical .noUi-handle{
			height: 22px;
			width: 24px;
			left: -21px;
			top: -11px;
		}		
		.sliders.profile .noUi-handle {
			height: 12px;
			width: 20px;
			/*left: -10px;*/
			top: -4px;
			border-radius: 6px;
		}
		.sliders.profile {
			width: 280px;
			height: 8px;
			margin: 16px;
		}	
		#general-slider {
			margin-left: 20px;
		}
		.noUi-pips-horizontal {
			padding: 10px 0;
			height: 40px;
		}
		.square {
			margin: 0px 5px;
			height: 10px;
			width: 10px;
			border-radius: 4px;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			box-shadow: 0 0 2px;
		}
		
	/* Small devices (landscape phones, 576px and up) */
	@media (min-width: 576px) and (min-height: 432px){
		body {
			font-size: 10px;
		}
		h1 {
			font-size: 20px;
		}		
		.btn {
			padding: 4px 6px;
			font-size: 10px;
			border: 2px solid;
			border-radius: 4px;
		}	
		.radio-type {
			width:70px;height:70px;
			border-radius: 4px;
		}
		.img.rounded {
			border-radius: 4px;
		}		
		.sliders.vertical {
			width: 22px;
			height: 220px;
			margin: 14px;
		}
		.sliders.vertical .noUi-handle{
			height: 24px;
			width: 28px;
			left: -25px;
			top: -12px;
		}		
		.sliders.profile .noUi-handle {
			height: 16px;
			width: 20px;
			/*left: -10px;*/
			top: -4px;
			border-radius: 6px;
		}
		.sliders.profile {
			width: 280px;
			height: 8px;
			margin: 16px;
		}	
		#general-slider {
			margin-left: 20px;
		}	
		.noUi-pips-horizontal {
			padding: 10px 0;
			height: 40px;
		}	
		.square {
			margin: 0px 10px;
			height: 20px;
			width: 20px;
			border-radius: 8px;
			box-shadow: 0 0 3px;
		}		
	}
	
	/*  Medium devices (tablets, 768px and up) */
	@media (min-width: 768px) and (min-height: 576px) {
		body {
			font-size: 12px;
		}	
		h1 {
			font-size: 24px;
		}
		.btn {
			padding: 5px 8px;
			font-size: 14px;
			border: 2px solid;
			border-radius: 4px;
		}	
		.radio-type {
			width:70px;height:70px;
			border-radius: 4px;
		}
		.img.rounded {
			border-radius: 4px;
		}		
		.sliders.vertical {
			width: 30px;
			height: 300px;
			margin: 18px;
		}
		.sliders.vertical .noUi-handle{
			height: 32px;
			width: 36px;
			left: -33px;
			top: -16px;
			border-radius: 6px;
		}		
		.sliders.profile .noUi-handle {
			height: 20px;
			width: 24px;
			/*left: -12px;*/
			top: -4px;
		}
		.sliders.profile {
			width: 320px;
			height: 10px;
			margin: 18px;
		}	
		#general-slider {
			margin-left: 40px;
		}		
		.noUi-pips-horizontal {
			padding: 10px 0;
			height: 40px;
		}
		.square {
			margin: 0px 13px;
			height: 30px;
			width: 30px;
			border-radius: 10px;
			box-shadow: 0 0 5px;
		}		
	}
	
	/* Large devices (desktops, 992px and up) */
	@media (min-width: 992px) and (min-height: 744px) {
		body {
			font-size: 14px;
		}
		h1 {
			font-size: 28px;
		}
		.btn {
			padding: 6px 10px;
			font-size: 16px;
			border: 2px solid;
			border-radius: 4px;
		}	
		.radio-type {
			width:70px;height:70px;
			border-radius: 4px;
		}
		.img.rounded {
			border-radius: 4px;
		}		
		.sliders.vertical {
			width: 48px;
			height: 400px;
			margin: 28px;			
		}
		.sliders.vertical .noUi-handle{
			height: 42px;
			width: 54px;
			left: -51px;
			top: -21px;
			border-radius: 6px;
		}		
		.sliders.profile .noUi-handle {
			height: 16px;
			width: 20px;
			/*left: -10px;*/
			top: -6px;
		}
		.sliders.profile {
			width: 350px;
			height: 10px;
			margin: 20px;
		}	
		#general-slider {
			margin-left: 60px;
		}
		.noUi-pips-horizontal {
			padding: 10px 0;
			height: 40px;
		}
		.square {
			margin: 0px 20px;
			height: 50px;
			width: 50px;
			border-radius: 20px;
			box-shadow: 0 0 8px;
		}			
	}
	
	/* Extra large devices (large desktops, 1200px and up) */
	@media (min-width: 1200px) and (min-height: 900px){
		body {
			font-size: 20px;
		}
		h1 {
			font-size: 36px;
		}
		.btn {
			padding: 6px 10px;
			font-size: 20px;
			border: 2px solid;
			border-radius: 6px;
		}
		.radio-type {
			width:70px;height:70px;
			border-radius: 4px;
		}
		.img.rounded {
			border-radius: 4px;
		}		
		.sliders.vertical {
			width: 56px;
			height: 520px;
			margin: 32px;			
		}
		.sliders.vertical .noUi-handle{
			height: 44px;
			width: 64px;
			left: -60px;
			top: -22px; /* half of the height */
			border-radius: 8px;
		}	
		.sliders.profile {
			width: 350px;
			height: 10px;
			margin: 20px;
		}		
		.sliders.profile .noUi-handle {
			height: 16px;
			width: 20px;
			/*left: -8px;*/
			top: -4px;
		}
		#general-slider {
			margin-left: 60px;
		}
		.noUi-pips-horizontal {
			padding: 10px 0;
			height: 40px;
		}
		.square {
			margin: 0px 26px;
			height: 60px;
			width: 60px;
			border-radius: 25px;
			box-shadow: 0 0 10px;
		}			
	}