@charset "utf-8";

/* CSS Document */
.body {
	font-family:Hacen Tunisia Bd;

    font-weight: normal;
    font-style: normal;
    line-height: normal;
    font-size:0.88rem;

	height: 100vh;


	background:transparent url("./themes/tatweer/images/background.png") no-repeat ;
	background-position:center center;
	background-size:cover;
	overflow:hidden;
}
a:link {color: var(--info);}
a:hover {color: var(--primary); text-decoration: none ;}
input {
	font-family:Hacen Tunisia Bd;
}
table{
	border-collapse: separate ;
}
p{
	margin-bottom: 0.5rem ;
}
.form-control::-webkit-input-placeholder{
	color:#999;
	font-size: 0.8rem;
}
.scrollbar-inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
}
/*####################   header   ############################*/
#login-header{
	width: 90%;
	display: flex;
	justify-content: flex-end;
}
#langu {
	padding: 0.2rem 0.4rem 0.1rem;
	border-radius: 50%;
	font-weight: bold;
	margin: 1rem 0 0;
	border: 0.01rem solid var(--primary-darker);
	-webkit-transition: background-color 0.5s ease-in-out;
	-moz-transition:  background-color 0.5s ease-in-out;
	-o-transition: background-color 0.5s ease-in-out;
	-ms-transition: background-color 0.5s ease-in-out;
	transition: background-color 0.5s ease-in-out;
}
#langu a{
	color:var(--primary-darker);
	-webkit-transition: color 0.5s ease-in-out;
	-moz-transition:  color 0.5s ease-in-out;
	-o-transition: color 0.5s ease-in-out;
	-ms-transition: color 0.5s ease-in-out;
	transition: color 0.5s ease-in-out;
}
#langu:hover{
	background-color: var(--primary-darker);
}
#langu:hover a,#langu:hover a:hover{
	color:#fff ;
}
/*###################   card-login   ########################*/
#login-content{
	flex:1 1 auto;
	width: 100%;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#login-content .card{
	background-color: #ffffffbd;
	justify-content: center;
	margin: 0 auto;
	border:none;
	border-radius: 1rem;
	-webkit-box-shadow: 0px 3px 6px #00000029;
	-moz-box-shadow: 0px 3px 6px #00000029;
	box-shadow: 0px 3px 6px #00000029;
}
/* header _______________ */
#login-content .card .header .logo{
	margin: 1.5rem 0 0.5rem;

}
#login-content .card .header .logo img{
	max-height: 75px;
	max-width: 100%;
}
/* content _______________ */
#login-content .card table td p{
	color:var(--secondary-dark-text);
}
#login-content .card table tr td:first-child:not([colspan='2']){
	width: 25%;
}
#login-content .card form .form-label{
	color:var(--primary-dark-text);
	padding: 0 1rem;
	text-align: end;
}
#login-content .card form .form-control{
	border-radius: 0;
	border: none!important;
	background-color: var(--default-light);
}
#login-content .card form .form-control:focus{
	box-shadow: none;
	background-color: var(--primary-lighter);
}
#login-content .card .login-error{
	color:var(--danger);
	font-size: small;
	text-align: center;
}
#login-content .card .btn{
	border-radius: 0;
	width: 100%;
	background-color: var(--primary);
	border-color: transparent;
}
#login-content .card .btn:hover{
	background-color: var(--primary-dark);
	border-color: transparent;
}
#login-content .card .btn:focus {
	outline: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
@media (min-width: 992px){
	#login-content .card table{
		margin-right:15%;
	}
}
@media (min-width: 768px){
	#login-content .card table tr td[colspan='2']{
		padding-right: 25%;
	}
}
@media (max-width: 768.99px){
	#login-content .card form .form-label{
		text-align: start !important;
		padding: 0;
	}
	#login-content .card table tr td[colspan='2']{
		padding-right: 0;
	}

}
/*#####################   footer   ############################*/
#login-footer {
	text-align:center;
	color:#a7a8a8;
	padding:0rem 0 1rem;

	clear:both;
}
/*.send{*/
/*	background: url(/themes/inet/images/b.jpg) top  center no-repeat;*/
/*	width:77px;*/
/*	}*/
/*.back{*/
/*	background: url(/themes/inet/images/b2.jpg) top  center no-repeat;*/
/*	width:49px;*/
/*	}*/

/*#status {*/
/*	background-color: #E6E7E8;*/
/*}*/
/*#status-form {*/
/*  margin: 0 auto 0 auto;*/
/*  width: 639px;*/
/*  border: 1px solid #999;*/
/*  -moz-box-shadow: 3px 3px 4px #999;*/
/*  -webkit-box-shadow: 3px 3px 4px #999;*/
/*  box-shadow: 3px 3px 4px #999;*/
/*}*/

/*#status-form .boxtitle {*/
/*	width: auto;*/
/*	height:35px;*/
/*	margin: 0px;*/
/*	text-align:center;*/
/* 	vertical-align:middle;*/
/*	padding: 0;*/
/*	font-size:13px;*/
/*	color:#cc0033;*/
/*	font-weight:bold;*/
/*	list-style-type: none;*/
/*	padding-top: 10px;*/
/*	background: url(/themes/inet/images/title_bg.jpg) #fff top right no-repeat;*/
/*}*/
/*#status #logo {*/
/*  position: absolute;*/
/*  right: 0;*/
/*  bottom: 20px;*/
/*}*/
/*#status-container {*/
/*  margin: 0;*/
/*  padding: 155px 0 100px 0;*/
/*}*/
/*!*************** SCROLLBAR ***************!*/
/* other styles you'll find: */
/* https://github.com/mdbootstrap/perfect-scrollbar */
/******************************************/
/*
 * Container style
 */
.scroll-wrapper {
	height: 100vh;
	position: relative;
	width: 100%;
}

.ps {
	border-radius: inherit;
	overflow: hidden !important;
	overflow-anchor: none;
	-ms-overflow-style: none;
	touch-action: auto;
	-ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
	display: none;
	/*opacity: 0;*/
	transition: background-color .2s linear, opacity .2s linear;
	-webkit-transition: background-color .2s linear, opacity .2s linear;
	height: 7px;
	/* there must be 'bottom' or 'top' for ps__rail-x */
	bottom: 0px;
	/* please don't change 'position' */
	position: absolute;
}

.ps__rail-y {
	display: none;
	/*opacity: 0;*/
	transition: background-color .2s linear, opacity .2s linear;
	-webkit-transition: background-color .2s linear, opacity .2s linear;
	width: 8px;
/* there must be 'right' or 'left' for ps__rail-y */
left: 0 !important;
/* please don't change 'position' */
position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
	display: block;
	background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
	/*opacity: 0.6;*/
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
	background-color: transparent;
	/*opacity: 0.9;*/
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
	background-color:#908f8f;
	border-radius: 8px;
	transition: background-color .2s linear, height .2s ease-in-out;
	-webkit-transition: background-color .2s linear, height .2s ease-in-out;
	height: 5px;
	/* there must be 'bottom' for ps__thumb-x */
	bottom: 0px;
	/* please don't change 'position' */
	position: absolute;
}

.ps__thumb-y {
	background-color: #908f8f;
	border-radius: 8px;
	transition: background-color .2s linear, width .2s ease-in-out;
	-webkit-transition: background-color .2s linear, width .2s ease-in-out;
	width: 5px;
/* there must be 'right' for ps__thumb-y */
left: 0.5px !important;
/* please don't change 'position' */
position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
	background-color: var(--primary-dark);
	height: 6px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
	background-color: var(--primary-dark);
	width: 6px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
	.ps {
		overflow: auto !important;
	}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.ps {
		overflow: auto !important;
	}
}