:root {
    --black: #000;
    --white: #fff;
    --primary: #69C543;
    --primary-100: #C7E9B9;
    --secondary: #4D5DF9;
    --secondary-100: #E1E4FE;
    --tertiary: #0095FF;
    --tertiary-100: #99D5FF;
    --orange: #FF8A00;
    --orange-100: #FFD099;
    --red: #FB3540;
    --red-100: #FECDD0;
    --borders: #d2d2eb;

    --bulma-primary-h: 102deg;
    --bulma-primary-s: 53%;
    --bulma-primary-l: 52%;



    --font: #232040;
    --font-sub: #605a90;
    --page-spacing: 30px;
    --button-background: #6f7a95;
    --button-text: #fff;
    --button-border: #616b84;
    --button-hover: #7d8aa8;
    --button-background: #6f7a95;
    --button-text: #fff;
    --button-border: #616b84;
    --button-hover: #7d8aa8;
    --shadow-shade: rgba(19,48,66,.08);
    --shadow-shade-l: rgba(19,48,66,.13);
    --shadow-shade-xl: rgba(19,48,66,.45);

    --text-primary: #2a2e34;
    --text-secondary: #7c828d;
    --text-tertiary: #9DA2A9;

    --grey-50: #FAFAFA;
    --grey-100: #CECECE;
    --grey-150: #CBCED1;
    --grey-200: #9DA2A9;
  }

  .button.is-primary {
    color: #FFF;
  }

.avatar {
  background: var(--primary);
  border-radius: 100px;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-size: cover;
  background-position: center;
}

.avatar.xs {
  width: 16px;
  height: 16px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 16px;
  margin-right: 8px;
}

.avatar.s {
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 24px;
  margin-right: 8px;
}

.avatar.m {
  width: 32px;
  height: 32px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 24px;
  margin-right: 8px;
}

.avatar.xl {
  width: 160px;
  height: 160px;
  font-size: 80px;
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 16px;
  margin-right: 8px;
}

.avatar.secondary {
  background: var(--secondary);
}

.avatar.tertiary {
  background: var(--tertiary);
}

.avatar.orange {
  background: var(--orange);
}

.avatar.red {
  background: var(--red);
}

.avatar_add {
  position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    text-align: center;
}










.badge {
  padding: 2px 8px;
  border-radius: 16px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;
  line-height: 16px;
}

.badge.xs {
  padding: 2px 8px;
  border-radius: 16px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.2px;
  line-height: 14px;
}

.badge.primary {
  background: var(--primary-100);
  color: var(--primary);
}

.badge.secondary {
  background: var(--secondary-100);
  color: var(--secondary);
}


.columns.tight {

}

.columns.tight .column:first-child {
  padding-right: .2rem;
}

.columns.tight .column:last-child {
  padding-left: .2rem;
}




.loader-container {
  background-color: rgba(0,0,0, 0.3);
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.loader {
	height: 32px;
	width: 32px;
	-webkit-animation: loader-1 3.0s linear infinite;
	        animation: loader-1 3.0s linear infinite;

          display: block;
        	position: absolute;
        	top: 0; left: 0;
        	bottom: 0; right: 0;
        	margin: auto;
}
@-webkit-keyframes loader-1 {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader-1 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.loader span {
	display: block;
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
	margin: auto;
	height: 32px;
	width: 32px;
	clip: rect(0, 32px, 32px, 16px);
	-webkit-animation: loader-2 1.2s linear infinite;
	        animation: loader-2 1.2s linear infinite;
}
@-webkit-keyframes loader-2 {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(220deg); }
}
@keyframes loader-2 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(220deg); }
}
.loader span::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
	margin: auto;
	height: 32px;
	width: 32px;
	clip: rect(0, 32px, 32px, 16px);
	border: 3px solid #FFF;
	border-radius: 50%;
	-webkit-animation: loader-3 1.2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	        animation: loader-3 1.2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@-webkit-keyframes loader-3 {
	0%   { -webkit-transform: rotate(-140deg); }
	50%  { -webkit-transform: rotate(-160deg); }
	100% { -webkit-transform: rotate(140deg); }
}
@keyframes loader-3 {
	0%   { transform: rotate(-140deg); }
	50%  { transform: rotate(-160deg); }
	100% { transform: rotate(140deg); }
}



.row {
  min-width: 800px;
}

.col {
  overflow: hidden;
}

.col div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


#main_menu {
  padding: 24px;
  max-width: 200px;
}


.button.is-danger {
color: #FFF;
}

.field .columns.tight {
  margin-inline-start: inherit;
  margin-inline-end: inherit;
}

.field .columns.tight .column {
  padding-left: 0;
  padding-right: 0;
}

.content_page {
  padding: .5rem .75rem;
}