/*

    flowchart.css

*/

.flowchart {
    font-size: 0.95em;
    line-height: 1.3;
    margin: 0 -0.5em;
}

.flowchart .row {
    margin: 2em 0;
    display: flex;
    flex-direction: row;
}

.flowchart .wrapper {
    background-color: transparent;
    margin: 0;
    padding: 0;
    width: 25%;
}

.flowchart .wrapper .step {
    display: flex;
    flex-direction: column;
    background: #e5edef;
    border-radius: 20px;
    height: 100%;
    padding: 0 1em;
    margin: 0 0.5em;
}

.flowchart .wrapper .step .content {
    width: 100%;
    flex: auto;
}

#content .flowchart .wrapper .step .content li {
    margin: 0.25em 0;
}

.flowchart .wrapper .step .arrow {
    color: #007481;
    display: flex;
    justify-content: end;
    padding: 0;
    flex-direction: row;
}

.flowchart .wrapper .step .arrow i {
    font-size: 2em;
    width: 100%;
    text-align: right;
    margin-bottom: 0.375em;
}

.flowchart .wrapper.time .step {
    background-color: #ffffff;
    color: #007481;
    font-weight: bold;
    border: 4px solid #e5edef;
}

.flowchart .wrapper.last .step .arrow,
.flowchart .wrapper.time.last .step .arrow {
    display: none;
}

.flowchart .wrapper.time .step .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.flowchart .wrapper.time .step .content p {
    margin: 0;
    font-size: 1.1em;
    width: 100%;
}

.flowchart .wrapper.time .step .arrow {
    color: #e5edef;
}

.flowchart .wrapper.time .step .timer {
    font-size: 3em;
    margin: 0 0 0.5em 0;
}

#content .flowchart .wrapper .step h3 {
    color: #007481;
    margin: 0.5em 0 0 0;
}



@media only screen and (max-width: 1280px) {
    .flowchart {
        font-size: 0.9em;
    }
    
    .flowchart .wrapper .step {
        padding: 0 1em;
    }
    
    .flowchart .wrapper .step .content {}
    
    .flowchart .wrapper .step .arrow {}
    
    /* if flowchart is on a navigator page, go to two cols here */
    .navigator-page .flowchart .row {
        flex-wrap: wrap;
        margin: 0;
    }
    
    .navigator-page .flowchart .wrapper {
        width: 50%;
        margin: 0.75em 0;
    }
}


/* Using 1024px instead of 767px - 767px too narrow for 4 columns (width: 25%;) */
@media only screen and (max-width: 1024px) {
/*@media only screen and (max-width: 767px) {*/
    .flowchart .row {
        flex-wrap: wrap;
        margin: 0;
    }
    
    .flowchart .wrapper {
        width: 50%;
        margin: 1em 0;
    }
}


/* Using 640px instead of 480px - 480px too narrow for 2 columns (width: 50%;) */
@media only screen and (max-width: 640px) {
/*@media only screen and (max-width: 480px) {*/
    .flowchart {
        margin: 0;
    }
    
    .flowchart .row {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    
    .flowchart .wrapper {
        width: 100%;
        margin: 0;
        border-right: 0;
    }
    
    .flowchart .wrapper .step {
        margin: 0.25em 0;
        height: auto;
    }
    
    .flowchart .wrapper.time .step .content {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
    
    .flowchart .wrapper.time .step .content p {
        margin: 1em 0;
    }
    
    .flowchart .wrapper.time .step .timer {
        font-size: 2em;
        margin: 0 0.25em 0 0;
    }
    
    .flowchart .wrapper .step .arrow {
        justify-content: flex-start;
        padding: 0.5em 0 0 0;
        flex-direction: row;
        
        display: none;
    }
    
    .flowchart .wrapper .step .arrow i {
        text-align: left;
    }
    
    .flowchart .wrapper .step .arrow .fas.fa-arrow-right:before {
        content: "\f063";
    }
    
    /* if flowchart is on a navigator page, go to one col here */
    .navigator-page .flowchart .wrapper {
        width: 100%;
        margin: 0;
        border-right: 0;
        border-bottom: 2px solid #fff;
    }
}