@import "variables";
@import "bootstrap/bootstrap";
@import "bootstrap-select";
@import "mixins";
@import "common";

body, html {
	height: 100%;
	min-height: 100%;
}

body {
	font-family: $Roboto;
	font-weight: 400;
	font-size: $Fsize_14;
	color: $BodyColor;
	background-color: #f8f9fa;
}

h1 {
	font-weight: normal;
	color: $BlackColor;
	font-size: $Fsize_12 * 4;
}

h2 {
	font-weight: normal;
	font-size: $Fsize_12 * 3 - 2;
	color: $BlackColor;
}

h3 {
	font-weight: 500;
	font-size: $Fsize_12 * 2;
	color: $BlackColor;
}

h4 {
	font-weight: 500;
	font-size: $Fsize_20;
	color: $BlackColor;
}

h5 {
	font-weight: 500;
	font-size: $Fsize_12 + 4;
	color: $BlackColor;
}

h6 {
	font-weight: 500;
	font-size: $Fsize_12;
	color: #000000;
}
/*--- Style ---*/
.WalletDots {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* number of lines to show */
	-webkit-box-orient: vertical;
	width: 100px;
}
.RankCircle {
	width: 30px;
	height: 30px;
	line-height: 30px;
}

.GeneralTables {
	width: 100%;
	thead {
		line-height: 1;
		text-transform: uppercase;
		display: block;
		margin-bottom: 10px;
		padding-right: 1.5rem;
		tr {
			display: block;
			font-size: 0;
			th {
				font-weight: normal;
				padding: 7px 5px;
				line-height: 1;
				vertical-align: top;
				word-break: break-all;
				display: inline-block;
				font-size: 14px;
			}
		}
		color: $GreyColor;
	}
	tbody {
		display: block;
		tr {
			display: block;
			font-size: 0;
			border-bottom: solid 1px $GreyColor;
			border-left: solid 3px transparent;
			&:hover {
				border-left-color: $GreyColor;
			}
			td {
				line-height: 1;
				padding:14px 5px;
				word-break: break-all;
				vertical-align: middle;
				display: inline-block;
				font-size: 14px;
				.BtnBlue,
				.BtnGreen {
					font-size: 12px;
				}
			}
		}
	}
}
.dataTables_wrapper {
	margin-bottom: 40px;
	.dataTables_filter {
		display: none;
	}
	.Data_tables {
		width: 100%;
		thead {
			line-height: 1;
			text-transform: uppercase;
			background-color: #f3f5f9;
			tr {
				th {
					font-weight: 700;
					padding: 10px 15px;
					line-height: 1;
					word-break: break-all;
					vertical-align: top;
				}
			}
		}

		tbody {
			font-size: 14px;
			tr {
				border-bottom: solid 1px #ebeef5;
				border-left: solid 3px transparent;
				&:hover {
					border-left-color: #ebeef5;
				}
				&.shown {
					.details-control {
						.fa-chevron-right {
							&::before {
								content: "\f078";
							}
						}
					}
				}

				td {
					line-height: 1;
					padding: 10px 15px;
					word-break: break-all;
					vertical-align: middle;
				}
			}
		}
		&.HideInfo + .dataTables_info {
			display: none;
		}
	}
}
.dataTables_paginate {
	.paginate_button {
		width: 37px;
		height: 43px;
		display: inline-block;
		text-align: center;
		line-height: 43px;
		margin: 0 5px;
		cursor: pointer;
		border: solid 1px #ebeef5;
		color: $ButtonColor;
		text-decoration: none;
		&.current,
		&:hover {
			background-color: $ButtonColor;
			color: #fff;
		}
		&.disabled {
			display: none;
		}
	}
}

header {
	background: url("../images/bg-header.png") no-repeat left top / cover;
	.navbar-expand-lg {
		.navbar-nav {
			.nav-item {
				.nav-link {
					color: $WhiteColor;
				}
				&.active,
				&:hover {
					.nav-link {
						color: $BgBlueColor;
					}
				}
			}
		}
		.LanguageDropDown {
			background-color: rgba(248, 249, 250, .2);
			+ .dropdown-toggle .filter-option-inner-inner {
				color: $WhiteColor;
			}
		}
	}
}

main {
	.WhiteBox {
		background: #fff;
		@include box-shadow(0 2px 4px 0 rgba(0, 0, 0, .05));
		border: 1px solid #e7eaf3;
	}
	.lightGrey {
		background-color: $lightGrey;
	}
	#TableBlock {
		.WhiteBox {
			height: 450px;
			overflow-y: auto;
		}
	}
}

footer {
	background-color: #302b3c;
	.border-bottom,
	.border-top{
		border-color: $GreyColor !important;
	}
	#PartnerSec {
		position: relative;
		i {
			color: #fff;
		}
		.ImgBox {
			position: relative;
			padding-bottom: 25%;
			img {
				@include absolute(0,0,0,0);
				margin: auto;
			}
		}
		.carousel-control-prev {
			left: -20px;
			right: auto;
			width: auto;
		}
		.carousel-control-next {
			right: -20px;
			left: auto;
			width: auto;
		}

		.carousel-item {
			margin-right: -100%;
			margin-left: 0;
		}

		#PartnerSec .carousel-item-next:not(.carousel-item-left),
		#PartnerSec .active.carousel-item-right {
			@include transform(translateX(100%));
		}
		#PartnerSec .carousel-item-prev:not(.carousel-item-right),
		#PartnerSec .active.carousel-item-left {
			@include transform(translateX(-100%));
		}

		@include media-breakpoint-up(sm) {
			.carousel-item {
				margin-right: 0;
				margin-left: 0;
			}

			.carousel-inner .active + .carousel-item {
				display: block;
			}
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
				transition: none;
			}
			.carousel-inner .carousel-item-next {
				position: relative;
				transform: translate3d(0, 0, 0);
			}
			.active.carousel-item-left + .carousel-item-next.carousel-item-left,
			.carousel-item-next.carousel-item-left + .carousel-item,
			.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
				position: relative;
				transform: translate3d(-100%, 0, 0);
				visibility: visible;
			}
			.carousel-inner .carousel-item-prev.carousel-item-right {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				display: block;
				visibility: visible;
			}
			.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
			.carousel-item-prev.carousel-item-right + .carousel-item,
			.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
				position: relative;
				transform: translate3d(100%, 0, 0);
				visibility: visible;
				display: block;
			}
		}
		@include media-breakpoint-up(md) {
			/* show 3rd of 3 item slide */
			.carousel-inner .active + .carousel-item + .carousel-item {
				display: block;
			}
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
				transition: none;
			}
			.carousel-inner .carousel-item-next {
				position: relative;
				transform: translate3d(0, 0, 0);
			}
			/* left or forward direction */
			.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
				position: relative;
				transform: translate3d(-100%, 0, 0);
				visibility: visible;
			}
			/* right or prev direction */
			.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
				position: relative;
				transform: translate3d(100%, 0, 0);
				visibility: visible;
				display: block;
			}
		}
		@include media-breakpoint-up(lg) {
			.carousel-item {
				margin-right: 0;
				margin-left: 0;
			}
			/* show 4th item */
			.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
				display: block;
			}
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
				transition: none;
			}
			/* Show 5th slide on lg if col-lg-3 */
			.carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
				position: absolute;
				top: 0;
				right: -25%; /*change this with javascript in the future*/
				z-index: -1;
				display: block;
				visibility: visible;
			}
			/* left or forward direction */
			.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
				position: relative;
				transform: translate3d(-100%, 0, 0);
				visibility: visible;
			}
			/* right or prev direction //t - previous slide direction last item animation fix */
			.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
				position: relative;
				transform: translate3d(100%, 0, 0);
				visibility: visible;
				display: block;
			}
		}

	}
	.SocialLinks {
		a {
			color: $WhiteColor;
			&:hover {
				color: $GreyColor;
			}
		}
	}
}

/*======================================
        Responsive START
======================================*/
@media only screen and (max-width: 1599px) {
}
@include media-breakpoint-down(xxl) {
}
@include media-breakpoint-down(xl) {
}
@include media-breakpoint-down(lg) {
	.dataTables_wrapper {
		width: 100%;
		overflow-x: auto;
		z-index: 1;
		position: relative;
		margin-bottom: 10px;
		.Data_tables {
			width: 1050px !important;
		}
	}
}
@include media-breakpoint-down(md) {
	.navbar-light {
		.navbar-toggler {
			background-color: #fff;
		}
		.navbar-collapse {
			background-color: #000;
			border: solid 1px $GreyColor;
			.navbar-nav {
				.nav-item.dropdown {
					.dropdown-item {
						color:#fff;
						&:hover {
							color:$GreyColor;
						}
					}
				}
			}
		}
	}
}
@include media-breakpoint-down(sm) {
	.navbar-light .navbar-brand {
		max-width: 170px;
	}
	footer {
		word-break: break-all;
	}
}
@include media-breakpoint-down(xs) {
	.SearchBox {
		.form-control,
		button {
			width: 100% !important;
		}
	}
}
@media only screen and (max-width: 479px) {
}
