/*---------------------START GENERAL----------------------*/

.mobile-step-widget.card {
	border: 1px solid var(--color-bg-primary);
	background-color: var(--color-bg-body);
}


/*----------------------END GENERAL-----------------------*/

/*-------------------START PROGRESSBAR--------------------*/

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey;
    padding-left: 0;
    width: 100%;
}

#progressbar .active {
    color: var(--color-text);
}

#progressbar li {
    list-style-type: none;
    font-size: 12px;
    z-index: 10;
    position: relative;
    width: 100%;
	margin: 0.1em 0 0.1em 0;
	/*     width: -moz-available; */
/*     width: -webkit-fill-available; */
/*     width: fill-available; */
}


/* #progressbar li:before { */
/*     width: 50px; */
/*     height: 50px; */
/*     line-height: 45px; */
/*     display: block; */
/*     font-size: 18px; */
/*     color: #ffffff; */
/*     background: lightgray; */
/*     border-radius: 50%; */
/*     margin: 0 auto 10px auto; */
/*     padding: 2px */
/* } */

#progressbar li:before {
    top: 32px;
    position: absolute;
    content: " ";
    width: 100%;
    margin: 0 auto;
    height: 2px;
    left: 0;
    z-index: -1;
}

#progressbar li.disabled:before,
#progressbar li.doing:before {
	background-color: #ccc;	
}

#progressbar li.active:before,
#progressbar li.done:before {
	background-color: var(--color-bg-primary);	
}

#progressbar li.active:after,
#progressbar li.doing:after {
    background: var(--color-bg-primary);
}

#progressbar li.active:not(.done):before,
#progressbar li.doing:not(.done):before {
	background: var(--color-bg-primary);
	background: linear-gradient(90deg, var(--color-bg-primary) 0%, var(--color-bg-primary) 50%, rgba(204,204,204,1) 50%, rgba(204,204,204,1) 100%);
}

#progressbar li .btn-circle {
	border-radius: 50%;
	width: 45px;
	height: 45px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--color-text-primary);
	border: none;
}

#progressbar li .btn-circle:focus {
	box-shadow: none;
}

#progressbar li.active .btn-circle,
#progressbar li.done .btn-circle
 {
	background-color: var(--color-bg-primary);
/* 	background: linear-gradient(170deg, var(--color-special-tertiary) 0%, var(--color-bg-primary) 100%); */
}

#progressbar li.disabled .btn-circle,
#progressbar li.doing:not(.active) .btn-circle {
	background-color: #ccc;
	color: #fff;
}

#progressbar li.done .btn-circle:hover {
	box-shadow: 0px 2px 5px 0px grey;
	-webkit-box-shadow: 0px 2px 5px 0px grey;
	background-color: var(--color-bg-primary-hover);
	color: var(--color-text-primary-hover);
}

#progressbar li.done {
	background-image: url('../gifMobile/ok.svg');
	background-repeat: no-repeat;
	background-position: calc(50% + 24px) top;
	background-size: 15px;
}

#progressbar li.disabled .btn-circle,
#progressbar li.active .btn-circle {
	pointer-events: none;
}


#progressbar li:hover,
#progressbar li:focus-within{
	text-decoration: underline;
	text-decoration-thickness: 2px;
	border-radius: 0.25em;
	border: 0.1em solid var(--color-bg-primary);
	color: var(--color-bg-primary);
	margin: 0;
}


/*-------------------END PROGRESSBAR--------------------*/



/*-------------------START BUTTONS--------------------*/


.btn-indigo {
    color: #fff;
    background-color: #3f51b5;
}

.btn-indigo:hover {
    color: #fff;
    background-color: #4d5ec1;
}


/*-------------------END BUTTONS--------------------*/


/*-------------------START FIELDSETS--------------------*/

fieldset.step-content.disabled {
	height: 0;
	visibility: hidden;
}

fieldset.step-content {
	opacity: 0;
    
	-webkit-transition: height 0s, opacity 0.5s ease-in;
	-moz-transition: height 0s, opacity 0.5s ease-in;
    -ms-transition: height 0s, opacity 0.5s ease-in;
    -o-transition: height 0s, opacity 0.5s ease-in;
    transition: height 0s, opacity 0.5s ease-in;
}

fieldset.step-content.active {
	opacity: 1;
}


/*-------------------END FIELDSETS--------------------*/