@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;0,900;1,400&display=swap');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

*{ box-sizing:border-box;}
body{ display:block; font-family:"Rubik"; font-size:16px; line-height:1.2;  color:#000; 
	background:#000 url(../img/background2.jpg) no-repeat center center; background-size:cover; min-height: 100vh;}
body *{   font-family:"Rubik";  }

/*** LAYOUT ***/
.container{ display:block; width:95%; max-width:1192px; overflow:hidden; margin:10px auto; padding:30px 17px; background:#fff; background:rgba(255,255,255,0.6);  }

.line{ display:block; float:left; width:100%; }
.w100{width:100%; }
.w50{ display:block; float:left; width:49%; margin-right:1%; }
 .animated{ animation-duration:0.4s!important;}
small{ font-size:11px; }
.left{float:left;}
.right{float:right;}
@media screen and (max-width: 921px) {
	.w50{ width:100%;  }
}

/*** TITLES ***/
h1,h2,h3,h4,h5,h6{ font-size:25px;  font-weight:900; color:#000; text-transform:uppercase; }
h1{ font-size:50px; text-align:center; margin:0 0 20px 0;}
h2{ font-size:30px; text-align:center; margin:0 0 20px 0;}
h3{ font-size:25px; }
h4{ font-size:20px; }
h5{ font-size:18px; }
b,strong{ font-weight:700; }
a{ color:#000; text-decoration:none; }
a:visited{ color:inherit; }
.txtcenter{text-align:center;}

/*** FORMS ***/
input{ display:block; width:100%; padding:15px 15px; border:1px solid #777; background:#fff; font-size:18px; }

/*** BUTTON ***/
button{ display:block; width:100%; padding:15px 15px; cursor:pointer;  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	border:1px solid #000; background:#008484; 
	color:#fff; text-align:center; text-transform:uppercase; font-weight:700;  }
button:hover{  border:1px solid #333; background:#4DACA8; animation:0.2s pulse; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);  }

/*** CARD ***/
.card{ margin-bottom:20px; padding:20px; background:#eee; border-radius:5px; box-shadow: 0 6px 12px rgba(0,0,0,0.19), 0 6px 8px rgba(0,0,0,0.23);  }
 
/*** UTILS ***/
.pa{ padding:10px; }
.pa2{ padding:20px; }
.mb1{ margin-bottom:10px; }
.mb2{ margin-bottom:20px; }
.bgwhite{ background:white; }
.bggrey{ background:#DEDEDE; }
.bglinen{ background:#EC9659; }
.bgblue{ background:#4DACA8; }
.bggreen{ background:#008484; }
.bgred{ background:#E03E31 ; }

/*** MENU ***/
.menu{ display:flex; justify-content: space-around; flex-wrap: wrap;  margin:0 0 20px 0; }
.menu > button{ width:auto;  }
.menu .active{ background:#E03E31; color:#fff; ; }

/*** POPUP modal ***/
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,0.6)}
.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:50%; box-shadow:0 5px 15px -5px #000; }
.modal-close{color:#aaa;float:right;font-size:28px;font-weight:700}
.modal-close:hover,.modal-close:focus{color:#000;text-decoration:none;cursor:pointer}
@media screen and (max-width: 921px) {
	.modal-content{width:90%}
}

/*** ECHO DEV ***/
#echo{ background:#DEDEDE;  border:1px solid #EC9659;  width:100%;  font:12px monospace ; padding:10px;  }

/*** LISTS  ***/
.user_list_item{ background:#fff; padding:5px 10px; margin-bottom:5px; border:3px solid grey;}
.right input{ display:inline-block; background:#fff; padding:5px; height:30px; margin:0;}
.right button{ display:inline-block; margin:0 5px; padding:0 7px; width:auto; 
	font-size:17px;  background:lightgrey; border-color:grey; }
.right button:hover{  background:grey;  }

.user_card{ padding:15px;   }
.user_card .title{ display:block; float:left; width:100%; padding:10px; background:#fff; 
	color:#000; text-align:center; font-size:32px; text-shadow:1px 1px #fff; }
	
.user_card.small{ padding:5px; width:50%; margin:50px 25% 0 25%; }
.user_card.small .title{ padding:5px; font-size:14px; }


.user_badges_item{ display:block; float:left; width:auto; padding:7px;  background:#fff; 
	color:#000; text-align:center; border:10px solid grey; border-radius:5px; box-shadow: 0 6px 12px rgba(0,0,0,0.19), 0 6px 8px rgba(0,0,0,0.23);  }
	
/*** CHART CSS ***/
.charts-css{ width:100%; height:300px; }
.charts-css tbody {   }
.charts-css tbody td { transform-origin: bottom; animation: moving-bars 5s ease ; }
.charts-css tbody td .data{ display:block; position:absolute; bottom:30px; padding:10px; background:#fff; font-size:11px;  }
@keyframes moving-bars {
  0%  { transform: scaleY( 0 ) }
  100% { transform: scaleY( 100% ); }
}



.hide{ display:none; }