body {
	position: relative;
	transition: 0.5s;
}

.content-wrapper {
	background: unset;
}

.submit-btn {
	padding: 15px 20px;
}

.form-control {
	padding: 0.85rem;
}

.pattern {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 170px;
	background-size: cover;
	z-index: -1;
}

.submit-btn {
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: #fff;
}

.submit-btn:hover,
.submit-btn:active {
	background-position: right center;
	text-decoration: none;
}

.mode-btn {
	background: white;
	height: 50px;
	width: 50px;
	position: absolute;
	top: 30px;
	right: 30px;
	padding: 10px;
	border-radius: 100%;
	cursor: pointer;
	transition: 0.5s;
}

/**
 * 
 * 	DARK MODE
 * 
 * */

body.dark {
	background: #0A184A;
}


body.dark .pattern {
	background-image: url(../images/pattern/login-dark-pattern-big.png);
}

@media screen and (max-width:  776px) {
	body.dark .pattern {
		background-image: url(../images/pattern/login-dark-pattern-small.png);
	}
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark p {
	color: white;
}

body.dark .submit-btn,
body.dark .submit-btn:active {
	background-image: linear-gradient(to right, #3224B1 0%, #7136FC  51%, #3224B1  100%) !important;
}

body.dark .submit-btn {}

body.dark .submit-btn:hover,
body.dark .submit-btn:active {}

body.dark .text-semi-white {
	color: #c9c9c9;
}

body.dark .form-control {}

body.dark .mode-btn {
	content: url(../images/icons/moon.png);
	box-shadow: 0 1px 10px -5px #ffffff;
}

body.dark .mode-btn:hover {
	box-shadow: 0 1px 12px 0px #ffffff;
}



/**
 * 
 * 	LIGHT MODE
 * 
 * */

body.light {
	background: #E0F8FF;
}


body.light .pattern {
	background-image: url(../images/pattern/login-light-pattern-big.png);
}

@media screen and (max-width:  776px) {
	body.light .pattern {
		background-image: url(../images/pattern/login-light-pattern-small.png);
	}
}

body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light h5,
body.light h6,
body.light p {
	color: #000;
}

body.light .submit-btn,
body.light .submit-btn:active {
	background-image: linear-gradient(to right, #0075F2 0%, #409CFF  51%, #0075F2  100%) !important;
}

body.light .submit-btn {}

body.light .submit-btn:hover,
body.light .submit-btn:active {}

body.light .text-semi-white {
	color: #2a2a2a;
}

body.light .form-control {}

body.light .mode-btn {
	content: url(../images/icons/sun.png);
	box-shadow: 0 1px 10px -5px #c7c7c7;
}

body.light .mode-btn:hover {
	box-shadow: 0 1px 10px -2px #c7c7c7;
}