/* UBUNTU */
@font-face {
  font-family: "Ubuntu";
  src: url('../fonts/ubuntu/Ubuntu-Bold.ttf');
  font-weight: 700;
}
@font-face {
  font-family: "Ubuntu";
  src: url('../fonts/ubuntu/Ubuntu-BoldItalic.ttf');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Ubuntu";
  src: url('../fonts/ubuntu/Ubuntu-Medium.ttf');
  font-weight: 500;
}
@font-face {
  font-family: "Ubuntu";
  src: url('../fonts/ubuntu/Ubuntu-MediumItalic.ttf');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Ubuntu";
  src: url('../fonts/ubuntu/Ubuntu-Regular.ttf');
  font-weight: 400;
}
@font-face {
  font-family: "Ubuntu";
  src: url('../fonts/ubuntu/Ubuntu-Italic.ttf');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Ubuntu";
  src: url('../fonts/ubuntu/Ubuntu-Light.ttf');
  font-weight: 300;
}
@font-face {
  font-family: "Ubuntu";
  src: url('../fonts/ubuntu/Ubuntu-LightItalic.ttf');
  font-weight: 300;
  font-style: italic;
}
/* PLAY */
@font-face {
  font-family: "Play";
  src: url('../fonts/play/Play-Bold.ttf');
  font-weight: 700;
}
@font-face {
  font-family: "Play";
  src: url('../fonts/play/Play-Regular.ttf');
  font-weight: 400;
}
/* COMMISSIONER */
@font-face {
  font-family: "Commissioner";
  src: url('../fonts/commissioner/Commissioner.ttf');
}
@font-face {
  font-family: "Commissioner";
  src: url('../fonts/commissioner/Commissioner-Italic.ttf');
  font-style: italic;
}

::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track-piece {
	background-color: #eee;
	border-radius: 50px;
}
::-webkit-scrollbar-track {
	background-color: #343A40;
}
::-webkit-scrollbar-thumb {
	background-color: #343A40;
	border: 1px solid #eee;
	border-radius: 50px;
}
::-webkit-scrollbar-thumb:active {
	background-color: #8f2028;
}
:root {
	--header-height: 3rem;
	--dark-color: #32424A;
	--border-color: #648294;
	--bg-color: #FFF;
	--title-color: #865574;
	--active-icon-color:#cb8087;

	--main-color: #46545c;
	--white-color: rgb(242,246,252);/*#f2f6fc*/
	--white_color: rgb(252,253,255);
	--red-color: rgb(248,225,226);/*#f8e1e2*/
	--red_color: rgb(251,236,236);
	--blue-color: rgb(223,239,251); /*#dfeffb*/
	--blue_color: rgb(235,245,253);
	--yellow-color: rgb(249,242,228); /*#f9f2e4*/
	--yellow_color: rgb(252,247,239);
	--green-color: rgb(234,243,228); /*#eaf3e4*/
	--green_color: rgb(241,247,237);
	--purle-color: rgb(243,228,248); /*#f3e4f8*/
	--purle_color: rgb(248,238,251);
	--sea-color: rgba(221,240,242); /*#DDF0F2*/
	--sea_color: rgb(230,244,246);
	--grey-color: rgb(238,239,242); /*#eeeff2*/
	--grey_color: rgb(245,246,248);

	--disable-color: #999;
	--hover-disable-color: #808080;
	--hover-disable-border-color: rgba(128,128,128,0.3);
}
body {
	font-size: 14px;
	font-family: Commissioner;
	background-color: var(--bg-color);
	color: var(--dark-color);
}
.main-container {
	padding-top: 2rem;
}

.hidden {
	display: none;
}
.bg-red {
	background-color: var(--red-color);
}
.bg_red {
	background-color: var(--red_color);
}
.bg-blue {
	background-color: var(--blue-color);
}
.bg_blue {
	background-color: var(--blue_color);
}
.bg-yellow {
	background-color: var(--yellow-color);
}
.bg_yellow {
	background-color: var(--yellow_color);
}
.bg-green {
	background-color: var(--green-color);
}
.bg_green {
	background-color: var(--green_color);
}
.bg-purple {
	background-color: var(--purle-color);
}
.bg_purple {
	background-color: var(--purle_color);
}
.bg-sea {
	background-color: var(--sea-color);
}
.bg_sea {
	background-color: var(--sea_color);
}
.bg-grey {
	background-color: var(--grey-color);
}
.bg_grey {
	background-color: var(--grey_color);
}
.bg_white {
	background-color: var(--white-color);
}
.bg-white {
	background-color: var(--white_color) !important;
}