* {margin: 0; padding: 0;font-family: 'Roboto', sans-serif;} body {font-family: 'Roboto', sans-serif;} .login-lft:before { content: ''; background: url(../images/bg-image-4.png); position: absolute; left: 0; bottom: 0px; width: 100px; height: 100px; background-repeat: no-repeat; background-size: cover; } .login-lft:after { content: ''; background: url(../images/bg-image-4.png); position: absolute; right: 0; top: -10px; width: 100px; height: 100px; background-repeat: no-repeat; background-size: cover; } .login-page { width: 100%; float: left; margin: 0; background: #fff; /* background: #fff; box-shadow: 0 0 20px #00000017; */ } .login-page .row { align-items: center; margin: 0; /* height: 100vh; */ } .login-page .col-xs-12 { padding: 0; } 
.login-lft { background: #5CBC9D; display: flex; height: 100vh; flex-direction: column; justify-content: flex-start; align-items: center; padding: 10px; position: relative; } .login-lft picture { display: flex; align-items: center; justify-content: center; position: relative; } .login-lft img { width: 360px; height: auto; } .rht-cont picture { text-align: center; display: block; margin-bottom: 60px; }
 .cont h3 { font-size: 28px; color: #fff; text-align: center; margin: 0; font-weight: 500; font-style: italic; } .login-main { border-radius: 14px; background: #F5FEFB; padding: 60px; width: 537px; position: relative; float: none; margin: 0 auto; } .login-main form { padding-top: 5px; position: relative; } /* .login-main:before { content: ''; background: #F5FEFB; position: absolute; bottom: -50px; left: 0; right: 0; height: 100px; } */ .loggg { display: flex; align-items: center; justify-content: center; } .login-rht { padding: 80px; height: 100vh; display: flex; align-items: center; justify-content: center; } .login-rht h3 { font-size: 24px; font-weight: 700; color: #333; line-height: normal; } .login-rht p { color: #00B67A; font-size: 16px; font-weight: 400; line-height: normal; margin: 0; } .login-rht form .form-group {margin-bottom: 24px;} 
 .login-rht form label { font-size: 16px; font-weight: 400; color: #333; line-height: normal; } .login-rht form input.form-control { color: #8C8C8C; height: 50px; border-radius: 14px; border: 1px solid #B4B4B4; border-top-left-radius: 10px!important; border-bottom-left-radius: 10px!important;
  /* padding-right: 40px; */ background: transparent; font-weight: 400; line-height: normal; font-size: 14px; } .input-group-prepend { position: absolute; right: 10px; top: 0; z-index: 9; height: 60px; } 
.input-group-prepend .input-group-text { background: transparent; border: none; cursor: pointer; z-index: 99999; } .login-rht form button[type="submit"]
 { border-radius: 100px; width: 100%; background: #80C9B1; border: none; height: 48px; font-size: 18px; font-weight: 700; margin-top: 31px; line-height: normal; } .rht-cont form { margin-top: 40px; } /* .login-lft picture:before { content: ''; background: url(../images/top-bg-icon.png); position: absolute; left: -8px; top: -19px; width: 90px; height: 90px; background-repeat: no-repeat; background-size: cover; } */ /* .login-lft picture:after { content: ''; background: url(../images/top-bg-icon.png); position: absolute; right: 30px; bottom: -23px; width: 90px; height: 90px; background-repeat: no-repeat; background-size: cover; } */ .cont { padding-top: 70px; } .img1 { position: absolute; top: -27px; left: -63px; } .img1 img { max-width: 100%; width: 122px; } .img2 { position: absolute; right: -8px; bottom: -52px; } .img2 img { width: 122px; max-width: 100%; } 
.login-rht form button[type="submit"]:active, .login-rht form button[type="submit"]:focus, .login-rht form button[type="submit"]:hover  { color: #fff; background-color: #5cbc9d; border-color: #5cbc9d; } /*.rht-cont { width: 360px; float: none; margin: 0 auto; } .login-main form { width: 360px; float: none; margin: 0 auto; }*/ @media screen and (min-width: 768px) and (max-width: 1024px) { .login-rht {padding: 0px;} .login-main {padding: 30px; width: 100%;} .rht-cont picture {margin-bottom: 30px} .login-main form {padding-top: 20px;} .login-main:before {display: none;} /*    .rht-cont {width: 100%;} .login-main form {width: 100%;}*/ .login-lft img.cntr {width: 260px;} .cont h3 {font-size: 15px;} .login-lft {padding: 20px;} .cont {padding-top: 60px;} .login-page {background: #F5FEFB;} .login-rht form input.form-control {background: #fff;} } @media screen and (max-width:767px) { .login-page {width: 100%; margin: 0;    background: #f5fefb;} .login-page .row {margin: 0;} .login-lft {padding: 50px; display: none;} 
.login-lft picture:before {    left: -36px;  top: -23px;} .login-lft picture:after {    right: -2px; bottom: -33px;} .cont h3 {font-size: 17px;} .login-lft img {max-width: 220px;}
 .login-rht {padding: 0px; display: block;} .login-main {padding: 20px; width: 100%;} .rht-cont picture {margin-bottom: 30px;} .login-main form {padding-top: 30px;} .login-main:before {display: none;} /*    .rht-cont {width: 100%;} .login-main form {width: 100%;}*/ .login-rht form input.form-control {background: #fff;} }
 
 div#error {
    font-size: 19px;
    color: red;
    font-weight: 900;
    background: #80c9b1;
    border-radius: 11px;
    margin-top: 25px;
    padding: 15px 32px;
    margin-bottom: -89px;
}
 
 .blogCategories.card-body.p-5.text-center {
    display: none;
}button.btn.btn-primary.right {
    float: right;
}
 
 .AlignItemspace{display: flex;
    align-items: center;
    justify-content: space-between;
}
 
  /*  TicTacToe game CSS Start*/
        .TicTac .tictaccontainer {
		    margin: 10px 0px;
		    display: grid;
		    grid-template-columns: 37% 37% 37%;
		    grid-template-rows: 33% 33% 33%;
		    max-width: 160px;
		}
		
		.TicTac .tile {
		    border: 0.5px solid #7ec9b1;
		    min-width: 50px;
		    min-height: 50px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    font-size: 30px;
		    cursor: pointer;
		    color: #9ed3c2;
		}
		.TicTac .display {
		  color: #9ed3c2;  
		}
		
		
		.TicTac .playerX {
		    color: #e6403c;
		}
		
		.TicTac .playerO {
		    color: #005dff;
		}
		
		.TicTac #reset {
		  width: 20px;       
		  height: 20px;       
		  padding: 2px;       
		  border: none;       
		  background: none;  
		  cursor: pointer;    
		}
		
		.TicTac #reset img {
		  width: 100%;   
		  height: 100%;  
		  object-fit: contain;
		}
		.TicTac{
		  margin-top: 15px;
		}
      /*  TicTacToe game CSS End*/