/*
|--------------------------------------------------------------------------
| MASTER WRAPPER
|--------------------------------------------------------------------------
*/

.pm-master-wrapper {

    width: 100%;

    max-width: 100%;

    margin: 0 auto;

    padding: 20px;

    box-sizing: border-box;

}

/*
|--------------------------------------------------------------------------
| MENU
|--------------------------------------------------------------------------
*/

.pm-master-menu {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 14px;

    margin-bottom: 30px;

}

/*
|--------------------------------------------------------------------------
| BUTTON MENU
|--------------------------------------------------------------------------
*/

.pm-master-menu button {

    padding: 12px 18px;

    border: none;

    border-radius: 8px;

    background: #808080;

    color: #fff;

    cursor: pointer;

    font-size: 15px;

    transition: 0.3s;

}

.pm-master-menu button:hover {

    background: #5f5f5f;

}

.pm-master-menu button.pm-active-menu {

    background: #404040;

}

/*
|--------------------------------------------------------------------------
| FEATURE WRAPPER
|--------------------------------------------------------------------------
*/

.pm-feature-box {

    width: 100%;

    display: block;

}

/*
|--------------------------------------------------------------------------
| GLOBAL BOX
|--------------------------------------------------------------------------
*/

.pm-box {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 0 30px 0;

    box-sizing: border-box;

    padding: 25px;

    border: 1px solid #dcdcdc;

    background: #f9f9f9;

    border-radius: 12px;

}

/*
|--------------------------------------------------------------------------
| GROUP
|--------------------------------------------------------------------------
*/

.pm-group {

    margin-bottom: 18px;

}

/*
|--------------------------------------------------------------------------
| LABEL
|--------------------------------------------------------------------------
*/

.pm-box label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color: #333;

}

/*
|--------------------------------------------------------------------------
| INPUT
|--------------------------------------------------------------------------
*/

.pm-box input,
.pm-box select,
.pm-box textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    border: 1px solid #cfcfcf;

    border-radius: 8px;

    font-size: 16px;

    background: #fff;

    transition: 0.2s;

}

/*
|--------------------------------------------------------------------------
| FOCUS
|--------------------------------------------------------------------------
*/

.pm-box input:focus,
.pm-box select:focus,
.pm-box textarea:focus {

    outline: none;

    border-color: #808080;

    box-shadow:
        0 0 0 3px rgba(128,128,128,0.15);

}

/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.pm-box button,
.pm-button {

    width: 100%;

    padding: 14px;

    border: none;

    border-radius: 8px;

    background: #707070;

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;

}

.pm-box button:hover,
.pm-button:hover {

    background: #505050;

}

/*
|--------------------------------------------------------------------------
| PANAH
|--------------------------------------------------------------------------
*/

.pm-panah {

    text-align: center;

    font-size: 28px;

    margin: 15px 0;

    color: #666;

}

/*
|--------------------------------------------------------------------------
| HASIL
|--------------------------------------------------------------------------
*/

#pm-hasil,
.pm-hasil {

    width: 100%;

    margin-top: 25px;

    background: #fff;

    padding: 20px;

    border-radius: 10px;

    border: 1px solid #e2e2e2;

    box-sizing: border-box;

    overflow-x: auto;

}

/*
|--------------------------------------------------------------------------
| STEP
|--------------------------------------------------------------------------
*/

.pm-step {

    line-height: 1.8;

    color: #333;

}

/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.pm-step h3,
.pm-step h4 {

    margin-top: 0;

    margin-bottom: 10px;

    color: #222;

}

/*
|--------------------------------------------------------------------------
| DETAIL
|--------------------------------------------------------------------------
*/

.pm-step-detail {

    background: #f5f5f5;

    padding: 15px;

    border-radius: 8px;

    margin-top: 10px;

}

/*
|--------------------------------------------------------------------------
| INFO
|--------------------------------------------------------------------------
*/

.pm-info {

    margin-top: 20px;

    padding: 15px;

    border-left: 4px solid #808080;

    background: #f1f1f1;

    border-radius: 6px;

}

/*
|--------------------------------------------------------------------------
| INPUT AREA
|--------------------------------------------------------------------------
*/

.pm-input-area {

    display: flex;

    flex-direction: column;

    gap: 15px;

}

/*
|--------------------------------------------------------------------------
| FIELD
|--------------------------------------------------------------------------
*/

.pm-field {

    width: 100%;

}

/*
|--------------------------------------------------------------------------
| HR
|--------------------------------------------------------------------------
*/

.pm-step hr {

    border: none;

    border-top: 1px solid #ddd;

    margin: 18px 0;

}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .pm-master-wrapper {

        padding: 12px;

    }

    .pm-master-menu {

        gap: 10px;

    }

    .pm-master-menu button {

        width: calc(50% - 10px);

        font-size: 14px;

    }

    .pm-box {

        padding: 16px;

    }

}

/*
|--------------------------------------------------------------------------
| GRID 2 KOLOM
|--------------------------------------------------------------------------
*/

.pm-grid-2 {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}

@media(max-width:768px){

    .pm-grid-2 {

        grid-template-columns: 1fr;

    }

}