/* CustomerApp - Home page */

/* Homepage dashboard */

/* Arrival time */

.footer-date #set-btn {
    background-color: rgba(51, 51, 51, 0.05);
    border-radius: 8px;
    border-width: 0;
    color: darkgreen;
    cursor: pointer;
    display: inline-block;
    font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    text-align: center;
    transition: all 200ms;
    vertical-align: baseline;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.footer-date #set-btn:disabled{
    cursor: default;
    color: grey;
}

.footer-date  {
    text-align: center;
}

.footer-date #cancel-btn {
    background-color: rgba(51, 51, 51, 0.05);
    border-radius: 8px;
    border-width: 0;
    color: darkred;
    cursor: pointer;
    display: inline-block;
    font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    text-align: center;
    transition: all 200ms;
    vertical-align: baseline;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.arrival-time .img {
    padding: 5% 3% 3% 10%;
}

.arrival-time .text {
    padding: 3% 1% 3% 0%;
}

.arrival-text #tenancy-selector {
    margin-top: 10px;
    border: 1px solid var(--color-01);
    background-color:var(--color-00);
    color:var(--color-01);
}

/* Arrival time END */

.personal-info h3 {
    z-index: 2;
    position: relative;
}

.personal-info p {
    margin: 0;
    font-weight: 400;
}

.personal-info strong {
    margin-top: 10px;
    display: inline-block;
}

.personal-info a {
    font-weight: 700;
    margin: 5px 0;
    position: relative;
    display: inline-block;
    width: 100%;
}

.your-payments img.img-responsive {
    height: auto;
    max-height: none;
    margin: 0 auto;
}

.required-docs .panel-body:hover {
    cursor: pointer;
    background-color: #7165ff;
}

.list-group-item:hover {
    color: #fff;
}

.personal-details .your-details {
    background-image: url('../personal-details-your-details.html');
    background-repeat: no-repeat;
    background-size: 31% 45%;
    background-position: -5% 21%;
    padding: 20px 10% 40px;
}

.personal-details .contact-details {
    background-image: url('../contact-details.html');
    background-repeat: no-repeat;
    background-position: 50% 100%;
    padding-bottom: 220px;
}

.personal-details .additional-info {
    background-image: url('../additional-info.html');
    background-repeat: no-repeat;
    background-position: 50% 7%;
    padding: 193px 12% 20px;
}

.referencing-steps .step-description {
    /*margin-bottom: 30px;*/
    text-align: left;
}

.referencing-step-wrap {
    overflow-wrap: break-word;  
    word-wrap: break-word;
    white-space: normal; 
}

.induction-steps .step-description {
    /*margin-bottom: 30px;*/
    text-align: left;
}

.icon-progress {
    width: 100px;
    height: 100px;
}

.text-right {
    text-align: right;
}

.docs-status .status {
    margin-left: -15px;
    padding: 5px 15px;
    width: 80%;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-bottom: 10px;
    margin-top: 5px;
}

/* Donut chart CSS - only for static HTML mockup */

.donut-chart{position:relative;border-radius:50%;overflow:hidden}.donut-chart .slice{position:absolute;top:0;left:0;width:100%;height:100%}.donut-chart .chart-center{position:absolute;border-radius:50%}.donut-chart .chart-center span{display:block;text-align:center}.donut-chart.chart1{width:200px;height:200px;background:#e1e1e1}.donut-chart.chart1 .slice.one{clip:rect(0 200px 100px 0);-webkit-transform:rotate(90deg);transform:rotate(90deg);background:#50c690}.donut-chart.chart1 .slice.two{clip:rect(0 100px 200px 0);-webkit-transform:rotate(270deg);transform:rotate(270deg);background:#50c690}.donut-chart.chart1 .chart-center{top:10px;left:10px;width:180px;height:180px;background:#fff}.donut-chart.chart1 .chart-center span{font-size:40px;line-height:180px;color:#50c690}.donut-chart.chart1 .chart-center span:after{content:"75%"}.donut-chart.chart2{width:150px;height:150px;background:0 0;margin-bottom:10px}.donut-chart.chart2 .slice.one{clip:rect(0 200px 100px 0);-webkit-transform:rotate(90deg);transform:rotate(90deg);background:#ff6584}.donut-chart.chart2 .slice.two{clip:rect(0 100px 200px 0);-webkit-transform:rotate(327.6deg);transform:rotate(327.6deg);background:#ff6584}.donut-chart.chart2 .chart-center{top:25px;left:25px;width:100px;height:100px;background:#6156fc}.donut-chart.chart2 .chart-center span{font-size:26px;line-height:103px;color:#f7f7f7;font-family:'Zilla Slab',serif;font-weight:700}.donut-chart.chart2 .chart-center span:after{content:"3/9"}

/* Donut Chart HTML EXAMPLE - END */

/* Donut chart CSS - React Component Style */

.chart-container .step-number h3 {
    margin: 0;
}

.chart-container {
    width: 100%;
    margin: 0 auto;
}

.chart-container .step-number {
    position: absolute;
    top: 51%;
    left: 44%;
    z-index: 2;
}

@media (max-width: 768px) {
    .chart-container .step-number {
        top: 52%;
        left: 39%;
    }
}

.signatures-tile .bottom-url i {
    margin-left: 10px;
}

.signatures-tile .signature-list {
    margin-top: 20px;
}

.signatures-tile_text-wrapper {
    display: flex;
    flex-direction: column;
}

.signatures-tile_text2 {
    margin-top: 10px;
}

.dashboard-panel h3 {
    margin-top: 0;
}

.tenancy-selector-arrival-time {
    margin-bottom: 10px;
}

/* Donut chart CSS - React Component Style END */