:root {
--primary: #0096df;
--secondary: rgba(0, 241, 195, 1);
--card-end: rgba(0, 241, 195, 0.25);
--card-start-1: rgba(0, 152, 240, 0.5);
--card-start-2: rgba(157, 71, 255, 0.5);
}


.fill-height {
    height: 100%;
}
.agora {
    --primary: #2c546c;
    --secondary: #3b8dc5;
    --card-end: var(--secondary);
    --card-start-1: var(--primary);
    --card-start-2: var(--primary);
}

.fw {
    --primary: #0e6832;
    --secondary: rgb(59, 183, 107);
    --card-end: var(--secondary);
    --card-start-1: var(--primary);
    --card-start-2: var(--primary); 
}

.optichem {

    --primary: #05a039;
    --secondary: rgb(150, 187, 38);
    --card-end: var(--secondary);
    --card-start-1: var(--primary);
    --card-start-2: var(--primary);
}
.bg {
    background: var(--primary); 
    background: -moz-linear-gradient(0deg, var(--primary) 0%, var(--secondary) 100%);
    background: -webkit-linear-gradient(0deg, var(--primary) 0%, var(--secondary) 100%);
    background: linear-gradient(0deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
}
.bg .nav .nav-item.active a, .bg .nav .nav-item a:hover {
    background-color: var(--primary);
}
.bg .nav .nav-item a, .bg .nav .nav-item a:hover {
    color: #fff;
}

.bg-card-1 {
    background: var(--primary);
    background: -moz-linear-gradient(45deg, var(--card-start-1) 0%, var(--card-end) 75%);
    background: -webkit-linear-gradient(45deg, var(--card-start-1) 0%, var(--card-end) 75%);
    background: linear-gradient(45deg, var(--card-start-1) 0%, var(--card-end) 75%);
}

.bg-card-2 {
    background: var(--primary);
    background: -moz-linear-gradient(45deg, var(--card-start-1) 0%, var(--card-end) 75%);
    background: -webkit-linear-gradient(45deg, var(--card-start-1) 0%, var(--card-end) 75%);
    background: linear-gradient(45deg, var(--card-start-1) 0%, var(--card-end) 75%);
}

.bg-card-3 {
    background: var(--card-start-2);
    background: -moz-linear-gradient(45deg, var(--card-start-2) 0%, var(--card-end) 75%);
    background: -webkit-linear-gradient(45deg, var(--card-start-2) 0%, var(--card-end) 75%);
    background: linear-gradient(45deg, var(--card-start-2) 0%, var(--card-end) 75%);
}

.bg-card-4 {
    background: var(--card-start-2);
    background: -moz-linear-gradient(45deg, var(--card-start-2) 0%, var(--card-end) 75%);
    background: -webkit-linear-gradient(45deg, var(--card-start-2) 0%, var(--card-end) 75%);
    background: linear-gradient(45deg, var(--card-start-2) 0%, var(--card-end) 75%);
}

.dashboard-welcome
{
    font-size: 2rem; 
    font-weight: 500;
}

.dashboard-welcome-text
{
    color: var(--primary-text);
}

#welcome {
    font-size: 2rem; 
    font-weight: 300;
    color: rgb(94, 94, 94);
}

#name {
    font-size: 1.7rem; 
    font-weight: 300;
    color: rgb(94, 94, 94);
}

#scanned {
    height: 10rem;
}

.scanned {
    font-size: 2rem;
    font-weight: 300;
    margin-top: -1.5rem;
    margin-right: .5rem;
}

.badgeBtn {
    top: 25%;
}
.btn-sm {
    width: 6.2rem;
}
 
.b-skills
{
    padding-top: 1rem;
    padding-left: 1rem;
    margin-bottom: -30px;
}

.b-skills h2 { margin-bottom: 50px; font-weight: 900; text-transform: uppercase;}

.skill-item
{
	position: relative;
	max-width: 200px;
	width: 100%;
	margin-bottom: 30px;
	color: #555;
}

.chart-container-1
{
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 100%;
}


.skill-item .chart-1,
.skill-item .chart-1 canvas
{
	position: absolute;
	top: 0;
	left: 0;
	width: 95% !important;
	height: 95% !important;
}

.skill-item .chart-1 
{
    left: 40%;
}
.skill-item .chart:before
{
	content: "";
	width: 0;
	height: 100%;
}

.skill-item .chart:before,
.skill-item .percent
{
	display: inline-block;
	vertical-align: middle;
}

.skill-item .percent
{
	position: absolute;
    left: 35%;
    top: 40%;
	line-height: 1;
	font-size: 40px;
	font-weight: 900;
	z-index: 2;
}

.skill-item  .percent:after
{
	content: attr(data-after);
	font-size: 20px;
}
       
p{
    font-weight: 900;
}

::-webkit-scrollbar{
    width: 7px;
}

::-webkit-scrollbar-track{
    background: #ffff;
}

::-webkit-scrollbar-thumb{ 
    background: var(--primary);
    border-radius: 10px;
}