//	=================
//    	Imports
//	=================

@import '../base/color_variables';   	// Color Variables
@import '../base/fonticons';   			// Fonticons Variables
@import '../base/urls';   				// URLS Variables
@import '../base/utilities_variables';  // Utilities Variables

/*
    Countdown With Seperator
*/
#cd-seperator {
	.clock-seperator {
		position: $pos-abs;
		top: 20%;
		bottom: 14%;
		right: 0;
		border-left: $b-width-2 $solid;
		font-size: 0;
		overflow: hidden;
		text-indent: -20px;
		color: $light-gray;
	}
	.clock-val {
		color: $color_56;
		font-size: $fs-50;
	}
	.clock-text {
		color: $additional-color-11;
		font-size: $fs-25;
	}
}
/* 
    Circle Countdown
*/
#cd-circle {
	.countdown {
		border: $b-width-2 $solid $color_47;
		border-radius: 50%;
		padding: $p-30 $p-0;
		width: 155px;
		height: 155px;
		margin-left: -10px;
	}
	.clock-val {
		color: $color_47;
		font-size: 45px;
		margin-bottom: $m-0;
	}
	.clock-text {
		color: $additional-color-11;
		font-size: 20px;
		margin-top: $m-0;
	}
}
/*
    Square Countdown
*/
#cd-square {
	.countdown {
		border: $b-width-2 $solid $additional-color-7;
		padding: $p-20;
		border-radius: 2px;
	}
	.clock-val {
		color: $additional-color-7;
		font-size: $fs-50;
	}
	.clock-text {
		color: $additional-color-11;
		font-size: $fs-25;
	}
}
/*
    Filled Square Coundown
*/
#cd-fill-square {
	.clock-val {
		background-color: $additional-color-5;
		padding: $p-30 $p-20;
		font-size: $fs-50;
		color: $white;
	}
	.clock-text {
		color: $additional-color-11;
		font-size: $fs-25;
	}
}