﻿

body {
    font-family: 'Poppins', sans-serif;
    background: #fff;
    margin: 0;
    padding: 0;
}

.sdr-form {
    padding: 50px;
}

.sdr-bg img {
    width: 100%;
    height: 100%;
    z-index: -1;
    left: 0;
    top: 25%;
    position: absolute;
}

.sdrtitle {
    font-size: 2.125rem;
    font-weight: 750;
    color: #000;
}

.sdr-title-mid {
    font-size: 1.125rem;
    font-weight: 600;
    color: #000;
}

.sdr-tating-title {
    font-size: .80rem;
    font-weight: 500;
    color: #626262;
    margin-bottom: 10px;
}

.sdr-form-inside {
    border: 1px solid #ececec;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 2px 14px 10px rgb(224 224 224 / 30%);
    padding: 40px 40px;
}

.sdr-main-card {
    position: relative;
}

    .sdr-main-card:nth-child(1):before {
        content: '';
        width: 1px;
        height: 100%;
        background: #e7e7e780;
        position: absolute;
        right: 50%;
        margin-right: -20px;
    }
/*.sdr-form-inside .col-md-6.top:nth-child(2) {padding-left: 60px;}
.row.toggle-grid .col-md-6:nth-child(1):before {width: 0;}*/
.row.toggle-grid .col-md-6 {
    padding-bottom: 10px;
}



.slider-container {
    width: 98%;
}

    .slider-container input {
        position: relative;
    }

.sdr-rating-card input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 18px;
    border-radius: 20px;
    background: #e0e0e0;
    outline: none;
}

    .sdr-rating-card input[type=range]::-webkit-slider-runnable-track {
        height: 12px;
        border-radius: 6px;
    }

    .sdr-rating-card input[type=range]::-moz-range-track {
        height: 12px;
        border-radius: 6px;
    }

    .sdr-rating-card input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        cursor: pointer;
        margin-top: -8px;
        border: 7px solid transparent;
        background: linear-gradient(#0A5A94, #3AADFF) border-box;
        background-clip: border-box;
        box-sizing: border-box;
        box-shadow: inset 0 0 0 200px #fff;
    }

.numbers {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 14px;
    color: #aaa;
    padding: 0 5px;
}

    .numbers span.active {
        font-weight: bold;
        color: #0A5A94;
    }



.icon-container {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 120px;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    height: 90px;
    margin-bottom: 10px;
    margin-right: 5px;
}

.icon-checkbox {
    display: none;
}

.custom-checkbox {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

    .custom-checkbox::after {
        content: "";
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        background: url(../img/SDRForm/tick.png) no-repeat center center;
        background-size: contain;
    }

.icon-checkbox:checked + .custom-checkbox::after {
    display: block;
}

.icon-label-wrapper {
    display: block;
    cursor: pointer;
}

    .icon-label-wrapper img {
        width: 40px;
        display: block;
        margin: 10px auto;
        margin-top: 15px;
    }

.icon-label {
    margin-top: 5px;
    font-size: 11px;
    color: #000;
    font-weight: 600;
}




.toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border: 1px solid #e1e1e1;
    border-radius: 30px;
    background-color: white;
    cursor: pointer;
    transition: 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

    .toggle-container input[type="checkbox"],
    .toggle-container input[type="radio"] {
        display: none;
    }

.toggle-label {
    font-weight: 600;
    color: #1a1447;
    font-size: 0.85rem;
}

.toggle-circle {
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background-color: white;
    position: relative;
    transition: all 0.3s ease;
}

.toggle-container input:checked + .toggle-label + .toggle-circle {
    border-color: #0056b3;
}

    .toggle-container input:checked + .toggle-label + .toggle-circle::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 10px;
        height: 10px;
        background-color: #0056b3;
        border-radius: 50%;
    }



.custom-radio input[type="radio"] {
    display: none;
}

.custom-radio label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    color: #666666;
    font-size: 16px;
    user-select: none;
}

    .custom-radio label:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        border: 1px solid #b2b2b2;
        border-radius: 50%;
        background: #fff;
    }

.custom-radio input[type="radio"]:checked + label:after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background: #0A5A94;
    border-radius: 50%;
}

.custom-radio input[type="radio"]:checked + label {
    font-weight: 700;
}

.custom-input-field {
    display: none;
    margin-top: 30px;
}

    .custom-input-field .form-control {
        height: 48px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 7px 3px rgb(234 234 234 / 34%);
    }

.user-info {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 50px;
}

    .user-info label {
        font-size: 0.90rem;
        font-weight: 600;
        color: #000;
    }

.sdr-user-details {
    height: 48px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 7px 3px rgb(234 234 234 / 34%);
}

    .sdr-user-details:focus {
        box-shadow: none;
    }

.sdr-btn-custom {
    display: block;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #0A5A94, #1172C2);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin: 0 0 0 auto;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(10, 90, 148, 0.3);
}

    .sdr-btn-custom:hover {
        background: linear-gradient(135deg, #1172C2, #0A5A94);
        box-shadow: 0 6px 14px rgba(10, 90, 148, 0.45);
        transform: translateY(-2px);
    }

    .sdr-btn-custom:active {
        transform: translateY(0);
        box-shadow: 0 3px 8px rgba(10, 90, 148, 0.25);
    }

    .sdr-btn-custom:focus {
        outline: none;
    }

.sdr-options {
    padding-left: 50px;
}

@media (max-width: 767px) {


    .sdrtitle {
        font-size: 1.50rem;
        text-align: center;
    }

    .slider-container {
        width: 100%
    }

    .sdr-form {
        padding: 20px 20px;
    }

    .icon-label-wrapper img {
        width: 50px;
    }

    .icon-container {
        margin-right: 25px;
    }

    .container-sm, .container {
        max-width: 100%;
    }

    .sdr-form-inside .col-md-6:nth-child(2) {
        padding-left: 0px;
    }

    .user-info label {
        padding-top: 20px;
    }

    .sdr-btn-custom {
        margin: 0 auto;
    }
}


