body {
    padding:25px;
    padding-top:45px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color:rgb(24, 24, 24)
}

input {
    padding:15px;
    border:1px solid lightgrey;
    font-size:13pt;
}

h3.goal {

    font-size: 28pt;
    color: black;
    padding-bottom: 13px;
    border-bottom: 1px solid #ffb100;
    display: inline-block;
}

h3.mainbutton {
    border: 1px solid #6a99ef;
    padding: 10px;
    text-transform: uppercase;
    text-align: center;
    width: auto;
    display: block;
    font-family: arial;
    color: gray;
    width: 40%;
    margin: auto!important;
    cursor: pointer;
}

button.noborder {
    background: transparent;
    border: none;
    top: -13px;
    position: relative;
    font-style: italic;
}


button.ui {
    background-color: #cbcbcb;
    color: black;
    padding: 7px;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid grey;
    font-size: 13px;
}

button {
    border: 1px solid #6a99ef;
padding: 10px;
text-transform: uppercase;
text-align: center;
width: auto;
display: block;
font-family: arial;
color: gray;
}

.hide {
    display:none!important;
}


span.tag {
    border-radius: 3px;
    border: 1px solid grey;
    background-color: #9ba0b1;
    color: white;
    text-transform: uppercase;
    padding: 10px;
    margin-bottom: 15px;
    border-left: 5px solid #c2e1f5;
    margin-top: 50px;
    display: block;
}



li.step{
    position: relative;
    background: #d8e6ef;
    border: 3px solid #c2e1f5;
    width: 190px;
    height: 31px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 35px;
    padding-top: 25px;
    padding: 10px;
    padding-top: 20px;
    transition:all 0.4s ease-out;
}

li.step.passed {
    background: rgb(127, 209, 127)!important;

}

li.step.failed {
    background: rgb(209, 127, 127);
}

li.step  .spot {
    position: relative;
    top: 5px;
    border-radius: 100%;
    height: 8px;
    width: 8px;
    display: inline-block;
    z-index: 20;
}

li.step  .failbtn {
    position: relative;
    top: 5px;
    background-color: #952222;
    margin-left:25px;
}

li.step  .succbtn {
    position: relative;
    top: 25px;
    margin-left:-12px;
    background-color: #269522;
    z-index: 20;
}

li.step.new{
    background: white;
    border: 2px solid grey;
}


li.step.new:after {
	border-color: rgba(136, 183, 213, 0);
	border-left-color: white;
	border-width: 20px;
	margin-top: -20px;
}

	li.step.new:before {
        border-color: rgba(194, 225, 245, 0);
        border-left-color: grey;
        border-width: 26px;
        margin-top: -26px;
}

li.step:after, li.step:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

li.step:after {
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #88b7d5;
	border-width: 30px;
	margin-top: -30px;
}

	li.step:before {
        border-color: rgba(194, 225, 245, 0);
        border-left-color: #c2e1f5;
        border-width: 36px;
        margin-top: -36px;
}

.square {
    padding:10px;vertical-align:middle;
    animation: fade 2s linear;

}

.widesquare {
    display: flex;
    height: 120px;
    width: 350px;
    border: 2px dashed darkgreen;
    background-color: #e2f7e2;
    padding: 10px;
    vertical-align: middle;
    animation: fade 1s linear;
    border-radius: 20px;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
    
}