/* =================================== */
/*  Elements Page Styles
/* =================================== */

$default: #f9f9ff;
$primary: $primary-color;
$success: #4cd3e3;
$info   : #38a4ff;
$warning: #f4e700;
$danger: #f44a40;
$link: #f9f9ff;
$disable: (#222222, .3);


/*---------- Start Elements Page -------------*/

.whole-wrap {
    background-color: #f9f9ff;
}

.generic-banner {
    margin-top: 60px;
    background-color: $primary-color;
    text-align: center;
    .height {
        height: 600px;
        @include media-breakpoint-down (sm) {
            height: 400px;
        }
    }
    .generic-banner-content {
        h2 {
            line-height: 1.2em;
            margin-bottom: 20px;
            br {
                @include media-breakpoint-down (md) {
                    display: none;
                }
            }
        }
        p {
            text-align: center;
            font-size: 16px;
            br {
                @include media-breakpoint-down (md) {
                    display: none;
                }
            }
        }
    }
}

.generic-content {
    h1 {
        font-weight: 600;
    }
}

.about-generic-area {
    background: $white;
    .border-top-generic {}
    p {
        margin-bottom: 20px;
    }
}

.white-bg {
    background: $white;
}

.section-top-border {
    padding: 50px 0;
    border-top: 1px dotted #eee;
}

.switch-wrap {
    margin-bottom: 10px;
    p {
        margin: 0;
    }
}


/*---------- End Elements Page -------------*/




.sample-text-area {
    background: #f9f9ff;
	padding: 100px 0 70px 0;
}

.sample-text{
	margin-bottom:0;
}

.text-heading {
	margin-bottom: 30px;
	font-size: 24px;
}

.typo-list{
	margin-bottom:10px;
}


.typo-sec{
	@media(max-width:767px){
		margin-bottom:30px;
	}
}


.element-wrap{
	@media(max-width:767px){
		margin-top:30px;
	}
}




b,sup, sub, u, del {
	color: $primary;
}
h1 {
	font-size: 36px;
}
h2 {
	font-size: 30px;
}
h3 {
	font-size: 24px;
}
h4 {
	font-size: 18px;
}
h5 {
	font-size: 16px;
}
h6 {
	font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.5em;
}
.typography {
	h1, h2, h3, h4, h5, h6 {
		color: $text-color;
	}
}
.button-area {
	.border-top-generic {
		padding: 70px 15px;
		border-top: 1px dotted #eee;
	}
	background: #f9f9ff;
}
.button-group-area {
	.genric-btn {
		margin-right: 10px;
		margin-top: 10px;
		&:last-child {
			margin-right: 0;
		}
	}
}
.genric-btn {
	display: inline-block;
	outline: none;
	line-height: 40px;
	padding: 0 30px;
	font-size: .8em;
	text-align: center;
	text-decoration: none;
	font-weight: 500;
	cursor: pointer;
	@include transition();
	&:focus {
		outline: none;
	}
	&.e-large {
		padding: 0 40px;
		line-height: 50px;
	}
	&.large {
		line-height: 45px;
	}
	&.medium {
		line-height: 30px;
	}
	&.small {
		line-height: 25px;
	}
	&.radius {
		border-radius: 3px;
	}
	&.circle {
		border-radius: 20px;
	}
	&.arrow {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		span {
			margin-left: 10px;
		}
	}
	&.default {
		color: $title-color;
		background: $default;
		border: 1px solid transparent;
		&:hover {
			border: 1px solid $default;
			background: $white;
		}
	}
	&.default-border {
		border: 1px solid $default;
		background: $white;
		&:hover {
		color: $title-color;
		background: $default;
		border: 1px solid transparent;
		}
	}
	&.primary {
		color: $white;
		background: $primary;
		border: 1px solid transparent;
		&:hover {
			color: $primary;
			border: 1px solid $primary;
			background: $white;
		}
	}
	&.primary-border {
		color: $primary;
		border: 1px solid $primary;
		background: $white;
		&:hover {
			color: $white;
			background: $primary;
			border: 1px solid transparent;
		}
	}
	&.success {
		color: $white;
		background: $success;
		border: 1px solid transparent;
		&:hover {
			color: $success;
			border: 1px solid $success;
			background: $white;
		}
	}
	&.success-border {
		color: $success;
		border: 1px solid $success;
		background: $white;
		
		&:hover {
			color: $white;
			background: $success;
			border: 1px solid transparent;
		}
	}
	&.info {
		color: $white;
		background: $info;
		border: 1px solid transparent;
		&:hover {
			color: $info;
			border: 1px solid $info;
			background: $white;
		}
	}
	&.info-border {
		color: $info;
		border: 1px solid $info;
		background: $white;
		
		&:hover {
			color: $white;
			background: $info;
			border: 1px solid transparent;
		}
	}
	&.warning {
		color: $white;
		background: $warning;
		border: 1px solid transparent;
		&:hover {
			color: $warning;
			border: 1px solid $warning;
			background: $white;
		}
	}
	&.warning-border {
		color: $warning;
		border: 1px solid $warning;
		background: $white;
		&:hover {
			color: $white;
			background: $warning;
			border: 1px solid transparent;
		}
	}
	&.danger {
		color: $white;
		background: $danger;
		border: 1px solid transparent;
		&:hover {
			color: $danger;
			border: 1px solid $danger;
			background: $white;
		}
	}
	&.danger-border {
		color: $danger;
		border: 1px solid $danger;
		background: $white;
		&:hover {
			color: $white;
			background: $danger;
			border: 1px solid transparent;
		}
	}
	&.link {
		color: $title-color;
		background: $link;
		text-decoration: underline;
		border: 1px solid transparent;
		&:hover {
			color: $title-color;
			border: 1px solid $link;
			background: $white;
		}
	}
	&.link-border {
		color: $title-color;
		border: 1px solid $link;
		background: $white;
		text-decoration: underline;
		&:hover {
			color: $title-color;
			background: $link;
			border: 1px solid transparent;
		}
	}
	&.disable {
		color: $disable;
		background: $link;
		border: 1px solid transparent;
		cursor: not-allowed;
	}
}

.generic-blockquote {
	padding: 30px 50px 30px 30px;
	background: #fff;
	border-left: 2px solid $primary;
}
.progress-table-wrap {
	@media(max-width:991px){
		overflow-x: scroll;
	}
}
.progress-table {
	background: #fff;
	padding: 15px 0px 30px 0px;
	min-width: 800px;
	.serial {
		width: 11.83%;
		padding-left: 30px;
	}
	.country {
		width: 28.07%;
	}
	.visit {
		width: 19.74%;
	}
	.percentage {
		width: 40.36%;
		padding-right: 50px;
	}
	.table-head {
		display: flex;
		.serial, .country, .visit, .percentage {
			color: $title-color;
			line-height: 40px;
			text-transform: uppercase;
			font-weight: 500;
		}
	}
	.table-row {
		padding: 15px 0;
		border-top: 1px solid #edf3fd;
		display: flex;
		.serial, .country, .visit, .percentage {
			display: flex;
			align-items: center;
		}
		.country {
			img {
				margin-right: 15px;
			}
		}
		.percentage {
			.progress {
				width: 80%;
				border-radius: 0px;
				background: transparent;
				.progress-bar {
					height: 5px;
					line-height: 5px;
					&.color-1 {
						background-color: #6382e6;
					}
					&.color-2 {
						background-color: #e66686;
					}
					&.color-3 {
						background-color: #f09359;
					}
					&.color-4 {
						background-color: #73fbaf;
					}
					&.color-5 {
						background-color: #73fbaf;
					}
					&.color-6 {
						background-color: #6382e6;
					}
					&.color-7 {
						background-color: #a367e7;
					}
					&.color-8 {
						background-color: #e66686;
					}
				}
			}
		}
	}
}

.single-gallery-image {
	margin-top: 30px;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: cover !important;
	height: 200px;
	@include transition();
	&:hover{
		opacity:.8;
	}
}
.list-style {
	width: 14px;
	height: 14px;
}
.unordered-list {
	li {
		position: relative;
		padding-left: 30px;
		line-height: 1.82em !important;
		&:before {
			content: "";
			position: absolute;
			width: 14px;
			height: 14px;
			border: 3px solid $primary;
			background: $white;
			top: 4px;
			left: 0;
			border-radius: 50%;
		}
	}
}
.ordered-list {
	margin-left: 30px;
	li {
		list-style-type:decimal-leading-zero;
		color: $primary;
		font-weight: 500;
		line-height: 1.82em !important;
		span {
			font-weight: 300;
			color: $text-color;
		}
	}
}
.ordered-list-alpha {
	li {
		margin-left: 30px;
		list-style-type:lower-alpha;
		color: $primary;
		font-weight: 500;
		line-height: 1.82em !important;
		span {
			font-weight: 300;
			color: $text-color;
		}
	}
}
.ordered-list-roman {
	li {
		margin-left: 30px;
		list-style-type:lower-roman;
		color: $primary;
		font-weight: 500;
		line-height: 1.82em !important;
		span {
			font-weight: 300;
			color: $text-color;
		}
	}
}
.single-input {
	display: block;
	width: 100%;
	line-height: 40px;
	border: none;
	outline: none;
	background: #fff;
	padding: 0 20px;
	&:focus {
		outline: none;
	}
}
.input-group-icon {
	position: relative;
	.icon {
		position: absolute;
		left: 20px;
		top: 0;
		line-height: 40px;
		i {
			color: #797979;
		}
		z-index: 3;
	}
	.single-input {
		padding-left: 45px;
	}
}
.single-textarea {
	display: block;
	width: 100%;
	line-height: 40px;
	border: none;
	outline: none;
	background: #fff;
	padding: 0 20px;
	height: 100px;
	resize: none;
	&:focus {
		outline: none;
	}
}
// ---------  For gradient border CSS  ----------//


.single-input-primary {
	display: block;
	width: 100%;
	line-height: 40px;
	border: 1px solid transparent;
	outline: none;
	background: #fff;
	padding: 0 20px;
	&:focus {
		outline: none;
		border: 1px solid $primary;
	}
}
.single-input-accent {
	display: block;
	width: 100%;
	line-height: 40px;
	border: 1px solid transparent;
	outline: none;
	background: #fff;
	padding: 0 20px;
	&:focus {
		outline: none;
		border: 1px solid #eb6b55;
	}
}
.single-input-secondary {
	display: block;
	width: 100%;
	line-height: 40px;
	border: 1px solid transparent;
	outline: none;
	background: #fff;
	padding: 0 20px;
	&:focus {
		outline: none;
		border: 1px solid #f09359;
	}
}

.default-switch {
	width: 35px;
	height: 17px;
	border-radius: 8.5px;
	background: #fff;
	position: relative;
	cursor: pointer;
	input {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
		+ label {
			position: absolute;
			top: 1px;
			left: 1px;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background: $primary;
			@include transition (all .2s);
			box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
			cursor: pointer;
		}
		&:checked {
			+ label {
				left: 19px;
			}
		}
	}
}

.single-element-widget{
	margin-bottom:30px;
}

.primary-switch {
	width: 35px;
	height: 17px;
	border-radius: 8.5px;
	background: #fff;
	position: relative;
	cursor: pointer;
	input {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		+ label {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			&:before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background: transparent;
				border-radius: 8.5px;
				cursor: pointer;
				@include transition (all .2s);
			}
			&:after {
				content: "";
				position: absolute;
				top: 1px;
				left: 1px;
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background: $white;
				@include transition (all .2s);
				box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
				cursor: pointer;
			}
		}
		&:checked {
			+ label {
				&:after {
					left: 19px;
				}
				&:before {
					background: $primary;
				}
			}
		}
	}
}
.confirm-switch {
	width: 35px;
	height: 17px;
	border-radius: 8.5px;
	background: #fff;
	position: relative;
	cursor: pointer;
	input {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		+ label {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			&:before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background: transparent;
				border-radius: 8.5px;
				@include transition (all .2s);
				cursor: pointer;
			}
			&:after {
				content: "";
				position: absolute;
				top: 1px;
				left: 1px;
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background: $white;
				@include transition (all .2s);
				box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
				cursor: pointer;
			}
		}
		&:checked {
			+ label {
				&:after {
					left: 19px;
				}
				&:before {
					background: $success;
				}
			}
		}
	}
}
.primary-checkbox {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	background: #fff;
	position: relative;
	cursor: pointer;
	input {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		+ label {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			border-radius: 3px;
			cursor: pointer;
			border: 1px solid #f1f1f1;
		}
		&:checked {
			+ label {
				background: url(../img/elements/primary-check.png) no-repeat center center/cover;
				border: none;
			}
		}
	}
}

.confirm-checkbox {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	background: #fff;
	position: relative;
	cursor: pointer;
	input {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		+ label {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			border-radius: 3px;
			cursor: pointer;
			border: 1px solid #f1f1f1;
		}
		&:checked {
			+ label {
				background: url(../img/elements/success-check.png) no-repeat center center/cover;
				border: none;
			}
		}
	}
}
.disabled-checkbox {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	background: #fff;
	position: relative;
	cursor: pointer;
	input {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		+ label {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			border-radius: 3px;
			cursor: pointer;
			border: 1px solid #f1f1f1;
		}
		&:disabled {
			cursor: not-allowed;
			z-index: 3;
		}
		&:checked {
			+ label {
				background: url(../img/elements/disabled-check.png) no-repeat center center/cover;
				border: none;
			}
		}
	}
}
.primary-radio {
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background: #fff;
	position: relative;
	cursor: pointer;
	input {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		+ label {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			border-radius: 8px;
			cursor: pointer;
			border: 1px solid #f1f1f1;
		}
		&:checked {
			+ label {
				background: url(../img/elements/primary-radio.png) no-repeat center center/cover;
				border: none;
			}
		}
	}
}
.confirm-radio {
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background: #fff;
	position: relative;
	cursor: pointer;
	input {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		+ label {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			border-radius: 8px;
			cursor: pointer;
			border: 1px solid #f1f1f1;
		}
		&:checked {
			+ label {
				background: url(../img/elements/success-radio.png) no-repeat center center/cover;
				border: none;
			}
		}
	}
}
.disabled-radio {
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background: #fff;
	position: relative;
	cursor: pointer;
	input {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		+ label {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			border-radius: 8px;
			cursor: pointer;
			border: 1px solid #f1f1f1;
		}
		&:disabled {
			cursor: not-allowed;
			z-index: 3;
		}
		&:checked {
			+ label {
				background: url(../img/elements/disabled-radio.png) no-repeat center center/cover;
				border: none;
			}
		}
	}
}

.default-select {
	height: 40px;
	.nice-select {
		border: none;
		border-radius: 0px;
		height: 40px;
		background: #fff;
		padding-left: 20px;
		padding-right: 40px;
		.list {
			margin-top: 0;
			border: none;
			border-radius: 0px;
			box-shadow: none;
			width: 100%;
			padding: 10px 0 10px 0px;
			.option {
				font-weight: 300;
				@include transition();
				line-height: 28px;
				min-height: 28px;
				font-size: 12px;
				padding-left: 20px;
				&.selected {
					color: $primary;
					background: transparent;
				}
				&:hover {
					color: $primary;
					background: transparent;
				}
			}
		}
	}
	.current {
		margin-right: 50px;
		font-weight: 300;
	}
	.nice-select::after {
		right: 20px;
	}
}


.left-align-p p{
	@media(max-width: 991px){
		margin-top:20px;
	}
}

.form-select {
	height: 40px;
	width: 100%;
	.nice-select {
		border: none;
		border-radius: 0px;
		height: 40px;
		background: #fff!important;
		padding-left: 45px;
		padding-right: 40px;
		width: 100%;
		.list {
			margin-top: 0;
			border: none;
			border-radius: 0px;
			box-shadow: none;
			width: 100%;
			padding: 10px 0 10px 0px;
			.option {
				font-weight: 300;
				@include transition();
				line-height: 28px;
				min-height: 28px;
				font-size: 12px;
				padding-left: 45px;
				&.selected {
					color: $primary;
					background: transparent;
				}
				&:hover {
					color: $primary;
					background: transparent;
				}
			}
		}
	}
	.current {
		margin-right: 50px;
		font-weight: 300;
	}
	.nice-select::after {
		right: 20px;
	}
}