body {
    /*background: #e9e9e9;*/
    /*background: #1FB6D6;
			background: linear-gradient(329deg,rgba(31, 182, 214, 1) 0%, rgba(116, 255, 209, 1) 50%, rgba(237, 221, 83, 1) 100%);*/
    /*background: linear-gradient(329deg,rgba(31, 182, 214, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(237, 221, 83, 1) 100%);*/
    /*background: linear-gradient(329deg, rgba(248, 255, 196, 1) 0%, rgba(255, 255, 255, 1) 50%, #7777777a 100%);*/
    /*height: 100vh;*/
    /*margin: 0;*/
}

.mainbody {
    /*background: #e9e9e9;
    background: linear-gradient(329deg, rgba(248, 255, 196, 1) 0%, rgba(255, 255, 255, 1) 50%, #7777777a 100%);
    height: 100%;
    margin: 0;*/
     margin:0;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
	background: linear-gradient(329deg, rgba(248, 255, 196, 1) 0%, rgba(255, 255, 255, 1) 50%, #7777777a 100%);
}

.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.content-box {
    /*background: #fcfcbe;*/
    background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(252, 252, 190, 1) 50%);
    width: 520px;
    padding: 100px 60px;
    border-radius: 8px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    text-align: center;
}

.logo-box img {
    width: 160px;
    margin-bottom: 40px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.btn-custom {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 4px;
}

/*@keyframes rocking {
		  0%   { transform: rotate(0deg); }
		  20%  { transform: rotate(2deg); }
		  40%  { transform: rotate(-2deg); }
		  60%  { transform: rotate(1deg); }
		  80%  { transform: rotate(-1deg); }
		  100% { transform: rotate(0deg); }
		}

        .btn-register {
            background: #1c97b8;
            color: #fff;
            border: none;
            animation-timing-function: ease-out;
			transition: 0.2s;
			transform-origin: center bottom;		
        }

        .btn-register:hover {
            background: #147a95;
            color: #fff;
			animation: rocking 2s infinite;
				
        }

        .btn-login {
            background: #3b1f5f;
            color: #fff;
            border: none;
            animation-timing-function: ease-out;
			transition: 0.2s;
			transform-origin: center bottom;
        }

        .btn-login:hover {
            background: #2b1646;
            color: #fff;
			animation: rocking 2s infinite;
			
        }
				

        /* Space between buttons */
/*.btn-col {
            padding-left: 5px;
            padding-right: 5px;
        }*/
.btn-register {
    background: #1c97b8;
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

    .btn-register:hover {
        background: #147a95;
        color: #fff;
        transform: scale(1.05);
    }

.btn-login {
    background: #3b1f5f;
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

    .btn-login:hover {
        background: #2b1646;
        color: #fff;
        transform: scale(1.05);
    }

    .btn-register:focus, .btn-login:focus {
        color: #fff;
    }

/* Card */
.card{
    /*width:520px;*/
	width: 80%;
    background:#f5f6fa;
	background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(252, 252, 190, 1) 50%);
    border-radius:8px;
    padding:80px 40px 40px;
    position:relative;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    margin-top: 70px;
    margin-bottom: 30px;
}

/* Avatar */
.avatar img{
    width:120px;
    height:120px;
    border-radius:2%;
    position:absolute;
    top:-60px;
    left:50%;
    transform:translateX(-50%);
}

/* Tabs */
.tabs{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-bottom:30px;
}

.tab-btn{
    padding:8px 25px;
    border-radius: 4px;
    background:#ddd;
    cursor:pointer;
    transition:0.3s;
}

.tab-btn.active{
    background:#1c97b8;
    color:#fff;
    font-weight:bold;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* Forms */
.form-section{
    display:none;
}

.form-section.active{
    display:block;
}

.form-section .dxeRoot_Moderno{
    width:100%;
}

.card .userloginbox{
    width:100%;
    height:45px;
    margin-bottom:15px;
    border-radius:8px;
    border:1px solid #ccc;
    padding-left:15px;
}

.card .userregisterloginbox{
    width:100%;
    /*height:45px;*/
    margin-bottom:4px;
    border-radius:8px;
    border:1px solid #ccc;
    /*padding-left:15px;*/
}

#register .form-group .errorclass {
   position:absolute;
   padding-top: 0px;
   top: 35px;
}

/* Inputs */
.card input{
    /*width:100%;
    height:45px;
    margin-bottom:15px;
    border-radius:8px;
    border:1px solid #ccc;
    padding-left:15px;*/
}

/* Button */
.btn-main{
	width: fit-content !important;
    height: 30px !important;
    padding: 8px 25px;
    border-radius: 4px;
    border: none;
    background:#3b1f5f;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
	 display: block !important;
    margin: 0 auto;
	transition: all 0.3s ease;
}

.btn-main:hover{
    /*opacity:0.9;*/
	background:#2b1646;
	transform: scale(1.05);
}

.remember{
    margin-top:10px;
    text-align:center;
}

.remember input{
	width:auto;
	height: auto;
}

.forgot-password{
    margin-top:10px;
    text-align:center;
}


.card .form-group{
    /*margin-bottom:unset !important;*/
}

.widt img{
    height:50px !important;
}

.widt td:first-child{
    display:block;
}

.refreshbtn{

}

/* Tablet */
@media (min-width: 768px) {
  .card {
    width: 50%;
  }
}

/* Large */
@media (min-width: 1300px) {
  .card {
    width: 40%;
  }
}


@media (min-width: 1400px) {
  .card {
    width: 30%;
  }
}