/******** COLORS ********/
:root {
  --bg-default: #F9FAFB;
  --card-default: #FFFFFF;
  --light-blue: #91B9D3;
  --medium-blue: #4589FF;
  --dark-blue: #1D1D1D;
  --bg-dark: #121212;
  --green: #85BB25;
  --border: #DFE5E7;
  --linear: linear-gradient(90deg, rgba(69,137,255,1) 0%, rgba(91,238,208,1) 100%);
}

/* tema de cores claro */
:root .light-mode {
  background: var(--bg-default) !important;
  --card-color: var(--card-default);
  --text-color: var(--dark-blue);
  --border-card-color: var(--light-blue);
  --btn-color: var(--medium-blue);
  --btn-text: var(--bg-default);
  --btn-hover-color: var(--linear);
  --btn-hover-text: var(--bg-default);
  --input-bg: var(--card-default);
  --input-border: var(--medium-blue);
  --label-bg: var(--bg-default);
}

/* tema de cores escuro */
:root .dark-mode {
  background: var(--bg-dark) !important;
  --card-color: var(--dark-blue);
  --text-color: var(--bg-default);
  --border-card-color: var(--green);
  --btn-color: var(--medium-blue);
  --btn-text: var(--bg-default);
  --btn-hover-color: var(--linear);
  --btn-hover-text: var(--bg-default);
  --input-bg: var(--dark-blue);
  --input-border: var(--light-blue);
  --label-bg: var(--bg-dark);
}

.bg-grad {
  background: linear-gradient(125deg, rgba(74,152,178,1) 10%, rgba(126,92,156,1) 90%) !important;
}

/* cards */
.card {
  background: var(--card-color);
  box-shadow: none;
  border: none;
}
/* ********************************* */

/* forms dt-browser */
.form-body {
  background: var(--card-color) !important;
  color: var(--texto3) !important;
}

/* ********************************* */

/* botões dos temas de cores */
.themes {
	background: var(--medium-blue);
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	position: relative;
	height: 22px;
	width: 42px;
	transform: scale(1.5);
  margin-bottom: 0;
}

.themes .ball {
	background-color: var(--card-default);
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	height: 18px;
	width: 18px;
	transform: translateX(0px);
	transition: transform 0.2s linear;
}

.moon {
  color: var(--card-default);
  font-size: 14px !important;
}

.sun {
  color: var(--card-default);
  font-size: 14px !important;
}

.check-theme {
	opacity: 0;
  margin-left: 15px;
}

.check-theme:checked + .themes .ball {
	transform: translateX(20px);
}