@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/DroidKufi-Regular.eot);
  src: url(../fonts/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(../fonts/DroidKufi-Regular.woff2) format('woff2'),
       url(../fonts/DroidKufi-Regular.woff) format('woff'),
       url(../fonts/DroidKufi-Regular.ttf) format('truetype');
}
      

body {
	font-family: 'Droid Arabic Kufi';
	background-color: #f2f2f2;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

h3{
	font-size:16px;
	line-height: 38px; /* ارتفاع الدائرة */
	max-height:25px;
}

.login-container {
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	text-align: center;
	position: relative; /* تحديد الوضع إلى نسبي */
}

.login-container h2 {
	margin-bottom: 20px;
}

.form-group{
	margin-bottom:0rem !important;
}

.icon {
	font-size: 20px;
	color: #333;
	position: absolute; /* تحديد الوضع إلى مطلق */
	top: 20px;
	right:5px;
}

.back {
	font-size: 20px;
	color: #333;
	position: absolute; /* تحديد الوضع إلى مطلق */
	top: 10px;
	left: 15px;
}

.back a {
	text-decoration: none;
}

.input-container {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}

input[type="text"],
input[type="password"] {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px;
}

.login-button {
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 18px;
	cursor: pointer;
}

.valid {
	color: green;
}

.invalid {
	color: red;
	border-color: red;
}

.validation-message {
	display: none;
}

 
		
.signouttime{
	position:relative;
	float:left;
}
		
.circlebackbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
 margin-right:-90px;
  
}

.circlebackbtn i {
  width: 40px;
  height: 40px;
  line-height: 38px; /* ارتفاع الدائرة */
  text-align: center; /* وضع النص في وسط الدائرة */
  border-radius: 50%;
  background-color: transparent; /* خلفية شفافة */
  cursor: pointer;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); /* ظل الدائرة */
  border: 1px solid #999; /* بوردر بسمك 1 بيكسل */
}




.main-content {
    text-align: center;
    padding: 20px;
}

.main-content .p{
color:#777;
}

.button {
    display: block;
    width: 300px;
    margin: 10px auto;
    padding: 10px;
    font-size: 14px;
    text-decoration: none;
    color: #444;
    cursor: pointer;
    border: 1px solid #ccc;
    text-align: left;
    border-radius: 20px;
}

.button i, .button img {
    float: left;
    margin-right: 20px;
}

.facebook {
    background-color: #1876f2;
    color: #fff;
}

.facebook i{
    	margin-top:3px;
}

.facebook:hover {
    background-color: #095dcb;
}

.google {
    background-color: #fff;
    color: #444;
    border: 1px solid #ccc;
}

.google img{
    	margin-top:3px;
}

.google:hover {
    border-color: #ff0000;
}

.logo-container {
    text-align: center;
    margin-bottom: 20px;
}

.logo {
    max-width: 200px; /* Increased logo size */
    height: auto;
    border-radius: 10px;
    
}

.welcome-message {
    font-size: 14px;
    color: #d8085d;
    margin: 1px 0;
}
 
    .validation-message {
        color: red; /* اجعل النص باللون الأحمر */
        font-size:14px; /* اختر الحجم المناسب للنص */
        margin-top: 5px; /* أضف مسافة فوق الرسائل لزيادة وضوحها */
    }
 
	.rtl{
			direction: rtl !important;
			text-align:right;
	}

	.ltr{
			direction: ltr !important;  
			text-align:left;
	}
	
	.decorative-line {
            border-top: 1px dashed #d8085d;
            margin: 10px 0;
            position: relative;
        }
    .decorative-line::before {
            content: '';
            position: absolute;
            top: -7px;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid #d8085d;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background-color: #d8085d;
        }
		
		
		
		  .link-container {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-top: 30px;
            gap: 20px; /* مسافة بين الروابط */
        }

        .link-container a {
            color: #333; /* لون النص الأساسي */
            text-decoration: none; /* إزالة التسطير */
            font-size: 12px; /* حجم الخط */
            font-weight: bold; /* وزن الخط */
            position: relative; /* لتمكين تأثيرات الخط السفلي */
            padding: 8px 16px; /* حشو داخلي */
            border-radius: 4px; /* زوايا دائرية */
            transition: color 0.3s, background-color 0.3s, box-shadow 0.3s; /* تأثيرات انتقال سلسة */
        }

        .link-container a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #007bff; /* لون الخط السفلي */
            transform: scaleX(0);
            transition: transform 0.3s;
            transform-origin: bottom right;
        }

        .link-container a:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        .link-container a:hover {
            color: #007bff; /* لون النص عند التمرير */
            background-color: #f8f9fa; /* لون الخلفية عند التمرير */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ظل خفيف حول الرابط */
        }

        .link-container a:last-child {
            color: #28a745; /* لون النص للرابط الثاني */
        }

        .link-container a:last-child:hover {
            color: #218838; /* لون النص عند التمرير للرابط الثاني */
            background-color: #e9f5e9; /* لون الخلفية عند التمرير للرابط الثاني */
        }