/* Compact, optimized icon CSS for the renderer toolkit
   - Base properties for all icons
   - Per-icon background-image declarations only (hover/active use hover variants)
   - Small utility icons have size overrides */

/* ============================================================
   FIX: Override broken toolkit category background-image paths
   from App_Themes/PDPA2017/css/theme.css.
   theme.css uses relative paths (../../images/...) which resolve
   incorrectly to /App_Themes/images/... (404).
   Correct absolute path is /images/default-source/toolkit-images/...
   All rules use !important to guarantee they win over theme.css.
   ============================================================ */

/* Consent */
.xselect-Consent,
.xselect-Consent.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Consent.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Consent:hover,
    .xselect-Consent.active {
        background-image: url('/images/default-source/toolkit-images/icon_Consent_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Consent:disabled:hover,
    .xselect-Consent:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Consent_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* Purpose-Limitation */
.xselect-Purpose-Limitation,
.xselect-Purpose-Limitation.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Purpose-Limitation.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Purpose-Limitation:hover,
    .xselect-Purpose-Limitation.active {
        background-image: url('/images/default-source/toolkit-images/icon_Purpose-Limitation_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Purpose-Limitation:disabled:hover,
    .xselect-Purpose-Limitation:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Purpose-Limitation_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* Notification */
.xselect-Notification,
.xselect-Notification.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Notification.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Notification:hover,
    .xselect-Notification.active {
        background-image: url('/images/default-source/toolkit-images/icon_Notification_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Notification:disabled:hover,
    .xselect-Notification:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Notification_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* Access-Correction */
.xselect-Access-Correction,
.xselect-Access-Correction.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Access-Correction.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Access-Correction:hover,
    .xselect-Access-Correction.active {
        background-image: url('/images/default-source/toolkit-images/icon_Access-Correction_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Access-Correction:disabled:hover,
    .xselect-Access-Correction:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Access-Correction_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* Accuracy */
.xselect-Accuracy,
.xselect-Accuracy.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Accuracy.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Accuracy:hover,
    .xselect-Accuracy.active {
        background-image: url('/images/default-source/toolkit-images/icon_Accuracy_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Accuracy:disabled:hover,
    .xselect-Accuracy:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Accuracy_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* Protection */
.xselect-Protection,
.xselect-Protection.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Protection.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Protection:hover,
    .xselect-Protection.active {
        background-image: url('/images/default-source/toolkit-images/icon_Protection_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Protection:disabled:hover,
    .xselect-Protection:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Protection_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* Retention-Limitation */
.xselect-Retention-Limitation,
.xselect-Retention-Limitation.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Retention-Limitation.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Retention-Limitation:hover,
    .xselect-Retention-Limitation.active {
        background-image: url('/images/default-source/toolkit-images/icon_Retention-Limitation_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Retention-Limitation:disabled:hover,
    .xselect-Retention-Limitation:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Retention-Limitation_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* Transfer-Limitation */
.xselect-Transfer-Limitation,
.xselect-Transfer-Limitation.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Transfer-Limitation.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Transfer-Limitation:hover,
    .xselect-Transfer-Limitation.active {
        background-image: url('/images/default-source/toolkit-images/icon_Transfer-Limitation_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Transfer-Limitation:disabled:hover,
    .xselect-Transfer-Limitation:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Transfer-Limitation_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* Openness */
.xselect-Openness,
.xselect-Openness.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Openness.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Openness:hover,
    .xselect-Openness.active {
        background-image: url('/images/default-source/toolkit-images/icon_Openness_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Openness:disabled:hover,
    .xselect-Openness:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Openness_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* Do-Not-Call */
.xselect-Do-Not-Call,
.xselect-Do-Not-Call.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Do-Not-Call.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Do-Not-Call:hover,
    .xselect-Do-Not-Call.active {
        background-image: url('/images/default-source/toolkit-images/icon_Do-Not-Call_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Do-Not-Call:disabled:hover,
    .xselect-Do-Not-Call:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Do-Not-Call_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* Breach-Notification */
.xselect-Breach-Notification,
.xselect-Breach-Notification.focus,
.xselect-Breach-notification,
.xselect-Breach-notification.focus {
    background-image: url('/images/default-source/toolkit-images/icon_Breach-Notification.png?Status=Master&sfvrsn=0') !important;
}

    .xselect-Breach-Notification:hover,
    .xselect-Breach-Notification.active,
    .xselect-Breach-notification:hover,
    .xselect-Breach-notification.active {
        background-image: url('/images/default-source/toolkit-images/icon_Breach-Notification_hover.png?Status=Master&sfvrsn=0') !important;
    }

    .xselect-Breach-Notification:disabled:hover,
    .xselect-Breach-Notification:disabled,
    .xselect-Breach-notification:disabled:hover,
    .xselect-Breach-notification:disabled {
        background-image: url('/images/default-source/toolkit-images/icon_Breach-Notification_disabled.png?Status=Master&sfvrsn=0') !important;
    }

/* ============================================================
   END path fix overrides
   ============================================================ */

.select1 .btn,
.select1 .btn:hover,
.select1 .btn.active,
.select1 .btn:focus,
.select1 .btn:disabled,
.select1 .btn:disabled:hover {
    padding-top: 56px;
}

/* Base icon pseudo-element */
[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    position: relative;
}

    [class^="icon-"]:before,
    [class*=" icon-"]:before {
        content: "";
        display: inline-block;
        width: 36px;
        height: 26px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% 100%;
        vertical-align: middle;
    }

/* Per-category icons (only background-image differs) */

.icon-openness:before,
.nav-pills > li.active > a .icon-openness:before,
.nav-pills > li > a:hover .icon-openness:before {
    background-image: url('/images/default-source/toolkit-images/icon_openness.png?Status=Master&sfvrsn=0');
}

.icon-consent:before,
.nav-pills > li.active > a .icon-consent:before,
.nav-pills > li > a:hover .icon-consent:before {
    background-image: url('/images/default-source/toolkit-images/icon_consent.png?Status=Master&sfvrsn=0');
}

.icon-notification:before,
.nav-pills > li.active > a .icon-notification:before,
.nav-pills > li > a:hover .icon-notification:before {
    background-image: url('/images/default-source/toolkit-images/icon_notification.png?Status=Master&sfvrsn=0');
}

.icon-accuracy:before,
.nav-pills > li.active > a .icon-accuracy:before,
.nav-pills > li > a:hover .icon-accuracy:before {
    background-image: url('/images/default-source/toolkit-images/icon_accuracy.png?Status=Master&sfvrsn=0');
}

.icon-protection:before,
.nav-pills > li.active > a .icon-protection:before,
.nav-pills > li > a:hover .icon-protection:before {
    background-image: url('/images/default-source/toolkit-images/icon_protection.png?Status=Master&sfvrsn=0');
}

/* Utility / fallback icons */
.icon-home:before {
    width: 18px;
    height: 18px;
    background-image: url('/App_Themes/PDPA2017/images/icons/icon_home.png');
    margin-right: 8px;
}

.icon-info:before {
    width: 18px;
    height: 18px;
    background-image: url('/App_Themes/PDPA2017/images/icons/icon_info.png');
}

#rptCategorySelected li {
    position: relative; /* establish positioning context */
}

    /* Place the arrow at the right edge of the active list item. */
    #rptCategorySelected li .icon-arrow-right {
        position: absolute;
        right: 12px; /* distance from right edge */
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }

    /* Ensure list links have space for the arrow */
    #rptCategorySelected li a {
        display: block;
        padding-right: 44px; /* room for arrow icon */
        white-space: nowrap; /* keep the category text on a single line */
        overflow: visible; /* allow the container to show full text when widened */
        text-overflow: clip; /* do not show ellipsis */
    }

/* Widen the left-side panels so long category titles fit on a single line.
   Keep responsive fallback for small screens. */
.col-md-4 .panel-left {
    /* Keep the panel from forcing the column to expand while allowing
       slightly wider content than default. Limit its maximum width and
       add a right margin to restore the gap between columns. */
    min-width: 0;
    max-width: 360px;
    margin-right: 20px; /* restore gap between left and right panels */
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .col-md-4 .panel-left {
        /* On small screens allow full width stack and remove extra margin */
        max-width: none;
        margin-right: 0;
    }
}

#rptCategorySelected .icon-arrow-right:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-image: url('/App_Themes/PDPA2017/images/icons/icon_arrow_right.png');
    background-size: contain;
    background-repeat: no-repeat;
}

#panelQuestion .col-md-4 {
    padding-right: 0px;
}

.icon-consent,
.icon-purpose-limitation,
.icon-notification,
.icon-access-correction,
.icon-accuracy,
.icon-protection,
.icon-retention-limitation,
.icon-transfer-limitation,
.icon-breach-notification,
.icon-openness,
.icon-do-not-call,
.icon-others,
.icon-general {
    position: relative;
    top: 2px;
    display: inline-block;
    padding-right: 10px;
    vertical-align: middle;
}

    .icon-consent:before,
    .icon-purpose-limitation:before,
    .icon-notification:before,
    .icon-access-correction:before,
    .icon-accuracy:before,
    .icon-protection:before,
    .icon-retention-limitation:before,
    .icon-transfer-limitation:before,
    .icon-breach-notification:before,
    .icon-openness:before,
    .icon-do-not-call:before,
    .icon-others:before,
    .icon-general:before {
        margin-right: 0px;
    }

/* Also target icon pseudo-elements when they appear inside nav-pills links
   (these selectors ensure overrides win over theme rules that use
   .nav-pills > li > a .icon-...:before). */
.nav-pills > li a [class^="icon-"]:before,
.nav-pills > li a [class*=" icon-"]:before {
    margin-right: 0 !important;
}

.icon-info {
    top: -2px;
}

.icon-arrow-right:before {
    /* reset legacy offsets so positioned arrow displays correctly in lists */
    position: static;
    top: auto;
    right: auto;
    height: 12px; /* match the small arrow used in the list */
}

.icon-feedback,
.icon-feedback:before {
    content: url('/App_Themes/PDPA2017/images/icons/icon_feedback.png');
}

a:focus {
    outline: none;
}

#aspnetcore-widget-container-toolkitadmin-categories .customForm,
#aspnetcore-widget-container-toolkitadmin-questions .customForm {
    border: none;
}

a.sfCancel {
    padding-left: 16px;
    color: #fff;
}

    a.sfCancel:hover,
    a.sfCancel:focus {
        color: #fff;
    }

.editor-container {
    border: 0px !important;
}

.modal-content {
    padding: 10px;
}

span.input-group-addon {
    display: none;
}

/* DNTCaptcha refresh button — rendered as an empty <a> by the tag helper.
   Inject a Font Awesome 5 sync icon via ::before (FA5 solid is loaded by the layout). */
a.dnt-captcha-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0px solid #fff;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none !important;
    color: #555;
    margin-left: 6px;
}

    a.dnt-captcha-refresh::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f021"; /* fa-sync */
        font-size: 14px;
        color: #555;
        display: block;
    }

    a.dnt-captcha-refresh:hover {
        background: #f0f0f0;
    }

        a.dnt-captcha-refresh:hover::before {
            color: #333;
        }

#DNTCaptchaInputText {
    border-radius: 0px;
}

#dntCaptchaImg,
#dntCaptchaImgUidImg {
    height: 89px;
}

.dntCaptcha span[data-valmsg-for="DNTCaptchaInputText"],
span.text-danger[data-valmsg-for="DNTCaptchaInputText"] {
    display: none !important;
}

#rptCategorySelected li a,
#rptCategoryCompleted li a {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.modal-guide .carousel-control {
    width: 20px;
}

/* Layout for document items: textarea + remove button on one row */
#rptDocuments .document-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    flex-wrap: nowrap;
    margin-left: 13px;
}

    #rptDocuments .document-item textarea {
        flex: 0 0 calc(100% - 110px);
        min-width: 0;
        box-sizing: border-box;
        height: 114px;
        margin: 0;
        width: auto;
    }

    #rptDocuments .document-item .btn {
        flex: 0 0 110px;
        /* fixed column for the remove button */
        align-self: flex-start;
        margin-left: 10px;
        text-align: left;
    }

    /* Ensure bootstrap .form-control width doesn't force textarea to full width */
    #rptDocuments .document-item textarea.form-control {
        width: auto !important;
        flex: 0 0 calc(100% - 120px) !important;
    }

    #rptDocuments .document-item .btn.red {
        color: #c5182e;
        text-decoration: none;
        text-transform: none;
        font-weight: normal;
    }

#clientRegError {
    color: #ff0000;
}

.results-achieved > div {
    margin-bottom: 30px !important; /* increase as needed */
}

.icon-close:before {
    content: url(/App_Themes/PDPA2017/images/icons/icon_close.png);
}

.dark-link {
    cursor: pointer;
}

.icon-info:before {
    width: 25px !important;
    height: 26px !important;
}