.paddingleft {
padding-left:25%;
display:inline-block

}
@media only screen and (max-width: 992px) and (min-width: 567px)
{
.paddingleft {
padding-left:10%
}
}
@media only screen and (max-width: 567px)
{
.paddingleft {
padding-left:0%
}
}
.parent {
/*display: flex;*/
flex-direction:column
}
.parentcenter {
align-self:center
}
.box {
width: 100%;
}
.bgcolor {
background-color: #F7F6F3;
}
.circle-progress
{
height: 100px;
width: 100px;
display: table-cell;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background:#1d7fe5;
display:inline-block;
        
}
@media only screen and (max-width: 992px) and (min-width: 567px)
{
.circle-progress {
height: 60px;
width: 60px;
display: table-cell;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background: #1d7fe5;
display: inline-block;
}
}
@media only screen and (max-width: 567px)
{
.circle-progress {
height: 60px;
width: 60px;
display: table-cell;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background: #1d7fe5;
display: inline-block;
}
}
.circle-completing
{
height: 100px;
width: 100px;
display: table-cell;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background:#f6ad10;
display:inline-block;
}
@media only screen and (max-width: 992px) and (min-width: 567px) {
.circle-completing {
height: 60px;
width: 60px;
display: table-cell;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background: #f6ad10;
display: inline-block;
}
}
@media only screen and (max-width: 567px)
{
.circle-completing {
height: 60px;
width: 60px;
display: table-cell;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background: #f6ad10;
display: inline-block;
}
}
.circle-complete
{
height: 100px;
width: 100px;
display: table-cell;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background:#39d951;
display:inline-block;
}
@media only screen and (max-width: 992px) and (min-width: 567px)
{
.circle-complete {
height: 60px;
width: 60px;
display: table-cell;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background: #39d951;
display: inline-block;
}
}
@media only screen and (max-width: 567px)
{
.circle-complete {
height: 60px;
width: 60px;
display: table-cell;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background: #39d951;
display: inline-block;
}
}
.circle-text
{
text-align: center;
vertical-align: middle;
color: #F7F6F3;
font: bold;
height:50px;
font-size: 15px;
line-height:0.4em;
padding-top:28%;
}
@media only screen and (max-width: 992px) and (min-width: 567px)
{
.circle-text {
text-align: center;
vertical-align: middle;
color: #F7F6F3;
font: bold;
font-size: 9.5px;
line-height:0.4em;
padding-top:28%;
}
}
@media only screen and (max-width: 567px)
{
.circle-text {
text-align: center;
vertical-align: middle;
color: #F7F6F3;
font: bold;
font-size: 8px;
line-height:0.4em;
padding-top:28%;
}
}
.padding-all-15 {
    padding: 15px;
}
.padding-all-25 {
    padding: 25px;
}

.bold {
    font-weight:bold;
}

.LightGreyBackdrop {
background-color: #F4F4F4;
width:100%;
height:130%;

}

.btnmargin {
    margin-left:10px;
    margin-right:10px;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    z-index: 11000;
    width: 100%;
    height: 100%;
}

.popupbox {
    z-index: 11100;
    position: absolute;
    background-color: white;
    margin: 3%;
    min-height: 80vh;
    max-width: 93%;
    max-height: 93%;
    padding: 5px;
    overflow: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.overlayclosebutton {
    z-index: 11101;
    position: absolute;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 5px;
    padding-right: 35px;
    padding-top: 15px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.overflow-x-ok{
    overflow-x:auto
}