/*=============================
  Theme Name: ----------------.
  Author: Mrh Ripon
  Support: mrhripon98@gmail.com
  Description: --------------.
  Version: 1.0
==============================*/

/* Base Css Start  */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800');
@font-face {
	font-family: calberi;
	src: url(../fonts/Calibri.ttf);
}
@font-face {
	font-family: priceDown;
	src: url(../fonts/pricedown\ bl.ttf);
}
html {
	font-size: 62.5%;
}
 body {
	font-family: calberi;
	font-weight: normal;
	font-style: normal;
	color: #000;
	background: #000;
}
.fix {
    overflow: hidden;
}

p {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 24px;
	color: #000;
	margin-bottom: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: priceDown;
	font-weight: 500;
	color: #fff;
	margin-top: 0px;
}
h2 {
	font-size: 3.6rem;
}
h3 {
	font-size: 2.8rem;
}
h4 {
	font-size: 2.2rem;
}
h5 {
	font-size: 1.8rem;
}
h6 {
	font-size: 1.6rem;
}

a, span {
	font-size: 1.6rem;
	color: #b7b7b7;
}
.img {
	max-width: 100%;
	-webkit-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
	text-decoration: none;
	outline: none;
}

a:focus,
a:hover{
	text-decoration: none;
}

span, a {
    display: inline-block;
}
ul,ol {
	margin: 0px;
	padding: 0px;
    list-style-type: none;
}
div[data-relative="yes"] {
	position: relative;
}
.custom-padding {
	padding-left: 100px;
	padding-right: 100px;
}
:root {
	--sidebar-bg: #212121;
	--single-part-bg: #0a0809;
	--middle-part-bg: #222123;
}
/* Base Css End */
.body-img-bg {
	background-position: center;
	background-size: cover;
}

/* header area css start  */
.header-flex-wrap {
	display: flex;
	justify-content: space-between;
	padding: 25px 0;
	position: relative;
}
  .logo img {
	max-width: 270px;
  }
ul.topButton {
	width: 225px;
	position: absolute;
	right: 0px;
	top: 0px;
	list-style: none;
	text-align: center;
}
ul.topButton li {
	padding-right: 9px;
	display: inline-block;
}
ul.topButton li a {
	padding: 5px 15px;
	display: inline-block;
	text-align: center;
	font-size: 15px;
	color: #fff;
	text-decoration: none;
	border: 1px solid #464646;
	border-top: none;
	border-radius: 0 0 7px 7px;
	background: #0a0809;
	border-top: 3px solid #717a77;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
/* header area css end */



/* main area css start  */
.left-part {
	background: rgba(34, 33, 35, .8);
	padding: 10px;
	flex: 0 0 235px;
	border-radius: 10px 0 0 10px;
}
.left-part.right-part {
	border-radius: 10px 10px 10px 0;
	margin-top: -65px;
}
  .main-flex-wrap {
	display: flex;
	justify-content: space-between;
  }
  .single-part {
	background: var(--single-part-bg);
	border-radius: 10px;
	border: 2px solid #414141;
}
.single-part {
	background-size: cover;
	background-position: center top;
}
  .part-links {
	padding: 15px;
  }
  .part-links li a {
	font-family: arial;
	font-weight: 600;
	font-size: 14px;
	display: inline-block;
	transition: .3s;
}
  .part-links li a:hover {
	color: #b7b7b7;
}
  .part-links li {
	padding-bottom: 5px;
	padding-top: 5px;
  }
  .part-links li a i {
	margin-right: 2px;
  }
  .single-title {
	background: transparent;
	color: #b7b7b7;
	font-size: 22px;
	margin: 0;
	text-shadow: 0 2px 5px #000;
	padding-left: 53px;
	padding-bottom: 13px;
	padding-top: 8px;
	border-radius: 10px 10px 0 0;
	position: relative;
	cursor: pointer;
}
.single-title > img {
	position: absolute;
	left: 10px;
	bottom: -7px;
	max-width: 34px;
}
.left-part .single-part:not(:last-child) {
	margin-bottom: 10px;
}
.linksBox li {
	font-size: 15px;
	padding: 1px 0px 1px 0;
	display: block;
	position: relative;
}
.linksBox li a {
	color: #b7b7b7;
	text-decoration: none;
}
.linksBox li a:hover {
	text-decoration: underline;
}
.linksBox li strong {
	font-size: 16px;
	margin-right: 0px;
	width: 80px;
	display: inline-block;
	text-align: left;
}
.linksBox li img {
	float: left;
	padding-right: 10px;
	margin-top: 3px;
}
.progressBlock {
	padding: 10px 13px 10px 13px;
	overflow: hidden;
}
.progressBlock .progressBar {
	margin-bottom: 3px;
	position: relative;
	border-radius: 3px;
	width: 100%;
	height: 28px;
	background: #47362f;
	background: -moz-linear-gradient(top, #47362f 0%, #5c4744 100%);
	background: -webkit-linear-gradient(top, #47362f 0%,#5c4744 100%);
	background: #ffffff;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47362f', endColorstr='#5c4744',GradientType=0 );
	margin-bottom: 5px;
}
.progressBlock .progressBar .bgRed {
	background: rgb(127,1,30);
	background: #cc0000;
	height: 100%;
	width: 80% !important;
	border: 1px solid #fff;
	border-radius: 5px 0 0 5px;
}
.progressBlock .progressBar .text {
	padding-left: 6px;
	position: absolute;
	left: 0px;
	top: 0px;
	display: inline-block;
	font-size: 14px;
	color: #000;
	line-height: 26px;
}
.progress.bgGreen {
	background: #8bc200;
	width: 28% !important;
	height: 100%;
	border: 1px solid #fff;
}
.progressBlock {
	padding-left: 0;
}

/* Middle-part css start  */
.middle-part {
	width: 100%;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 0;
	border: 1px solid #464646;
}

.info-table {
	width: 100%;
  }
  .info-table th {
	color: #000;
	font-size: 14px;
	background: #5e3c19;
	color: #fff;
	font-weight: 600;
	padding: 2px 5px;
	border-right: 2px solid #e9e0bf;
  }
  .info-table th:last-child {
	  border-right: 0;
  }
  .info-table thead tr th.fixed-width,
  .info-table tbody tr td.fixed-width {
	width: 30px;
	text-align: center;
}
.info-table tbody tr td {
	color: #000;
	font-size: 16px;
	padding: 2px 5px;
	border-top: 3px solid #212022;
	border-right: 3px solid #212022;
}
.info-table tbody tr td span {
	color: #000000;
}
.info-table tbody tr td span {
	display: inline-block;
	cursor: pointer;
}
.info-table tbody tr td span:hover .hover-content{
	display:block;
}
.hover-content {
	position: absolute;
	border: 2px solid #e9e0bf;
	background: #FAF5DF;
	z-index: 1;
	width: 290px;
	top: 150%;
	left: 40px;
	display:none;
}
.info-table tbody tr td:last-child {
	border-right: 0;
}


.black-border.up {
	width: 100%;
	height: 7px;
	background: #1B1B19;
	border-radius: 0 0 10px 10px;
  }
  .table-two-wrap > h4 {
	color: #59462b;
	font-family: arial;
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 4px;
	padding-left: 10px;
  }
  .common-table-wrap.half-w {
	max-width: 600px;
  }
  .table-bottom-title {
	text-align: center;
	margin-bottom: 50px;
}
  .table-bottom-title p {
	color: #59462b;
	font-size: 17px;
  }
  .hover-content > .info-table {
	width: 100%;
}







.middle-title-wrap h3 {
	color: #59462b;
	font-family: arial;
	font-weight: 600;
	font-size: 20px;
	margin: 0;
  }
  .middle-title-wrap {
	background: #eae5d1;
	padding: 10px;
	border-radius: 10px 10px 0 0;
  }
  .menu-wrap {
	background: #b7ab91;
	border-radius: 10px 10px 0 0;
	padding: 10px;
	border-top: 7px solid #1b1b19;
	padding-bottom: 0;
	padding-left: 7px;
}
  .middle-menu li {
	display: inline-block;
  }
  .middle-menu li a {
	background: #dfd1b6;
	padding: 5px 14px;
	display: inline-block;
	border-radius: 8px 8px 0 0;
	margin: 0 3px;
	color: #1b1b19;
	font-size: 16px;
	transition: .3s;
  }
  .middle-menu li a:hover {
	color: #fff;
	background: #503914;
}
.para-wrap {
	padding: 10px;
	margin-bottom: 10px;
  }
  .common-table-wrap {
	background: #b7b7b7;
}
.m-common-wrap {
	border: 1px solid #464646;
	border-radius: 10px;
	margin-bottom: 10px;
}
.m-common-wrap .single-title {
	background: rgba(0, 0, 0, .4);
}
.m-common-content {
	padding: 15px;
	border-bottom: 10px solid #131214;
	border-radius: 0 0 10px 10px;
}
  .m-common-content p {
	color: #b7b7b7;
	font-size: 17px;
	line-height: 25px;
	margin-bottom: 14px;
  }
  .m-common-wrap .single-title {
	padding-left: 15px;
	font-size: 24px;
  }
  .hover-content .info-table tbody tr td {
	border-color: #ccc;
}
.hover-content {
	background: #EEEEEE;
	border-color: #EEE;
}
.status-menu-wrapper {
	display: grid;
	grid-template-columns: auto 170px;
	grid-column-gap: 20px;
	padding: 0px 15px;
	align-items: center;
}
  .status-menu-bar li {
	display: inline-block;
  }
  .status-menu-bar li:not(:last-child) {
	margin-right: 20px;
  }
  .status-menu-bar li a span {
	color: #fff;
	font-family: calibri;
	font-size: 16px;
	display: inline-block;
  }
  .status-menu-bar li a {
	display: inline-block;
  }
  .status-menu-bar li a .cn {
	color: #a70000;
	margin-left: 3px;
  }
  .cn.green {
	color: #04a700 !important;
}
.in-anchor-img img {
	max-width: 22px;
	margin-right: 5px;
}
  .middle-part-outer {
	height: auto;
	background: rgba(34, 33, 35, .8);
	margin-bottom: -12px;
	border-radius: 0 0 10px 10px;
}
.middle-banner h1 {
	background: linear-gradient(to bottom,#ddd5c8 , #c6bdae);
	background-clip: text;
	overflow: hidden;
	color: transparent;
	font-size: 38px;
	margin-bottom: 20px;
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
  .middle-banner {
	text-align: center;
	padding: 20px 15px;
	background-position: center;
	background-size: cover;
  }
  .middle-banner p {
	color: #fff;
	text-transform: uppercase;
	font-family: calibri;
	font-size: 22px;
	letter-spacing: 5px;
  }
  .banner-inner {
	  position: relative;
	  z-index: 1;
  }
.m-common-wrap.style-2.with-overlay {
	border-radius: 0;
	position: relative;
  }
  .m-common-wrap.style-2.with-overlay::after {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	content: "";
	top: 0;
	z-index: 0;
	opacity: .5;
	bottom: 0px;
	left: 0;
  }
  
.online-status li a {
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	display: inline-block;
	background: #0a0809;
	border-top: 3px solid #717b78;
	border-radius: 10px 10px 0 0;
	padding: 10px 15px;
	padding-right: 70px;
	position: relative;
  }
  .online-status li a::after {
	content: "\f107";
	position: absolute;
	right: 10px;
	font-family: 'Font Awesome 5 Pro';
	top: 50%;
	transform: translateY(-50%);
	font-weight: 500;
}
  .online-status {
	text-align: right;
  }
  .online-status li {
	position: relative;
  }

  .online-table-bg {
	background: #0a0809;
	padding: 14px;
	position: absolute;
	right: 0;
	z-index: 11;
	top: 100%;
	border-radius: 10px 0 10px 10px;
	width: 290px;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
.online-status li:hover .online-table-bg {
	opacity: 1;
	visibility: visible;
}
  .info-table.online-status-table tbody tr td span {
	color: #fff;
	font-weight: bold;
	font-size: 14px;
  }
  .info-table.online-status-table tbody tr td {
	border: 0;
}
.info-table.online-status-table tbody tr td {
	text-align: left;
	padding-left: 0;
}
.info-table.online-status-table tbody tr td:last-child {
	text-align: right;
}
.info-table.online-status-table tbody tr:not(:last-child) td {
	border-bottom: 1px solid #2a2829;
	padding-bottom: 7px;
}

.nav-link-wrap {
	border-bottom: 3px solid #717a77;
  }
  .nav-link-wrap a.nav-link {
	background: #717a77;
	border-radius: 10px 10px 0 0;
	margin-left: 10px;
	color: #000000;
  }

  .title-p {
	background: #fff;
	margin-top: 20px;
	font-size: 17px;
	padding: 15px;
	color: #000000 !important;
	font-weight: bold;
	border-radius: 10px;
  }
  .tb-content-wrap {
	padding: 15px;
	border-bottom: 10px solid #131214;
	border-radius: 0 0 10px 10px;
	background: #222123;
}
  .tb-content-wrap > p {
	color: #b7b7b7;
	font-size: 17px;
  }
  .m-tb-banner {
	display: grid;
	grid-template-columns: 150px auto;
	max-width: 470px;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	border-radius: 10px;
	padding: 15px;
	padding-bottom: 0;
	margin-top: 30px;
	margin-bottom: 40px;
  }
  .m-tb-ban-img img {
	bord: ;
  }
  .m-tb-content {
	text-align: center;
	align-self: center;
  }
  .m-tb-content h1 {
	color: #000;
	font-size: 32px;
	margin-bottom: 10px;
  }
  .m-tb-content p {
	color: #000;
	font-size: 17px;
	line-height: 22px;
  }
  .title-p.red-bg {
	background: #6d0019;
	color: #fff !important;
}
.title-p img {
	width: ;
	max-width: 16px;
	margin-right: 8px;
}
.tabContainer {
	margin-top: 15px;
}
/* Middle-part css end */

/* main area css end */



/* footer area css start  */

.footer-text {
  padding-top: 50px;
  padding-bottom: 40px;
}
.footer-text p {
  color: #b7b7b7;
  text-align: center;
  max-width: 430px;
  font-size: 17px;
  line-height: 25px;
  margin-left: auto;
  margin-right: auto;
}

.ft-links li {
	display: inline-block;
  }
  .ft-links {
	text-align: center;
	margin-bottom: 10px;
  }
  .ft-links li a {
	font-size: 17px;
	display: inline-block;
  }
  .ft-links li a:hover {
	  color:#b7b7b7;
  }
  .ft-links li {
	margin: 0 15px;
	position: relative;
  }
  .ft-links li:not(:last-child):after {
	position: absolute;
	width: 2px;
	height: 14px;
	background: #b7b7b7;
	content: "";
	top: 52%;
	transform: translateY(-50%);
	right: -17px;
  }
/* footer area css end */


/* popup css start  */
.popup-wrap {
	position: fixed;
	background: #C3B79D;
	max-width: 800px;
	z-index: 222;
	display: flex;
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	top: 75px;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
.popup-wrap.active {
	opacity: 1;
	visibility: visible;
}
  .st-logo img {
	max-width: 240px;
  }

  .pop-img img {
	max-width: 100%;
	border-radius: 0 0 7px 0;
  }
  .pop-img {
	flex: 0 0 225px;
	align-self: flex-end;
  }
  .poup-content h4 {
	font-family: arial;
	color: #000;
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 8px;
  }
  .poup-content p {
	line-height: 22px;
	margin-bottom: 10px;
	font-size: 17px;
  }
  .poup-content a {
	color: #000;
	text-decoration: underline;
	font-size: 17px;
	display: inline-block;
  }
  .st-logo {
	margin-bottom: 5px;
  }
  .poup-content {
	padding: 18px;
  }


  .off-canvas-overlay {
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 111;
	opacity: 0;
	cursor: pointer;
	visibility: hidden;
	transition: .5s;
}
.off-canvas-overlay.active {
	opacity: .7;
	visibility: visible;
}
.cls-icon {
	position: absolute;
	width: 25px;
	right: 10px;
	top: 10px;
	cursor: pointer;
}
/* popup css end */


.link-box-wrap {
	position: relative;
  }
  .welcom-holder {
	position: absolute;
	top: -42px;
	font-family: calibri;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	display: block;
	right: 0;
	margin: auto;
	left: 0;
  }


  /* login-page css start  */
.login-wrapper-outer {
	padding: 30px;
	padding-top: 80px;
	max-width: 1000px;
	margin: 0 auto;
}
  .login-wrapper {
	padding-bottom: 20px;
	background-size: cover;
	background-position: center top;
	margin-bottom: 35px;
	position: relative;
	padding-left: 15px;
	padding-right: 15px;
	border: 4px solid #c7baa7;
	border-radius: 10px;
}
.login-inner-content {
	padding-top: 70px;
	padding-bottom: 41px;
}
.login-form {
	background: #d3c9ba;
	border: 4px solid #303030;
	border-radius: 10px;
	max-width: 300px;
	padding: 18px;
	margin-left: auto;
	margin-right: auto;
}
  .input-inside input {
	width: 100%;
	height: 45px;
	border: 0;
	border-radius: 6px;
	padding-left: 50px;
	color: #303030;
	font-size: 15px;
	font-size: ;
	font-family: priceDown;
  }
  .input-inside {
	position: relative;
	margin-bottom: 15px;
  }
  .input-type-icon {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	border-right: 1px solid #efefef;
	bottom: 0;
	text-align: center;
	line-height: 40px;
  }
  .submit-button {
	height: 48px;
	width: 100%;
	border: 0;
	border-radius: 6px;
	background: #e2dace;
	font-family: priceDown;
	font-size: 23px;
	color: #303030;
	text-align: center;
	padding-left: 75px;
	box-shadow: 0 0 5px #0000001f;
	position: relative;
	z-index: 1;
  }
  .finger-print {
	position: absolute;
	left: 30px;
	top: 0;
	height: 100%;
	z-index: 1;
}
  .finger-print img {
	max-width: 100%;
	height: 100%;
  }
  .forget-password {
	display: block;
	text-align: right;
	color: #303030;
	font-family: priceDown;
	font-size: 17px;
  }
  .forget-password:hover {
	color: #303030;
  }
  .submit-button::after {
	position: absolute;
	width: 100%;
	height: 50%;
	bottom: 0;
	background: #d3c9ba;
	content: "";
	left: 0;
	right: 0;
	z-index: -1;
	transition: .3s;
  }
  .submit-button:hover::after {
	height: 100%;
}
.login-title {
	position: absolute;
	top: -36px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 215px;
}
  .window-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 30px;
	padding-right: 20px;
}
  .right-img-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .rg-single-img img {
	max-width: 100%;
  }
 .rg-single-img {
	position: relative;
	max-width: 103px;
}
.lr-trans > img {
	width: 100%;
}


  .rg-single-img h4 {
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	font-size: 15px;
	color: #303030;
	text-shadow: 0 0 4px #fff;
}
.lid a {
	background: #890b05;
	border: 4px solid #fff;
	font-size: 28px;
	padding: 9px 24px;
	border-radius: 5px;
	margin: 0;
	text-align: center;
	color: #fff;
	transition: .3s;
}
.lid a:hover {
	background: #C7BAA7;
}
  .login-ft-text {
	color: #fff;
	text-align: center;
	font-family: priceDown;
	font-size: 20px;
}
.lf-trans {
	position: absolute;
	top: 225px;
	left: 0;
	border: 4px solid #C7BAA7;
	border-radius: 0 10px 10px 0;
	max-width: 150px;
}


.lr-trans {
	position: absolute;
	right: 0;
	bottom: 186px;
	max-width: 191px;
}
.lr-trans a img {
	width: 27px;
}
  .vid-play {
	position: absolute;
	top: 42%;
	transform: translate(-50%, -50%);
	left: 50%;
	display: inline-block;
}
  /* login-page css end */