body{
	font-size: .875rem;
}

body::before{
	content: '';
	position: fixed;
	display: block;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background-color: #e4f7f7;
	margin: -50px 50px;
	z-index: -1;
}

.bg-water-mid{ background-color: #00c2c7; }
.bg-water-low{ background-color: #97ebdb; }
.bg-water-high{ background-color: #0086ad; }
.text-water-mid{ color: #00c2c7; }
.text-water-low{ color: #97ebdb; }
.text-water-high{ color: #0086ad; }

.login-body::before{
	content: '';
	position: fixed;
	display: block;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background-color: #00c2c7;
	margin: -50px 50px;
	z-index: -1;
}

.a-card{
	border-radius: 10px!important;
	border: none;
	box-shadow: 0px 0px 20px 1px rgba(0,0,0,.30);
}
.btn-water-mid {
  color: #fff;
  background-color: #00c2c7;
  border-color: #00c2c7;
}

.btn-water-mid:hover {
  color: #fff;
  background-color: #0086ad;
  border-color: #0086ad;
}

.btn-water-mid:focus, .btn-water-mid.focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-water-mid.disabled, .btn-water-mid:disabled {
  color: #fff;
  background-color: #00c2c7;
  border-color: #00c2c7;
}

.btn-water-mid:not(:disabled):not(.disabled):active, .btn-water-mid:not(:disabled):not(.disabled).active,
.show > .btn-water-mid.dropdown-toggle {
  color: #fff;
  background-color: #0086ad;
  border-color: #0086ad;
}

.btn-water-mid:not(:disabled):not(.disabled):active:focus, .btn-water-mid:not(:disabled):not(.disabled).active:focus,
.show > .btn-water-mid.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-dark-base {
  color: #fff;
  background-color: #009195;
  border-color: #009195;
}

.btn-dark-base:hover {
  color: #fff;
  background-color: #026d70;
  border-color: #026d70;
}

.btn-dark-base:focus, .btn-dark-base.focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-dark-base.disabled, .btn-dark-base:disabled {
  color: #fff;
  background-color: #009195;
  border-color: #009195;
}

.btn-dark-base:not(:disabled):not(.disabled):active, .btn-dark-base:not(:disabled):not(.disabled).active,
.show > .btn-dark-base.dropdown-toggle {
  color: #fff;
  background-color: #026d70;
  border-color: #026d70;
}

.btn-dark-base:not(:disabled):not(.disabled):active:focus, .btn-dark-base:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark-base.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

/*
 * Sidebar
 */

.sidebar {
	background-color: #00c2c7;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100; /* Behind the navbar */
	padding: 0;
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,.15);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 100px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}

.sidebar .sidebar-sticky .nav-link {
	color: #fff;
	padding: 10px 0 10px 1.2rem;
	font-size: .95rem;
	font-weight: 500;
	transition: 1s;
}
.sidebar .sidebar-sticky .nav-item .nav-link.active{
	color: #00c2c7;
	background-color: #fff;
}
.sidebar .sidebar-sticky .nav-item .nav-link.active:hover{
	color: #00c2c7;
	background-color: #fff;
}
.sidebar .sidebar-sticky .nav-item .nav-link:hover{
	background-color: rgba(255,255,255,.1);
}

.brand{
	background-color: rgba(0,0,0,.25);
	padding: 10px 0 10px 1.2rem;
}
.brand-name{
	color: #fff;
	font-weight: 700;
	font-size: 1.5rem;
}
.brand-name:hover{
	color: #fff;
	text-decoration: none;
}

.text-header{
	font-weight: 700;
}

.widget .card{
	border: none;
	box-shadow: 0 1px 6px 0 rgba(49, 53, 59, 0.12);
}

.sidebar .nav-bottom{
	background-color: rgba(0,0,0,.1);
	padding: 0;
}
.sidebar .nav-bottom .nav{
	padding: 3px 0;
}
.sidebar .nav-bottom .nav-item{
	margin: 0 auto;
}
.sidebar .nav-bottom .nav-link{
	color: #fff;
}

.basic .card{
	border: none;
	box-shadow: 0 1px 6px 0 rgba(49, 53, 59, 0.12);
}
.basic .title-body{
	font-weight: 700;
	font-size: 22px;
	color: #0086ad;
	margin-bottom: 20px;
}
.basic .form-group label{
	font-weight: 700;
	color: #00c2c7;
}
.basic .form-group label a{
	color: #0086ad;
}
.basic .form-group .radio-b label{
	color: #0086ad;
	cursor: pointer;
}
.basic .form-control{
	border: none;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
	border-radius: 0px;
	background-color: #fff;
	font-weight: 500;
}
.basic .form-control::-webkit-input-placeholder {
  color: #959595;
  opacity: 1;
}

.basic .form-control::-moz-placeholder {
  color: #959595;
  opacity: 1;
}

.basic .form-control:-ms-input-placeholder {
  color: #959595;
  opacity: 1;
}

.basic .form-control::-ms-input-placeholder {
  color: #959595;
  opacity: 1;
}

.basic .form-control::placeholder {
  color: #959595;
  opacity: 1;
}

/*CHECKBOX CUSTOM*/
.checkbox-input {
  position: absolute;
  opacity: 0;
  z-index: -1;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*basic style for apperance of the checkbox*/
.checkbox-input ~ .rc-label{
	width: 1.2rem;
	height: 1.2rem;
	position: relative;
	display: inline-block;
	background-color: #fff;
	vertical-align: middle;
	border-radius: 5px;
	cursor: pointer;
	border:1px solid #ccc;
}
/*styles for the hover state of the custom checkbox*/
.checkbox-input:hover ~ .rc-label{
	border: 4px solid #00c2c7;
}
/*styles for the focus state of the custom checkbox*/
.checkbox-input:focus ~ .rc-label{
	border-color: #00c2c7;
	box-shadow: 0 0 0 2px rgba(23, 133, 255, .25);
}
/*styles for the checked state of the custom checkbox*/
.checkbox-input:checked ~ .rc-label{
	border: none;
	background: #00c2c7 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT48L3N2Zz4=) center no-repeat;
	background-size: 75%;

}
.radio-input {
  position: absolute;
  opacity: 0;
  z-index: -1;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*basic style for apperance of the checkbox*/
.radio-input ~ .rc-label{
	width: 1rem;
	height: 1rem;
	position: relative;
	display: inline-block;
	background-color: #fff;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 50%;
	border:1px solid #ccc;
}
/*styles for the hover state of the custom checkbox*/
.radio-input:hover ~ .rc-label{
	border: 4px solid #00c2c7;
}
/*styles for the focus state of the custom checkbox*/
.radio-input:focus ~ .rc-label{
	border-color: #00c2c7;
	box-shadow: 0 0 0 2px rgba(23, 133, 255, .25);
}
/*styles for the checked state of the custom checkbox*/
.radio-input:checked ~ .rc-label{
	box-shadow: 0 0 1px 2px #00c2c7;
	border: 4px solid #fff;
	background-color: #00c2c7;
  background-clip: content-box;
}

.status-success{
	background-color: #00c2c7;
	color: #fff;
	padding: 5px 10px;
	border-radius: 8px;
	box-shadow: 0 0 6px 0 rgba(49, 53, 59, 0.12);
	border: none;
}

.status-danger{
	background-color: #ff7675;
	color: #fff;
	padding: 5px 10px;
	border-radius: 8px;
	box-shadow: 0 0 6px 0 rgba(49, 53, 59, 0.12);
	border: none;
}

.status-info{
	background-color: #74b9ff;
	color: #fff;
	padding: 5px 10px;
	border-radius: 8px;
	box-shadow: 0 0 6px 0 rgba(49, 53, 59, 0.12);
	border: none;
}

.status-disabled{
	background-color: #b2bec3;
	color: #fff;
	padding: 5px 10px;
	border-radius: 8px;
	box-shadow: 0 0 6px 0 rgba(49, 53, 59, 0.12);
	border: none;
}

.card{
	opacity: 0.9;
}

.btn-rounded{
	border-radius: 100px;
}
.nav-link .btn{
	margin: -4px 10px 0 0;
}

.nav-item .collapse .nav-link{
	padding: 10px 0 10px 2rem;
	transition: 1s;
}