body {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    background: #ffffff;
    height: 100vh;
}

body:before {
    content: "";
    position: absolute;
    height: 100%;
    min-width: 44%;
    background: url('../login_images/login_image.png') no-repeat scroll 0 0 / 100% 100%;
    bottom: 0;
    left: 0;
}

body:after {
    content: url('https:/');
    position: absolute;
    height: 35px;
    width: 150px;
    bottom: 2%;
    left: 17%;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

.loginpage-area {
    overflow: hidden;
}

.loginpage-area .container {
    max-width: 1200px;
    width: 100%;
    margin: auto;
}

.loginpage-flex {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 9;
}

.loginpage-image {
    width: 40%;
    float: left;
    text-align: center;
    height: 100%;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.loginpage-image a img {
    max-height: 35px;
}

.loginpage-form {
    width: 60%;
    height: 100%;
}

.loginform-text {
    width: 70%;
    margin: auto;
}

.loginform-heading h2 {
    font-weight: 400;
    color: #333;
    margin: 0;
}

.loginform-text h4 {
    font-weight: 600;
    color: #010101;
    font-size: 35px;
    padding: 15px 0px;
    margin: 0;
}

.loginform-text input {
    width: 100%;
    padding: 15px 14px;
    border: 1px solid #CCCCCC;
    margin: 10px 0px;
    color: #333;
    font-weight: 500;
    font-size: 17px;
    background: #F6F6F6;
    box-sizing: border-box;
    border-radius: 6px;
}

.loginform-text input::placeholder {
    color: #333;
    opacity: 1;
}

.loginform-text input:-ms-input-placeholder {
    color: #333;
}

.loginform-text input::-ms-input-placeholder {
    color: #333;
}

.loginform-text input:focus::placeholder {
    color: transparent;
}

.loginform-text .login-button {
    text-align: center;
    padding-top: 15px;
}

.loginform-text .login-button button {
    background: #177CF4;
    color: #fff;
    border: none;
    padding: 12px 35px;
    font-weight: 700;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.loginform-text .login-button button:hover {
    background: #010B84;
}

@media (max-width: 767px) {
    body {
        background: url('../login_images/login_image.png') no-repeat scroll 0 0 / 100% 100%;
    }

    body::before {
        display: none;
    }

    body::after {
        display: none;
    }

    .loginpage-flex {
        display: block;
        border-radius: 0;
        top: 46%;
        position: inherit;
        transition: inherit;
        transform: inherit;
        background: #ffffffad;
    }

    .loginpage-image {
        display: block;
        width: 100%;
        border-radius: 0;
        padding: 10px;
        padding-top: 20px;
        background: none;
    }

    .loginpage-image p {
        display: none;
    }

    .loginpage-form {
        width: 100%;
        margin-left: 0px;
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 0px;
        background: none;
        height: 100vh;
    }

    .loginform-text {
        overflow: hidden;
        padding-top: 25px;
    }

    .loginpage-form h2 {
        text-align: center;
        color: #333;
    }

    .welcomeback {
        display: none;
    }

    .footer-creadit {
        display: none;
    }
}

@media (max-width: 420px) {
    .loginpage-image .banner {
        margin-top: 0px;
    }

    .loginpage-flex {
        top: 59%;
    }
}
body{
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	/*background: url('../login_images/background.png') no-repeat scroll 0 0 / 100% 100%;*/
	background: #ffffff;
	height: 100vh;
}

body:before{
    content: "";
    position: absolute;
    height: 100%;
    min-width: 44%;
    background: url('../login_images/login_image.png') no-repeat scroll 0 0 / 100% 100%;
    bottom: 0;
    left: 0;
}
body:after{
    content: url('http://logo.egyy.org/logo.png');
    position: absolute;
    height: 35px;
    width: 150px;
    bottom: 15%;
    left: 17%;
}


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');


.loginpage-area{
	overflow: hidden;
}
.loginpage-area .container{
	max-width: 1200px;
	width: 100%;
	margin: auto;
	/*padding-top: 8%;*/
}
.loginpage-flex {
	position: absolute;
    top: 47%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 100%;
    /*border-radius: 50px;*/
    display: flex;
    align-items: center;
    z-index: 9
}
.loginpage-image{
	width: 40%;
	float: left;
	/*background: #177CF4;*/
	/*padding: 255px 35px;*/
	box-sizing: border-box;
	text-align: center;
	/*border-right: 10px solid #E5E5E5;*/
	height: 100%;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
}
.loginpage-image a img{
    max-height: 35px;
}
.loginpage-image p{
	color: #ffffff;
	font-size: 15px;
	font-weight: 400;
	line-height: 27px
}
.loginpage-image .banner{
	margin: 50px 0px;
	position: relative;
	height: 200px;
}
.loginpage-image .banner img.bannerimg{
	width: 100%
	opacity: 0.5;
	position: absolute;
	bottom: 0;
	left: 0px;
	width: 100%;
	animation: MoveUpDown 3s linear infinite;
}


/*@keyframes a-one {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}
*/
@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 30px;
  }
}




.loginpage-form{
	width: 60%;
	height: 100%;
}
.loginform-text{
	width: 70%;
	margin: auto;
}
.loginform-heading{
	position: relative;
	height: 34px;
}
.loginform-heading h2{
	font-weight: 400;
	color: #fff;
	margin: 0;
}
.welcometext {
	position: absolute;
	left: 0px;
	z-index: 99;
	top: 8px;
}
.welcomeback {
	position: absolute;
	height: 48px;
	width: 100px;
	background: #177CF4E6;
	top: 0px;
	width: 210px;
	left: -16%;
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
}

.loginform-text h4 {
	font-weight: 600;
	color: #010101;
	font-size: 35px;
	padding: 15px 0px;
	margin: 0;
}

.loginform-text input {
	width: 100%;
	padding: 15px 14px;
	border: none;
	border: 1px solid #CCCCCC;
	margin: 10px 0px;
	color: #333;
	font-weight: 500;
	font-size: 17px;
	background: #F6F6F6;
	box-sizing: border-box;
	border-radius: 6px;
}

.loginform-text input::placeholder { 
  color: #333;
  opacity: 1;
}

.loginform-text input:-ms-input-placeholder {
  color: #333;
}

.loginform-text input::-ms-input-placeholder {
  color: #333;
}
.loginform-text input:focus::placeholder {
  color: transparent;
}
.loginform-text .login-button{
	text-align: center;
	padding-top: 15px;
}
.loginform-text .login-button button{
	background: #177CF4;
	color: #fff;
	border: none;
	padding: 12px 35px;
	font-weight: 700;
	font-size: 15px;
	border-radius: 5px;
	cursor: pointer;
	transition: .2s ease-in-out;
}
.loginform-text .login-button button:hover{
	background: #010B84
}	
:focus-visible {
    outline: inherit
}

.footer-creadit{
	position: absolute;
	bottom: 2%;
	z-index: 9;
	text-align: center;
	max-width: 1200px;
	width: 100%
}

/* login table */
.login_table{
    width: 100%;
    padding-top: 20px;
}
.login_table tr th{
    text-align: left;
}
.login_table tr td{
    padding: 7px 0px;
}
.login_table tr td a{
    text-decoration: none;
    padding: 3px 5px;
    background: #177CF4;
    color: #fff;
    border-radius: 3px;
    display: inline-block;
}






/*.a-two {*/
/*  width: 150px;*/
/*  height: 150px;*/
/*  background-color: #177CF4;*/
/*  opacity: 0.7;*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  bottom: 10px;*/
/*  left: 200px;*/
/*  animation: MoveUpDownTwo 9s linear infinite;*/
/*}*/

/*.a-three {*/
/*  width: 120px;*/
/*  height: 120px;*/
/*  background-color: #177CF4;*/
/*  opacity: 0.2;*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  bottom: 120px;*/
/*  left: 8%;*/
/*  animation: MoveUpDownThree 12s linear infinite;*/
/*}*/

/*.a-four {*/
/*  width: 80px;*/
/*  height: 80px;*/
/*  background-color: #177CF4;*/
/*  opacity: 0.4;*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  bottom: 0;*/
/*  left: 12%;*/
/*  animation: MoveUpDownFour 15s linear infinite;*/
/*}*/

/*.a-five {*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  background-color: #177CF4;*/
/*  opacity: 0.9;*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  bottom: 200px;*/
/*  left: 16%;*/
/*  animation: MoveUpDownFive 18s linear infinite;*/
/*}*/

/*.a-six {*/
/*  width: 175px;*/
/*  height: 175px;*/
/*  background-color: #177CF4;*/
/*  opacity: 0.6;*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  bottom: 250px;*/
/*  right: 200px;*/
/*  animation: MoveUpDownSix 7s linear infinite;*/
/*}*/

/*.a-seven {*/
/*  width: 250px;*/
/*  height: 250px;*/
/*  background-color: #177CF4;*/
/*  opacity: 0.3;*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  bottom: 0;*/
/*  left: 450px;*/
/*  right: 0;*/
/*  animation: MoveUpDownSeven 6s linear infinite;*/
/*}*/

/*.a-eight {*/
/*  width: 75px;*/
/*  height: 75px;*/
/*  background-color: #177CF4;*/
/*  opacity: 0.4;*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  bottom: 0;*/
/*  left: 350px;*/
/*  animation: MoveUpDownEight 11s linear infinite;*/
/*}*/

/*.a-nine {*/
/*  width: 45px;*/
/*  height: 45px;*/
/*  background-color: #177CF4;*/
/*  opacity: 0.7;*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  bottom: 0;*/
/*  left: 450px;*/
/*  animation: MoveUpDownNine 12s linear infinite;*/
/*}*/

/*.a-ten {*/
/*  width: 150px;*/
/*  height: 150px;*/
/*  background-color: #177CF4;*/
/*  opacity: 0.6;*/
/*  border-radius: 50%;*/
/*  position: absolute;*/
/*  bottom: 0;*/
/*  right: 0;*/
/*  animation: MoveUpDownTen 14s linear infinite;*/
/*}*/


/*@keyframes MoveUpDownTwo {*/
/*  0%, 100% {*/
/*    left: 0;*/
/*  }*/
/*  50% {*/
/*    bottom: 900px;*/
/*  }*/
/*}*/

/*@keyframes MoveUpDownThree {*/
/*  0%, 100% {*/
/*    bottom: 0;*/
/*  }*/
/*  50% {*/
/*    bottom: 900px;*/
/*  }*/
/*}*/

/*@keyframes MoveUpDownFour {*/
/*  0%, 100% {*/
/*    bottom: 0;*/
/*  }*/
/*  50% {*/
/*    bottom: 950px;*/
/*  }*/
/*}*/

/*@keyframes MoveUpDownFive {*/
/*  0%, 100% {*/
/*    bottom: 0;*/
/*  }*/
/*  50% {*/
/*    bottom: 950px;*/
/*  }*/
/*}*/

/*@keyframes MoveUpDownSix {*/
/*  0%, 100% {*/
/*    bottom: 0;*/
/*  }*/
/*  50% {*/
/*    bottom: 900px;*/
/*  }*/
/*}*/

/*@keyframes MoveUpDownSeven {*/
/*  0%, 100% {*/
/*    bottom: 0;*/
/*  }*/
/*  50% {*/
/*    bottom: 900px;*/
/*  }*/
/*}*/

/*@keyframes MoveUpDownEight {*/
/*  0%, 100% {*/
/*    bottom: 0;*/
/*  }*/
/*  50% {*/
/*    bottom: 970px;*/
/*  }*/
/*}*/

/*@keyframes MoveUpDownNine {*/
/*  0%, 100% {*/
/*    bottom: 0;*/
/*  }*/
/*  50% {*/
/*    bottom: 975px;*/
/*  }*/
/*}*/

/*@keyframes MoveUpDownTen {*/
/*  0%, 100% {*/
/*    bottom: 0;*/
/*  }*/
/*  50% {*/
/*    bottom: 900px;*/
/*  }*/
/*}*/














@media (max-width: 767px){
    body{
        background: url('../login_images/login_image.png') no-repeat scroll 0 0 / 100% 100%;;
    }
    body::before{
        display: none;
    }
    body::after{
        display: none;
    }
	.loginpage-flex {
		display: block;
		border-radius: 0px;
		top: 46%;
		position: inherit;
		transition: inherit;
		transform: inherit;
		background: #ffffffad
	}
	.loginpage-image{
		display: block;
		width: 100%;
		border-radius: 0px;
		border-right: inherit;
		padding: 10px ;
		padding-top: 20px;
		background: none
	}
	.loginpage-image .banner{
		margin-bottom: 0px;
	}
	.loginpage-image p{
		display: none
	}
	.loginpage-form {
    	width: 100%;
    	margin-left: 0px;
    	padding-top: 0;
    	padding-bottom: 0;
    	border-radius: 0px;
    	background: none;
    	height: 100vh;
    }
	.loginform-text{
		overflow: hidden;
		padding-top: 25px;
	}

	.loginpage-form h2{
		text-align: center;
		color: #333;
	}
	.welcometext {
		position: inherit;
		left: inherit;
		z-index: 99;
	}
	.welcomeback{
		display: none;
	}
	.loginpage-form h4{
		text-align: center;
		padding: 0;
		margin: 0;
	}
	.footer-creadit{
		display: none
	}
	.loginform-text{
	    width: 90%;
	    padding-top: 50px;
	}
}

@media (max-width: 420px){
	.loginpage-image .banner{
		margin-top: 0px;
	}
	.loginpage-flex{
		top: 59%;
	}
}