﻿.title {
    font-size: 14px !important;
}

.ui.steps {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 1em 0em;
    background: "";
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 1.14285714em;
    border-radius: 0.28571429rem;
    border: 1px solid rgba(34, 36, 38, 0.55);
}

    /* First Steps */
    .ui.steps:first-child {
        margin-top: 0em;
    }

    /* Last Steps */
    .ui.steps:last-child {
        margin-bottom: 0em;
    }

    /*******************************
           Singular
*******************************/

    .ui.steps .step {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        vertical-align: middle;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0em 0em;
        padding: 1.14285714em 2em;
        background: #ffffff;
        color: rgba(0, 0, 0, 0.87);
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0em;
        border: none;
        border-right: 1px solid rgba(34, 36, 38, 0.55);
        -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
        transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
        transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
        transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
    }

        /* Arrow */
        .ui.steps .step:after {
            display: none;
            position: absolute;
            z-index: 1;
            content: "";
            top: 50%;
            right: 0%;
            border: medium none;
            background-color: #ffffff;
            width: 1.14285714em;
            height: 1.14285714em;
            border-style: solid;
            border-color: rgba(34, 36, 38, 0.55);
            border-width: 0px 1px 1px 0px;
            -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
            transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
            transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
            transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
            -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
            transform: translateY(-50%) translateX(50%) rotate(-45deg);
        }

        /* First Step */
        .ui.steps .step:first-child {
            padding-left: 2em;
            border-radius: 0.28571429rem 0em 0em 0.28571429rem;
        }

        /* Last Step */
        .ui.steps .step:last-child {
            border-radius: 0em 0.28571429rem 0.28571429rem 0em;
        }

        .ui.steps .step:last-child {
            border-right: none;
            margin-right: 0em;
        }

        /* Only Step */
        .ui.steps .step:only-child {
            border-radius: 0.28571429rem;
        }

        /*******************************
            Content
*******************************/

        /* Title */
        .ui.steps .step .title {
            font-family: THSarabunNew;
            font-size: 0.94285714em;
            font-weight: bold;
        }

        .ui.steps .step > .title {
            width: 100%;
        }

        /* Description */
        .ui.steps .step .description {
            font-weight: normal;
            font-size: 0.72857143em;
            color: rgba(0, 0, 0, 0.87);
        }

        .ui.steps .step > .description {
            width: 100%;
        }

        .ui.steps .step .title ~ .description {
            margin-top: 0.25em;
        }

        /* Icon */
        .ui.steps .step > .icon {
            line-height: 1;
            font-size: 2.5em;
            margin: 0em 1rem 0em 0em;
        }

            .ui.steps .step > .icon,
            .ui.steps .step > .icon ~ .content {
                display: block;
                -webkit-box-flex: 0;
                -ms-flex: 0 1 auto;
                flex: 0 1 auto;
                -ms-flex-item-align: middle;
                align-self: middle;
            }

                .ui.steps .step > .icon ~ .content {
                    -webkit-box-flex: 1 0 auto;
                    -ms-flex-positive: 1 0 auto;
                    flex-grow: 1 0 auto;
                }

    /* Horizontal Icon */
    .ui.steps:not(.vertical) .step > .icon {
        width: auto;
    }

    /* Link */
    .ui.steps .link.step,
    .ui.steps a.step {
        cursor: pointer;
    }


        /* Link Hover */
        .ui.steps .link.step:hover::after,
        .ui.steps .link.step:hover,
        .ui.steps a.step:hover::after,
        .ui.steps a.step:hover {
            background: #f9fafb;
            color: rgba(0, 0, 0, 0.8);
        }

        /* Link Down */
        .ui.steps .link.step:active::after,
        .ui.steps .link.step:active,
        .ui.steps a.step:active::after,
        .ui.steps a.step:active {
            background: #f3f4f5;
            color: rgba(0, 0, 0, 0.9);
        }

    /* Active */
    .ui.steps .step.active {
        cursor: auto;
        background: #f3f4f5;
    }

        .ui.steps .step.active:after {
            background: #f3f4f5;
        }

        .ui.steps .step.active .title {
            color: #005fbd;
        }

    .ui.ordered.steps .step.active:before,
    .ui.steps .active.step .icon {
        color: rgba(0, 0, 0, 0.85);
    }

    /* Active Arrow */
    .ui.steps .step:after {
        display: block;
    }

    .ui.steps .active.step:after {
        display: block;
    }

    .ui.steps .step:last-child:after {
        display: none;
    }

    .ui.steps .active.step:last-child:after {
        display: none;
    }

    /* Active Hover */
    .ui.steps .link.active.step:hover::after,
    .ui.steps .link.active.step:hover,
    .ui.steps a.active.step:hover::after,
    .ui.steps a.active.step:hover {
        cursor: pointer;
        background: #dcddde;
        color: rgba(0, 0, 0, 0.87);
    }

    /* Completed */
    .ui.steps .step.completed > .icon:before,
    .ui.ordered.steps .step.completed:before {
        color: #21ba45;
    }

    /* Disabled */
    .ui.steps .disabled.step {
        cursor: auto;
        background: #ffffff;
        pointer-events: none;
    }

        .ui.steps .disabled.step,
        .ui.steps .disabled.step .title,
        .ui.steps .disabled.step .description {
            color: rgba(40, 40, 40, 0.3);
        }

            .ui.steps .disabled.step:after {
                background: #ffffff;
            }
