/**
 * Release Date: 2024-11-09 03:45
 */


#mortgage-loan-form {
    max-width: 25rem;
    width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem;
}

#mortgage-loan-form .row {
    display: flex;
    margin-bottom: 10px;
    column-gap: 10px;
}

#mortgage-loan-form .column.box {
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 1rem;
    display: flex;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    position: relative;
}

#mortgage-loan-form .column.box:hover {
    border: 1px solid #c69b00;
}

#mortgage-loan-form .column.box.selected {
    border: 1px solid #007BFF;
    /* Warna border ketika div dipilih */
}

#mortgage-loan-form .check-icon {
    position: absolute;
    top: 0px;
    right: 3px;
    width: 20px;
    height: 20px;
    fill: #007BFF;
    display: none;
    /* Sembunyikan ikon saat tidak dipilih */
}

#mortgage-loan-form .column.box.selected .check-icon {
    display: block;
    /* Tampilkan ikon saat div dipilih */
}

#mortgage-loan-form .column.box.product {
    padding: 5px;
}

#mortgage-loan-form .column {
    padding: 5px 4px;
    /* border: 1px solid #ccc; */
    /* border-radius: 5px; */
    /* background-color: #f9f9f9; */
    flex: 1;
    /* text-align: center; */
}

#mortgage-loan-form .column.header {
    display: flex;
    justify-content: space-between;
}

#mortgage-loan-form .column.title {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.25rem;
}

#mortgage-loan-form .column.input {
    display: flex;
    flex-direction: column;
    column-gap: 10px;
}

#mortgage-loan-form .column .notice {
    color: red;
    display: none;
}

#mortgage-loan-form .column input[type="text"] {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
    text-align: right;
    border: 1px solid #cacaca;
    font-size: medium;
    font-weight: 600;
}

#mortgage-loan-form .column input[type="range"] {
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 0px;
}

#mortgage-loan-form .column.price {
    text-align: right;
    font-size: large;
    font-weight: 600;
}

#mortgage-loan-form .column.note {
    font-size: small;
}

#mortgage-loan-form .column label {
    line-height: 1.7;
}

#mortgage-loan-form .row-1 .column {
    flex: 1;
    /* 1 kolom */
}

#mortgage-loan-form .row-2 {
    column-gap: 10px;
}

#mortgage-loan-form .row-2 .column {
    flex: 1;
    /* 3 kolom */
}

#mortgage-loan-form .row-3 .column {
    flex: 1;
    /* 2 kolom */
}

#mortgage-loan-form .row-4 .column,
#mortgage-loan-form .row-5 .column,
#mortgage-loan-form .row-9 .column {
    flex: 1;
    /* 1 kolom */
}

#mortgage-loan-form .row-6 .column {
    flex: 1;
    /* 2 kolom */
}

#mortgage-loan-form .row-7 .column {
    flex: 1;
    /* 3 kolom */
}

#mortgage-loan-form .row-8 .column {
    flex: 1;
    /* 2 kolom */
}

#mortgage-loan-form .slider-container {
    text-align: center;
    position: relative;
}

#mortgage-loan-form .slider-line {
    position: absolute;
    height: 10px;
    background-color: #4CAF50;
    /* Warna garis */
    border-radius: 5px;
    transition: width 0.2s ease;
    /* Animasi saat mengubah lebar */
}

#mortgage-loan-form .slider {
    -webkit-appearance: none;
    width: 300px;
    height: 10px;
    border-radius: 5px;
    outline: none;
    margin-top: 20px;
    background: linear-gradient(to right, rgb(57 57 57) 0%, rgb(125 125 125) 0%, #ddd 0%, #ddd 100%);
    /* Warna default: hijau hingga abu-abu */
    transition: background 0.2s ease;
    padding: 0;
}

#mortgage-loan-form .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23000000' height='30px' width='30px' version='1.1' id='Icons' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M29,2H3C1.3,2,0,3.3,0,5v16c0,1.7,1.3,3,3,3h26c1.7,0,3-1.3,3-3V5C32,3.3,30.7,2,29,2z M7.7,14.3c0.4,0.4,0.4,1,0,1.4 C7.5,15.9,7.3,16,7,16s-0.5-0.1-0.7-0.3l-2-2c-0.4-0.4-0.4-1,0-1.4l2-2c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L6.4,13L7.7,14.3z M27.7,13.7l-2,2C25.5,15.9,25.3,16,25,16s-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.3-1.3l-1.3-1.3c-0.4-0.4-0.4-1,0-1.4 s1-0.4,1.4,0l2,2C28.1,12.7,28.1,13.3,27.7,13.7z'/%3E%3Ccircle cx='16' cy='28' r='2'/%3E%3Ccircle cx='10' cy='28' r='2'/%3E%3Ccircle cx='22' cy='28' r='2'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    cursor: pointer;
}

#mortgage-loan-form .slider::-moz-range-thumb {
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23000000' height='30px' width='30px' version='1.1' id='Icons' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M29,2H3C1.3,2,0,3.3,0,5v16c0,1.7,1.3,3,3,3h26c1.7,0,3-1.3,3-3V5C32,3.3,30.7,2,29,2z M7.7,14.3c0.4,0.4,0.4,1,0,1.4 C7.5,15.9,7.3,16,7,16s-0.5-0.1-0.7-0.3l-2-2c-0.4-0.4-0.4-1,0-1.4l2-2c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L6.4,13L7.7,14.3z M27.7,13.7l-2,2C25.5,15.9,25.3,16,25,16s-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.3-1.3l-1.3-1.3c-0.4-0.4-0.4-1,0-1.4 s1-0.4,1.4,0l2,2C28.1,12.7,28.1,13.3,27.7,13.7z'/%3E%3Ccircle cx='16' cy='28' r='2'/%3E%3Ccircle cx='10' cy='28' r='2'/%3E%3Ccircle cx='22' cy='28' r='2'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    cursor: pointer;
}

#mortgage-loan-form .slider-value {
    margin-top: 10px;
    font-size: 24px;
}

#mortgage-loan-form .fade-loop {
    animation: fade 1s infinite alternate;
    color: gray !important;
    font-size: unset !important;
}

@keyframes fade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

@media only screen and (max-width: 600px) {

    #mortgage-loan-form .column.box {
        padding: 5px;
        font-size: smaller;
    }

}