body{
  font-weight: 300;
	background: rgb(249,249,255);
	color: #414141;
	font-size: 17px;
	line-height: 1.37;
	font-smooth: always;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
	height:100%;


  --logoColor: 34, 130, 248;
  --mainColor: 34, 130, 248;
  --subColor: 242, 242, 242;
  --neutralShade1: 242, 242, 242;
  --neutralShade2: 232, 233, 233;
  --neutralShade3: 209, 211, 212;
  --neutralShade4: 186, 189, 191;
  --neutralShade5: 128, 132, 136;
  --neutralShade6: 102, 106, 109;
  --neutralShade7: 77, 80, 82;
  --neutralShade8: 33, 33, 34;
  --primaryColor: 3, 169, 244;
  --primaryShade1: 225, 245, 254;
  --primaryShade2: 179, 229, 252;
  --primaryShade3: 79, 195, 247;
  --primaryShade4: 2, 136, 209;
  --primaryShade5: 2, 119, 189;
  --secondaryColor: 103, 58, 183;
  --secondaryShade1: 237, 231, 246;
  --secondaryShade2: 209, 196, 233;
  --secondaryShade3: 149, 117, 205;
  --secondaryShade4: 81, 45, 168;
  --secondaryShade5: 49, 27, 146;
  --accentColor: 0, 150, 136;
  --accentShade1: 224, 242, 241;
  --accentShade2: 178, 223, 219;
  --accentShade3: 77, 182, 172;
  --accentShade4: 0, 121, 107;
  --accentShade5: 0, 77, 64;
  --accent2Color: 139, 195, 74;
  --accent2Shade1: 231, 246, 213;
  --accent2Shade2: 197, 225, 165;
  --accent2Shade3: 174, 213, 129;
  --accent2Shade4: 104, 159, 56;
  --accent2Shade5: 85, 139, 47;
  --accent3Color: 244, 67, 54;
  --accent3Shade1: 255, 221, 224;
  --accent3Shade2: 255, 205, 210;
  --accent3Shade3: 239, 154, 154;
  --accent3Shade4: 211, 47, 47;
  --accent3Shade5: 183, 28, 28;
}

a {
		transition: ease-in-out 0.1s;
		-webkit-transition: ease-in-out 0.1s;
		-moz-transition: ease-in-out 0.1s;
		-o-transition: ease-in-out 0.1s;
		color: rgb(var(--logoColor));
	}

	a:hover {
		color: rgb(26, 155, 248);
		text-decoration: none;
	}

table{
  width:100%;
}

th{
  text-align:left;
  border-bottom: 5px solid #ffffff;
  background: #f2f2f2;
}

pre{
  background:rgb(55,68,89);
  border-radius:9px;
  color:rgb(216,219,221);
  border:2px solid rgb(27,38,56);
  padding:10px;
  margin-top:10px;
  margin-bottom:10px;
}

pre code{
  color:rgb(216,219,221);
  background:rgb(55,68,89);
}

h1{
  font-weight: 600;
}

h2, h3{
  font-weight: 300;
}

.inline-button, input, select, button, textarea, .toggle, .areyousure_yes, .areyousure_no{
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

.inline-button-hovereffect{
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

.inline-button-hovereffect:hover{
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transform: translate(0px, -3px);
}

.inline-button{
  padding: 15px;
  color: #f4f4f4 !important;
  background-color: rgb(var(--mainColor));
  border-radius: 9px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .0);
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .0);
  -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, .0);
}

body.dark .inline-button{
  background: rgb(var(--neutralShade6));
  border: 2px solid rgb(var(--neutralShade5));
  color: rgb(var(--neutralShade1));
}

.inline-button:hover{
  background-color: rgb(var(--primaryShade5));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transform: translate(0px, -3px);
}

body.dark .inline-button:hover{
  background: rgb(var(--neutralShade5));
  border: 2px solid rgb(var(--neutralShade4));
  color: rgb(var(--neutralShade2));
}

textarea {
  background: #ffffff;
  border: 2px solid rgb(var(--neutralShade3));
  border-radius: 9px;
  color: #5a5656;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  overflow: hidden;
  padding: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  width: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  -webkit-appearance: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  resize: none;
}

body.dark textarea{
  background: rgb(var(--neutralShade7));
  border: 2px solid rgb(var(--neutralShade6));
  color: rgb(var(--neutralShade1));
}

textarea:hover, textarea:focus {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transform: translate(0px, -3px);
  font-weight: 500;
}

body.dark textarea:hover, body.dark textarea:focus{
  background: rgb(var(--neutralShade7));
  border: 2px solid rgb(var(--neutralShade6));
  color: rgb(var(--neutralShade1));
}

input,
input[type="text"],
input[type="password"] {
  background: #ffffff;
  border: 2px solid rgb(var(--neutralShade3));
  border-radius: 9px;
  color:#414141;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  padding: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  max-width: 300px;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  -webkit-appearance: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


body.dark input,
body.dark input[type="text"],
body.dark input[type="password"]{
  background: rgb(var(--neutralShade7));
  border: 2px solid rgb(var(--neutralShade6));
  color: rgb(var(--neutralShade1));
}

input:focus,
input:hover,
input[type="text"]:focus,
input[type="text"]:hover,
input[type="password"]:focus
input[type="password"]:hover {
  outline: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transform: translate(0px, -3px);
  border-color: rgb(var(--mainColor));
  font-weight: 500;
}

body.dark input:focus,
body.dark input:hover,
body.dark input[type="text"]:focus,
body.dark input[type="text"]:hover,
body.dark input[type="password"]:focus
body.dark input[type="password"]:hover {
  background: rgb(var(--neutralShade7));
  border: 2px solid rgb(var(--neutralShade6));
  color: rgb(var(--neutralShade2));
}

input[type=file]{
  display: inline-block;
}

button,
input[type="button"],
input[type="submit"] {
  background-color: rgb(var(--mainColor));
  border-radius: 9px;
  border:none;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  text-transform: uppercase;
  outline: none;
  padding: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 100%;
  max-width: 300px;
  margin-top: 5px;
  margin-bottom: 5px;
  -webkit-appearance: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body.dark button,
body.dark input[type="button"],
body.dark input[type="submit"] {
  background: rgb(var(--neutralShade6));
  border: 2px solid rgb(var(--neutralShade5));
  color: rgb(var(--neutralShade1));
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background-color: rgb(var(--mainColor));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transform: translate(0px, -3px);
}

body.dark button:hover,
body.dark input[type="button"]:hover,
body.dark input[type="submit"]:hover {
  background: rgb(var(--neutralShade5));
  border: 2px solid rgb(var(--neutralShade4));
  color: rgb(var(--neutralShade2));
}

select {
  -webkit-appearance: button;
  -moz-appearance: button;
  background: #ffffff;
  border: 2px solid rgb(var(--neutralShade3));
  border-radius: 9px;
  color:#414141;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  padding: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  max-width: 300px;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body.dark select {
  background: rgb(var(--neutralShade7));
  border: 2px solid rgb(var(--neutralShade6));
  color: rgb(var(--neutralShade1));
}

select:focus,
select:hover {
  background-color: rgb(var(--mainColor));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transform: translate(0px, -3px);
}

body.dark select:focus,
body.dark select:hover {
  background: rgb(var(--neutralShade7));
  border: 2px solid rgb(var(--neutralShade6));
  color: rgb(var(--neutralShade1));
}

.toggle{
  display:inline-block;
}

.dark .toggle.off a{
  color: rgb(255,255,255);
}

.light .toggle.off a{
  color: rgb(85,85,85);
}

.toggle.on a{
  color: rgb(var(--mainColor));
}

[placeholder]::-webkit-input-placeholder {
  color: rgb(var(--neutralShade4));
  font-weight:500;
  font-size: 14px;
}

[placeholder]:focus::-webkit-input-placeholder {
  transform: translate(300px, 0);
  opacity: 0;
}

.message_error,
.message_warning,
.message_good,
.message_normal,
.message_grey{
  border-radius: 9px;
  padding: 10px;
  border: 0px;
  max-width: 1000px;
  font-weight: 600;
  margin: 0px auto;
  color:#ffffff;
  margin-top: 0px;
  margin-bottom:0px;
  text-align:center;
}

.message_error strong,
.message_warning strong,
.message_good strong,
.message_normal strong,
.message_grey strong{
  text-decoration: underline;
}

/* ELEMENT */

.message_good {
  background: rgb(var(--accent2Shade1));
  color: rgb(var(--accent2Shade4));
}

body.dark .message_good{
  color: rgb(var(--accent2Shade1));
  background: rgb(var(--accent2Shade4));
}

/* ELEMENT */

.message_error {
  background: rgb(var(--accent3Shade1));
  color: rgb(var(--accent3Shade4));
}

body.dark .message_error{
  color: rgb(var(--accent3Shade1));
  background: rgb(var(--accent3Shade4));
}

/* ELEMENT */

.message_warning {
  background: rgb(var(--secondaryShade1));
  color: rgb(var(--secondaryShade5));
}

body.dark .message_warning{
  color: rgb(var(--secondaryShade1));
  background: rgb(var(--secondaryShade5));
}

/* ELEMENT */
.message_normal {
  background: rgb(var(--primaryShade1));
  color: rgb(var(--primaryShade4));
}

body.dark .message_normal{
  color: rgb(var(--primaryShade1));
  background: rgb(var(--primaryShade4));
}

.message_grey {
  background: rgb(240,240,240);
  color:rgb(65,65,65);
}

body.dark .message_grey{
  color: rgb(240,240,240);
  background:rgb(65,65,65);
}

.areyousure_yes {
  color: rgb(var(--accent2Shade4));
  background: rgb(var(--accent2Shade1));
  padding: 15px;
  font-weight:800;
  border-radius: 9px;
  max-width: 300px;
  margin: 0px auto;
  margin-top: 15px;
  text-align: center;
}

body.dark .areyousure_yes{
  background: rgb(var(--accent2Shade4));
  color: rgb(var(--accent2Shade1));
}

.areyousure_yes:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transform: translate(0px, -3px);
}

.areyousure_no {
  color: rgb(var(--accent3Shade4));
  background: rgb(var(--accent3Shade1));
  padding: 15px;
  font-weight:800;
  border-radius: 9px;
  max-width: 300px;
  margin: 0px auto;
  margin-top: 15px;
  text-align: center;
}

body.dark .areyousure_no{
  background: rgb(var(--accent3Shade4));
  color: rgb(var(--accent3Shade1));
}

.areyousure_no:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transform: translate(0px, -3px);
}