/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Crypto Admin - Responsive Admin Template
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1. Body, layout
2. Header
3. Sidebar
4. Form-element and progress bar
5. Box
6. User card
7. tab
8. google map
9. wizard
10. weather
11. Chat and info-box
12. timeline
13. Button
14. callout
15. tab
16. pagination
17. data table
18. direct-chat
19. modal
20. widget
21. treevie
22. mailbox
23. lockscreen
24. login-box
25. social btn
26. color Skin

-------------------------------------------------------------------*/


/******************* 
import icon and fonts Styles 
*******************/
@import url(font-awesome/css/font-awesome.css);
@import url(Ionicons/css/ionicons.css);
@import url(themify-icons/themify-icons.css);
@import url(linea-icons/linea.css);
@import url(glyphicons/glyphicon.css);
@import url(google-icons/style.css);
@import url(flag-icon/css/flag-icon.css);
@import url(material-design-iconic-font/css/materialdesignicons.css);
@import url(simple-line-icons-master/css/simple-line-icons.css);
@import url(cryptocoins-master/webfont/cryptocoins.css);
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

/*------------------------------------------------------------------

[Typography]

Body :		Poppins, sans-serif;
-------------------------------------------------------------------*/

/*Body, layout*/

/* Viriyah corporate fonts (REQ-Consent-052) — เลือกต่อ consent form ผ่าน font_family; apply ที่การ์ด .cf-card */
@font-face {
    font-family: 'DB Adman X';
    src: url('/fonts/viriyah/DBAdmanX.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Sathorn X';
    src: url('/fonts/viriyah/DBSathornX.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB Sathorn X';
    src: url('/fonts/viriyah/DBSathornX-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB ThaiText X';
    src: url('/fonts/viriyah/DBThaiTextX.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DB ThaiText X';
    src: url('/fonts/viriyah/DBThaiTextX-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Easy';
    src: url('/fonts/viriyah/Easy.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: url('../fonts/kanit/Kanit-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Black.woff2') format('woff2'), url('../fonts/prompt/Prompt-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Black.woff2') format('woff2'), url('../fonts/prompt/Prompt-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-BlackItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Bold.woff2') format('woff2'), url('../fonts/prompt/Prompt-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-BoldItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Bold.woff2') format('woff2'), url('../fonts/prompt/Prompt-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-BoldItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-BlackItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-ExtraBold.woff2') format('woff2'), url('../fonts/prompt/Prompt-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-ExtraBoldItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-ExtraLight.woff2') format('woff2'), url('../fonts/prompt/Prompt-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-ExtraBold.woff2') format('woff2'), url('../fonts/prompt/Prompt-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-ExtraLight.woff2') format('woff2'), url('../fonts/prompt/Prompt-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-ExtraBoldItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-ExtraLightItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-LightItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Light.woff2') format('woff2'), url('../fonts/prompt/Prompt-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Italic.woff2') format('woff2'), url('../fonts/prompt/Prompt-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Light.woff2') format('woff2'), url('../fonts/prompt/Prompt-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-ExtraLightItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Italic.woff2') format('woff2'), url('../fonts/prompt/Prompt-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Medium.woff2') format('woff2'), url('../fonts/prompt/Prompt-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Regular.woff2') format('woff2'), url('../fonts/prompt/Prompt-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-LightItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-MediumItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Regular.woff2') format('woff2'), url('../fonts/prompt/Prompt-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-SemiBold.woff2') format('woff2'), url('../fonts/prompt/Prompt-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-MediumItalic.woff2') format('woff2'), url('../fonts/prompt/Prompt-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-Medium.woff2') format('woff2'), url('../fonts/prompt/Prompt-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Prompt';
    src: url('../fonts/prompt/Prompt-SemiBold.woff2') format('woff2'), url('../fonts/prompt/Prompt-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* ===============================
   Noto Sans Thai Looped (TTF)
   =============================== */

/* Thin – 100 */
@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('/fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* ExtraLight – 200 */
@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('/fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Light – 300 */
@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('/fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Regular – 400 */
@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('/fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium – 500 */
@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('/fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* SemiBold – 600 */
@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('/fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Bold – 700 */
@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('/fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ExtraBold – 800 */
@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('/fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Black – 900 */
@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('/fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ===============================
   Noto Sans Thai  (TTF)
   =============================== */

/* Thin – 100 */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/Noto_Sans_Thai/static/NotoSansThai-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* ExtraLight – 200 */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/Noto_Sans_Thai/static/NotoSansThai-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Light – 300 */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/Noto_Sans_Thai/static/NotoSansThai-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Regular – 400 */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/Noto_Sans_Thai/static/NotoSansThai-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium – 500 */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/Noto_Sans_Thai/static/NotoSansThai-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* SemiBold – 600 */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/Noto_Sans_Thai/static/NotoSansThai-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Bold – 700 */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/Noto_Sans_Thai/static/NotoSansThai-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ExtraBold – 800 */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/Noto_Sans_Thai/static/NotoSansThai-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Black – 900 */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('/fonts/Noto_Sans_Thai/static/NotoSansThai-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.layout-boxed body, .layout-boxed html, .wrapper, body, html {
    height: 100%;
    font-family: 'Noto Sans Thai' !important;
}

.wrapper, body {
    overflow-x: hidden;
    overflow-y: auto;
}

.h1, .h2, .h3, .h4, .h5, .h6, body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans Thai', sans-serif;
    line-height: 1.5;
    font-display: swap;
}

    h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
        font-size: 65%;
    }

.btn.uppercase, .fc th.fc-widget-header, .fc-toolbar h2, .info-box-text, .flex-column > li.header {
    text-transform: uppercase;
}

.box-body:after, .box-footer:after, .box-header:after, .chat .item:after, .chat .item > .attachment:after, .contacts-list > li:after, .control-sidebar-menu > li > a:after, .direct-chat-msg:after, .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after, .navbar-nav > .user-menu > .dropdown-menu > .user-body:after, .navbar-nav > .user-menu > .dropdown-menu > .user-footer:after, .products-list > .item:after, .timeline > li:after, .user-block:after, .user-panel:after, .wrapper:after {
    clear: both;
}

body {
    /*font-weight: 500;*/
    font-size: small;
    color: rgba(0, 0, 0, 0.72);
}

h1, h2, h3, h4, h5, h6 {
    /*color: #455a64;*/
    color: rgba(0, 0, 0, 0.82);
    font-weight: 500;
}

h4, .h4, h5, .h5, h6, .h6 {
    margin-bottom: 10px;
}

h1 {
    line-height: 30px;
    font-size: 32px;
}
/* กันขอบ/เงาโฟกัสโผล่ตอนคลิกเมาส์ — ปุ่ม copy เป็น icon link ไม่ใช่ปุ่มกระทำ */
h2 {
    line-height: 36px;
    font-size: 24px;
}

h3 {
    line-height: 30px;
    font-size: 21px;
}

h4 {
    line-height: 22px;
    font-size: 18px;
    font-weight: 500;
}

h5 {
    line-height: 18px;
    font-size: 16px;
    font-weight: 400;
}

h6 {
    line-height: 16px;
    font-size: 14px;
    font-weight: 300;
}

time {
    font-size: 12px;
    color: #929daf;
}

img {
    max-width: 100%;
}

.img-fluid {
    width: 100%;
}

.wrapper {
    position: relative;
}

.fixed .wrapper, .main-header .logo, .user-panel {
    overflow: hidden;
}

.wrapper:after, .wrapper:before {
    content: " ";
    display: table;
}

.layout-boxed .wrapper {
    max-width: 1250px;
    margin: 0 auto;
    min-height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
    position: relative;
}

.layout-boxed {
    background: url(../../images/boxed-bg.png) fixed;
}

.content-wrapper, .main-footer {
    -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out, margin .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out, margin .3s ease-in-out;
    transition: transform .3s ease-in-out, margin .3s ease-in-out;
    margin-left: 266px;
    z-index: 820;
}

.layout-top-nav .content-wrapper, .layout-top-nav .main-footer {
    margin-left: 0;
}

@media (min-width:768px) {
    .sidebar-collapse .content-wrapper, .sidebar-collapse .main-footer {
        margin-left: 0;
    }
}

.content-wrapper {
    min-height: 100%;
    background-color: #FAFAFA;
    z-index: 800;
    padding-top: 0px;
}

.main-footer {
    background: #F0F0F0;
    padding: 15px;
    height: 4em;
    color: #455a64;
    border-top: 1px solid #d2d6de;
    bottom: 0;
    /* เดิม width:100vw ทำให้ footer กว้างเท่า viewport ทั้งที่มี margin-left → ล้นขวา/เหลื่อมตอน scroll
       ใช้ auto ให้ footer เต็มพื้นที่ที่เหลือหลังหัก margin (ตรงกับ content-wrapper) */
    width: auto;
}

    .main-footer .nav {
        margin-top: -10px;
    }

.fixed .left-side, .fixed .main-header, .fixed .main-sidebar {
    position: fixed;
    z-index: 1;
}

.fixed .main-header {
    top: 0;
    right: 0;
    left: 0;
}

.fixed .content-wrapper, .fixed .right-side {
    padding-top: 50px;
}

@media (max-width:767px) {
    .content-wrapper, .main-footer {
        margin-left: 0;
    }

    .sidebar-open .content-wrapper, .sidebar-open .main-footer {
        -webkit-transform: translate(266px, 0);
        -ms-transform: translate(266px, 0);
        -o-transform: translate(266px, 0);
        transform: translate(266px, 0);
    }

    .fixed .content-wrapper, .fixed .right-side {
        padding-top: 100px;
    }
}

.fixed.layout-boxed .wrapper {
    max-width: 100%
}

.hold-transition .content-wrapper, .hold-transition .left-side, .hold-transition .main-footer, .hold-transition .main-header .logo, .hold-transition .main-header .navbar, .hold-transition .main-sidebar, .hold-transition .menu-open .fa-angle-left, .hold-transition .right-side {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.sidebar-collapse section.content {
    margin-top: 5em;
}

.content {
    min-height: 250px;
    padding: 30px 0px;
    margin-right: 30px;
    margin-left: 30px;
}

a {
    color: rgba(0, 0, 0, 0.82);
}

    a:active, a:focus, a:hover {
        outline: 0;
        text-decoration: none;
        color: #398bf7;
    }

/*Header*/
.page-header {
    margin: 0px 0 20px;
    padding-bottom: 9px;
    border-bottom: 1px solid #eee;
}

    .page-header > small {
        color: #67757c;
        display: block;
        margin-top: 5px;
    }

.main-header {
    /*position: relative;*/
    max-height: none;
    z-index: 999;
    color: #10A377;
}

    .main-header .navbar {
        -webkit-transition: margin-left .3s ease-in-out;
        -o-transition: margin-left .3s ease-in-out;
        transition: margin-left .3s ease-in-out;
        margin-bottom: 0;
        /* position: fixed;*/
        left: 0;
        right: 0;
        margin-left: 20em;
    }

.layout-top-nav .main-header .navbar {
    margin-left: 0;
}

.main-header #navbar-search-input.form-control {
    background: rgba(255, 255, 255, .2);
    border-color: transparent;
}

    .main-header #navbar-search-input.form-control:active, .main-header #navbar-search-input.form-control:focus {
        border-color: rgba(0, 0, 0, .1);
        background: rgba(255, 255, 255, .9);
    }

    .main-header #navbar-search-input.form-control::-moz-placeholder {
        color: #ccc;
        opacity: 1;
    }

    .main-header #navbar-search-input.form-control:-ms-input-placeholder {
        color: #ccc;
    }

    .main-header #navbar-search-input.form-control::-webkit-input-placeholder {
        color: #ccc;
    }

.main-header .navbar-custom-menu, .main-header .navbar-right {
    float: right;
}

@media (max-width:767px) {
    .main-header .navbar-right {
        float: none;
    }

    .navbar-collapse .main-header .navbar-right {
        margin: 7.5px -15px;
    }

    .main-header .navbar-right > li {
        color: inherit;
        border: 0;
    }
}

.main-header .navbar-brand, .main-header .sidebar-toggle:hover {
    color: #0b8f67;
}

.main-header .sidebar-toggle {
    background-color: #f7f7f7;
    background-image: none;
    padding: 20px;
    font-family: fontAwesome;
    text-align: right;
}

    .main-header .sidebar-toggle:before {
        content: "\f18e"
    }

@media (min-width: 768px) {
    .main-header .sidebar-toggle {
        display: none !important;
    }
}

.main-header .sidebar-toggle:active, .main-header .sidebar-toggle:focus {
    background: 0 0;
}

.main-header .sidebar-toggle .icon-bar {
    display: none;
}

.main-header .navbar .nav > li.user > a > .fa, .main-header .navbar .nav > li.user > a > .glyphicon, .main-header .navbar .nav > li.user > a > .ion {
    margin-right: 5px;
}

.main-header .navbar .nav > li > a > .label {
    position: absolute;
    top: 9px;
    margin-left: 7px;
    text-align: center;
    font-size: 8px;
    padding: 2px 3px;
    line-height: 12px;
    width: 15px;
    height: 15px;
    border-radius: 0;
    font-weight: 300;
    display: grid;
}

.main-header .logo {
    -webkit-transition: width .3s ease-in-out;
    -o-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    display: block;
    float: left;
    height: 60px;
    font-size: 20px;
    line-height: 60px;
    text-align: left;
    width: 266px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0 15px;
    font-weight: 300;
}

    .main-header .logo .logo-lg {
        line-height: 60px;
        display: inline-block;
        padding-left: 5px;
    }

    .main-header .logo .logo-mini {
        line-height: 60px;
        display: inline-block;
    }

@media (min-width: 767px) {
    .main-header .logo {
        display: none;
    }
}

.main-header .logo .logo-mini .dark-logo, .main-header .logo .logo-lg .dark-logo {
    display: none;
}

.skin-black .main-header .logo .logo-mini .dark-logo, .skin-black .main-header .logo .logo-lg .dark-logo {
    display: block;
}

.skin-black .main-header .logo .logo-mini .light-logo, .skin-black .main-header .logo .logo-lg .light-logo {
    display: none;
}

.content-header {
    display: none;
    /* padding: 0.6rem;
    padding-left: 40px;
    padding-right: 40px;*/
    padding: 0.6rem 2.5rem;
    width: 99.5%;
    margin: 0px 0px 0px 0px;
    border-radius: 0px;
    border-bottom: 1px solid #d2d6de;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .content-header > h1,
    .content-header > .container > h1 {
        margin: 0 0 0px;
        font-size: 16px;
        font-weight: 600;
        color: #000000e0;
        gap: 2px;
        display: flex;
        align-items: center;
    }

    .content-header > .container > h1 {
        display: inline-block;
    }

        .content-header > h1 > small,
        .content-header > .container > h1 > small {
            font-size: 15px;
            display: inline-block;
            padding-left: 4px;
            font-weight: 300;
        }

    .content-header > .breadcrumb,
    .content-header > .container > .breadcrumb {
        background: 0 0;
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        padding: 2px 10px 0px 0px;
        top: 14px;
        right: 20px;
        border-radius: 2px;
    }

    .content-header > .container > .breadcrumb {
        position: relative;
        top: 0;
    }

        .content-header > .breadcrumb > li > a,
        .content-header > .container > .breadcrumb > li > a {
            color: #A6A2A2;
            font-weight: 400;
            text-decoration: none;
            display: inline-block;
        }

            .content-header > .breadcrumb > li > a > .fa,
            .content-header > .breadcrumb > li > a > .glyphicon,
            .content-header > .breadcrumb > li > a > .ion,
            .content-header > .container > .breadcrumb > li > a > .fa,
            .content-header > .container > .breadcrumb > li > a > .glyphicon,
            .content-header > .container > .breadcrumb > li > a > .ion {
                margin-right: 5px;
            }

        .content-header > .breadcrumb > li + li:before,
        .content-header > .container > .breadcrumb > li + li:before {
            content: '/';
            padding: 0 13px;
        }

@media (max-width:991px) {

    .content-header > .breadcrumb,
    .content-header > .container > .breadcrumb {
        position: relative;
        margin-top: 5px;
        top: 0;
        right: 0;
        float: none;
        padding-left: 10px;
    }

        .content-header > .breadcrumb li:before,
        .content-header > .container > .breadcrumb li:before {
            color: #97a0b3;
        }

    .navbar-custom-menu .navbar-nav > li {
        float: left;
    }

    .navbar-custom-menu .navbar-nav {
        margin: 0;
        float: left;
    }

        .navbar-custom-menu .navbar-nav > li > a {
            padding-top: 15px;
            padding-bottom: 15px;
            line-height: 20px;
        }
}

.navbar-toggle {
    color: #fff;
    border: 0;
    margin: 0;
    padding: 15px;
}

@media (max-width:767px) {
    .main-header {
        position: relative;
    }

        .main-header .logo,
        .main-header .navbar {
            width: 100%;
            float: none;
        }

        .main-header .navbar {
            margin: 0;
        }

        .main-header .logo {
            text-align: center;
        }

        .main-header .navbar-custom-menu {
            float: right;
        }
}

@media (max-width:991px) {
    .navbar-collapse.pull-left {
        float: none;
    }

        .navbar-collapse.pull-left + .navbar-custom-menu {
            display: block;
            position: absolute;
            top: 0;
            right: 40px;
        }
}
/*sidebar*/
.main-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 266px;
    z-index: 1;
    -webkit-transition: -webkit-transform .3s ease-in-out, width .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out, width .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out, width .3s ease-in-out;
    transition: transform .3s ease-in-out, width .3s ease-in-out;
}

@media (max-width: 767px) {
    .main-sidebar {
        top: 4em;
    }
}

.main-sidebar .sidebar-footer {
    background: #f2f6f8;
}

.sidebar-footer {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    transition: .2s ease-out;
    width: 266px;
    background: #fff;
    border-top: 1px solid rgba(120, 130, 140, .13);
}

.layout-boxed .sidebar-footer {
    position: absolute;
}

.sidebar-footer a {
    padding: 12px;
    width: 33.333337%;
    float: left;
    text-align: center;
    font-size: 18px;
}

@media (max-width:767px) {
    .main-sidebar {
        top: 0;
        -webkit-transform: translate(-266px, 0);
        -ms-transform: translate(-266px, 0);
        -o-transform: translate(-266px, 0);
        transform: translate(-266px, 0);
    }

    .main-sidebar {
        z-index: 810;
    }
}

@media (min-width:768px) {
    .sidebar-collapse .main-sidebar {
        -webkit-transform: translate(-266px, 0);
        -ms-transform: translate(-266px, 0);
        -o-transform: translate(-266px, 0);
        transform: translate(-266px, 0);
    }

    .sidebar-collapse .sidebar-footer {
        display: none;
    }
}

@media (max-width:767px) {
    .sidebar-open .main-sidebar {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        top: 4em;
    }

    .sidebar {
        margin-top: 1em;
    }
}

.sidebar-form input:focus {
    border-color: transparent;
}

.user-panel {
    position: center;
    width: 100%;
}

    .user-panel:after, .user-panel:before {
        content: " ";
        display: table;
    }

    .user-panel > .image > img {
        width: 100%;
        max-width: 35%;
        height: auto;
        margin: 0 auto;
        display: block;
        padding: 15px;
    }

.sidebar-collapse .user-panel > .image > img {
    max-width: 60px;
    margin: 0 0px;
}

.user-panel > .info {
    padding: 15px 5px 5px 5px;
    line-height: 1;
    margin: 0 auto;
    text-align: center;
}

    .user-panel > .info > p {
        font-weight: 500;
        margin-bottom: 9px;
    }

    .user-panel > .info > a {
        font-size: 14px;
        padding: 5px 10px;
        display: inline-block;
    }

        .user-panel > .info > a > .fa, .user-panel > .info > a > .glyphicon, .user-panel > .info > a > .ion {
            margin-right: 3px;
        }

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0px 0 0 0px;
}

    .sidebar-menu > li {
        position: relative;
        margin: 0;
        padding: 0;
    }

    .sidebar-menu li.nav-devider {
        position: absolute;
        width: 24px;
        height: 1px;
        left: 20px;
        background: rgba(255, 255, 255, 0.48);
    }

    .sidebar-menu > li > a {
        padding: 5px 2px 5px 20px;
        display: block;
    }

        .sidebar-menu > li > a > .fa, .sidebar-menu > li > a > .glyphicon, .sidebar-menu > li > a > .ion, .sidebar-menu > li > a > i {
            width: 40px;
            color: #444A52;
            opacity: 0.8;
            font-size: 22px;
            display: inline-block;
            vertical-align: middle;
            padding-left: 0;
            /* margin-right: 10px; */
            line-height: 43px;
            text-align: center;
            border-radius: 100px;
        }

    .sidebar-menu > li .badge, .sidebar-menu > li .label {
        margin-right: 5px;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        line-height: 16px;
        text-align: center;
        font-weight: 300;
    }

    .sidebar-menu > li .badge {
        margin-top: 3px;
    }

    .sidebar-menu li.header {
        padding: 20px 25px 10px 15px;
        font-size: 12px;
        font-weight: 500;
    }

    .sidebar-menu li > a > .fa-angle-right, .sidebar-menu li > a > .pull-right-container > .fa-angle-right {
        width: auto;
        height: auto;
        padding: 0;
        margin-right: 10px;
        -webkit-transition: transform .5s ease;
        -o-transition: transform .5s ease;
        transition: transform .5s ease;
    }

    .sidebar-menu li > a > .fa-angle-right {
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -8px;
    }

    .sidebar-menu .menu-open > a > .fa-angle-right, .sidebar-menu .menu-open > a > .pull-right-container > .fa-angle-right {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .sidebar-menu .active > .treeview-menu {
        display: block;
    }

@media (min-width:768px) {
    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer, .sidebar-mini.sidebar-collapse .right-side {
        margin-left: 6em;
        z-index: 840;
    }

    .sidebar-mini.sidebar-collapse .main-sidebar {
        top: 0;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        width: 6em;
        z-index: 1;
        position: absolute;
        height: 100vh;
        border-right: 1px solid #EDEEF0;
        background-image: linear-gradient( to right, rgba(0,0,0,0.04), rgba(0,0,0,0.08), rgba(0,0,0,0.04) );
        background-repeat: no-repeat;
        background-size: 100% 1px;
        background-position: bottom;
    }

    .sidebar-mini.sidebar-collapse .sidebar-menu > li {
        position: relative;
    }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
            margin-right: 0;
        }

            .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
                border-top-right-radius: 4px;
            }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
            border-bottom-right-radius: 4px;
        }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
            padding-top: 0px;
            padding-bottom: 0px;
            border-bottom-right-radius: 4px;
        }

        .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .ulogo, .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info, .sidebar-mini.sidebar-collapse .sidebar-form, .sidebar-mini.sidebar-collapse .sidebar-menu li.header, .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
            display: none;
            -webkit-transform: translateZ(0);
        }

    .sidebar-mini.sidebar-collapse .main-header .logo {
        width: 60px;
        text-align: center;
    }

        .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
            display: block;
            margin-left: -15px;
            margin-right: -15px;
            font-size: 18px;
        }

        .sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
            display: none;
        }

    .sidebar-mini.sidebar-collapse .main-header .navbar {
        margin-left: 6em;
        position: fixed;
        width: auto;
        top: 0;
        z-index: 100;
        /* แสดงสี header ตามสี theme จริง (คงที่ตอนเลื่อน) ถ้าไม่ได้ตั้ง theme → กระจกขาวโปร่ง 72% เดิม */
        background: var(--danger-header-background, rgba(255,255,255,0.72)) !important;
        backdrop-filter: blur(10px) saturate(1.2);
        -webkit-backdrop-filter: blur(10px) saturate(1.2);
        border-bottom: 1px solid #EDEEF0;
        box-shadow: none;
        transition: box-shadow .22s ease, border-bottom-color .22s ease, background .22s ease, backdrop-filter .22s ease;
        will-change: box-shadow, background;
    }


    .sidebar-collapse .sidebar-menu > li > .treeview-menu {
        margin-left: 0px !important;
    }

    .control-sidebar-open .content-wrapper, .control-sidebar-open .main-footer, .control-sidebar-open .right-side {
        margin-right: 266px;
    }
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    display: block !important;
    position: absolute;
    width: 20.5em;
    left: 5.5em;
    padding-left: 1em;
}

.main-sidebar > section > ul > li > a {
    transition: 0s ease-in-out;
}

    .main-sidebar > section > ul > li > a > span {
        width: 19.15em !important;
    }

.main-sidebar > section > ul > li > ul > li > a:last-child {
    border-bottom-right-radius: 4px;
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > span {
    top: 0;
    background-color: inherit;
    padding-top: 15px;
    padding-bottom: 15px;
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
    position: relative !important;
    float: right;
    width: auto !important;
    left: 180px !important;
    top: -40px !important;
    z-index: 900;
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li.user-profile:hover > a > .pull-right-container {
    top: -35px !important;
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container > .label:not(:first-of-type) {
    display: none;
}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    top: 3.9em;
    margin-left: 5em !important;
    width: 21.5em !important;
    left: 0;
    padding-left: 0;
}

.sidebar-expanded-on-hover .content-wrapper, .sidebar-expanded-on-hover .main-footer {
    margin-left: 50px;
}

.sidebar-expanded-on-hover .main-sidebar {
    box-shadow: 3px 0 8px rgba(0, 0, 0, .125);
}

.user-panel .ulogo {
    text-align: center;
    padding-bottom: 5px;
    font-size: 18px;
    color: #455a64;
}

    .user-panel .ulogo a b {
        font-weight: bold;
    }

    .user-panel .ulogo a {
        font-weight: 300;
    }

        .user-panel .ulogo a:hover {
            opacity: 0.5;
        }

.main-sidebar .user-panel, .sidebar-menu, .sidebar-menu > li.header {
    /* white-space: nowrap; */
    overflow: hidden;
    background-color: #fff;
}

.sidebar-collapse .sidebar-menu.tree {
    padding: 0;
}

.sidebar-menu:hover {
    overflow: visible;
}

.sidebar-form {
    float: left;
    margin: 20px 10px 10px;
}

.sidebar-form, .sidebar-menu > li.header {
    overflow: hidden;
    text-overflow: clip;
}

.sidebar-menu li > a {
    position: relative;
    font-weight: 300;
}

.nav-tabs.control-sidebar-tabs > li > a, .sidebar-collapse .sidebar-menu > li.active > a, .sidebar-collapse .sidebar-menu > li.menu-open > a, .sidebar-collapse .sidebar-menu > li:hover > a {
    border-radius: 0;
}

.sidebar-menu li > a > .pull-right-container {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
}

.control-sidebar-bg {
    position: fixed;
    z-index: 1000;
    bottom: 0;
}

.control-sidebar, .control-sidebar-bg {
    top: 0;
    right: -266px;
    width: 266px;
    -webkit-transition: right .3s ease-in-out;
    -o-transition: right .3s ease-in-out;
    transition: right .3s ease-in-out;
}

.control-sidebar {
    position: absolute;
    padding-top: 60px;
    z-index: 1010;
}

@media (max-width:767px) {
    .control-sidebar {
        padding-top: 120px;
    }

    .nav-tabs.control-sidebar-tabs > li {
        display: table-cell;
    }
}

.control-sidebar > .tab-content {
    padding: 10px 15px;
}

.control-sidebar-open .control-sidebar, .control-sidebar-open .control-sidebar-bg, .control-sidebar.control-sidebar-open, .control-sidebar.control-sidebar-open + .control-sidebar-bg {
    right: 0;
}

.fixed .control-sidebar {
    position: fixed;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 50px;
}

.nav-tabs.control-sidebar-tabs > li:first-of-type > a, .nav-tabs.control-sidebar-tabs > li:first-of-type > a:focus, .nav-tabs.control-sidebar-tabs > li:first-of-type > a:hover {
    border-left-width: 0;
}

.nav-tabs.control-sidebar-tabs > li > a, .nav-tabs.control-sidebar-tabs > li > a:hover {
    border-top: none;
    border-right: none;
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

    .nav-tabs.control-sidebar-tabs > li > a .icon {
        font-size: 16px;
    }

.nav-tabs.control-sidebar-tabs > li.active > a, .nav-tabs.control-sidebar-tabs > li.active > a:active, .nav-tabs.control-sidebar-tabs > li.active > a:focus, .nav-tabs.control-sidebar-tabs > li.active > a:hover {
    border-top: none;
    border-right: none;
    border-bottom: none;
}

.control-sidebar-heading {
    font-weight: 300;
    font-size: 16px;
    padding: 10px 0;
    margin-bottom: 10px;
}

.control-sidebar-subheading {
    display: block;
    font-weight: 300;
    font-size: 14px;
}

.control-sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0 -15px;
}

    .control-sidebar-menu > li > a {
        display: block;
        padding: 10px 15px;
    }

        .control-sidebar-menu > li > a:after, .control-sidebar-menu > li > a:before {
            content: " ";
            display: table;
        }

        .control-sidebar-menu > li > a > .control-sidebar-subheading {
            margin-top: 0;
        }

    .control-sidebar-menu .menu-icon {
        float: left;
        width: 35px;
        height: 35px;
        text-align: center;
        line-height: 35px;
    }

    .control-sidebar-menu .menu-info {
        margin-left: 45px;
        margin-top: 3px;
    }

        .control-sidebar-menu .menu-info > .control-sidebar-subheading, .control-sidebar-menu .progress {
            margin: 0;
        }

        .control-sidebar-menu .menu-info > p {
            margin: 0;
            font-size: 11px;
        }

.control-sidebar-dark {
    color: #b8c7ce;
}

    .control-sidebar-dark, .control-sidebar-dark + .control-sidebar-bg {
        background: #2f323e;
    }

        .control-sidebar-dark .nav-tabs.control-sidebar-tabs {
            border-bottom: #222;
        }

            .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a {
                background: #1c1e25;
                color: #ccc;
                display: block;
                padding: 10px 15px;
            }

                .control-sidebar-dark .control-sidebar-heading, .control-sidebar-dark .control-sidebar-subheading, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover {
                    color: #17a2b8;
                }

                .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover {
                    border-left-color: #2f323e;
                    border-bottom-color: #2f323e;
                }

                    .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a.active, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:active, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:focus, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a:hover {
                        background: #2f323e;
                    }

                    .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li > a.active, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:active, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:focus, .control-sidebar-dark .nav-tabs.control-sidebar-tabs > li.active > a:hover {
                        background: #2f323e;
                        color: #17a2b8;
                    }

#control-sidebar-theme-demo-options-tab p {
    font-size: 12px;
}

.control-sidebar-dark .control-sidebar-menu > li > a:hover {
    background: #1e282c;
}

.control-sidebar-dark .control-sidebar-menu > li > a .menu-info > p {
    color: #b8c7ce;
}

.control-sidebar-light {
    color: #5e5e5e;
}

    .control-sidebar-light, .control-sidebar-light + .control-sidebar-bg {
        background: #f9fafc;
        border-left: 1px solid #d2d6de;
    }

        .control-sidebar-light .nav-tabs.control-sidebar-tabs {
            border-bottom: #d2d6de;
        }

            .control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a {
                background: #e8ecf4;
                color: #455a64;
                padding: 10px 15px;
                display: block;
            }

#control-sidebar-theme-demo-options-tab .form-group {
    margin-bottom: 0.5rem;
}

    #control-sidebar-theme-demo-options-tab .form-group label {
        font-weight: 300;
        font-size: 12px;
    }

.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a, .control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus, .control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover {
    border-left-color: #d2d6de;
    border-bottom-color: #d2d6de;
}

    .control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a.active .control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:active, .control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus, .control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover {
        background: #eff1f7;
    }

    .control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a.active, .control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:active, .control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:focus, .control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a:hover {
        background: #f9fafc;
        color: #455a64;
    }

.control-sidebar-light .control-sidebar-heading, .control-sidebar-light .control-sidebar-subheading {
    color: #455a64;
}

.control-sidebar-light .control-sidebar-menu {
    margin-left: -14px;
}

    .control-sidebar-light .control-sidebar-menu > li > a:hover {
        background: #f4f4f5;
    }

    .control-sidebar-light .control-sidebar-menu > li > a .menu-info > p {
        color: #5e5e5e;
    }

.navbar-custom-menu .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
}

.navbar-custom-menu .dropdown-toggle::after {
    display: none;
}

.navbar-custom-menu .navbar-nav > li {
    height: 60px;
}

    .navbar-custom-menu .navbar-nav li > a.dropdown-toggle, .navbar-custom-menu .navbar-nav > li:last-child > a, .navbar-custom-menu .navbar-nav > .search-box > a {
        padding: 0px 15px;
        vertical-align: middle;
        line-height: 60px;
        display: block;
        font-size: 1.5rem;
    }

.search-box .app-search {
    position: relative;
    margin: 0px;
    display: block;
    z-index: 110;
    width: 100%;
    top: -50px;
    left: 0px;
}

    .search-box .app-search input {
        width: 100.5%;
        padding: 20px 40px 20px 20px;
        border-radius: 50px;
        font-size: 14px;
        -webkit-transition: 0.5s ease-in;
        -o-transition: 0.5s ease-in;
        transition: 0.5s ease-in;
        border: none;
    }

    .search-box .app-search .srh-btn {
        position: absolute;
        top: 11px;
        cursor: pointer;
        background: #ffffff;
        width: 15px;
        height: 15px;
        right: 20px;
        font-size: 14px;
    }

body .main-header .navbar .nav > li.search-box > a:hover, body .main-header .navbar .nav > li.search-box > a:focus {
    background: none;
}

.noti-header[data-count="0"]::after,
.noti-header:not([data-count])::after {
    display: none !important;
}

.noti-header[data-count]::after {
    /*  position: absolute;
    right: 20%;
    top: 26%;
    content: attr(data-count);
    font-size: 65%;
    padding: .2em;
    border-radius: 20%;
    line-height: 1em;
    color: white;
    background: rgba(255, 0, 0, .85);
    text-align: center;
    min-width: 1em;*/
    position: absolute;
    right: -6%;
    top: -21%;
    content: attr(data-count);
    font-size: 0.7em;
    padding: .2em;
    border-radius: 100%;
    padding: 0 6px;
    color: white;
    background: #EF5350;
    text-align: center;
    /* box-shadow: 0 2px 6px #9b1b2c; */
    width: 17px;
    display: flex;
    height: 17px;
    justify-content: center;
    align-items: center;
}

.noti-header {
    background-color: transparent !important;
}

    .noti-header i::after {
        content: normal !important;
    }

.faq-cat[data-count]::after {
    position: absolute;
    top: 30%;
    content: attr(data-count);
    font-size: 1.2em;
    padding: .1em;
    border-radius: 20%;
    line-height: 1em;
    color: white;
    background: rgba(255,0,0,.85);
    text-align: center;
    min-width: 1em;
}

/*.fa, .mdi {
    margin-right: 5px;
}*/

.faq-cat {
    background-color: transparent !important;
}

    .faq-cat i::after {
        content: normal !important;
    }

.main-header .messages-menu .dropdown-toggle i::after, .main-header .notifications-menu .dropdown-toggle i::after, .main-header .tasks-menu .dropdown-toggle i::after {
    content: '';
    position: absolute;
    top: 13px;
    right: 10px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 2px solid;
    background-color: #ef5350;
}

@media (max-width:991px) {
    .main-header .messages-menu .dropdown-toggle i::after, .main-header .notifications-menu .dropdown-toggle i::after, .main-header .tasks-menu .dropdown-toggle i::after {
        right: auto;
    }
}

.dropdown-menu {
    box-shadow: none;
    border-color: #eee;
}

    .dropdown-menu.scale-up {
        box-shadow: 0 3px 12px rgba(0, 0, 0, .05);
        -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, .05);
        -moz-box-shadow: 0 3px 12px rgba(0, 0, 0, .05);
        border-color: rgba(120, 130, 140, .13);
        display: inline-block;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        -webkit-transform: scale(0);
        transform: scale(0);
        transform-origin: right 0;
    }

.show > .dropdown-menu.scale-up {
    transform: scale(1);
    -webkit-transform: scale(1);
    transform-origin: left 0;
    -webkit-transform-origin: left 0;
    left: 12px;
    top: 52px;
}

.dropdown-menu > li > a {
    color: #67757c;
}

    .dropdown-menu > li > a > .fa, .dropdown-menu > li > a > .glyphicon, .dropdown-menu > li > a > .ion {
        margin-right: 10px;
    }

    .dropdown-menu > li > a:hover {
    }

.dropdown-menu > .divider {
    background-color: #eee;
}

.navbar-nav > .messages-menu > .dropdown-menu, .navbar-nav > .notifications-menu > .dropdown-menu, .navbar-nav > .tasks-menu > .dropdown-menu {
    width: 410px;
    padding: 0;
    margin: 0;
    top: 100%
}

    .navbar-nav > .messages-menu > .dropdown-menu > li, .navbar-nav > .notifications-menu > .dropdown-menu > li, .navbar-nav > .tasks-menu > .dropdown-menu > li {
        position: relative;
    }

        .navbar-nav > .messages-menu > .dropdown-menu > li.header, .navbar-nav > .notifications-menu > .dropdown-menu > li.header, .navbar-nav > .tasks-menu > .dropdown-menu > li.header {
            background-color: #fff;
            padding: 15px;
            border-bottom: 1px solid #f4f4f4;
            color: #455a64;
            font-size: 14px;
            border-radius: 4px 4px 0 0;
        }

        .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a, .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a, .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
            font-size: 14px;
            background-color: #fff;
            padding: 15px 10px;
            color: #D25055;
            text-align: center;
            border-top: 1px solid rgba(0, 0, 0, .1);
            border-radius: 0 0 4px 4px;
            line-height: 20px;
            display: block;
        }

@media (max-width:991px) {
    .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a, .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a, .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
        background: #fff;
    }
}

.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a:hover, .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover, .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover {
    text-decoration: none;
    font-weight: 300;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu, .navbar-nav > .notifications-menu > .dropdown-menu > li .menu, .navbar-nav > .tasks-menu > .dropdown-menu > li .menu {
    max-height: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
}

    .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a, .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a, .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
        display: block;
        white-space: nowrap;
        border-bottom: 1px solid #f4f4f4;
    }

        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover, .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover, .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a:hover {
            background: #f4f4f4;
            text-decoration: none;
        }

    .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
        color: #455a64;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 10px;
    }

        .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa, .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon, .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion {
            width: 20px;
        }

    .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
        margin: 0;
        padding: 15px;
    }

        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img {
            margin: auto 10px auto auto;
            width: 40px;
            height: 40px;
        }

        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
            padding: 0;
            margin: 0 0 0 45px;
            color: #455a64;
            font-size: 15px;
            position: relative;
        }

            .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small {
                color: #67757c;
                font-size: 10px;
                position: absolute;
                top: 0;
                right: 0;
            }

        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
            margin: 0 0 0 45px;
            font-size: 12px;
            color: #888;
        }

.mail-contnet {
    display: inline-block;
    width: 75%;
    vertical-align: middle;
    overflow: hidden;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > h4 {
    padding: 0;
    margin: 0;
    color: #455a64;
    font-size: 14px;
    position: relative;
    font-weight: 300;
}

    .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > h4 > small {
        color: #67757c;
        font-size: 10px;
        position: absolute;
        top: 0;
        right: 0;
    }

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > span {
    margin: 5px 0 0;
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: list-item;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after, .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:before {
    content: " ";
    display: table;
}

.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a {
    padding: 10px;
}

    .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > h3 {
        font-size: 14px;
        padding: 0;
        margin: 0 0 10px;
        color: #67757c;
    }

    .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > .progress {
        padding: 0;
        margin: 0;
    }

.navbar-nav > .user-menu > .dropdown-menu {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 10px;
    border-top-width: 0;
    width: auto;
    max-width: 350px;
}

    .navbar-nav > .user-menu > .dropdown-menu, .navbar-nav > .user-menu > .dropdown-menu > .user-body {
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

        .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
            height: 110px;
            padding: 0 10px;
            text-align: center;
        }

            .navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
                z-index: 5;
                height: 90px;
                border: 3px solid transparent;
                border-color: rgba(255, 255, 255, .2);
            }

            .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
                z-index: 5;
                color: #67757c;
                font-size: 17px;
                margin-top: 0px;
                text-align: left;
                padding-left: 100px;
            }

                .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
                    display: block;
                    font-size: 12px;
                }

        .navbar-nav > .user-menu > .dropdown-menu > .user-body:after, .navbar-nav > .user-menu > .dropdown-menu > .user-body:before, .navbar-nav > .user-menu > .dropdown-menu > .user-footer:after, .navbar-nav > .user-menu > .dropdown-menu > .user-footer:before {
            content: " ";
            display: table;
        }

        .navbar-nav > .user-menu > .dropdown-menu > .user-body {
            padding: 0px;
            border-bottom: 1px solid #f4f4f4;
            border-top: 1px solid #ddd;
        }

            .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
                padding: 9px 10px;
                display: block;
                color: #67757c;
                font-size: 1.1rem;
            }

                .navbar-nav > .user-menu > .dropdown-menu > .user-body a i {
                    margin-right: 10px;
                }

                .navbar-nav > .user-menu > .dropdown-menu > .user-body a:hover {
                    background-color: rgba(0,0,0,0.1)
                }

            .navbar-nav > .user-menu > .dropdown-menu > .user-body .divider {
                height: 1px;
                margin: 9px 0;
                overflow: hidden;
                background-color: rgba(120, 130, 140, 0.13);
            }

@media (max-width:991px) {
    .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
        background: #fff;
        color: #455a64;
    }
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    padding: 10px 10px 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

    .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
        color: #67757c;
    }

.navbar-nav > .user-menu .user-image {
    width: 30px;
    height: 30px;
    margin-top: 0px;
}

@media (max-width:767px) {
    .navbar-nav > .user-menu .user-image {
        float: none;
        margin-right: 0;
        margin-top: 0px;
        line-height: 10px;
    }
}

.show:not(.dropup) > .animated-dropdown-menu {
    backface-visibility: visible !important;
    -webkit-animation: flipInX .7s both;
    -o-animation: flipInX .7s both;
    animation: flipInX .7s both;
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transition-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
        transform: perspective(400px);
    }
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
    }
}

.navbar-custom-menu > .navbar-nav > li {
    position: relative;
}

    .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
        position: absolute;
        right: 0;
        left: auto;
    }

@media (max-width:991px) {
    .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default:hover {
        background-color: #f9f9f9;
    }

    .navbar-custom-menu > .navbar-nav {
        float: right;
    }

        .navbar-custom-menu > .navbar-nav > li {
            position: static;
        }

            .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
                position: absolute;
                right: 5%;
                left: auto;
                border: 1px solid #ddd;
                background: #fff;
            }
}
/*form-element*/
.form-element .form-control {
    color: #67757c;
    min-height: 38px;
    display: initial;
    -webkit-background-clip: padding-box;
    background-color: transparent;
    background-position: center bottom, center calc(100% - 1px);
    background-repeat: no-repeat;
    background-size: 0 2px, 100% 1px;
    padding: 0;
    -webkit-transition: background 0s ease-out 0s;
    -o-transition: background 0s ease-out 0s;
    transition: background 0s ease-out 0s;
}

    .form-element .form-control, .form-element .form-control:focus {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#398bf7), to(#398bf7)), -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#d9d9d9));
        background-image: -webkit-linear-gradient(#398bf7, #398bf7), -webkit-linear-gradient(#d9d9d9, #d9d9d9);
        background-image: -o-linear-gradient(#398bf7, #398bf7), -o-linear-gradient(#d9d9d9, #d9d9d9);
        background-image: linear-gradient(#398bf7, #398bf7), linear-gradient(#d9d9d9, #d9d9d9);
        border: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        float: none;
    }

        .form-element .form-control.focus, .form-element .form-control:focus {
            background-size: 100% 2px, 100% 1px;
            outline: 0;
            -webkit-transition-duration: .3s;
            -o-transition-duration: .3s;
            transition-duration: .3s;
        }

@-webkit-keyframes ripple {
    0% {
        -webkit-box-shadow: 0 0 0 1px transparent;
        box-shadow: 0 0 0 1px transparent;
    }

    50% {
        -webkit-box-shadow: 0 0 0 15px rgba(0, 0, 0, .1);
        box-shadow: 0 0 0 15px rgba(0, 0, 0, .1);
    }

    100% {
        -webkit-box-shadow: 0 0 0 15px transparent;
        box-shadow: 0 0 0 15px transparent;
    }
}

@keyframes ripple {
    0% {
        -webkit-box-shadow: 0 0 0 1px transparent;
        box-shadow: 0 0 0 1px transparent;
    }

    50% {
        -webkit-box-shadow: 0 0 0 15px rgba(0, 0, 0, .1);
        box-shadow: 0 0 0 15px rgba(0, 0, 0, .1);
    }

    100% {
        -webkit-box-shadow: 0 0 0 15px transparent;
        box-shadow: 0 0 0 15px transparent;
    }
}

.bootstrap-select.btn-group .dropdown-menu {
    margin-top: -40px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
}

.demo-checkbox label, .demo-radio-button label {
    min-width: 300px;
    margin-bottom: 2px;
}

.demo-swtich .demo-switch-title, .demo-swtich .switch {
    width: 150px;
    margin-bottom: 10px;
    display: inline-block;
}

[type=checkbox]:checked.chk-col-red + label:before {
    border-right: 2px solid #ef5350;
    border-bottom: 2px solid #ef5350;
}

[type=checkbox]:checked.chk-col-purple + label:before {
    border-right: 2px solid #926dde;
    border-bottom: 2px solid #926dde;
}

[type=checkbox]:checked.chk-col-deep-purple + label:before {
    border-right: 2px solid #664ce1;
    border-bottom: 2px solid #664ce1;
}

[type=checkbox]:checked.chk-col-blue + label:before {
    border-right: 2px solid #398bf7;
    border-bottom: 2px solid #398bf7;
}

[type=checkbox]:checked.chk-col-light-blue + label:before {
    border-right: 2px solid #398bf7;
    border-bottom: 2px solid #398bf7;
}

[type=checkbox]:checked.chk-col-teal + label:before {
    border-right: 2px solid #39CCCC;
    border-bottom: 2px solid #39CCCC;
}

[type=checkbox]:checked.chk-col-green + label:before {
    border-right: 2px solid #00c292;
    border-bottom: 2px solid #00c292;
}

[type=checkbox]:checked.chk-col-yellow + label:before {
    border-right: 2px solid #e0bc00;
    border-bottom: 2px solid #e0bc00;
}

[type=checkbox]:checked.chk-col-orange + label:before {
    border-right: 2px solid #f7941d;
    border-bottom: 2px solid #f7941d;
}

[type=checkbox]:checked.chk-col-deep-orange + label:before {
    border-right: 2px solid #df8214;
    border-bottom: 2px solid #df8214;
}

[type=checkbox]:checked.chk-col-maroon + label:before {
    border-right: 2px solid #8C1919;
    border-bottom: 2px solid #8C1919;
}

[type=checkbox]:checked.chk-col-grey + label:before {
    border-right: 2px solid #d2d6de;
    border-bottom: 2px solid #d2d6de;
}

[type=checkbox]:checked.chk-col-navy + label:before {
    border-right: 2px solid #001F3F;
    border-bottom: 2px solid #001F3F;
}

[type=checkbox]:checked.chk-col-black + label:before {
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}

[type=checkbox]:checked.chk-col-white + label:before {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

[type=checkbox].filled-in:checked + label:before {
    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
}

[type=checkbox].filled-in:checked.chk-col-red + label:after {
    border: 2px solid #ef5350;
    background-color: #ef5350;
}

[type=checkbox].filled-in:checked.chk-col-purple + label:after {
    border: 2px solid #926dde;
    background-color: #926dde;
}

[type=checkbox].filled-in:checked.chk-col-deep-purple + label:after {
    border: 2px solid #664ce1;
    background-color: #664ce1;
}

[type=checkbox].filled-in:checked.chk-col-blue + label:after {
    border: 2px solid #398bf7;
    background-color: #398bf7;
}

[type=checkbox].filled-in:checked.chk-col-light-blue + label:after {
    border: 2px solid #398bf7;
    background-color: #398bf7;
}

[type=checkbox].filled-in:checked.chk-col-teal + label:after {
    border: 2px solid #39CCCC;
    background-color: #39CCCC;
}

[type=checkbox].filled-in:checked.chk-col-green + label:after {
    border: 2px solid #00c292;
    background-color: #00c292;
}

[type=checkbox].filled-in:checked.chk-col-yellow + label:after {
    border: 2px solid #e0bc00;
    background-color: #e0bc00;
}

[type=checkbox].filled-in:checked.chk-col-orange + label:after {
    border: 2px solid #f7941d;
    background-color: #f7941d;
}

[type=checkbox].filled-in:checked.chk-col-deep-orange + label:after {
    border: 2px solid #df8214;
    background-color: #df8214;
}

[type=checkbox].filled-in:checked.chk-col-maroon + label:after {
    border: 2px solid #8C1919;
    background-color: #8C1919;
}

[type=checkbox].filled-in:checked.chk-col-grey + label:after {
    border: 2px solid #d2d6de;
    background-color: #d2d6de;
}

[type=checkbox].filled-in:checked.chk-col-navy + label:after {
    border: 2px solid #001F3F;
    background-color: #001F3F;
}

[type=checkbox].filled-in:checked.chk-col-black + label:after {
    border: 2px solid #000;
    background-color: #000;
}

[type=checkbox].filled-in:checked.chk-col-white + label:after {
    border: 2px solid #fff;
    background-color: #fff;
}

[type=radio].radio-col-red:checked + label:after {
    background-color: #ef5350;
    border-color: #ef5350;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-purple:checked + label:after {
    background-color: #926dde;
    border-color: #926dde;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-deep-purple:checked + label:after {
    background-color: #664ce1;
    border-color: #664ce1;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-blue:checked + label:after {
    background-color: #398bf7;
    border-color: #398bf7;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-light-blue:checked + label:after {
    background-color: #398bf7;
    border-color: #398bf7;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-teal:checked + label:after {
    background-color: #39CCCC;
    border-color: #39CCCC;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-green:checked + label:after {
    background-color: #00c292;
    border-color: #00c292;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-yellow:checked + label:after {
    background-color: #e0bc00;
    border-color: #e0bc00;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-orange:checked + label:after {
    background-color: #f7941d;
    border-color: #f7941d;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-deep-orange:checked + label:after {
    background-color: #df8214;
    border-color: #df8214;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-maroon:checked + label:after {
    background-color: #8C1919;
    border-color: #8C1919;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-grey:checked + label:after {
    background-color: #d2d6de;
    border-color: #d2d6de;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-navy:checked + label:after {
    background-color: #001F3F;
    border-color: #001F3F;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-black:checked + label:after {
    background-color: #000;
    border-color: #000;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].radio-col-white:checked + label:after {
    background-color: #fff;
    border-color: #fff;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-red:checked + label:before {
    border: 2px solid #ef5350;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-red:checked + label:after {
    background-color: #ef5350;
    border: 2px solid #ef5350;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-purple:checked + label:before {
    border: 2px solid #926dde;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-purple:checked + label:after {
    background-color: #926dde;
    border: 2px solid #926dde;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-deep-purple:checked + label:before {
    border: 2px solid #664ce1;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-deep-purple:checked + label:after {
    background-color: #664ce1;
    border: 2px solid #664ce1;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-blue:checked + label:before {
    border: 2px solid #398bf7;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-blue:checked + label:after {
    background-color: #398bf7;
    border: 2px solid #398bf7;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-light-blue:checked + label:before {
    border: 2px solid #398bf7;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-light-blue:checked + label:after {
    background-color: #398bf7;
    border: 2px solid #398bf7;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-teal:checked + label:before {
    border: 2px solid #39CCCC;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-teal:checked + label:after {
    background-color: #39CCCC;
    border: 2px solid #39CCCC;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-green:checked + label:before {
    border: 2px solid #00c292;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-green:checked + label:after {
    background-color: #00c292;
    border: 2px solid #00c292;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-yellow:checked + label:before {
    border: 2px solid #e0bc00;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-yellow:checked + label:after {
    background-color: #e0bc00;
    border: 2px solid #e0bc00;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-orange:checked + label:before {
    border: 2px solid #f7941d;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-orange:checked + label:after {
    background-color: #f7941d;
    border: 2px solid #f7941d;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-deep-orange:checked + label:before {
    border: 2px solid #df8214;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-deep-orange:checked + label:after {
    background-color: #df8214;
    border: 2px solid #df8214;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-maroon:checked + label:before {
    border: 2px solid #8C1919;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-maroon:checked + label:after {
    background-color: #8C1919;
    border: 2px solid #8C1919;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-grey:checked + label:before {
    border: 2px solid #d2d6de;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-grey:checked + label:after {
    background-color: #d2d6de;
    border: 2px solid #d2d6de;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-navy:checked + label:before {
    border: 2px solid #001F3F;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-navy:checked + label:after {
    background-color: #001F3F;
    border: 2px solid #001F3F;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-black:checked + label:before {
    border: 2px solid #000;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-black:checked + label:after {
    background-color: #000;
    border: 2px solid #000;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-white:checked + label:before {
    border: 2px solid #fff;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap.radio-col-white:checked + label:after {
    background-color: #fff;
    border: 2px solid #fff;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=checkbox]:checked, [type=checkbox]:not(:checked) {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

[type=checkbox] + label {
    font-weight: 400;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    margin-bottom: 0.75em
}

    [type=checkbox] + label:before, [type=checkbox]:not(.filled-in) + label:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 18px;
        height: 18px;
        z-index: 0;
        border: 2px solid #5a5a5a;
        border-radius: 1px;
        margin-top: 2px;
        -webkit-transition: .2s;
        -o-transition: .2s;
        transition: .2s;
    }

[type=checkbox]:not(.filled-in) + label:after {
    border: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

[type=checkbox]:not(:checked):disabled + label:before {
    border: none;
    background-color: rgba(0, 0, 0, .26);
}

[type=checkbox].tabbed:focus + label:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    border: 0;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, .1);
    background-color: rgba(0, 0, 0, .1);
}

[type=checkbox]:checked + label:before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #398bf7;
    border-bottom: 2px solid #398bf7;
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

[type=checkbox]:checked:disabled + label:before {
    border-right: 2px solid rgba(0, 0, 0, .26);
    border-bottom: 2px solid rgba(0, 0, 0, .26);
}

[type=checkbox]:indeterminate + label:before {
    top: -11px;
    left: -12px;
    width: 10px;
    height: 22px;
    border-top: none;
    border-left: none;
    border-right: 2px solid #26a69a;
    border-bottom: none;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

[type=checkbox]:indeterminate:disabled + label:before {
    border-right: 2px solid rgba(0, 0, 0, .26);
    background-color: transparent;
}

[type=checkbox].filled-in + label:after {
    border-radius: 2px;
}

[type=checkbox].filled-in + label:after, [type=checkbox].filled-in + label:before {
    content: '';
    left: 0;
    position: absolute;
    -webkit-transition: border .25s, background-color .25s, width .2s .1s, height .2s .1s, top .2s .1s, left .2s .1s;
    -o-transition: border .25s, background-color .25s, width .2s .1s, height .2s .1s, top .2s .1s, left .2s .1s;
    transition: border .25s, background-color .25s, width .2s .1s, height .2s .1s, top .2s .1s, left .2s .1s;
    z-index: 1;
}

[type=checkbox].filled-in:not(:checked) + label:before {
    width: 0;
    height: 0;
    border: 3px solid transparent;
    left: 6px;
    top: 10px;
    -webkit-transform: rotateZ(37deg);
    -ms-transform: rotate(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 20% 40%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

[type=checkbox].filled-in:not(:checked) + label:after {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #5a5a5a;
    top: 0;
    z-index: 0;
}

[type=checkbox].filled-in:checked + label:before {
    top: 0;
    left: 1px;
    width: 8px;
    height: 13px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    -webkit-transform: rotateZ(37deg);
    -ms-transform: rotate(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

[type=checkbox].filled-in:checked + label:after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--danger-btn-button);
    background-color: var(--danger-btn-button);
    z-index: 0;
}

[type=checkbox].filled-in.tabbed:focus + label:after {
    border-radius: 2px;
    border-color: #5a5a5a;
    background-color: rgba(0, 0, 0, .1);
}

[type=checkbox].filled-in.tabbed:checked:focus + label:after {
    border-radius: 2px;
    background-color: #398bf7;
    border-color: #398bf7;
}

[type=checkbox].filled-in:disabled:not(:checked) + label:before {
    background-color: transparent;
    border: 2px solid transparent;
}

[type=checkbox].filled-in:disabled:not(:checked) + label:after {
    border-color: transparent;
    background-color: #BDBDBD;
}

[type=checkbox].filled-in:disabled:checked + label:before {
    background-color: transparent;
}

[type=checkbox].filled-in:disabled:checked + label:after {
    background-color: #BDBDBD;
    border-color: #BDBDBD;
}

[type=radio]:checked, [type=radio]:not(:checked) {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

    [type=radio]:checked + label, [type=radio]:not(:checked) + label {
        font-weight: 300;
        position: relative;
        padding-left: 2em;
        cursor: pointer;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        -webkit-transition: .28s ease;
        -o-transition: .28s ease;
        transition: .28s ease;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

[type=radio] + label:after, [type=radio] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 16px;
    height: 16px;
    z-index: 0;
    -webkit-transition: .28s ease;
    -o-transition: .28s ease;
    transition: .28s ease;
}

[type=radio].with-gap:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio]:checked + label:after, [type=radio]:checked + label:before, [type=radio]:not(:checked) + label:after, [type=radio]:not(:checked) + label:before {
    border-radius: 50%
}

[type=radio]:not(:checked) + label:after, [type=radio]:not(:checked) + label:before {
    border: 2px solid #5a5a5a;
}

[type=radio]:not(:checked) + label:after {
    z-index: -1;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

[type=radio]:checked + label:before {
    border: 2px solid transparent;
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap:checked + label:after, [type=radio].with-gap:checked + label:before, [type=radio]:checked + label:after {
    border: 2px solid #398bf7;
}

[type=radio].with-gap:checked + label:after, [type=radio]:checked + label:after {
    background-color: #398bf7;
    z-index: 0;
}

[type=radio]:checked + label:after {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}

[type=radio].with-gap:checked + label:after {
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
}

[type=radio].tabbed:focus + label:before {
    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, .1);
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap:disabled:checked + label:before {
    border: 2px solid rgba(0, 0, 0, .26);
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio].with-gap:disabled:checked + label:after {
    border: none;
    background-color: rgba(0, 0, 0, .26);
}

[type=radio]:disabled:checked + label:before, [type=radio]:disabled:not(:checked) + label:before {
    background-color: transparent;
    border-color: rgba(0, 0, 0, .26);
    -webkit-animation: ripple .2s linear forwards;
    animation: ripple .2s linear forwards;
}

[type=radio]:disabled + label {
    color: rgba(0, 0, 0, .26);
}

[type=radio]:disabled:not(:checked) + label:before {
    border-color: rgba(0, 0, 0, .26);
}

[type=radio]:disabled:checked + label:after {
    background-color: rgba(0, 0, 0, .26);
    border-color: #BDBDBD;
}

input[type="color"] {
    height: 42px;
}

.form-type-roundinput.form-control, .form-type-round input.form-control, .form-type-roundselect:not([multiple]).form-control, .form-type-round select:not([multiple]).form-control {
    border-radius: 10rem;
    padding-left: 20px;
    padding-right: 20px;
}

.form-group label {
    font-weight: 500;
}

.form-control {
    border-radius: 5px;
    box-shadow: none;
    border-color: #A2A4A8;
    height: 2.2rem;
}

select.form-control:not([size]):not([multiple]) {
    height: calc(2.2rem + 1px);
}

.form-control:focus {
    border-color: #398bf7;
    box-shadow: none;
}

.form-control:-ms-input-placeholder, .form-control::-moz-placeholder, .form-control::-webkit-input-placeholder {
    color: #bbb;
    opacity: 1;
}

.form-group.has-success .help-block, .form-group.has-success label {
    color: #00c292;
}

.form-control:not(select) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-group.has-success .form-control, .form-group.has-success .input-group-addon {
    border-color: #00c292;
    box-shadow: none;
}

.form-group.has-warning .help-block, .form-group.has-warning label {
    color: #fbae1c;
}

.form-group.has-warning .form-control, .form-group.has-warning .input-group-addon {
    border-color: #fbae1c;
    box-shadow: none;
}

.form-group.has-error label:after,
.bc-field.has-error label:after,
.bc-field.bc-field--error label:after {
    content: "*";
    color: #ff0000;
    margin-left: 10px;
    font-size: 0.8rem !important;
}

.form-group.has-error label:empty:after,
.bc-field.has-error label:empty:after,
.bc-field.bc-field--error label:empty:after {
    content: none;
}

/* Required "*" (rule above) targets EVERY <label> in a .has-error group. Materialize checkbox/radio
   option labels draw their box via label::after { content:'' } (absolute, left:0), so the "*" landed
   INSIDE the box instead of after the field label (e.g. Activity checkbox group on subjectrightrequestnew).
   Restore empty content on option labels — the field's own label (.control-label) keeps its "*". */
.form-group.has-error [type="checkbox"] + label:after,
.form-group.has-error [type="radio"] + label:after,
.bc-field.has-error [type="checkbox"] + label:after,
.bc-field.has-error [type="radio"] + label:after,
.bc-field.bc-field--error [type="checkbox"] + label:after,
.bc-field.bc-field--error [type="radio"] + label:after {
    content: "" !important;
    margin-left: 0 !important;
}

[dir="rtl"] .form-group.has-error [type="checkbox"] + label:after,
[dir="rtl"] .form-group.has-error [type="radio"] + label:after {
    margin-right: 0 !important;
}

.bc-field--required > .bc-field__label:after {
    content: "*";
    color: #ff0000;
    margin-left: 5px;
}

.bc-field--required.has-error > .bc-field__label:after,
.bc-field--required.bc-field--error > .bc-field__label:after,
.bc-field--no-marker.has-error > .bc-field__label:after,
.bc-field--no-marker.bc-field--error > .bc-field__label:after {
    content: "*";
}

.bc-field--no-marker > .bc-field__label:after,
.bc-field--no-marker.has-error > .bc-field__label:after,
.bc-field--no-marker.bc-field--error > .bc-field__label:after {
    content: none;
}

.form-group.has-error .help-block, .form-group.has-error label {
    color: rgba(0, 0, 0, 0.72);
}

.form-group.has-error .form-control, .form-group.has-error .input-group-addon, .form-group.has-error .select2-selection {
    border-color: #ef535069 !important;
    box-shadow: none;
}

.iCheck-helper, .icheckbox_flat-blue, .icheckbox_flat-blue input {
    border-radius: 0;
}

.input-group .input-group-addon, .input-group .input-group-text {
    border-radius: 5px;
    border-color: #d2d6de;
    background-color: #fff;
}

.btn-group-vertical .btn.btn-flat:first-of-type, .btn-group-vertical .btn.btn-flat:last-of-type {
    border-radius: 0;
}

.wysihtml5-toolbar .btn-group, .btn-group-vertical {
    display: -ms-inline-block;
    display: inline-block;
}

.progress {
    margin-bottom: 20px;
}

    .progress, .progress .progress-bar, .progress-sm, .progress-sm .progress-bar, .progress-xs, .progress-xs .progress-bar, .progress-xxs, .progress-xxs .progress-bar, .progress.sm, .progress.sm .progress-bar, .progress.xs, .progress.xs .progress-bar, .progress.xxs, .progress.xxs .progress-bar, .progress > .progress-bar, .progress > .progress-bar .progress-bar {
        border-radius: 1px;
    }

.icheck > label {
    padding-left: 0;
}

.form-control-feedback.fa {
    line-height: 34px;
}

.form-group-lg .form-control + .form-control-feedback.fa, .input-group-lg + .form-control-feedback.fa, .input-lg + .form-control-feedback.fa {
    line-height: 46px;
}

.form-group-sm .form-control + .form-control-feedback.fa, .input-group-sm + .form-control-feedback.fa, .input-sm + .form-control-feedback.fa {
    line-height: 30px;
}

.progress, .progress > .progress-bar {
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .progress-sm, .progress.sm {
        height: 10px;
    }

    .progress-xs, .progress.xs {
        height: 7px;
    }

    .progress-xxs, .progress.xxs {
        height: 15px;
    }

    .progress.vertical {
        position: relative;
        width: 30px;
        height: 200px;
        display: inline-block;
        margin-right: 10px;
    }

        .progress.vertical > .progress-bar {
            width: 100%;
            position: absolute;
            bottom: 0;
        }

        .progress.vertical.progress-sm, .progress.vertical.sm {
            width: 20px;
        }

        .progress.vertical.progress-xs, .progress.vertical.xs {
            width: 10px;
        }

        .progress.vertical.progress-xxs, .progress.vertical.xxs {
            width: 3px;
        }

.progress-group .progress-text {
    font-weight: 600;
}

.progress-group .progress-number {
    float: right;
}

.table tr > td .progress {
    margin: 0;
}

.verticalTableHeader {
    text-align: center;
    white-space: nowrap;
    transform-origin: 75% 35%;
    transform: rotate(-90deg);
}

    .verticalTableHeader:before {
        content: '';
        padding-top: 110%; /* takes width as reference, + 10% for faking some extra padding */
        display: inline-block;
        vertical-align: middle;
    }

.progress-bar-light-blue, .progress-bar-primary {
    background-color: #398bf7;
}

.progress-striped .progress-bar-light-blue, .progress-striped .progress-bar-primary {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-striped .progress-bar-aqua, .progress-striped .progress-bar-green, .progress-striped .progress-bar-info, .progress-striped .progress-bar-success {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-green, .progress-bar-success {
    background-color: #00c292;
}

.progress-striped .progress-bar-green, .progress-striped .progress-bar-success {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-aqua, .progress-bar-info {
    background-color: #03a9f3;
}

.progress-striped .progress-bar-aqua, .progress-striped .progress-bar-info {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-striped .progress-bar-danger, .progress-striped .progress-bar-red, .progress-striped .progress-bar-warning, .progress-striped .progress-bar-yellow {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-warning, .progress-bar-yellow {
    background-color: #fbae1c;
}

.progress-striped .progress-bar-warning, .progress-striped .progress-bar-yellow {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-danger, .progress-bar-red {
    background-color: #ef5350;
}

.progress-striped .progress-bar-danger, .progress-striped .progress-bar-red {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-blue, .progress-bar-default {
    background-color: #398bf7;
}

.progress-striped .progress-bar-blue, .progress-striped .progress-bar-default {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
/*box*/
.small-box {
    position: relative;
    display: block;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
    border-radius: 5px;
}

    .small-box > .inner {
        padding: 1.25rem;
    }

    .small-box > .small-box-footer {
        position: relative;
        text-align: right;
        padding: 3px 10px;
        color: #fff;
        color: rgba(255, 255, 255, .8);
        display: block;
        z-index: 10;
        background: rgba(0, 0, 0, .1);
        text-decoration: none;
    }

        .small-box > .small-box-footer:hover {
            color: #fff;
            background: rgba(0, 0, 0, .15);
        }

    .small-box h3 {
        font-size: 30px;
        font-weight: 700;
        margin: 0 0 10px;
        white-space: nowrap;
        padding: 0;
    }

    .small-box p {
        font-size: 15px;
        margin-bottom: 5px;
    }

        .small-box p > small {
            display: block;
            color: #f9f9f9;
            font-size: 13px;
            margin-top: 5px;
        }

    .small-box h3, .small-box p {
        z-index: 5;
    }

    .small-box .icon {
        -webkit-transition: all .3s linear;
        -o-transition: all .3s linear;
        transition: all .3s linear;
        position: absolute;
        top: 0px;
        right: 10px;
        z-index: 0;
        font-size: 60px;
        color: rgba(0, 0, 0, .15);
    }

    .small-box:hover {
        text-decoration: none;
        color: #f9f9f9;
    }

@media (max-width:767px) {
    .small-box {
        text-align: center;
    }

        .small-box .icon {
            display: none;
        }

        .small-box p {
            font-size: 12px;
        }
}

.box {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    border-radius: 10px;
    padding: 0px;
    -webkit-transition: .5s;
    transition: .5s;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.box-default {
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px rgba(142, 139, 133, 0.32);
    padding: 0px;
    -webkit-transition: .5s;
    transition: .5s;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.pull-up {
    -webkit-transition: all .25s ease;
    -o-transition: all .25s ease;
    -moz-transition: all .25s ease;
    transition: all .25s ease;
}

    .pull-up:hover {
        -webkit-transform: translateY(-4px) scale(1.05);
        -moz-transform: translateY(-4px) scale(1.05);
        -ms-transform: translateY(-4px) scale(1.05);
        -o-transform: translateY(-4px) scale(1.05);
        transform: translateY(-4px) scale(1.05);
    }

.box-inverse {
    color: #fff;
    background-color: #465161;
}

    .box-inverse .box-header {
        color: #fff;
    }

    .box-inverse h1, .box-inverse h2, .box-inverse h3, .box-inverse h4, .box-inverse h5, .box-inverse h6,
    .box-inverse .box-title,
    .box-inverse small,
    .box-inverse .box-controls li > a {
        color: #fff;
    }

        .box-inverse .box-title small {
            opacity: 0.8;
        }

    .box-inverse .box-btn-more::before,
    .box-inverse .box-btn-more::after {
        border-color: #fff;
    }

    .box-inverse .box-header,
    .box-inverse .box-footer,
    .box-inverse .box-action {
        border-color: rgba(255, 255, 255, 0.15);
    }

.box-primary {
    background-color: #ab8ce4;
}

    .box-primary.box-bordered {
        border-color: #ab8ce4;
    }

.box-secondary {
    background-color: #e4e7ea;
}

    .box-secondary.box-bordered {
        border-color: #e4e7ea;
    }

.box-success {
    background-color: #00c292;
}

    .box-success.box-bordered {
        border-color: #00c292;
    }

.box-info {
    background-color: #03a9f3;
}

    .box-info.box-bordered {
        border-color: #03a9f3;
    }

.box-warning {
    background-color: #faa64b;
}

    .box-warning.box-bordered {
        border-color: #faa64b;
    }

.box-danger {
    background-color: #fb9678;
}

    .box-danger.box-bordered {
        border-color: #fb9678;
    }

.box-pink {
    background-color: #f96197;
}

    .box-pink.box-bordered {
        border-color: #f96197;
    }

.box-purple {
    background-color: #926dde;
}

    .box-purple.box-bordered {
        border-color: #926dde;
    }

.box-brown {
    background-color: #8d6658;
}

    .box-brown.box-bordered {
        border-color: #8d6658;
    }

.box-cyan {
    background-color: #57c7d4;
}

    .box-cyan.box-bordered {
        border-color: #57c7d4;
    }

.box-yellow {
    background-color: #e0bc00;
}

    .box-yellow.box-bordered {
        border-color: #e0bc00;
    }

.box-gray {
    background-color: #868e96;
}

    .box-gray.box-bordered {
        border-color: #868e96;
    }

.box-dark {
    background-color: #465161;
}

    .box-dark.box-bordered {
        border-color: #465161;
    }

.box-outline-primary {
    background-color: #fff;
    border: 1px solid #ab8ce4;
}

.box-outline-secondary {
    background-color: #fff;
    border: 1px solid #e4e7ea;
}

.box-outline-success {
    background-color: #fff;
    border: 1px solid #00c292;
}

.box-outline-info {
    background-color: #fff;
    border: 1px solid #03a9f3;
}

.box-outline-warning {
    background-color: #fff;
    border: 1px solid #faa64b;
}

.box-outline-danger {
    background-color: #fff;
    border: 1px solid #fb9678;
}

.box-outline-pink {
    background-color: #fff;
    border: 1px solid #f96197;
}

.box-outline-purple {
    background-color: #fff;
    border: 1px solid #926dde;
}

.box-outline-brown {
    background-color: #fff;
    border: 1px solid #8d6658;
}

.box-outline-cyan {
    background-color: #fff;
    border: 1px solid #57c7d4;
}

.box-outline-yellow {
    background-color: #fff;
    border: 1px solid #e0bc00;
}

.box-outline-gray {
    background-color: #fff;
    border: 1px solid #868e96;
}

.box-outline-dark {
    background-color: #fff;
    border: 1px solid #465161;
}

.box-bordered {
    border: 1px solid #ebebeb;
}

.box-shadowed {
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.07);
}

.box-hover-shadow:hover {
    -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.07);
}

.box-transparent {
    background-color: transparent;
}

.box-round {
    border-radius: 4px;
}


.box.collapsed-box .box-body, .box.collapsed-box .box-footer {
    display: none;
}

.box .flex-column > li {
    border-bottom: 1px solid #f4f4f4;
    margin: 0;
}

    .box .flex-column > li:last-of-type {
        border-bottom: none;
    }

.box.height-control .box-body {
    max-height: 300px;
    overflow: auto;
}

.box .border-right {
    border-right: 1px solid #f4f4f4;
}

.box .border-left {
    border-left: 1px solid #f4f4f4;
}

.box.box-solid {
    border-top: 0;
}

    .box.box-solid > .box-header .btn:hover, .box.box-solid > .box-header a:hover {
        background: rgba(0, 0, 0, .1);
    }

    .box.box-solid.box-default > .box-header {
        color: #455a64;
        background: #d2d6de;
    }

        .box.box-solid.box-default > .box-header .btn, .box.box-solid.box-default > .box-header a {
            color: #455a64;
        }

    .box.box-solid.box-primary > .box-header {
        color: #fff;
        background: #398bf7;
    }

        .box.box-solid.box-primary > .box-header .btn, .box.box-solid.box-primary > .box-header a {
            color: #455a64;
        }

    .box.box-solid.box-info > .box-header {
        color: #fff;
        background: #03a9f3;
    }

        .box.box-solid.box-info > .box-header .btn, .box.box-solid.box-info > .box-header a {
            color: #455a64;
        }

    .box.box-solid.box-danger > .box-header {
        color: #fff;
        background: #ef5350;
    }

        .box.box-solid.box-danger > .box-header .btn, .box.box-solid.box-danger > .box-header a {
            color: #455a64;
        }

    .box.box-solid.box-warning > .box-header {
        color: #fff;
        background: #fbae1c;
    }

        .box.box-solid.box-warning > .box-header .btn, .box.box-solid.box-warning > .box-header a {
            color: #455a64;
        }

    .box.box-solid.box-success > .box-header {
        color: #fff;
        background: #00c292;
    }

        .box.box-solid.box-success > .box-header .btn, .box.box-solid.box-success > .box-header a {
            color: #455a64;
        }

    .box.box-solid > .box-header > .box-tools .btn {
        border: 0;
        box-shadow: none;
    }

    .box.box-solid[class*=bg] > .box-header {
        color: #fff;
    }

.box .box-group > .box {
    margin-bottom: 5px;
}

.box .knob-label {
    text-align: center;
    color: #455a64;
    font-weight: 300;
    font-size: 12px;
    margin-bottom: .3em;
}

.box > .loading-img, .box > .overlay, .overlay-wrapper > .loading-img, .overlay-wrapper > .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.box .overlay, .overlay-wrapper .overlay {
    z-index: 50;
    background: rgba(255, 255, 255, .7);
    border-radius: 3px;
}

    .box .overlay > .fa, .overlay-wrapper .overlay > .fa {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -15px;
        margin-top: -15px;
        color: #000;
        font-size: 30px;
    }

    .box .overlay.dark, .overlay-wrapper .overlay.dark {
        background: rgba(0, 0, 0, .5);
    }

.box-header {
    color: #455a64;
    display: block;
    padding: 1.25rem 1.25rem;
    position: relative;
    border-bottom: 1px solid rgba(97, 106, 120, 0.07);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    .box-header.without-border {
        border-bottom: none;
    }

    .box-header.with-border {
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

.collapsed-box .box-header.with-border {
    border-bottom: none;
}

.box-header .box-title, .box-header > .fa, .box-header > .glyphicon, .box-header > .ion {
    display: inline-block;
    margin: 0;
}

.box-title {
    z-index: auto;
}

    .box-title.box-title-bold {
        font-weight: 600;
    }

    .box-title code {
        font-size: 10px;
    }

.box .box-header .box-subtitle {
    font-weight: 300;
    margin-bottom: 0px;
    margin-top: 5px;
    color: #99abb4;
}

.box-header > .fa, .box-header > .glyphicon, .box-header > .ion {
    margin-right: 5px;
}

.box-header > .box-tools {
    position: absolute;
    right: 15px;
    top: 15px;
}

    .box-header > .box-tools [data-toggle=tooltip], .control {
        position: relative;
        display: inline-block;
        color: #fff;
        border-bottom: 1px dotted black;
        background-color: black;
    }

.tooltip {
    z-index: 999999;
    display: inline-block;
    color: #fff;
    border-bottom: 1px dotted black;
    background-color: black;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

.box-bordered {
    border: 1px solid #ebebeb;
}

.box-shadowed {
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.07);
}

.box-hover-shadow:hover {
    -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.07);
}

.box-transparent {
    background-color: transparent;
}

.box-header > .box-tools .dropdown-menu > li > a {
    color: #455a64;
}

.btn-box-tool {
    padding: 5px;
    font-size: 12px;
    background: 0 0;
    color: #97a0b3;
}

    .btn-box-tool:hover, .show .btn-box-tool {
        color: #606c84;
    }

    .btn-box-tool.btn:active {
        box-shadow: none;
    }

.box-body {
    padding: 0rem 1.25rem;
    border-radius: 10px;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.box.box-body {
    border-radius: 10px;
}

.no-header .box-body {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.box-body > .table {
    margin-bottom: 0;
}

.box-body .fc {
    margin-top: 5px;
}

.box-body .full-width-chart {
    margin: -10px;
}

.box-body.no-padding .full-width-chart {
    margin: -9px;
}

.box-body .box-pane {
    border-radius: 0 0 0 3px;
}

.box-body .box-pane-right {
    border-radius: 0 0 3px;
}

.box-footer {
    border-top: 1px solid #f4f4f4;
    padding: 1.25rem;
    background-color: #fff;
    border-radius: 0 0px 5px 5px;
}

    .box-footer > *:last-child {
        margin-bottom: 0;
    }

.box-footer-chat {
    /*border-top: 1px solid #f4f4f4;
    padding: 1px 1px;
    background-color: #fff;
    border-radius: 0 0px 5px 5px;*/
    width: 100%;
    max-width: auto; /* กำหนดขนาดสูงสุดของ div*/
    border-top: 1px solid #f4f4f4;
    margin: 0 auto;
    padding: 1px 1px;
    background-color: #fff;
    border-radius: 0 0px 5px 5px;
}

.box-controls {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
    background-color: #fff;
}

    .box-controls li > a, .box-controls li > button {
        font-family: themify;
        font-size: 12px;
        display: inline-block;
        padding: 0 4px;
        margin: 0 4px;
        color: #929daf;
        opacity: .8;
        -webkit-transition: 0.3s linear;
        transition: 0.3s linear;
    }

.box-solid .box-controls li > a, .box-solid .box-controls li > button {
    color: #ffffff;
}

.box.box-solid .box-controls li > a:hover, .box.box-solid .box-controls li > button:hover {
    color: #ffffff;
    opacity: 0.5;
    background: transparent;
}

.box-controls li > a:hover {
    color: #ab8ce4;
}

.box-controls li:first-child > a {
    margin-right: 0;
}

.box-controls .dropdown.show > a {
    color: #ab8ce4;
}

.box-controls [data-toggle="dropdown"],
.box-controls .box-btn-reload {
    font-size: 14px;
}

.box-btn-close::before {
    content: "\e646";
}

.box-btn-slide::before {
    content: "\e648";
}

.box-btn-maximize::before {
    content: "\e6e8";
}

.box-btn-fullscreen::before {
    content: "\e659";
}

.box-btn-prev::before {
    content: "\e64a";
}

.box-btn-next::before {
    content: "\e649";
}

.box-carousel .box-footer .carousel-indicators-outside {
    padding: 6px 0;
}

.box-body > *:last-child {
    margin-bottom: 0;
}

.box-img,
.box-img-top,
.box-img-bottom {
    border-radius: 0;
}

.box-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    opacity: 0;
    z-index: -1;
    -webkit-transition: .5s;
    transition: .5s;
}

    .box-loading.reveal {
        opacity: 1;
        z-index: auto;
    }

.box-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 0;
    z-index: 9999;
}

    .box-fullscreen .box-btn-fullscreen {
        color: #ab8ce4;
    }

.box-slided-up .box-content {
    display: none;
}

.box-slided-up .box-btn-slide::before {
    content: "\e64b";
}

.box-header-actions {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin: -4px;
}

    .box-header-actions > * {
        margin: 4px;
    }

.rotate-45 {
    display: inline-block;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.rotate-90 {
    display: inline-block;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate-180 {
    display: inline-block;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}



/*User card page*/

.fx-element-overlay .white-box {
    padding: 0px;
}

.fx-element-overlay .fx-card-item {
    position: relative;
    padding-bottom: 25px;
}

    .fx-element-overlay .fx-card-item .fx-card-avatar {
        margin-bottom: 15px;
    }

    .fx-element-overlay .fx-card-item .fx-card-content {
        text-align: center;
    }

        .fx-element-overlay .fx-card-item .fx-card-content h3 {
            margin: 0px;
        }

        .fx-element-overlay .fx-card-item .fx-card-content a {
            color: #67757c;
        }

            .fx-element-overlay .fx-card-item .fx-card-content a:hover {
                color: #398bf7;
            }

    .fx-element-overlay .fx-card-item .fx-overlay-1 {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        text-align: center;
        cursor: default;
    }

        .fx-element-overlay .fx-card-item .fx-overlay-1 img {
            display: block;
            position: relative;
            -webkit-transition: all .4s linear;
            -o-transition: all .4s linear;
            transition: all .4s linear;
            width: 100%;
            height: auto;
        }

        .fx-element-overlay .fx-card-item .fx-overlay-1:hover img {
            -ms-transform: scale(1.2) translateZ(0);
            -webkit-transform: scale(1.2) translateZ(0);
            transform: scale(1.2) translateZ(0);
        }

        .fx-element-overlay .fx-card-item .fx-overlay-1 .fx-info {
            text-decoration: none;
            display: inline-block;
            text-transform: uppercase;
            color: #ffffff;
            background-color: transparent;
            filter: alpha(opacity=0);
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
            padding: 0;
            margin: auto;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%) translateZ(0);
            -webkit-transform: translateY(-50%) translateZ(0);
            -ms-transform: translateY(-50%) translateZ(0);
        }

            .fx-element-overlay .fx-card-item .fx-overlay-1 .fx-info > li {
                list-style: none;
                display: inline-block;
                margin: 0 3px;
            }

                .fx-element-overlay .fx-card-item .fx-overlay-1 .fx-info > li a {
                    border-color: #ffffff;
                    color: #ffffff;
                    padding: 12px 15px 10px;
                }

                    .fx-element-overlay .fx-card-item .fx-overlay-1 .fx-info > li a:hover {
                        background: #398bf7;
                        border-color: #398bf7;
                    }

    .fx-element-overlay .fx-card-item .fx-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.7);
        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    .fx-element-overlay .fx-card-item .fx-overlay-1:hover .fx-overlay {
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
    }

    .fx-element-overlay .fx-card-item .fx-overlay-1 .scrl-dwn {
        top: -100%;
    }

    .fx-element-overlay .fx-card-item .fx-overlay-1 .scrl-up {
        top: 100%;
        height: 0px;
    }

    .fx-element-overlay .fx-card-item .fx-overlay-1:hover .scrl-dwn {
        top: 0px;
    }

    .fx-element-overlay .fx-card-item .fx-overlay-1:hover .scrl-up {
        top: 0px;
        height: 100%;
    }

/*tab*/
.tabcontent-border {
    border: 1px solid #ddd;
    border-top: 0px;
}

.hidden-xs-up {
    display: none !important;
}

@media (max-width: 575px) {
    .hidden-xs-down {
        display: none !important;
    }
}

@media (min-width: 576px) {
    .hidden-sm-up {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hidden-sm-down {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hidden-md-up {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .hidden-md-down {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .hidden-lg-up {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .hidden-lg-down {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-xl-up {
        display: none !important;
    }
}

.hidden-xl-down {
    display: none !important;
}

@media (max-width:991px) {
    .chart-legend > li {
        float: left;
        margin-right: 10px;
    }
}

.customtab li a.nav-link {
    border: 0px;
    padding: 10px 20px;
    color: #67757c;
}
/*tabs*/
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active:hover, .nav-tabs .nav-item.open .nav-link, .nav-tabs .nav-item.open .nav-link:focus, .nav-tabs .nav-item.open .nav-link:hover {
    border-bottom-color: #fb9678;
    background-color: #fb9678;
    border-radius: 5px 5px 0px 0px;
}

/*Vertical tabs*/

.vtabs {
    display: table;
}

    .vtabs .tabs-vertical {
        width: 150px;
        border-bottom: 0px;
        border-right: 1px solid rgba(120, 130, 140, 0.13);
        display: table-cell;
        vertical-align: top;
    }

        .vtabs .tabs-vertical li .nav-link {
            color: #263238;
            margin-bottom: 10px;
            border: 0px;
            border-radius: 4px 0 0 4px !important;
        }

    .vtabs .tab-content {
        display: table-cell;
        padding: 10px;
        vertical-align: top;
    }

.tabs-vertical li .nav-link.active,
.tabs-vertical li .nav-link:hover,
.tabs-vertical li .nav-link.active:focus {
    background: #03a9f3;
    border: 0px;
    color: #ffffff;
}


/*Custom vertical tab*/

.customvtab .tabs-vertical li .nav-link.active,
.customvtab .tabs-vertical li .nav-link:hover,
.customvtab .tabs-vertical li .nav-link:focus {
    background: #ffffff;
    border: 0px;
    border-right: 2px solid #03a9f3;
    margin-right: -1px;
    color: #03a9f3;
}

.tabcontent-border {
    border: 1px solid #ddd;
    border-top: 0px;
}

.customtab2 li a.nav-link {
    border: 0px;
    margin-right: 3px;
    color: #67757c;
}

    .customtab2 li a.nav-link.active {
        background: #03a9f3;
        color: #ffffff;
    }

    .customtab2 li a.nav-link:hover {
        color: #ffffff;
        background: #03a9f3;
    }

@media (max-width: 767px) {
    .vtabs .tabs-vertical {
        width: auto;
    }
}

/*google map Page*/
.gmaps,
.gmaps-panaroma {
    height: 300px;
}

.gmaps,
.gmaps-panaroma {
    height: 300px;
    background: #f2f4f8;
    border-radius: 3px;
}

.gmaps-overlay {
    display: block;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    line-height: 40px;
    background: #926dde;
    border-radius: 4px;
    padding: 10px 20px;
}

.gmaps-overlay_arrow {
    left: 50%;
    margin-left: -16px;
    width: 0;
    height: 0;
    position: absolute;
}

    .gmaps-overlay_arrow.above {
        bottom: -15px;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-top: 16px solid #926dde;
    }

    .gmaps-overlay_arrow.below {
        top: -15px;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-bottom: 16px solid #926dde;
    }

/*wizard*/
.wizard-content .wizard > .steps > ul > li:after,
.wizard-content .wizard > .steps > ul > li:before {
    content: '';
    z-index: 9;
    display: block;
    position: absolute
}

.wizard-content .wizard {
    width: 100%;
    overflow: hidden
}

    .wizard-content .wizard .content {
        margin-left: 0;
    }

    .wizard-content .wizard > .steps {
        position: relative;
        display: block;
        width: 100%;
        max-width: 1600px;
        margin: 0 auto;
    }

        .wizard-content .wizard > .steps .current-info {
            position: absolute;
            left: -99999px
        }

        .wizard-content .wizard > .steps > ul {
            display: table;
            width: 100%;
            table-layout: fixed;
            margin: 0;
            padding: 0;
            list-style: none
        }

            .wizard-content .wizard > .steps > ul > li {
                display: table-cell;
                width: auto;
                vertical-align: top;
                text-align: center;
                position: relative
            }

                .wizard-content .wizard > .steps > ul > li a {
                    position: relative;
                    padding-top: 52px;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    display: block
                }

    .wizard-content .wizard.vertical > .steps > ul > li a {
        margin-top: 0px;
    }

    .wizard-content .wizard > .steps > ul > li:before {
        left: 0
    }

    .wizard-content .wizard > .steps > ul > li:after {
        right: 0
    }

    .wizard-content .wizard > .steps > ul > li:first-child:before,
    .wizard-content .wizard > .steps > ul > li:last-child:after {
        content: none
    }

    .wizard-content .wizard > .steps > ul > li.current > a {
        color: #2f3d4a;
        cursor: default
    }

    .wizard-content .wizard > .steps > ul > li.current .step {
        border-color: #03a9f3;
        background-color: #fff;
        color: #03a9f3
    }

    .wizard-content .wizard > .steps > ul > li.disabled a,
    .wizard-content .wizard > .steps > ul > li.disabled a:focus,
    .wizard-content .wizard > .steps > ul > li.disabled a:hover {
        color: #67757c;
        cursor: default
    }

    .wizard-content .wizard > .steps > ul > li.done a,
    .wizard-content .wizard > .steps > ul > li.done a:focus,
    .wizard-content .wizard > .steps > ul > li.done a:hover {
        color: #999
    }

    .wizard-content .wizard > .steps > ul > li.done .step {
        background-color: #03a9f3;
        border-color: #03a9f3;
        color: #fff
    }

    .wizard-content .wizard > .steps > ul > li.error .step {
        border-color: #f62d51;
        color: #f62d51
    }

    .wizard-content .wizard > .steps .step {
        background-color: #fff;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 10;
        text-align: center;
        margin-left: -80px;
    }

    .wizard-content .wizard.vertical.wizard-circle > .steps .step {
        left: 50%;
        width: 50px;
        margin-left: -24px;
    }

    .wizard-content .wizard > .content {
        overflow: hidden;
        position: relative;
        width: auto;
        padding: 0;
        margin: 0
    }

        .wizard-content .wizard > .content > .title {
            position: absolute;
            left: -99999px
        }

        .wizard-content .wizard > .content > .body {
            padding: 20px 20px
        }

        .wizard-content .wizard > .content > iframe {
            border: 0;
            width: 100%;
            height: 100%
        }

    .wizard-content .wizard > .actions {
        position: relative;
        display: block;
        text-align: right;
        padding: 20px 20px 20px
    }

        .wizard-content .wizard > .actions > ul {
            float: right;
            list-style: none;
            padding: 0;
            margin: 0
        }

            .wizard-content .wizard > .actions > ul:after {
                content: '';
                display: table;
                clear: both
            }

            .wizard-content .wizard > .actions > ul > li {
                float: left
            }

                .wizard-content .wizard > .actions > ul > li + li {
                    margin-left: 10px
                }

                .wizard-content .wizard > .actions > ul > li > a {
                    background: #03a9f3;
                    color: #fff;
                    display: block;
                    padding: 7px 12px;
                    border-radius: 4px;
                    border: 1px solid transparent
                }

                    .wizard-content .wizard > .actions > ul > li > a:focus,
                    .wizard-content .wizard > .actions > ul > li > a:hover {
                        -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, .05) inset;
                        box-shadow: 0 0 0 100px rgba(0, 0, 0, .05) inset
                    }

                    .wizard-content .wizard > .actions > ul > li > a:active {
                        -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, .1) inset;
                        box-shadow: 0 0 0 100px rgba(0, 0, 0, .1) inset
                    }

                    .wizard-content .wizard > .actions > ul > li > a[href="#previous"] {
                        background-color: #fff;
                        color: #54667a;
                        border: 1px solid #d9d9d9
                    }

                        .wizard-content .wizard > .actions > ul > li > a[href="#previous"]:focus,
                        .wizard-content .wizard > .actions > ul > li > a[href="#previous"]:hover {
                            -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, .02) inset;
                            box-shadow: 0 0 0 100px rgba(0, 0, 0, .02) inset
                        }

                        .wizard-content .wizard > .actions > ul > li > a[href="#previous"]:active {
                            -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, .04) inset;
                            box-shadow: 0 0 0 100px rgba(0, 0, 0, .04) inset
                        }

                .wizard-content .wizard > .actions > ul > li.disabled > a,
                .wizard-content .wizard > .actions > ul > li.disabled > a:focus,
                .wizard-content .wizard > .actions > ul > li.disabled > a:hover {
                    color: #999
                }

                    .wizard-content .wizard > .actions > ul > li.disabled > a[href="#previous"],
                    .wizard-content .wizard > .actions > ul > li.disabled > a[href="#previous"]:focus,
                    .wizard-content .wizard > .actions > ul > li.disabled > a[href="#previous"]:hover {
                        -webkit-box-shadow: none;
                        box-shadow: none
                    }

    .wizard-content .wizard.wizard-circle > .steps > ul > li:after,
    .wizard-content .wizard.wizard-circle > .steps > ul > li:before {
        top: 45px;
        width: 50%;
        height: 3px;
        background-color: #03a9f3
    }

    .wizard-content .wizard.wizard-circle > .steps > ul > li.current:after,
    .wizard-content .wizard.wizard-circle > .steps > ul > li.current ~ li:after,
    .wizard-content .wizard.wizard-circle > .steps > ul > li.current ~ li:before {
        background-color: #F3F3F3
    }

    .wizard-content .wizard.wizard-circle > .steps .step {
        width: 160px;
        height: 50px;
        line-height: 45px;
        border: 3px solid #F3F3F3;
        font-size: 1.3rem;
        border-radius: 10px;
    }

    .wizard-content .wizard.wizard-notification > .steps > ul > li:after,
    .wizard-content .wizard.wizard-notification > .steps > ul > li:before {
        top: 39px;
        width: 50%;
        height: 2px;
        background-color: #03a9f3
    }

    .wizard-content .wizard.wizard-notification > .steps > ul > li.current .step {
        border: 2px solid #03a9f3;
        color: #03a9f3;
        line-height: 36px
    }

        .wizard-content .wizard.wizard-notification > .steps > ul > li.current .step:after,
        .wizard-content .wizard.wizard-notification > .steps > ul > li.done .step:after {
            border-top-color: #03a9f3
        }

    .wizard-content .wizard.wizard-notification > .steps > ul > li.current:after,
    .wizard-content .wizard.wizard-notification > .steps > ul > li.current ~ li:after,
    .wizard-content .wizard.wizard-notification > .steps > ul > li.current ~ li:before {
        background-color: #F3F3F3
    }

    .wizard-content .wizard.wizard-notification > .steps > ul > li.done .step {
        color: #FFF
    }

    .wizard-content .wizard.wizard-notification > .steps .step {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 1.3rem;
        border-radius: 15%;
        background-color: #F3F3F3
    }

        .wizard-content .wizard.wizard-notification > .steps .step:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            margin-bottom: -8px;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 8px solid #F3F3F3
        }

    .wizard-content .wizard.vertical > .steps {
        display: inline;
        float: left;
        width: 10%
    }

        .wizard-content .wizard.vertical > .steps > ul > li {
            display: block;
            width: 100%
        }

            .wizard-content .wizard.vertical > .steps > ul > li.current:after,
            .wizard-content .wizard.vertical > .steps > ul > li.current:before,
            .wizard-content .wizard.vertical > .steps > ul > li.current ~ li:after,
            .wizard-content .wizard.vertical > .steps > ul > li.current ~ li:before,
            .wizard-content .wizard.vertical > .steps > ul > li:after,
            .wizard-content .wizard.vertical > .steps > ul > li:before {
                background-color: transparent
            }

@media (max-width:1024px) {
    .wizard-content .wizard.wizard-circle > .steps .step {
        width: 50px;
        height: 50px;
    }

    .wizard-content .wizard > .steps .step {
        left: 50%;
        margin-left: -24px;
    }

    .wizard-content .wizard.vertical > .steps .step {
        left: 50%;
    }

    .wizard-content .wizard.vertical > .steps {
        width: 20%;
    }
}

@media (max-width:768px) {
    .wizard-content .wizard > .steps > ul {
        margin-bottom: 20px
    }

        .wizard-content .wizard > .steps > ul > li {
            display: block;
            float: left;
            width: 50%
        }

            .wizard-content .wizard > .steps > ul > li > a {
                margin-bottom: 0
            }

            .wizard-content .wizard > .steps > ul > li:first-child:before {
                content: ''
            }

            .wizard-content .wizard > .steps > ul > li:last-child:after {
                content: '';
                background-color: #03a9f3
            }

    .wizard-content .wizard.vertical > .steps {
        width: 30%
    }

    #header-new {
        position: fixed;
        left: 3em;
    }

    .navbar-custom-menu {
        position: fixed;
        right: 0;
    }
}

@media (max-width:480px) {
    .wizard-content .wizard > .steps > ul > li {
        width: 100%
    }

        .wizard-content .wizard > .steps > ul > li.current:after {
            background-color: #03a9f3
        }

    .wizard-content .wizard.vertical > .steps > ul > li {
        display: block;
        float: left;
        width: 50%
    }

    .wizard-content .wizard.vertical > .steps {
        width: 100%;
        float: none;
    }

    #header-new {
    }

    .navbar-custom-menu {
    }
}




/*weather*/
.weather-location input {
    background-color: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .5);
}

    .weather-location input:focus {
        border: 1px solid rgba(255, 255, 255, .7);
    }

.weather-day {
    border-left: 1px solid rgba(0, 0, 0, .05);
}

    .weather-day.is-today {
        border-left: none;
    }

.card-footer {
    padding: 0;
}

.weather-icon canvas {
    width: 90px;
    height: 90px;
}

/*---panel---*/
.panel {
    position: relative;
    background-color: #fff;
    border: 0 solid transparent;
    border-radius: 5px;
}

.panel-content > .row {
    padding-left: 30px;
    padding-right: 30px;
}

    .panel-content > .row > [class*="col-"] {
        padding-left: 30px;
        padding-right: 30px;
    }

.panel-body .list-group-item {
    border-radius: 0;
}

    .panel-body .list-group-item.active {
        background-color: #E0DFDB;
        border-color: #E0DFDB;
    }

.panel-heading {
    position: relative;
    padding: 0 0.75rem;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 0.214rem;
    border-top-left-radius: 0.214rem;
}

    .panel-heading + .alert {
        border-radius: 0;
    }

    .panel-heading > .nav-tabs {
        border-bottom: none;
    }

.panel-heading-tab {
    padding: 10px 30px 0;
    background-color: #3f51b5;
}

    .panel-heading-tab > .nav-tabs .nav-link {
        color: #fff;
    }

        .panel-heading-tab > .nav-tabs .nav-link.hover, .panel-heading-tab > .nav-tabs .nav-link:hover {
            color: #757575;
        }

        .panel-heading-tab > .nav-tabs .nav-link.active, .panel-heading-tab > .nav-tabs .nav-link:active {
            color: #757575;
            background-color: #ffffff;
        }

.panel-heading + .nav-tabs {
    margin-top: -0.715rem;
}

.panel-heading > .dropdown .dropdown-toggle {
    color: inherit;
}

.panel-body {
    position: relative;
    padding: 1.25rem;
    background-color: #fff;
}

    .panel-body::after {
        display: block;
        content: "";
        clear: both;
    }

.panel-heading + .panel-body {
    padding-top: 0;
}

.panel-body h1:first-child, .panel-body h2:first-child, .panel-body h3:first-child, .panel-body h4:first-child, .panel-body h5:first-child, .panel-body h6:first-child,
.panel-body .h1:first-child, .panel-body .h2:first-child, .panel-body .h3:first-child, .panel-body .h4:first-child, .panel-body .h5:first-child, .panel-body .h6:first-child {
    margin-top: 0;
}

.panel-body > *:last-child {
    margin-bottom: 0;
}

.panel-body > .list-group-dividered:only-child > .list-group-item:last-child {
    border-bottom-color: transparent;
}

.panel-footer {
    padding: 0 30px 15px;
    border-top: 1px solid transparent;
    background-color: transparent;
    border-bottom-right-radius: 0.214rem;
    border-bottom-left-radius: 0.214rem;
}

.table + .panel-footer {
    padding-top: 15px;
    border-color: #e0e0e0;
}

.panel-title {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    padding: 20px 30px;
    font-size: 18px;
    color: #424242;
}

    .panel-title > .icon {
        margin-right: 10px;
    }

    .panel-title > .badge {
        margin-left: 10px;
    }

    .panel-title small,
    .panel-title .small {
        color: #757575;
    }

    .panel-title > a,
    .panel-title > small > a,
    .panel-title > .small > a {
        color: inherit;
    }

.panel-desc {
    display: block;
    padding: 5px 0 0;
    margin: 0;
    font-size: 1rem;
    color: #757575;
}

.panel-actions {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translate(0%, -50%);
    margin: auto;
    z-index: 1;
}

@media (max-width: 479px) {
    .panel-actions {
        right: 20px;
    }
}

ul .panel-actions {
    list-style: none;
}

    ul .panel-actions > li {
        display: inline-block;
        margin-left: 8px;
    }

        ul .panel-actions > li:first-child {
            margin-left: 0;
        }

.panel-actions a.dropdown-toggle {
    text-decoration: none;
}

.panel-actions .dropdown {
    display: inline-block;
}

.panel-actions .dropdown-toggle {
    display: inline-block;
}

.panel-actions .panel-action {
    display: inline-block;
    padding: 8px 10px;
    color: #9e9e9e;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
}

    .panel-actions .panel-action:hover {
        color: #616161;
    }

    .panel-actions .panel-action:active {
        color: #616161;
    }

.panel-actions .progress {
    width: 100px;
    margin: 0;
}

.panel-actions .pagination {
    margin: 0;
}

ul.panel-actions {
    list-style: none;
}

    ul.panel-actions > li {
        display: inline-block;
        margin-left: 8px;
    }

        ul.panel-actions > li:first-child {
            margin-left: 0;
        }

.panel-toolbar {
    padding: 5px 15px;
    margin: 0;
    background-color: transparent;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
}

.panel-bordered .panel-toolbar {
    border-top-color: transparent;
}

.panel-toolbar .btn {
    color: #9e9e9e;
    padding: 5px 10px;
}

    .panel-toolbar .btn.icon {
        width: 1em;
        text-align: center;
    }

    .panel-toolbar .btn:hover, .panel-toolbar .btn:active, .panel-toolbar .btn.active {
        color: #757575;
    }

.panel-loading {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    display: none;
    width: 100%;
    height: 100%;
    border-radius: 0.286rem;
    opacity: .6;
}

    .panel-loading .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.panel > *:not(.panel-loading):not(.collapsing) {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}

.panel.is-loading > *:not(.panel-loading) {
    opacity: .3;
}

.panel.is-loading .panel-loading {
    display: block;
    opacity: 1;
}

.panel-footer-chart {
    padding: 0;
}

.panel-control {
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.panel-body.scrollable-vertical {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    .panel-body.scrollable-vertical > .scrollable-container > .scrollable-content {
        padding-left: 30px;
        padding-right: 30px;
    }

@media (max-width: 479px) {
    .panel-body.scrollable-vertical > .scrollable-container > .scrollable-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.panel-body.scrollable-vertical > .scrollable-bar {
    margin-top: 0;
    margin-bottom: 30px;
    height: calc(100% - 30px);
    transform: translateX(-26px);
}

.panel-bordered > .panel-body.scrollable-vertical > .scrollable-bar {
    margin-bottom: 30px;
    height: calc(100% - 60px);
}

.panel-body.scrollable-horizontal {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

    .panel-body.scrollable-horizontal > .scrollable-container > .scrollable-content {
        padding-top: 0;
        padding-bottom: 30px;
    }

.panel-bordered > .panel-body.scrollable-horizontal > .scrollable-container > .scrollable-content {
    padding-top: 30px;
    padding-bottom: 30px;
}

.panel-body.scrollable-horizontal > .scrollable-bar {
    margin-left: 0;
    margin-right: 30px;
    width: calc(100% - 60px);
    transform: translateY(-26px);
}

@media (max-width: 479px) {
    .panel-body.scrollable-horizontal > .scrollable-bar {
        margin-right: 20px;
        width: calc(100% - 40px);
    }
}

.panel-bordered > .panel-body.scrollable-horizontal > .scrollable-bar {
    transform: translateY(-26px);
}

.panel-bordered > .panel-heading {
    border-bottom: 1px solid #e0e0e0;
}

    .panel-bordered > .panel-heading > .panel-title {
        padding-bottom: 20px;
    }

.panel-bordered > .panel-footer {
    border-top: 1px solid #e0e0e0;
    padding-top: 15px;
}

.panel-bordered > .panel-body {
    padding-top: 30px;
}

.panel-bordered > .table > tbody:first-child > tr:first-child th,
.panel-bordered > .table > tbody:first-child > tr:first-child td {
    border-top: 0;
}

.panel.is-dragging {
    opacity: 0.8;
}

.panel.is-dragging {
    cursor: move;
}

.panel > .nav-tabs-vertical .nav-tabs {
    margin-left: -1px;
}

    .panel > .nav-tabs-vertical .nav-tabs > li > a {
        border-left: none;
        border-radius: 0;
    }

    .panel > .nav-tabs-vertical .nav-tabs.nav-tabs-reverse {
        margin-right: -1px;
    }

        .panel > .nav-tabs-vertical .nav-tabs.nav-tabs-reverse > li > a {
            border-right: none;
            border-radius: 0;
        }

.panel:hover .panel-actions .show-on-hover {
    display: inline-block;
}

.panel .panel-actions .show-on-hover {
    display: none;
}

.panel.is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

    .panel.is-fullscreen .panel-loading {
        border-radius: 0;
    }

    .panel.is-fullscreen .panel-actions [data-toggle=collapse] {
        display: none;
    }

.panel.is-close {
    display: none;
}

.panel.is-collapse .panel-body {
    display: none;
    height: 0;
}

.panel > .alert {
    padding-left: 30px;
    padding-right: 30px;
}

.panel > .alert-dismissible {
    padding-right: 50px;
}

@media (max-width: 479px) {
    .panel > .alert {
        padding-left: 20px;
        padding-right: 20px;
    }

    .panel > .alert-dismissible {
        padding-right: 40px;
    }
}

.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
    margin-bottom: 0;
}

    .panel > .table caption,
    .panel > .table-responsive > .table caption,
    .panel > .panel-collapse > .table caption {
        padding-left: 30px 30px;
        padding-right: 30px 30px;
    }

    .panel > .table:first-child,
    .panel > .table-responsive:first-child > .table:first-child {
        border-top-right-radius: 0.214rem;
        border-top-left-radius: 0.214rem;
    }

        .panel > .table:first-child > thead:first-child > tr:first-child,
        .panel > .table:first-child > tbody:first-child > tr:first-child,
        .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
        .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
            border-top-left-radius: 0.214rem;
            border-top-right-radius: 0.214rem;
        }

            .panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
            .panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
            .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
            .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
            .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
            .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
            .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
            .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
                border-top-left-radius: 0.214rem;
            }

            .panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
            .panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
            .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
            .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
            .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
            .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
            .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
            .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
                border-top-right-radius: 0.214rem;
            }

    .panel > .table:last-child,
    .panel > .table-responsive:last-child > .table:last-child {
        border-bottom-right-radius: 0.214rem;
        border-bottom-left-radius: 0.214rem;
    }

        .panel > .table:last-child > tbody:last-child > tr:last-child,
        .panel > .table:last-child > tfoot:last-child > tr:last-child,
        .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
        .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
            border-bottom-left-radius: 0.214rem;
            border-bottom-right-radius: 0.214rem;
        }

            .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
            .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
            .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
            .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
            .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
            .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
            .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
            .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
                border-bottom-left-radius: 0.214rem;
            }

            .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
            .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
            .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
            .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
            .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
            .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
            .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
            .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
                border-bottom-right-radius: 0.214rem;
            }

    .panel > .panel-body + .table,
    .panel > .panel-body + .table-responsive,
    .panel > .table + .panel-body,
    .panel > .table-responsive + .panel-body {
        border-top: 1px solid #e0e0e0;
    }

    .panel > .table > tbody:first-child > tr:first-child th,
    .panel > .table > tbody:first-child > tr:first-child td {
        border-top: 0;
    }

.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
    border: 0;
}

    .panel > .table-bordered > thead > tr > th:first-child,
    .panel > .table-bordered > thead > tr > td:first-child,
    .panel > .table-bordered > tbody > tr > th:first-child,
    .panel > .table-bordered > tbody > tr > td:first-child,
    .panel > .table-bordered > tfoot > tr > th:first-child,
    .panel > .table-bordered > tfoot > tr > td:first-child,
    .panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
    .panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0;
    }

    .panel > .table-bordered > thead > tr > th:last-child,
    .panel > .table-bordered > thead > tr > td:last-child,
    .panel > .table-bordered > tbody > tr > th:last-child,
    .panel > .table-bordered > tbody > tr > td:last-child,
    .panel > .table-bordered > tfoot > tr > th:last-child,
    .panel > .table-bordered > tfoot > tr > td:last-child,
    .panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
    .panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0;
    }

    .panel > .table-bordered > thead > tr:first-child > td,
    .panel > .table-bordered > thead > tr:first-child > th,
    .panel > .table-bordered > tbody > tr:first-child > td,
    .panel > .table-bordered > tbody > tr:first-child > th,
    .panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
    .panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
    .panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
    .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
        border-bottom: 0;
    }

    .panel > .table-bordered > tbody > tr:last-child > td,
    .panel > .table-bordered > tbody > tr:last-child > th,
    .panel > .table-bordered > tfoot > tr:last-child > td,
    .panel > .table-bordered > tfoot > tr:last-child > th,
    .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
    .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
    .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
    .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
        border-bottom: 0;
    }

.panel > .table-responsive {
    border: 0;
    margin-bottom: 0;
}

    .panel > .table > tr > td:first-child,
    .panel > .table > tr > th:first-child, .panel > .table > thead > tr > td:first-child,
    .panel > .table > thead > tr > th:first-child, .panel > .table > tbody > tr > td:first-child,
    .panel > .table > tbody > tr > th:first-child, .panel > .table > tfoot > tr > td:first-child,
    .panel > .table > tfoot > tr > th:first-child, .panel > .table-responsive .table > tr > td:first-child,
    .panel > .table-responsive .table > tr > th:first-child, .panel > .table-responsive .table > thead > tr > td:first-child,
    .panel > .table-responsive .table > thead > tr > th:first-child, .panel > .table-responsive .table > tbody > tr > td:first-child,
    .panel > .table-responsive .table > tbody > tr > th:first-child, .panel > .table-responsive .table > tfoot > tr > td:first-child,
    .panel > .table-responsive .table > tfoot > tr > th:first-child {
        padding-left: 30px;
    }

@media (max-width: 479px) {
    .panel > .table > tr > td:first-child,
    .panel > .table > tr > th:first-child, .panel > .table > thead > tr > td:first-child,
    .panel > .table > thead > tr > th:first-child, .panel > .table > tbody > tr > td:first-child,
    .panel > .table > tbody > tr > th:first-child, .panel > .table > tfoot > tr > td:first-child,
    .panel > .table > tfoot > tr > th:first-child, .panel > .table-responsive .table > tr > td:first-child,
    .panel > .table-responsive .table > tr > th:first-child, .panel > .table-responsive .table > thead > tr > td:first-child,
    .panel > .table-responsive .table > thead > tr > th:first-child, .panel > .table-responsive .table > tbody > tr > td:first-child,
    .panel > .table-responsive .table > tbody > tr > th:first-child, .panel > .table-responsive .table > tfoot > tr > td:first-child,
    .panel > .table-responsive .table > tfoot > tr > th:first-child {
        padding-left: 20px;
    }
}

.panel > .table > tr > td:last-child,
.panel > .table > tr > th:last-child, .panel > .table > thead > tr > td:last-child,
.panel > .table > thead > tr > th:last-child, .panel > .table > tbody > tr > td:last-child,
.panel > .table > tbody > tr > th:last-child, .panel > .table > tfoot > tr > td:last-child,
.panel > .table > tfoot > tr > th:last-child, .panel > .table-responsive .table > tr > td:last-child,
.panel > .table-responsive .table > tr > th:last-child, .panel > .table-responsive .table > thead > tr > td:last-child,
.panel > .table-responsive .table > thead > tr > th:last-child, .panel > .table-responsive .table > tbody > tr > td:last-child,
.panel > .table-responsive .table > tbody > tr > th:last-child, .panel > .table-responsive .table > tfoot > tr > td:last-child,
.panel > .table-responsive .table > tfoot > tr > th:last-child {
    padding-right: 30px;
}

@media (max-width: 479px) {
    .panel > .table > tr > td:last-child,
    .panel > .table > tr > th:last-child, .panel > .table > thead > tr > td:last-child,
    .panel > .table > thead > tr > th:last-child, .panel > .table > tbody > tr > td:last-child,
    .panel > .table > tbody > tr > th:last-child, .panel > .table > tfoot > tr > td:last-child,
    .panel > .table > tfoot > tr > th:last-child, .panel > .table-responsive .table > tr > td:last-child,
    .panel > .table-responsive .table > tr > th:last-child, .panel > .table-responsive .table > thead > tr > td:last-child,
    .panel > .table-responsive .table > thead > tr > th:last-child, .panel > .table-responsive .table > tbody > tr > td:last-child,
    .panel > .table-responsive .table > tbody > tr > th:last-child, .panel > .table-responsive .table > tfoot > tr > td:last-child,
    .panel > .table-responsive .table > tfoot > tr > th:last-child {
        padding-right: 20px;
    }
}

.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
    border-top: 1px solid #e0e0e0;
}

.panel > .list-group,
.panel > .panel-collapse > .list-group {
    margin-bottom: 0;
}

    .panel > .list-group .list-group-item,
    .panel > .panel-collapse > .list-group .list-group-item {
        border-width: 1px 0;
        border-radius: 0;
    }

    .panel > .list-group:first-child .list-group-item:first-child,
    .panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
        border-top: 0;
        border-top-right-radius: 0.214rem;
        border-top-left-radius: 0.214rem;
    }

    .panel > .list-group:last-child .list-group-item:last-child,
    .panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
        border-bottom: 0;
        border-bottom-right-radius: 0.214rem;
        border-bottom-left-radius: 0.214rem;
    }

.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.panel > .list-group .list-group-item {
    padding-right: 30px;
    padding-left: 30px;
}

@media (max-width: 479px) {
    .panel > .list-group .list-group-item {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.panel-heading + .list-group .list-group-item:first-child {
    border-top-width: 0;
}

.list-group + .panel-footer {
    border-top-width: 0;
}

.panel-group {
    margin-bottom: 22px;
}

    .panel-group .panel {
        margin-bottom: 0;
        border-radius: 0.286rem;
    }

        .panel-group .panel + .panel {
            margin-top: 5px;
        }

    .panel-group .panel-heading + .panel-collapse > .panel-body,
    .panel-group .panel-heading + .panel-collapse > .list-group {
        border-top: 1px solid #e0e0e0;
    }

    .panel-group .panel-footer {
        border-top: 0;
    }

        .panel-group .panel-footer + .panel-collapse .panel-body {
            border-bottom: 1px solid #e0e0e0;
        }

.panel.panel-transparent {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

    .panel.panel-transparent > .panel-heading, .panel.panel-transparent > .panel-footer {
        border-color: transparent;
    }

.panel-default {
    border-color: #e0e0e0;
}

    .panel-default > .panel-heading {
        color: #757575;
        background-color: #fff;
        border-color: #e0e0e0;
    }

        .panel-default > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #e0e0e0;
        }

        .panel-default > .panel-heading .badge-pill {
            color: #e0e0e0;
            background-color: #757575;
        }

    .panel-default .panel-title {
        color: #757575;
    }

    .panel-default .panel-action {
        color: #757575;
    }

    .panel-default .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #e0e0e0;
    }

    .panel-default .panel-title {
        color: #424242;
    }

.panel-primary {
    border-color: #3f51b5;
}

    .panel-primary > .panel-heading {
        color: #fff;
        background-color: #3f51b5;
        border-color: #3f51b5;
    }

        .panel-primary > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #3f51b5;
        }

        .panel-primary > .panel-heading .badge-pill {
            color: #3f51b5;
            background-color: #fff;
        }

    .panel-primary .panel-title {
        color: #fff;
    }

    .panel-primary .panel-action {
        color: #fff;
    }

    .panel-primary .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #3f51b5;
    }

.panel-success {
    border-color: #509d44;
}

    .panel-success > .panel-heading {
        color: #ffffff;
        background-color: #4caf50;
        border-color: #509d44;
    }

        .panel-success > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #509d44;
        }

        .panel-success > .panel-heading .badge-pill {
            color: #4caf50;
            background-color: #ffffff;
        }

    .panel-success .panel-title {
        color: #ffffff;
    }

    .panel-success .panel-action {
        color: #ffffff;
    }

    .panel-success .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #509d44;
    }

.panel-info {
    border-color: #00b0a7;
}

    .panel-info > .panel-heading {
        color: #ffffff;
        background-color: #00bcd4;
        border-color: #00b0a7;
    }

        .panel-info > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #00b0a7;
        }

        .panel-info > .panel-heading .badge-pill {
            color: #00bcd4;
            background-color: #ffffff;
        }

    .panel-info .panel-title {
        color: #ffffff;
    }

    .panel-info .panel-action {
        color: #ffffff;
    }

    .panel-info .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #00b0a7;
    }

.panel-warning {
    border-color: #f06700;
}

    .panel-warning > .panel-heading {
        color: #ffffff;
        background-color: #ff9800;
        border-color: #f06700;
    }

        .panel-warning > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #f06700;
        }

        .panel-warning > .panel-heading .badge-pill {
            color: #ff9800;
            background-color: #ffffff;
        }

    .panel-warning .panel-title {
        color: #ffffff;
    }

    .panel-warning .panel-action {
        color: #ffffff;
    }

    .panel-warning .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #f06700;
    }

.panel-danger {
    border-color: #f3273c;
}

    .panel-danger > .panel-heading {
        color: #ffffff;
        background-color: #f44336;
        border-color: #f3273c;
    }

        .panel-danger > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #f3273c;
        }

        .panel-danger > .panel-heading .badge-pill {
            color: #f44336;
            background-color: #ffffff;
        }

    .panel-danger .panel-title {
        color: #ffffff;
    }

    .panel-danger .panel-action {
        color: #ffffff;
    }

    .panel-danger .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #f3273c;
    }

.panel-dark {
    border-color: #616161;
}

    .panel-dark > .panel-heading {
        color: #ffffff;
        background-color: #616161;
        border-color: #616161;
    }

        .panel-dark > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #616161;
        }

        .panel-dark > .panel-heading .badge-pill {
            color: #616161;
            background-color: #ffffff;
        }

    .panel-dark .panel-title {
        color: #ffffff;
    }

    .panel-dark .panel-action {
        color: #ffffff;
    }

    .panel-dark .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #616161;
    }

.panel-primary,
.panel-info,
.panel-success,
.panel-warning,
.panel-danger,
.panel-dark {
    border: none;
}

    .panel-primary .panel-heading,
    .panel-info .panel-heading,
    .panel-success .panel-heading,
    .panel-warning .panel-heading,
    .panel-danger .panel-heading,
    .panel-dark .panel-heading {
        border: none;
    }

    .panel-primary .panel-title,
    .panel-info .panel-title,
    .panel-success .panel-title,
    .panel-warning .panel-title,
    .panel-danger .panel-title,
    .panel-dark .panel-title {
        color: #ffffff;
    }

    .panel-primary .panel-action,
    .panel-info .panel-action,
    .panel-success .panel-action,
    .panel-warning .panel-action,
    .panel-danger .panel-action,
    .panel-dark .panel-action {
        color: #ffffff;
    }

.panel-line .panel-heading {
    background: transparent;
    border: none;
    border-top: 3px solid transparent;
}

.panel-line.panel-default .panel-heading {
    color: #e0e0e0;
    border-top-color: #e0e0e0;
    background: transparent;
}

.panel-line.panel-default .panel-title {
    color: #e0e0e0;
}

.panel-line.panel-default .panel-action {
    color: #e0e0e0;
}

.panel-line.panel-default .panel-title {
    color: #424242;
}

.panel-line.panel-default .panel-action {
    color: #9e9e9e;
}

.panel-line.panel-primary .panel-heading {
    color: #3f51b5;
    border-top-color: #3f51b5;
    background: transparent;
}

.panel-line.panel-primary .panel-title {
    color: #3f51b5;
}

.panel-line.panel-primary .panel-action {
    color: #3f51b5;
}

.panel-line.panel-success .panel-heading {
    color: #4caf50;
    border-top-color: #4caf50;
    background: transparent;
}

.panel-line.panel-success .panel-title {
    color: #4caf50;
}

.panel-line.panel-success .panel-action {
    color: #4caf50;
}

.panel-line.panel-info .panel-heading {
    color: #00bcd4;
    border-top-color: #00bcd4;
    background: transparent;
}

.panel-line.panel-info .panel-title {
    color: #00bcd4;
}

.panel-line.panel-info .panel-action {
    color: #00bcd4;
}

.panel-line.panel-warning .panel-heading {
    color: #ff9800;
    border-top-color: #ff9800;
    background: transparent;
}

.panel-line.panel-warning .panel-title {
    color: #ff9800;
}

.panel-line.panel-warning .panel-action {
    color: #ff9800;
}

.panel-line.panel-danger .panel-heading {
    color: #f44336;
    border-top-color: #f44336;
    background: transparent;
}

.panel-line.panel-danger .panel-title {
    color: #f44336;
}

.panel-line.panel-danger .panel-action {
    color: #f44336;
}

.panel-line.panel-dark .panel-heading {
    color: #616161;
    border-top-color: #616161;
    background: transparent;
}

.panel-line.panel-dark .panel-title {
    color: #616161;
}

.panel-line.panel-dark .panel-action {
    color: #616161;
}

@media (max-width: 767px) {
    .panel-actions {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        margin: auto;
        padding: 0 30px 15px;
        transform: none;
    }

    .panel-actions-keep {
        position: absolute;
        top: 50%;
        right: 30px;
        padding: 0;
        transform: translate(0%, -50%);
    }
}

@media (max-width: 479px) {
    .panel-actions {
        padding-left: 20px;
    }

    .panel-actions-keep {
        right: 15px;
    }

    .panel-actions .progress {
        min-width: 80px;
    }

    .panel-actions .show-on-hover {
        display: none;
    }

    .panel-title, .panel-body, .panel-footer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.panel-group {
    margin-bottom: 22px;
}

    .panel-group .panel {
        margin-bottom: 0;
        border-radius: 0.286rem;
        box-shadow: none;
    }

        .panel-group .panel + .panel {
            margin-top: 10px;
        }

    .panel-group .panel-title {
        position: relative;
        padding: 15px 45px 15px 30px;
        border-bottom: 1px solid #e0e0e0;
        font-size: 1rem;
        background-color: #EDEEF0;
    }

        .panel-group .panel-title:before, .panel-group .panel-title:after {
            position: absolute;
            top: 15px;
            right: 30px;
            font-family: "Material Design Icons";
            transition: all 300ms linear 0s;
        }

        .panel-group .panel-title:before {
            content: "\f415";
        }

        .panel-group .panel-title:after {
            content: "\f374";
        }

        .panel-group .panel-title[aria-expanded="false"]:before {
            opacity: .4;
        }

        .panel-group .panel-title[aria-expanded="false"]:after {
            opacity: 0;
            transform: rotate(-180deg);
        }

        .panel-group .panel-title[aria-expanded="true"]:before {
            opacity: 0;
            transform: rotate(180deg);
        }

        .panel-group .panel-title[aria-expanded="true"]:after {
            opacity: 1;
        }

        .panel-group .panel-title:hover, .panel-group .panel-title:focus {
            color: #757575;
            text-decoration: none;
        }

        .panel-group .panel-title:focus {
            outline: none;
        }

    .panel-group .panel-heading {
        border-bottom: 0;
        background-color: #EDEEF0;
    }

        .panel-group .panel-heading + .panel-collapse {
            margin: 0;
        }

            .panel-group .panel-heading + .panel-collapse > .list-group {
                border-top: 1px solid #e0e0e0;
            }

    .panel-group .panel-collapse .panel-body {
        padding: 15px 30px;
    }

    .panel-group .panel-footer {
        border-top: 0;
    }

        .panel-group .panel-footer + .panel-collapse .panel-body {
            border-bottom: 1px solid #e0e0e0;
        }

    .panel-group .panel + .panel {
        margin-top: 10px;
    }

.panel-group-continuous .panel {
    border-radius: 0;
}

    .panel-group-continuous .panel:first-child {
        border-radius: 0.286rem 0.286rem 0 0;
    }

    .panel-group-continuous .panel:last-child {
        border-radius: 0 0 0.286rem 0.286rem;
    }

    .panel-group-continuous .panel + .panel {
        margin-top: 0;
        border-top: 1px solid #e0e0e0;
    }

.panel-group-simple .panel {
    background: transparent;
    box-shadow: none;
}

.panel-group-simple .panel-title {
    padding-left: 0;
    padding-bottom: 10px;
}

    .panel-group-simple .panel-title:before, .panel-group-simple .panel-title:after {
        right: 5px;
    }

.panel-group-simple .panel-collapse .panel-body {
    padding: 1rem 0.75rem;
}

.panel-group-simple .panel + .panel {
    margin-top: 0;
}

/*---Notification---*/
.jq-icon-info {
    background-color: #398bf7;
    color: #d9edf7;
    border-color: #2e7de5;
}

.jq-icon-warning {
    background-color: #fbae1c;
    color: #333333;
    border-color: #df9e1b;
}

.jq-icon-error {
    background-color: #ef5350;
    color: #f2dede;
    border-color: #e73f3c;
}

.jq-icon-success {
    color: #dff0d8;
    background-color: #0fc491;
    border-color: #0fc491;
}

.myadmin-alert {
    border-radius: 0;
    color: #fff;
    padding: 12px 30px 12px 12px;
    position: relative;
    text-align: left
}

    .myadmin-alert a {
        color: inherit;
        font-weight: 600;
        text-decoration: underline
    }

    .myadmin-alert h4 {
        color: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: normal;
        margin: 0
    }

    .myadmin-alert .img {
        border-radius: 3px;
        height: 40px;
        left: 12px;
        position: absolute;
        top: 12px;
        width: 40px
    }

.myadmin-alert-img {
    min-height: 64px;
    padding-left: 45px
}

.myadmin-alert-icon {
    padding-left: 20px
}

    .myadmin-alert-icon i {
        padding-right: 10px
    }

.myadmin-alert .closed {
    color: rgba(255, 255, 255, .5);
    font-size: 20px;
    font-weight: 500;
    padding: 4px;
    position: absolute;
    right: 3px;
    text-decoration: none;
    top: 0
}

    .myadmin-alert .closed:hover {
        color: #fff
    }

.myadmin-alert-click {
    cursor: pointer;
    padding-right: 12px
}

.myadmin-alert .primary {
    background: rgba(0, 0, 0, .4);
    border: none;
    border-radius: 3px;
    color: inherit;
    outline: 0;
    padding: 4px 10px
}

.myadmin-alert .cancel {
    background: rgba(255, 255, 255, .4);
    border: none;
    border-radius: 3px;
    color: rgba(0, 0, 0, .8);
    outline: 0;
    padding: 4px 10px
}

    .myadmin-alert .cancel:hover,
    .myadmin-alert .primary:hover {
        opacity: .9
    }

.myadmin-alert-bottom,
.myadmin-alert-bottom-left,
.myadmin-alert-bottom-right,
.myadmin-alert-fullscreen,
.myadmin-alert-top,
.myadmin-alert-top-left,
.myadmin-alert-top-right {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);
    display: none;
    position: fixed;
    z-index: 9999;
}

.myadmin-alert-top {
    left: 0;
    right: 0;
    top: 0
}

.myadmin-alert-bottom {
    bottom: 0;
    left: 0;
    right: 0
}

.myadmin-alert-top-left {
    left: 20px;
    top: 80px
}

.myadmin-alert-top-right {
    right: 20px;
    top: 80px
}

.myadmin-alert-bottom-left {
    bottom: 20px;
    left: 20px
}

.myadmin-alert-bottom-right {
    bottom: 20px;
    right: 20px
}

.myadmin-alert-fullsize {
    left: 50%;
    margin: -20px;
    top: 50%
}

.alert-custom {
    background: #2cabe3;
    color: #fff;
    border-color: #2cabe3
}

.alert-inverse {
    background: #4c5667;
    color: #fff;
    border-color: #4c5667
}

.alert-success {
    background: #00c292;
    color: #fff;
    border-color: #00c292
}

.alert-dark {
    background: #313131;
    color: #fff;
    border-color: #313131
}

.alert-warning {
    background: #ffc36d;
    color: #fff;
    border-color: #ffc36d
}

.alert-danger {
    background: #ef5350;
    color: #fff;
    border-color: #ef5350
}

.alert-primary {
    background: #707cd2;
    color: #fff;
    border-color: #707cd2
}

.alert-info {
    background: #03a9f3;
    color: #fff;
    border-color: #03a9f3
}

    .alert-info .closed,
    .alert-info a.closed:hover {
        color: inherit
    }

/*---Advanced Medias---*/
.media-body > * {
    margin-bottom: 5px;
    margin-top: 0;
}

.media .lead {
    line-height: 1.875rem;
}

.media > * {
    margin: 0 8px;
}

.media-body > p:last-child {
    color: #67757c;
}

.media .custom-control {
    margin-right: 0;
    margin-left: 0;
    padding-left: 0;
    margin-top: 5px;
}

    .media .custom-control [type=checkbox] + label {
        padding-left: 20px;
    }

.media.active {
    background-color: #f9fafb;
}

.media .media-body .list-inline > li {
    padding-left: 0px;
    padding-right: 5px;
}

.media .media-hover-show {
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s;
}

.media:hover .media-hover-show {
    opacity: 1;
}

.media {
    flex-shrink: 0;
}

    .media.flex-column > div {
        width: 100%;
    }

    .media.flex-column > * {
        margin: 0;
    }

.align-sub {
    vertical-align: sub;
}

.avatar {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50px;
    background-color: #fff;
    color: #fff;
    text-transform: uppercase;
}

    .avatar img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        vertical-align: top;
    }

.avatar-bordered {
    border: 4px solid rgba(255, 255, 255, 0.25);
    -webkit-background-clip: padding-box;
    /* for Safari */
    background-clip: padding-box;
    /* for IE9+, Firefox 4+, Opera, Chrome */
}

.avatar-square {
    border-radius: 0;
}

.avatar-sm {
    width: 29px;
    height: 29px;
    line-height: 29px;
    font-size: 0.75rem;
}

.avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 1.125rem;
}

.avatar-xl {
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 1.25rem;
}

.avatar-xxl {
    width: 96px;
    height: 96px;
    line-height: 96px;
    font-size: 1.375rem;
}

.avatar-xxxl {
    width: 128px;
    height: 128px;
    line-height: 128px;
    font-size: 1.5rem;
}

.avatar-pill {
    width: auto;
    border-radius: 18px;
    color: #788394;
    text-transform: none;
    letter-spacing: 0;
    background-color: #f9fafb;
    font-size: 0.875rem;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
}

    .avatar-pill:hover, .avatar-pill:focus {
        color: #788394;
        background-color: #f5f6f7;
    }

    .avatar-pill img {
        width: 36px;
    }

    .avatar-pill span {
        padding-right: 18px;
        padding-left: 8px;
    }

    .avatar-pill .close {
        padding-left: 0;
        padding-right: 8px;
        font-size: 19px;
        line-height: inherit;
    }

    .avatar-pill.avatar-sm {
        border-radius: 14.5px;
        font-size: 0.8125rem;
    }

        .avatar-pill.avatar-sm img {
            width: 29px;
        }

        .avatar-pill.avatar-sm span {
            padding-right: 14.5px;
        }

        .avatar-pill.avatar-sm .close {
            padding-right: 6px;
            font-size: 18px;
        }

    .avatar-pill.avatar-lg {
        border-radius: 24px;
        font-size: 0.9375rem;
    }

        .avatar-pill.avatar-lg img {
            width: 48px;
        }

        .avatar-pill.avatar-lg span {
            padding-right: 24px;
        }

        .avatar-pill.avatar-lg .close {
            padding-right: 10px;
            font-size: 20px;
        }

    .avatar-pill.avatar-xl {
        border-radius: 32px;
        font-size: 1rem;
    }

        .avatar-pill.avatar-xl img {
            width: 64px;
        }

        .avatar-pill.avatar-xl span {
            padding-right: 32px;
            padding-left: 12px;
        }

        .avatar-pill.avatar-xl .close {
            padding-right: 12px;
            font-size: 22px;
        }

    .avatar-pill.avatar-xxl {
        border-radius: 48px;
        font-size: 1.125rem;
    }

        .avatar-pill.avatar-xxl img {
            width: 96px;
        }

        .avatar-pill.avatar-xxl span {
            padding-right: 48px;
            padding-left: 12px;
        }

        .avatar-pill.avatar-xxl .close {
            padding-right: 16px;
            font-size: 24px;
        }

    .avatar-pill.avatar-xxxl {
        border-radius: 64px;
        font-size: 1.25rem;
    }

        .avatar-pill.avatar-xxxl img {
            width: 128px;
        }

        .avatar-pill.avatar-xxxl span {
            padding-right: 64px;
            padding-left: 12px;
        }

        .avatar-pill.avatar-xxxl .close {
            padding-right: 20px;
            font-size: 24px;
        }

.avatar[class*='status-']::after {
    content: '';
    position: absolute;
    right: 0px;
    bottom: 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 2px solid #fff;
    background-color: #ab8ce4;
}

.avatar[class*='status-'].avatar-sm::after {
    right: -2px;
    width: 9px;
    height: 9px;
}

.avatar[class*='status-'].avatar-lg::after {
    right: 4px;
}

.avatar[class*='status-'].avatar-xl::after {
    right: 5px;
    width: 11px;
    height: 11px;
}

.avatar[class*='status-'].avatar-xxl::after {
    right: 15px;
    width: 12px;
    height: 12px;
}

.avatar[class*='status-'].avatar-xxxl::after {
    right: 25px;
    width: 16px;
    height: 16px;
}

.avatar.status-success::after {
    background-color: #00c292;
}

.avatar.status-info::after {
    background-color: #03a9f3;
}

.avatar.status-warning::after {
    background-color: #faa64b;
}

.avatar.status-danger::after {
    background-color: #fb9678;
}

.avatar.status-dark::after {
    background-color: #465161;
}

.avatar-list {
    display: -webkit-inline-box;
    display: inline-flex;
}

    .avatar-list:not(.avatar-list-overlap) {
        margin: -2px;
    }

        .avatar-list:not(.avatar-list-overlap) > * {
            margin: 2px;
        }

.avatar-list-overlap .avatar {
    border: 2px solid #fff;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
    -webkit-transition: .15s linear;
    transition: .15s linear;
}

    .avatar-list-overlap .avatar + .avatar {
        margin-left: -16px;
    }

    .avatar-list-overlap .avatar + .avatar-sm {
        margin-left: -12px;
    }

    .avatar-list-overlap .avatar + .avatar-lg {
        margin-left: -20px;
    }

    .avatar-list-overlap .avatar + .avatar-xl {
        margin-left: -26px;
    }

    .avatar-list-overlap .avatar + .avatar-xxl {
        margin-left: -36px;
    }

    .avatar-list-overlap .avatar + .avatar-xxxl {
        margin-left: -48px;
    }

    .avatar-list-overlap .overlap-exclude,
    .avatar-list-overlap .avatar:hover + .avatar {
        margin-left: 0;
    }

.avatar-add {
    font-family: themify;
    background-color: transparent;
    border: 1px dashed #afb7c5;
    color: #929daf;
    font-size: 0.875rem;
}

    .avatar-add::before {
        content: "\e61a";
    }

    .avatar-add:hover {
        background-color: #ab8ce4;
        border-color: #ab8ce4;
        color: #fff;
    }

.avatar-more span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.avatar-more:hover span {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.65);
}

[data-provide~="more-avatar"] ~ .avatar {
    display: none;
}

/*---switch---*/
.switch {
    font-weight: 300;
    letter-spacing: 0;
    margin-bottom: 0;
    line-height: 29px;
    cursor: pointer;
    white-space: nowrap;
}

    .switch input {
        display: none;
    }

/* spacer ระหว่าง toggle indicator กับ label (เดิมพึ่ง .ml-1 ที่ไม่มี CSS นิยาม → ติดกัน)
   อยู่ระหว่าง indicator/text อยู่แล้ว จึงได้ gap ทั้ง LTR และ RTL โดยไม่ต้องแยกทิศ */
.switch-description {
    display: inline-block;
    min-width: 8px;
}

/* toggle ที่ถูก disable (เช่น X Legend เมื่อเปิด X Multi Series) — จางลงให้รู้ว่ากดไม่ได้ */
.switch input:disabled ~ .switch-indicator {
    opacity: .5;
}

.switch-indicator {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background: #e3e4e5;
    border-radius: 20px;
    vertical-align: middle;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.switch input:checked ~ .switch-indicator {
    background: linear-gradient(135deg, #22C55E, #16A9E0);
}

    .switch input:checked ~ .switch-indicator::after {
        background: #fff;
        left: calc(99% - 20px);
        -webkit-box-shadow: 0px 0px 3px #fcfdfe;
        box-shadow: 0px 0px 3px #352e0a;
    }

.switch-indicator::after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    width: 20px;
    height: 20px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    cursor: inherit;
    background: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 3px #bbb;
    box-shadow: 0px 0px 3px #352e0a;
}

/*--- switch reverse ---*/
.reverse > .switch-indicator {
    background: #177EE6 !important;
}

.reverse input:checked ~ .switch-indicator {
    background: #e3e4e5 !important;
}

    .reverse input:checked ~ .switch-indicator::after {
        left: 0px !important;
        -webkit-box-shadow: 0px 0px 3px #bbb !important;
        box-shadow: 0px 0px 3px #352e0a !important;
    }

.reverse > .switch-indicator::after {
    left: calc(99% - 20px) !important;
    -webkit-box-shadow: 0px 0px 3px #fcfdfe !important;
    box-shadow: 0px 0px 3px #352e0a !important;
}


/*---fullscreen---*/
[data-provide~="boxfull"].is-fullscreen .fullscreen-default, [data-provide~="fullscreen"].is-fullscreen .fullscreen-default {
    display: none;
}

[data-provide~="boxfull"].is-fullscreen .fullscreen-active, [data-provide~="fullscreen"].is-fullscreen .fullscreen-active {
    display: inline-block;
}

[data-provide~="boxfull"] .fullscreen-active, [data-provide~="fullscreen"] .fullscreen-active {
    display: none;
}

/*---badges---*/
.badge {
    border-radius: 3px;
    font-weight: 300;
    line-height: 1.3;
    font-size: 85%;
}

    .badge:empty {
        display: inline-block;
        vertical-align: inherit;
    }

.badge-pill {
    border-radius: 10rem;
}

.badge-primary {
    background-color: #ab8ce4;
}

    .badge-primary[href]:focus, .badge-primary[href]:hover {
        background-color: #2b95d4;
    }

.badge-secondary {
    background-color: #398bf7;
}

    .badge-secondary[href]:focus, .badge-secondary[href]:hover {
        background-color: #2e7de5;
    }

.badge-success {
    background-color: #00c292;
}

    .badge-success[href]:focus, .badge-success[href]:hover {
        background-color: #0fc491;
    }

.badge-red {
    background-color: #ef5350;
}

    .badge-red[href]:focus, .badge-red[href]:hover {
        background-color: #0fc491;
    }

.badge-info {
    background-color: #177EE6;
    color: #10A377;
}

    .badge-info[href]:focus, .badge-info[href]:hover {
        background-color: #2e7de5;
    }

.badge-warning {
    background-color: #fbae1c;
}

    .badge-warning[href]:focus, .badge-warning[href]:hover {
        background-color: #df9e1b;
    }

.badge-danger {
    background-color: #E6002A;
}

    .badge-danger[href]:focus, .badge-danger[href]:hover {
        background-color: #e73f3c;
    }

.badge-pink {
    background-color: #f96197;
}

    .badge-pink[href]:focus, .badge-pink[href]:hover {
        background-color: #f84887;
    }

.badge-purple {
    background-color: #926dde;
}

    .badge-purple[href]:focus, .badge-purple[href]:hover {
        background-color: #664ce1;
    }

.badge-brown {
    background-color: #8d6658;
}

    .badge-brown[href]:focus, .badge-brown[href]:hover {
        background-color: #7d5b4e;
    }

.badge-cyan {
    background-color: #57c7d4;
}

    .badge-cyan[href]:focus, .badge-cyan[href]:hover {
        background-color: #43c0cf;
    }

.badge-yellow {
    background-color: #e0bc00;
}

    .badge-yellow[href]:focus, .badge-yellow[href]:hover {
        background-color: #e0bc00;
    }

.badge-gray {
    background-color: #d2d6de;
}

    .badge-gray[href]:focus, .badge-gray[href]:hover {
        background-color: #b5bbc8;
    }

.badge-dark {
    background-color: #465161;
}

    .badge-dark[href]:focus, .badge-dark[href]:hover {
        background-color: #3b4552;
    }

.badge-warning {
    color: #fff;
}

.badge-default {
    color: #788394;
    background-color: #f5f6f7;
}

    .badge-default[href]:focus, .badge-default[href]:hover {
        color: #788394;
        background-color: #edeef0;
    }

.badge-secondary {
    color: #788394;
    background-color: #e4e7ea;
}

    .badge-secondary[href]:focus, .badge-secondary[href]:hover {
        color: #788394;
        background-color: #dbdfe3;
    }

.badge-sm {
    line-height: 1.2;
    padding-top: 1px;
    padding-bottom: 2px;
    font-size: 75%;
}

.badge-lg {
    line-height: 1.5;
    padding: 5px 7px;
    font-size: 95%;
}

.badge-xl {
    line-height: 1.7;
    padding: 7px 9px;
    font-size: 100%;
}

.badge-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 100%;
    vertical-align: middle;
}

    .badge-dot.badge-sm {
        width: 6px;
        height: 6px;
    }

    .badge-dot.badge-lg {
        width: 10px;
        height: 10px;
    }

    .badge-dot.badge-xl {
        width: 12px;
        height: 12px;
    }

.badge-ring {
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 100%;
    vertical-align: middle;
}

    .badge-ring::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #fff;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: .3s;
        transition: .3s;
    }

    .badge-ring.badge-sm {
        width: 8px;
        height: 8px;
    }

        .badge-ring.badge-sm::after {
            width: 4px;
            height: 4px;
        }

    .badge-ring.badge-lg {
        width: 12px;
        height: 12px;
    }

        .badge-ring.badge-lg::after {
            width: 8px;
            height: 8px;
        }

    .badge-ring.badge-xl {
        width: 14px;
        height: 14px;
    }

        .badge-ring.badge-xl::after {
            width: 10px;
            height: 10px;
        }

    .badge-ring.fill::after {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

.badge-bold {
    font-family: 'Noto Sans Thai', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.list-group .badge-pill {
    margin-top: 3px;
}
/*---modal---*/
.modal {
    z-index: 9999;
}

.modal-left .modal-content {
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    border-radius: 0;
}

.modal.fade.modal-left .modal-dialog {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 360px;
    max-width: 100%;
    margin: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: .5s;
    transition: .5s;
}

.modal.fade.modal-left.show .modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.center-modal.show {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.center-modal {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: .4s;
    transition: .4s;
}

.modal.fade.center-modal .modal-dialog {
    margin: 0;
    width: 100%;
    position: absolute;
    bottom: 50%;
    left: 50%;
    border-radius: 4px;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
}

.modal-fill.show {
    display: -webkit-box !important;
    display: flex !important;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column nowrap;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transition: .4s;
    transition: .4s;
}

.modal-content {
    cursor: pointer;
    pointer-events: auto;
}

.modal-fill .modal-dialog {
    display: -webkit-box;
    display: flex;
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column nowrap;
    align-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.modal-fill .modal-content {
    background: rgba(255, 255, 255, 0.97);
    width: 100%;
    max-width: 600px;
    box-shadow: none;
}

.modal-fill {
    background: rgba(255, 255, 255, 0.97);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: .4s;
    transition: .4s;
}

.modal.modal-fill {
    background: rgba(255, 255, 255, 0.97);
}

.modal-fill .modal-header .close {
    position: fixed;
    top: 0;
    right: 0;
    padding: 20px;
    font-size: 2.5rem;
    font-weight: 300;
}

.modal-fill .modal-header {
    border-bottom: none;
}

.modal-fill .modal-footer {
    border: none;
}


.modal.fade.modal-right.show .modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal.fade.modal-right .modal-dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 100%;
    margin: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-transition: .5s;
    transition: .5s;
}

.modal-right .modal-content {
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    border-radius: 0;
}

/*---mask Formatter---*/
.sidetitle {
    font-style: italic;
    margin-left: 0.5rem;
}

    .sidetitle::before {
        content: '\2014 \00A0';
    }

.subtitle {
    display: block;
    margin-top: 8px;
}


/*---Statistic widgets---*/

.flexbox {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

    .flexbox .dropdown i {
        font-size: 14px;
    }

.no-shrink {
    flex-shrink: 0;
}

.flex-justified > *, .flex-grow-all > *, .flex-cols-wide > *, .flex-col-wide, .flex-grow {
    -webkit-box-flex: 1;
    flex: 1 1 0%;
}

.flexbox > * {
    margin-left: 4px;
    margin-right: 4px;
}

    .flexbox > *:last-child {
        margin-right: 0;
    }

    .flexbox > *:first-child {
        margin-left: 0;
    }

.list-inline > li.flexbox {
    display: -webkit-box;
    display: flex;
}

ul.flexbox {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.flexbox .list-inline > li {
    display: block;
}

.dropdown-toggle.no-caret::after {
    display: none;
}

.dropdown-item {
    color: #747e8e !important;
    font-weight: 300;
    padding: 4px 12px;
    width: auto;
    margin: 4px;
    -webkit-transition: 0.15s linear;
    transition: 0.15s linear;
}

.flexbox .dropdown a i {
    font-size: 1rem;
}

.dropdown-menu, .dropdown-grid {
    color: #FFF;
    border-radius: 2px;
    font-size: 13px;
    border-color: #455a64;
    padding: 0;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.06);
    z-index: 992;
}

.dropdown-toggle {
    cursor: pointer;
    -webkit-transition: .2s linear;
    transition: .2s linear;
}

.dropdown-item i {
    margin-right: 0.5rem;
}

.card-header .card-title {
    padding: 0;
    border: none;
}

.card-header > *:first-child {
    margin-left: 0;
}

.card-title {
    line-height: 1.5;
    margin-bottom: 0;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(97, 106, 120, 0.07);
}

.card-header > *:last-child {
    margin-right: 0;
}

.card-controls {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
}

.card-header > * {
    margin-left: 8px;
    margin-right: 8px;
}

.card-header {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    padding: 15px 20px;
    background-color: transparent;
    border-bottom: 1px solid rgba(97, 106, 120, 0.07);
}

.card-controls [data-toggle="dropdown"], .card-controls .card-btn-reload {
    font-size: 14px;
}

.card-controls li > a {
    font-size: 12px;
    display: inline-block;
    padding: 0 4px;
    margin: 0 4px;
    color: #929daf;
    opacity: .8;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

.dropdown-item.active, .dropdown-item:active {
    color: #616a78;
    background-color: #f5f6f7;
}

.percent {
    display: inline-block;
    line-height: 110px;
    z-index: 2;
}

    .percent:after {
        content: '%';
        margin-left: 0.1em;
        font-size: .8em;
    }

.easypie {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
    text-align: center;
}

    .easypie canvas {
        position: absolute;
        top: 0;
        left: 0;
    }

/*---media---*/
.media {
    padding: 0.3rem;
    -webkit-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

    .media > * {
        margin: 0 8px;
    }

    .media .nav-link:focus, .media .nav-link:hover {
        background-color: transparent;
    }

    .media a:not(.btn):not(.avatar) {
        color: #616a78;
    }

    .media.flex-column > * {
        margin: 0;
    }

    .media.flex-column > div {
        width: 100%;
    }

    .media.active {
        background-color: #f9fafb;
    }

    .media.bordered {
        border: 1px solid #ebebeb;
    }

    .media.items-center {
        -webkit-box-align: center;
        align-items: center;
    }

    .media[data-provide~="checkable"], .media[data-provide~="selectable"] {
        cursor: pointer;
    }

    .media .media {
        margin-top: 1.25rem;
    }

    .media .lead {
        line-height: 1.875rem;
    }

    .media .title {
        -webkit-box-flex: 1;
        flex: 1 1 0%;
    }

    .media .avatar {
        flex-shrink: 0;
    }

    .media .align-center {
        -ms-grid-row-align: center;
        align-self: center;
    }

    .media .media-hover-show {
        opacity: 0;
        -webkit-transition: .3s;
        transition: .3s;
    }

    .media .dropdown .dropdown-toggle {
        opacity: .7;
    }

    .media .dropdown:hover .dropdown-toggle, .media .dropdown.open .dropdown-toggle {
        opacity: 1;
    }

    .media:hover .media-hover-show {
        opacity: 1;
    }

    .media .custom-control {
        margin-right: 0;
    }

    .media .nav {
        flex-wrap: nowrap;
        margin-left: -8px;
        margin-right: -8px;
    }

    .media .nav-link {
        line-height: 24px;
        font-size: 90%;
        padding: 0 8px;
    }

.media-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
}

.media-center {
    -webkit-box-align: center;
    align-items: center;
}

.media-block-actions {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 1rem;
    -webkit-transition: .5s;
    transition: .5s;
}

.media:hover .media-block-actions {
    opacity: 1;
}

.media-collapsible {
    flex-wrap: wrap;
}

    .media-collapsible .collapse {
        -webkit-box-flex: 1;
        flex-grow: 1;
        flex-shrink: 0;
        min-width: 100%;
    }

.collapse-arrow::before {
    content: "\e64b";
    font-family: themify;
    display: inline-block;
    -webkit-transition: .4s;
    transition: .4s;
}

.collapse-arrow:not(.collapsed)::before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.media-body {
    min-width: 0;
}

    .media-body > * {
        margin-bottom: 0;
    }

    .media-body .media > *:first-child {
        margin-left: 0;
    }

    .media-body .media > *:last-child {
        margin-right: 0;
    }

.media-left {
    padding-right: 0;
}

.media-right-out {
    padding-left: 1.25rem;
}

    .media-right-out a {
        color: #788394;
        font-size: 1.125rem;
        opacity: 0.8;
    }

        .media-right-out a:hover {
            color: #ab8ce4;
        }

        .media-right-out a + a {
            margin-left: 0.5rem;
        }

.media-action {
    opacity: 0;
    color: #929daf;
}

.media:hover .media-action {
    opacity: 1;
}

.media-action-visible .media-action {
    opacity: 1;
}

.media.media-xs {
    padding: 10px 6px;
}

.media.media-sm {
    padding: 12px 8px;
}

.media.media-lg {
    padding-top: 20px 16px;
}

.media.media-xl {
    padding-top: 24px 20px;
}

.media.media-xxl {
    padding-top: 32px 24px;
}

.media-inverse,
.media-inverse h1, .media-inverse h2, .media-inverse h3, .media-inverse h4, .media-inverse h5, .media-inverse h6 {
    color: #fff;
}

    .media-inverse .small,
    .media-inverse small,
    .media-inverse time {
        color: rgba(255, 255, 255, 0.7);
    }

    .media-inverse .nav-link {
        color: rgba(255, 255, 255, 0.7);
    }

        .media-inverse .nav-link:hover {
            color: white;
        }

.media-new {
    background-color: #f3f9ff;
}

.media-list-hover .media-new:hover {
    background-color: #ecf5fe !important;
}

.media-single,
.media-center-v {
    -webkit-box-align: center;
    align-items: center;
}

.media-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.media-chat {
    padding-right: 64px;
    margin-bottom: 0;
}

    .media-chat.media-chat-reverse {
        padding-right: 12px;
        padding-left: 64px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        flex-direction: row-reverse;
    }

    .media-chat .media-body {
        display: table;
    }

        .media-chat .media-body p {
            position: relative;
            padding: 6px 8px;
            margin: 4px 0;
            background-color: #f5f6f7;
            border-radius: 3px;
        }

            .media-chat .media-body p.inverse {
                color: #fff;
            }

            .media-chat .media-body p.meta {
                background-color: transparent !important;
                padding: 0;
                opacity: .8;
            }

                .media-chat .media-body p.meta time {
                    font-weight: 300;
                }

    .media-chat.media-chat-reverse .media-body p {
        float: right;
        clear: right;
        background-color: #398bf7;
        color: #fff;
    }

.media-meta-day {
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 0;
    color: #929daf;
    opacity: .8;
    font-weight: 300;
}

    .media-meta-day::before, .media-meta-day::after {
        content: '';
        -webkit-box-flex: 1;
        flex: 1 1 0%;
        border-top: 1px solid #ebebeb;
    }

    .media-meta-day::before {
        margin-right: 16px;
    }

    .media-meta-day::after {
        margin-left: 16px;
    }

@media (max-width: 767px) {
    .media-doc {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

        .media-doc > * {
            margin-left: 0;
            margin-right: 0;
        }

        .media-doc .media-body {
            margin: 30px 0;
        }
}

.media-list > .media:not(.media-list-header):not(.media-list-footer),
.media-list .media-list-body > .media {
    margin-bottom: 0;
}

.media-listul {
    padding-left: 0;
}

.media-list .media .sortable-dot {
    margin: 0;
    margin-left: -5px;
    opacity: 0;
    border-radius: 2px;
    -webkit-transition: .5s;
    transition: .5s;
}

.media-list .media:hover .sortable-dot {
    opacity: .6;
}

.media-list[data-provide~="selectable"] .media:not(.media-list-header):not(.media-list-footer) {
    cursor: pointer;
}

.media-list-hover > .media:not(.media-list-header):not(.media-list-footer):hover,
.media-list-hover .media-list-body > .media:hover {
    background-color: #f9fafb;
    color: #000;
}

.bg-inverse .media-list-hover > .media:hover a:not(.btn):not(.avatar) {
    color: #616a78 !important;
}

.media-list-divided > .media:not(.media-list-header):not(.media-list-footer),
.media-list-divided .media-list-body > .media {
    border-bottom: 1px solid rgba(97, 106, 120, 0.07);
}

    .media-list-divided > .media:not(.media-list-header):not(.media-list-footer):last-child,
    .media-list-divided .media-list-body > .media:last-child {
        border-bottom: none;
    }

.media-list-bordered {
    border: 1px solid #f1f2f3;
}

.media-list-striped .media:not(.media-list-header):not(.media-list-footer):nth-child(even) {
    background-color: #f9fafb;
}

.media-list-xs .media {
    padding: 10px 16px;
}

.media-list-sm .media {
    padding: 12px 16px;
}

.media-list-lg .media {
    padding: 20px 16px;
}

.media-list-xl .media {
    padding: 24px 20px;
}

.media-list-xxl .media {
    padding: 32px 24px;
}

.media-list-header {
    border-bottom: 1px solid #ebebeb;
    background-color: #fcfdfe;
}

.media-list-footer {
    border-top: 1px solid #ebebeb;
    background-color: #fcfdfe;
}

.media-grid {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
}

    .media-grid::after {
        content: '';
        -webkit-box-flex: 1;
        flex: auto;
    }

    .media-grid.row {
        margin-left: -15px;
        margin-right: -15px;
    }

        .media-grid.row .media {
            margin-bottom: 15px;
        }

    .media-grid > .media {
        margin-right: 15px;
        margin-bottom: 15px;
        width: 200px;
    }

.media-grid-bordered .media {
    border: 1px solid #ebebeb;
}

.media-grid-hover .media:hover {
    background-color: #f9fafb;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    vertical-align: top;
}

/*---blog---*/

[class*="img-hov-"] {
    overflow: hidden;
}

    [class*="img-hov-"] img {
        -webkit-transition: .45s;
        transition: .45s;
        -webkit-backface-visibility: hidden;
    }

.img-hov-fadein {
    -webkit-transition: .45s;
    transition: .45s;
}

    .img-hov-fadein:hover {
        opacity: .7;
    }

.img-hov-fadeout {
    opacity: .7;
    -webkit-transition: .45s;
    transition: .45s;
}

    .img-hov-fadeout:hover {
        opacity: 1;
    }

.img-hov-zoomin img:hover {
    -webkit-transform: scale(1.045);
    transform: scale(1.045);
}

.img-hov-zoomout img {
    -webkit-transform: scale(1.045);
    transform: scale(1.045);
}

    .img-hov-zoomout img:hover {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

.img-hov-stretchin img {
    -webkit-transform-origin: left top 0;
    transform-origin: left top 0;
}

    .img-hov-stretchin img:hover {
        -webkit-transform: scale(1.045);
        transform: scale(1.045);
    }

.img-hov-stretchout img {
    -webkit-transform-origin: left top 0;
    transform-origin: left top 0;
    -webkit-transform: scale(1.045);
    transform: scale(1.045);
}

    .img-hov-stretchout img:hover {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

.img-hov-slideleft img {
    -webkit-transform-origin: left center 0;
    transform-origin: left center 0;
    -webkit-transform: scale(1.045) translateX(0);
    transform: scale(1.045) translateX(0);
}

    .img-hov-slideleft img:hover {
        -webkit-transform: scale(1.045) translateX(-4.5%);
        transform: scale(1.045) translateX(-4.5%);
    }

.img-hov-slideright img {
    -webkit-transform-origin: right center 0;
    transform-origin: right center 0;
    -webkit-transform: scale(1.045) translateX(0);
    transform: scale(1.045) translateX(0);
}

    .img-hov-slideright img:hover {
        -webkit-transform: scale(1.045) translateX(4.5%);
        transform: scale(1.045) translateX(4.5%);
    }

.img-hov-slideup img {
    -webkit-transform-origin: center top 0;
    transform-origin: center top 0;
    -webkit-transform: scale(1.045) translateY(0);
    transform: scale(1.045) translateY(0);
}

    .img-hov-slideup img:hover {
        -webkit-transform: scale(1.045) translateY(-4.5%);
        transform: scale(1.045) translateY(-4.5%);
    }

.img-hov-slidedown img {
    -webkit-transform-origin: center bottom 0;
    transform-origin: center bottom 0;
    -webkit-transform: scale(1.045) translateY(0);
    transform: scale(1.045) translateY(0);
}

    .img-hov-slidedown img:hover {
        -webkit-transform: scale(1.045) translateY(4.5%);
        transform: scale(1.045) translateY(4.5%);
    }

.img-hov-rotateleft img {
    -webkit-transform: rotateZ(0) scale(1);
    transform: rotateZ(0) scale(1);
}

    .img-hov-rotateleft img:hover {
        -webkit-transform: rotateZ(-5deg) scale(1.1);
        transform: rotateZ(-5deg) scale(1.1);
    }

.img-hov-rotateright img {
    -webkit-transform: rotateZ(0) scale(1);
    transform: rotateZ(0) scale(1);
}

    .img-hov-rotateright img:hover {
        -webkit-transform: rotateZ(5deg) scale(1.1);
        transform: rotateZ(5deg) scale(1.1);
    }

.gap-items > *,
.gap-items-3 > * {
    margin-left: 8px;
    margin-right: 8px;
}

    .gap-items > *:first-child,
    .gap-items-3 > *:first-child {
        margin-left: 0;
    }

    .gap-items > *:last-child,
    .gap-items-3 > *:last-child {
        margin-right: 0;
    }

.gap-items-1 > * {
    margin-left: 2px;
    margin-right: 2px;
}

    .gap-items-1 > *:first-child {
        margin-left: 0;
    }

    .gap-items-1 > *:last-child {
        margin-right: 0;
    }

.gap-items-2 > * {
    margin-left: 4px;
    margin-right: 4px;
}

    .gap-items-2 > *:first-child {
        margin-left: 0;
    }

    .gap-items-2 > *:last-child {
        margin-right: 0;
    }

.gap-items-4 > * {
    margin-left: 12px;
    margin-right: 12px;
}

    .gap-items-4 > *:first-child {
        margin-left: 0;
    }

    .gap-items-4 > *:last-child {
        margin-right: 0;
    }

.gap-items-5 > * {
    margin-left: 16px;
    margin-right: 16px;
}

    .gap-items-5 > *:first-child {
        margin-left: 0;
    }

    .gap-items-5 > *:last-child {
        margin-right: 0;
    }

.gap-multiline-items,
.gap-multiline-items-3 {
    margin: -8px;
}

    .gap-multiline-items > *,
    .gap-multiline-items-3 > * {
        margin: 8px;
    }

.gap-multiline-items-1 {
    margin: -2px;
}

    .gap-multiline-items-1 > * {
        margin: 2px;
    }

.gap-multiline-items-2 {
    margin: -4px;
}

    .gap-multiline-items-2 > * {
        margin: 4px;
    }

.gap-multiline-items-4 {
    margin: -12px;
}

    .gap-multiline-items-4 > * {
        margin: 12px;
    }

.gap-multiline-items-5 {
    margin: -16px;
}

    .gap-multiline-items-5 > * {
        margin: 16px;
    }

.gap-y.gap-items,
.gap-y.gap-items-3 {
    margin: -8px;
}

    .gap-y.gap-items > *,
    .gap-y.gap-items-3 > * {
        margin: 8px;
        border-radius: 5px;
    }

.gap-y.gap-items-1 {
    margin: -2px;
}

    .gap-y.gap-items-1 > * {
        margin: 2px;
    }

.gap-y.gap-items-2 {
    margin: -4px;
}

    .gap-y.gap-items-2 > * {
        margin: 4px;
    }

.gap-y.gap-items-4 {
    margin: -12px;
}

    .gap-y.gap-items-4 > * {
        margin: 12px;
    }

.gap-y.gap-items-5 {
    margin: -16px;
}

    .gap-y.gap-items-5 > * {
        margin: 16px;
    }

.bg-img {
    position: relative;
    border-bottom: none;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

[data-overlay],
[data-overlay-light] {
    position: relative;
}

    [data-overlay]::before,
    [data-overlay-light]::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #191919;
        z-index: -1;
        border-radius: inherit;
        display: block;
    }

    [data-overlay-light]::before {
        background: #fff;
    }

[data-overlay-primary]::before {
    background: #ab8ce4;
}

[data-overlay="1"]::before {
    opacity: 0.1;
}

[data-overlay="2"]::before {
    opacity: 0.2;
}

[data-overlay="3"]::before {
    opacity: 0.3;
}

[data-overlay="4"]::before {
    opacity: 0.4;
}

[data-overlay="5"]::before {
    opacity: 0.5;
}

[data-overlay="6"]::before {
    opacity: 0.6;
}

[data-overlay="7"]::before {
    opacity: 0.7;
}

[data-overlay="8"]::before {
    opacity: 0.8;
}

[data-overlay="9"]::before {
    opacity: 0.9;
}

[data-overlay-light="1"]::before {
    opacity: 0.1;
}

[data-overlay-light="2"]::before {
    opacity: 0.2;
}

[data-overlay-light="3"]::before {
    opacity: 0.3;
}

[data-overlay-light="4"]::before {
    opacity: 0.4;
}

[data-overlay-light="5"]::before {
    opacity: 0.5;
}

[data-overlay-light="6"]::before {
    opacity: 0.6;
}

[data-overlay-light="7"]::before {
    opacity: 0.7;
}

[data-overlay-light="8"]::before {
    opacity: 0.8;
}

[data-overlay-light="9"]::before {
    opacity: 0.9;
}

[data-scrim-top],
[data-scrim-bottom] {
    position: relative;
}

    [data-scrim-top]::before,
    [data-scrim-bottom]::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 20%;
        background: -webkit-gradient(linear, left top, left bottom, from(#191919), to(transparent));
        background: -webkit-linear-gradient(top, #191919 0%, transparent 100%);
        background: linear-gradient(to bottom, #191919 0%, transparent 100%);
        z-index: -1;
        border-radius: inherit;
    }

    [data-scrim-bottom]::before {
        top: 20%;
        bottom: 0;
        background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#191919));
        background: -webkit-linear-gradient(top, transparent 0%, #191919 100%);
        background: linear-gradient(to bottom, transparent 0%, #191919 100%);
    }

[data-scrim-top="1"]::before,
[data-scrim-bottom="1"]::before {
    opacity: 0.1;
}

[data-scrim-top="2"]::before,
[data-scrim-bottom="2"]::before {
    opacity: 0.2;
}

[data-scrim-top="3"]::before,
[data-scrim-bottom="3"]::before {
    opacity: 0.3;
}

[data-scrim-top="4"]::before,
[data-scrim-bottom="4"]::before {
    opacity: 0.4;
}

[data-scrim-top="5"]::before,
[data-scrim-bottom="5"]::before {
    opacity: 0.5;
}

[data-scrim-top="6"]::before,
[data-scrim-bottom="6"]::before {
    opacity: 0.6;
}

[data-scrim-top="7"]::before,
[data-scrim-bottom="7"]::before {
    opacity: 0.7;
}

[data-scrim-top="8"]::before,
[data-scrim-bottom="8"]::before {
    opacity: 0.8;
}

[data-scrim-top="9"]::before,
[data-scrim-bottom="9"]::before {
    opacity: 0.9;
}

.blockquote {
    font-style: italic;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-top: 1rem;
    color: #616a78;
}

    .blockquote p {
        font-size: 1.125rem;
        line-height: 1.875rem;
    }

    .blockquote a {
        color: #616a78;
    }

    .blockquote footer {
        color: #929daf;
        font-size: 0.875rem;
    }

        .blockquote footer::before {
            content: '\2014 \00A0';
        }

.blockquote-inverse,
.blockquote-inverse footer {
    color: #fff;
}

.card-inverse {
    color: #fff;
    background-color: #465161;
}

    .card-inverse h1, .card-inverse h2, .card-inverse h3, .card-inverse h4, .card-inverse h5, .card-inverse h6, .card-inverse .card-title, .card-inverse small, .card-inverse .card-controls li > a {
        color: #fff;
    }

.nav-dot-separated .nav-item::after, .nav-dot-separated > .nav-link::after {
    content: '•';
    vertical-align: middle;
    color: #788394;
    opacity: 0.4;
    cursor: default;
}

.nav.no-gutters > .nav-link:first-child, .nav.no-gutters .nav-item:first-child .nav-link {
    padding-left: 0;
}

.nav-dot-separated .nav-link:hover, .nav-dot-separated .nav-link:focus, .nav-dot-separated .nav-link.active {
    background-color: transparent;
}

.nav-dot-separated .nav-item, .nav-dot-separated > .nav-link {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    margin-left: 10px !important;
}

    .nav-dot-separated .nav-item:last-child::after,
    .nav-dot-separated > .nav-link:last-child::after {
        display: none;
    }

.toggler {
    color: #e3e4e5;
    cursor: pointer;
    font-size: 20px;
    margin-bottom: 0;
    line-height: 1;
}

.rating {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .rating input {
        display: none;
    }

    .rating label {
        color: #e3e4e5;
        cursor: pointer;
    }

        .rating label::before {
            margin-right: 5px;
            font-size: 20px;
            display: inline-block;
        }

        .rating .active,
        .rating :checked ~ label,
        .rating label:hover,
        .rating label:hover ~ label {
            color: #ab8ce4;
        }

.rating-static {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
}

    .rating-static label {
        cursor: default;
    }

        .rating-static label:not(.active) {
            color: #e3e4e5 !important;
        }

.rating-xs label::before {
    margin-right: 1px;
    font-size: 13px;
}

.rating-sm label::before {
    margin-right: 2px;
    font-size: 16px;
}

.rating-lg label::before {
    font-size: 24px;
}

.rating-remove {
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    line-height: 20px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .2s linear;
    transition: .2s linear;
}

[data-has-rate="true"]:hover .rating-remove {
    opacity: .6;
    visibility: visible;
}

    [data-has-rate="true"]:hover .rating-remove:hover {
        opacity: 1;
    }

.rating-primary .active,
.rating-primary :checked ~ label,
.rating-primary label:hover,
.rating-primary label:hover ~ label {
    color: #ab8ce4;
}

.rating-secondary .active,
.rating-secondary :checked ~ label,
.rating-secondary label:hover,
.rating-secondary label:hover ~ label {
    color: #e4e7ea;
}

.rating-success .active,
.rating-success :checked ~ label,
.rating-success label:hover,
.rating-success label:hover ~ label {
    color: #00c292;
}

.rating-info .active,
.rating-info :checked ~ label,
.rating-info label:hover,
.rating-info label:hover ~ label {
    color: #398bf7;
}

.rating-warning .active,
.rating-warning :checked ~ label,
.rating-warning label:hover,
.rating-warning label:hover ~ label {
    color: #faa64b;
}

.rating-danger .active,
.rating-danger :checked ~ label,
.rating-danger label:hover,
.rating-danger label:hover ~ label {
    color: #ef5350;
}

.rating-pink .active,
.rating-pink :checked ~ label,
.rating-pink label:hover,
.rating-pink label:hover ~ label {
    color: #f96197;
}

.rating-purple .active,
.rating-purple :checked ~ label,
.rating-purple label:hover,
.rating-purple label:hover ~ label {
    color: #926dde;
}

.rating-brown .active,
.rating-brown :checked ~ label,
.rating-brown label:hover,
.rating-brown label:hover ~ label {
    color: #8d6658;
}

.rating-cyan .active,
.rating-cyan :checked ~ label,
.rating-cyan label:hover,
.rating-cyan label:hover ~ label {
    color: #57c7d4;
}

.rating-yellow .active,
.rating-yellow :checked ~ label,
.rating-yellow label:hover,
.rating-yellow label:hover ~ label {
    color: #e0bc00;
}

.rating-gray .active,
.rating-gray :checked ~ label,
.rating-gray label:hover,
.rating-gray label:hover ~ label {
    color: #868e96;
}

.rating-dark .active,
.rating-dark :checked ~ label,
.rating-dark label:hover,
.rating-dark label:hover ~ label {
    color: #465161;
}

.toggler {
    color: #e3e4e5;
    cursor: pointer;
    font-size: 20px;
    margin-bottom: 0;
    line-height: 1;
}

    .toggler i {
        -webkit-transition: color .2s linear;
        transition: color .2s linear;
    }

    .toggler input {
        display: none;
    }

        .toggler input:checked + i {
            color: #fcc525;
        }

.toggler-primary input:checked + i {
    color: #ab8ce4;
}

.toggler-secondary input:checked + i {
    color: #e4e7ea;
}

.toggler-success input:checked + i {
    color: #00c292;
}

.toggler-info input:checked + i {
    color: #398bf7;
}

.toggler-warning input:checked + i {
    color: #faa64b;
}

.toggler-danger input:checked + i {
    color: #ef5350;
}

.toggler-pink input:checked + i {
    color: #f96197;
}

.toggler-purple input:checked + i {
    color: #926dde;
}

.toggler-brown input:checked + i {
    color: #8d6658;
}

.toggler-cyan input:checked + i {
    color: #57c7d4;
}

.toggler-yellow input:checked + i {
    color: #fcc525;
}

.toggler-gray input:checked + i {
    color: #868e96;
}

.toggler-dark input:checked + i {
    color: #465161;
}

/*---box nav-tab---*/


.nav-tabs .nav-link {
    position: relative;
    border: none;
    font-size: 13px;
    color: #929daf;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    border-radius: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

@media (max-width: 767px) {
    .nav-tabs .nav-link {
        padding: 8px 12px;
    }
}

.nav-tabs.nav-tabs-primary .nav-link:hover, .nav-tabs.nav-tabs-primary .nav-link.active, .nav-tabs.nav-tabs-primary .nav-link.active:focus, .nav-tabs.nav-tabs-primary .nav-link.active:hover {
    border-color: #ab8ce4;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-secondary .nav-link:hover, .nav-tabs.nav-tabs-secondary .nav-link.active, .nav-tabs.nav-tabs-secondary .nav-link.active:focus, .nav-tabs.nav-tabs-secondary .nav-link.active:hover {
    border-color: #e4e7ea;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-success .nav-link:hover, .nav-tabs.nav-tabs-success .nav-link.active, .nav-tabs.nav-tabs-success .nav-link.active:focus, .nav-tabs.nav-tabs-success .nav-link.active:hover {
    border-color: #00c292;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-info .nav-link:hover, .nav-tabs.nav-tabs-info .nav-link.active, .nav-tabs.nav-tabs-info .nav-link.active:focus, .nav-tabs.nav-tabs-info .nav-link.active:hover {
    border-color: #03a9f3;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-warning .nav-link:hover, .nav-tabs.nav-tabs-warning .nav-link.active, .nav-tabs.nav-tabs-warning .nav-link.active:focus, .nav-tabs.nav-tabs-warning .nav-link.active:hover {
    border-color: #faa64b;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-danger .nav-link:hover, .nav-tabs.nav-tabs-danger .nav-link.active, .nav-tabs.nav-tabs-danger .nav-link.active:focus, .nav-tabs.nav-tabs-danger .nav-link.active:hover {
    border-color: #00a898;
    border-width: thick;
    background-color: transparent;
    color: #00a898;
    font-weight: 600;
}

.nav-tabs.nav-tabs-pink .nav-link:hover, .nav-tabs.nav-tabs-pink .nav-link.active, .nav-tabs.nav-tabs-pink .nav-link.active:focus, .nav-tabs.nav-tabs-pink .nav-link.active:hover {
    border-color: #f96197;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-purple .nav-link:hover, .nav-tabs.nav-tabs-purple .nav-link.active, .nav-tabs.nav-tabs-purple .nav-link.active:focus, .nav-tabs.nav-tabs-purple .nav-link.active:hover {
    border-color: #926dde;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-brown .nav-link:hover, .nav-tabs.nav-tabs-brown .nav-link.active, .nav-tabs.nav-tabs-brown .nav-link.active:focus, .nav-tabs.nav-tabs-brown .nav-link.active:hover {
    border-color: #8d6658;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-cyan .nav-link:hover, .nav-tabs.nav-tabs-cyan .nav-link.active, .nav-tabs.nav-tabs-cyan .nav-link.active:focus, .nav-tabs.nav-tabs-cyan .nav-link.active:hover {
    border-color: #57c7d4;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-yellow .nav-link:hover, .nav-tabs.nav-tabs-yellow .nav-link.active, .nav-tabs.nav-tabs-yellow .nav-link.active:focus, .nav-tabs.nav-tabs-yellow .nav-link.active:hover {
    border-color: #e0bc00;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-gray .nav-link:hover, .nav-tabs.nav-tabs-gray .nav-link.active, .nav-tabs.nav-tabs-gray .nav-link.active:focus, .nav-tabs.nav-tabs-gray .nav-link.active:hover {
    border-color: #868e96;
    background-color: transparent;
    color: #495057;
}

.nav-tabs.nav-tabs-dark .nav-link:hover, .nav-tabs.nav-tabs-dark .nav-link.active, .nav-tabs.nav-tabs-dark .nav-link.active:focus, .nav-tabs.nav-tabs-dark .nav-link.active:hover {
    border-color: #465161;
    background-color: transparent;
    color: #495057;
}

.nav-tabs-light-mode {
    border-bottom: none;
    background-color: #f9fafb;
}

    .nav-tabs-light-mode .nav-link {
        border-bottom: none;
    }

.nav-tabs-inverse-mode {
    border-bottom: none;
    background-color: transparent;
    margin-bottom: 0;
}

    .nav-tabs-inverse-mode .nav-link {
        border-bottom: none;
    }

        .nav-tabs-inverse-mode .nav-link.active, .nav-tabs-inverse-mode .nav-link.active:focus, .nav-tabs-inverse-mode .nav-link.active:hover {
            background-color: #f9fafb;
            color: #495057;
        }

    .nav-tabs-inverse-mode + .tab-content {
        background-color: #f9fafb;
        padding: 20px 16px;
    }

.nav-tabs-left,
.nav-tabs-right {
    display: -webkit-box;
    display: flex;
}

    .nav-tabs-left .nav-tabs,
    .nav-tabs-right .nav-tabs {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        border-bottom: 0;
    }

        .nav-tabs-left .nav-tabs .nav-item + .nav-item,
        .nav-tabs-right .nav-tabs .nav-item + .nav-item {
            margin-left: 0;
        }

        .nav-tabs-left .nav-tabs .nav-link,
        .nav-tabs-right .nav-tabs .nav-link {
            border-bottom: none;
            text-align: left;
        }

    .nav-tabs-left .tab-content,
    .nav-tabs-right .tab-content {
        overflow: hidden;
    }

    .nav-tabs-left .nav-tabs {
        border-right: 1px solid #ebebeb;
    }

        .nav-tabs-left .nav-tabs .nav-link {
            border-right: 2px solid transparent;
        }

    .nav-tabs-left .tab-content {
        padding-left: 20px;
    }

    .nav-tabs-right .nav-tabs {
        -webkit-box-ordinal-group: 3;
        order: 2;
        border-left: 1px solid #ebebeb;
    }

        .nav-tabs-right .nav-tabs .nav-link {
            border-left: 2px solid transparent;
        }

    .nav-tabs-right .tab-content {
        -webkit-box-ordinal-group: 2;
        order: 1;
        padding-right: 20px;
    }

.lookup {
    position: relative;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
}

    .lookup::before {
        content: "\e610";
        font-family: themify;
        font-size: 16px;
        position: absolute;
        top: 52%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        color: rgba(97, 106, 120, 0.4);
        width: 36px;
        text-align: center;
        cursor: text;
    }

    .lookup input {
        color: #616a78;
        border: 1px solid #ebebeb;
        border-radius: 18px;
        height: 36px;
        width: 200px;
        max-width: 100%;
        padding-left: 36px;
        padding-right: 18px;
        font-family: 'Noto Sans Thai', sans-serif;
        font-size: 15px;
        font-weight: 300;
        letter-spacing: .5px;
        outline: none !important;
        -webkit-transition: .5s;
        transition: .5s;
    }

        .lookup input::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: rgba(97, 106, 120, 0.7);
        }

        .lookup input::-moz-placeholder {
            /* Firefox 19+ */
            color: rgba(97, 106, 120, 0.7);
        }

        .lookup input:-ms-input-placeholder {
            /* IE 10+ */
            color: rgba(97, 106, 120, 0.7);
        }

        .lookup input:-moz-placeholder {
            /* Firefox 18- */
            color: rgba(97, 106, 120, 0.7);
        }

        .lookup input:focus {
            background-color: rgba(97, 106, 120, 0.04);
        }

        .lookup input + input,
        .lookup input + .bootstrap-select .dropdown-toggle {
            border-left: none;
        }

    .lookup .bootstrap-select + .bootstrap-select .dropdown-toggle {
        border-left: none;
    }

    .lookup .btn {
        height: 36px;
        line-height: 36px;
    }

    .lookup.no-icon::before {
        display: none;
    }

    .lookup.no-icon input {
        padding-left: 18px;
    }

.lookup-sm::before {
    font-size: 14px;
    width: 29px;
}

.lookup-sm input {
    border-radius: 14.5px;
    height: 29px;
    width: 29px;
    padding-left: 29px;
    padding-right: 14.5px;
    font-size: 14px;
    width: 160px;
}

.lookup-sm .btn {
    height: 29px;
    line-height: 29px;
}

.lookup-lg::before {
    font-size: 20px;
    width: 48px;
}

.lookup-lg input {
    border-radius: 24px;
    height: 48px;
    width: 48px;
    padding-left: 48px;
    padding-right: 24px;
    font-size: 16px;
    width: 250px;
}

.lookup-lg .btn {
    height: 48px;
    line-height: 48px;
}

.lookup-right::before {
    left: auto;
    right: 0;
}

.lookup-right input {
    padding-left: 18px;
    padding-right: 36px;
}

.lookup-right.lookup-sm input {
    padding-left: 14.5px;
    padding-right: 29px;
}

.lookup-right.lookup-lg input {
    padding-left: 24px;
    padding-right: 48px;
}

.lookup-right.no-icon input {
    padding-right: 18px;
}

.lookup-right.no-icon.lookup-sm input {
    padding-right: 14.5px;
}

.lookup-right.no-icon.lookup-lg input {
    padding-right: 24px;
}

.lookup-circle {
    z-index: 0;
}

    .lookup-circle::before {
        z-index: -1;
    }

    .lookup-circle input {
        background-color: rgba(97, 106, 120, 0.04);
        border: none;
        width: 36px;
        padding-right: 0;
    }

        .lookup-circle input:focus {
            background-color: rgba(97, 106, 120, 0.05);
            width: 170px;
            padding-right: 18px;
        }

    .lookup-circle.lookup-sm::before {
        font-size: 14px;
        width: 29px;
    }

    .lookup-circle.lookup-sm input {
        border-radius: 14.5px;
        height: 29px;
        width: 29px;
        padding-left: 29px;
    }

        .lookup-circle.lookup-sm input:focus {
            width: 150px;
            padding-right: 14.5px;
        }

    .lookup-circle.lookup-lg::before {
        font-size: 16px;
        width: 48px;
    }

    .lookup-circle.lookup-lg input {
        border-radius: 24px;
        height: 48px;
        width: 48px;
        padding-left: 48px;
    }

        .lookup-circle.lookup-lg input:focus {
            width: 200px;
            padding-right: 24px;
        }

    .lookup-circle.lookup-right::before {
        left: auto;
        right: 0;
    }

    .lookup-circle.lookup-right input {
        padding-left: 0;
        padding-right: 36px;
    }

        .lookup-circle.lookup-right input:focus {
            padding-left: 18px;
        }

    .lookup-circle.lookup-right.lookup-sm input {
        padding-left: 0;
        padding-right: 29px;
    }

        .lookup-circle.lookup-right.lookup-sm input:focus {
            padding-left: 14.5px;
        }

    .lookup-circle.lookup-right.lookup-lg input {
        padding-left: 0;
        padding-right: 48px;
    }

        .lookup-circle.lookup-right.lookup-lg input:focus {
            padding-left: 24px;
        }

.lookup-huge {
    display: -webkit-box;
    display: flex;
}

    .lookup-huge::before {
        font-size: 24px;
        width: 64px;
    }

    .lookup-huge input {
        border-radius: 32px;
        height: 64px;
        width: 64px;
        padding-left: 64px;
        padding-right: 32px;
        font-size: 20px;
        font-weight: 100;
        width: 100%;
    }

        .lookup-huge input::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: #c9ccce;
        }

        .lookup-huge input::-moz-placeholder {
            /* Firefox 19+ */
            color: #c9ccce;
        }

        .lookup-huge input:-ms-input-placeholder {
            /* IE 10+ */
            color: #c9ccce;
        }

        .lookup-huge input:-moz-placeholder {
            /* Firefox 18- */
            color: #c9ccce;
        }

    .lookup-huge .btn,
    .lookup-huge .bootstrap-select.btn-group > .dropdown-toggle {
        height: 64px;
        line-height: 100%;
    }

    .lookup-huge.no-icon input {
        padding-left: 32px;
    }

.lookup-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.985);
    z-index: 1050;
    padding: 50px 5%;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

    .lookup-fullscreen.reveal {
        display: -webkit-box;
        display: flex;
    }

    .lookup-fullscreen > .close {
        position: absolute;
        top: 32px;
        right: 32px;
    }

    .lookup-fullscreen .lookup-form {
        border-bottom: 1px solid #ebebeb;
        margin-bottom: 2rem;
    }

        .lookup-fullscreen .lookup-form input {
            border: none;
            font-size: 44px;
            background-color: transparent;
            outline: none !important;
            padding: 25px 0;
            color: #616a78;
            width: 100%;
        }

            .lookup-fullscreen .lookup-form input::-webkit-input-placeholder {
                /* Chrome/Opera/Safari */
                color: #c9ccce;
            }

            .lookup-fullscreen .lookup-form input::-moz-placeholder {
                /* Firefox 19+ */
                color: #c9ccce;
            }

            .lookup-fullscreen .lookup-form input:-ms-input-placeholder {
                /* IE 10+ */
                color: #c9ccce;
            }

            .lookup-fullscreen .lookup-form input:-moz-placeholder {
                /* Firefox 18- */
                color: #c9ccce;
            }

    .lookup-fullscreen .lookup-results {
        height: 100%;
    }

        .lookup-fullscreen .lookup-results .ps-scrollbar-x-rail {
            display: none;
        }

@media (max-width: 767px) {
    .lookup-fullscreen .lookup-results.scrollable .row {
        margin-left: 0;
        margin-right: 0;
    }

        .lookup-fullscreen .lookup-results.scrollable .row [class*="col-"] {
            padding-left: 0;
            padding-right: 0;
        }
}

.publisher {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 12px 20px;
    background-color: #f9fafb;
}

    .publisher > * {
        margin: 0 8px;
    }

        .publisher > *:first-child {
            margin-left: 0;
        }

        .publisher > *:last-child {
            margin-right: 0;
        }

.publisher-multi {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start;
}

    .publisher-multi > * {
        margin: 0;
        -webkit-box-flex: 1;
        flex-grow: 1;
        width: 100%;
    }

    .publisher-multi .publisher-input {
        margin-bottom: 1rem;
    }

.publisher-input {
    -webkit-box-flex: 1;
    flex-grow: 1;
    border: none;
    outline: none !important;
    background-color: transparent;
}

.publisher-btn {
    background-color: transparent;
    border: none;
    color: #929daf;
    font-size: 16px;
    cursor: pointer;
    overflow: -moz-hidden-unscrollable;
    -webkit-transition: .2s linear;
    transition: .2s linear;
}

    .publisher-btn:hover {
        color: #616a78;
    }

.publisher-avatar {
    position: absolute;
    width: auto;
    left: -18px;
    top: 8px;
}

    .publisher-avatar.avatar-sm {
        left: -14.5px;
        top: auto;
    }

.file-group input[type="file"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
    width: 20px;
}

.form-groups-attached {
    margin-bottom: 1rem;
}

    .form-groups-attached .form-group {
        margin-bottom: 0;
        border-radius: 0;
    }

    .form-groups-attached > div:not(:last-child),
    .form-groups-attached > div:not(:last-child) .form-group {
        border-bottom-color: transparent;
    }

    .form-groups-attached .row {
        margin-left: 0;
        margin-right: 0;
    }

        .form-groups-attached .row > .form-group:not(:last-child) {
            border-right-color: transparent;
        }

.file-group {
    position: relative;
    overflow: hidden;
}

    .file-group input[type="file"] {
        position: absolute;
        opacity: 0;
        z-index: 2;
        width: 100%;
        display: block;
        top: 0;
        cursor: pointer;
    }

.file-group-inline {
    display: inline-block;
}


.price {
    font-weight: bold;
    font-size: 75px;
    line-height: 75px;
    color: #000;
    padding: 10px 0;
}

    .price span {
        display: block;
        font-size: 12px;
        font-weight: 400;
        line-height: 25px;
        color: #788394;
    }

    .price sup {
        font-size: 28px;
        vertical-align: super;
    }

.price-dollar {
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
    margin-right: -10px;
    margin-top: 14px;
}

.price-interval {
    display: inline-block;
    font-size: 12px;
    vertical-align: text-bottom;
    margin-left: -10px;
    margin-bottom: 14px;
    color: #929daf;
}













/*-----------------*/

.box-comments {
    background: #f7f7f7;
}

    .box-comments .box-comment {
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }

        .box-comments .box-comment:after, .box-comments .box-comment:before {
            content: " ";
            display: table;
        }

        .box-comments .box-comment:after {
            clear: both;
        }

        .box-comments .box-comment:last-of-type {
            border-bottom: 0;
        }

        .box-comments .box-comment:first-of-type {
            padding-top: 0;
        }

        .box-comments .box-comment img {
            float: left;
        }

    .box-comments .comment-text {
        margin-left: 40px;
        color: #555;
    }

    .box-comments .username {
        color: #455a64;
        display: block;
        font-weight: 600;
    }

    .box-comments .text-muted {
        font-weight: 300;
        font-size: 12px;
    }

.todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto;
}

    .todo-list > li {
        border-radius: 2px;
        padding: 10px;
        background: #ebebeb;
        margin-bottom: 2px;
        color: #455a64;
    }

        .control, .todo-list > li:last-of-type {
            margin-bottom: 0;
        }

.control {
    font-family: 'Noto Sans Thai', sans-serif;
    display: inline;
    padding-left: 0;
    padding-top: 0;
    cursor: pointer;
    font-size: 16px;
}

    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

.control_indicator {
    position: absolute;
    top: 2px;
    left: 5px;
    height: 15px;
    width: 15px;
    background: #fff;
}

.control-radio .control_indicator {
    border-radius: undefined;
}

.control input:focus ~ .control_indicator, .control:hover input ~ .control_indicator {
    background: #fff;
}

.control input:checked:focus ~ .control_indicator, .control input:checked ~ .control_indicator, .control:hover input:not([disabled]):checked ~ .control_indicator {
    background: #398bf7;
}

.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: .6;
    pointer-events: none;
}

.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control_indicator:after {
    display: block;
}

.control-checkbox .control_indicator:after {
    left: 5px;
    top: 1px;
    width: 3px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #7b7b7b;
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

td .label {
    font-size: 100%;
}

.badge {
    font-weight: normal;
}

.todo-list > li > input[type=checkbox] {
    margin: 0 10px 0 5px;
}

.todo-list > li .text {
    display: inline-block;
    margin-left: 30px;
    font-weight: 600;
}

.todo-list > li .label {
    margin-left: 10px;
    font-size: 9px;
}

.todo-list > li .tools {
    display: none;
    float: right;
    color: #ef5350;
}

.todo-list .handle, .todo-list > li:hover .tools {
    display: inline-block;
}

.todo-list > li .tools > .fa, .todo-list > li .tools > .glyphicon, .todo-list > li .tools > .ion {
    margin-right: 5px;
    cursor: pointer;
}

.todo-list > li.done {
    color: #67757c;
}

    .todo-list > li.done .text {
        text-decoration: line-through;
        font-weight: 500;
    }

    .todo-list > li.done .label {
        background: #d2d6de;
    }

.todo-list .danger {
    border-left-color: #ef5350;
}

.todo-list .warning {
    border-left-color: #fbae1c;
}

.todo-list .info {
    border-left-color: #398bf7;
}

.todo-list .success {
    border-left-color: #00c292;
}

.todo-list .primary {
    border-left-color: #398bf7;
}

.todo-list .handle {
    cursor: move;
    margin: 0 5px;
}

.list-inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}
/*chat*/
.chat {
    padding: 5px 20px 5px 10px;
}

    .chat .item {
        margin-bottom: 10px;
    }

        .chat .item:after, .chat .item:before {
            content: " ";
            display: table;
        }

        .chat .item > img {
            width: 40px;
            height: 40px;
            border: 2px solid transparent;
            border-radius: 5px;
        }

        .chat .item > .online {
            border: 2px solid #00c292;
        }

        .chat .item > .offline {
            border: 2px solid #ef5350;
        }

        .chat .item > .message {
            margin-left: 55px;
            margin-top: -40px;
            color: #67757c;
        }

            .chat .item > .message > .name {
                display: block;
                font-weight: 600;
            }

        .chat .item > .attachment {
            border-radius: 3px;
            background: #d6ecff;
            margin-left: 65px;
            margin-right: 15px;
            padding: 10px;
        }

            .chat .item > .attachment .pull-right .btn {
                top: 10px;
                position: relative;
                border-radius: 5px;
            }

            .chat .item > .attachment > h4 {
                margin: 0 0 5px;
                font-weight: 600;
                font-size: 14px;
            }

            .chat .item > .attachment > .filename, .chat .item > .attachment > p {
                font-weight: 600;
                font-size: 13px;
                font-style: italic;
                margin: 0;
            }

            .chat .item > .attachment:after, .chat .item > .attachment:before {
                content: " ";
                display: table;
            }

.info-box, .info-box-icon, .info-box-more, .info-box-number {
    display: block;
}

.box-input {
    max-width: 200px;
}

.modal .panel-body {
    color: #455a64;
}

.model_img {
    cursor: pointer;
}

.info-box {
    min-height: 100px;
    background: #fff;
    width: 100%;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
}

    .info-box small {
        font-size: 14px;
    }

    .info-box .progress {
        background: rgba(0, 0, 0, .2);
        margin: 5px -10px 5px 0;
        height: 2px;
    }

        .info-box .progress, .info-box .progress .progress-bar {
            border-radius: 0;
        }

            .info-box .progress .progress-bar {
                background: #fff;
            }

.info-box-icon {
    float: left;
    height: 70px;
    width: 70px;
    text-align: center;
    font-size: 30px;
    line-height: 74px;
    background: rgba(0, 0, 0, .2);
    border-radius: 10px;
}

    .info-box-icon.push-bottom {
        margin-top: 20px;
    }

    .info-box-icon > img {
        max-width: 100%
    }

.info-box-content {
    padding: 10px 10px 10px 0;
    margin-left: 90px;
}

.info-box-number {
    font-weight: 300;
    font-size: 21px;
}

.info-box-text, .progress-description {
    display: block;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 300;
}

.progress-description {
    margin: 0;
}
/*timeline*/
.timeline-vertical {
    position: relative;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    background-color: white;
}

.timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #c9d8e0;
    left: 33px;
    margin: 0;
    border-radius: 2px;
}

.timeline-vertical:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #c9d8e0;
    left: 33px;
    margin: 0;
    border-radius: 2px;
}

.timeline-vertical > li {
    position: relative;
    margin-right: 10px;
    margin-bottom: 15px;
}

    .timeline-vertical > li:after, .timeline > li:before {
        content: " ";
        display: table;
    }

    .timeline-vertical > li > .timeline-item {
        border-radius: 5px;
        margin-top: 0;
        margin-bottom: 15px;
        color: #000;
        font-size: 13px;
        margin-left: 60px;
        margin-right: 10px;
        padding: 0;
        position: relative;
    }

        .timeline-vertical > li > .timeline-item > .time {
            color: #67757c;
            float: right;
            padding: 1.25rem;
        }

        .timeline-vertical > li > .timeline-item > .timeline-header {
            margin: 0;
            color: #555;
            padding: 1.25rem;
            line-height: 1.1;
        }

            .timeline-vertical > li > .timeline-item > .timeline-header > a {
                font-weight: 600;
            }

        .timeline-vertical > li > .timeline-item > .timeline-body, .timeline > li > .timeline-item > .timeline-footer {
            padding: 0.8rem;
        }

    .timeline-vertical > li > .fa, .timeline > li > .glyphicon, .timeline > li > .ion, .timeline > li > i {
        width: 25px;
        height: 25px;
        font-size: 15px;
        line-height: 25px;
        position: absolute;
        color: #67757c;
        border-radius: 50%;
        text-align: center;
        left: 21px;
        top: 0;
        margin-bottom: 15px;
    }

.timeline-vertical > .time-label > span {
    font-weight: 500;
    padding: 1px 5px;
    display: inline-block;
    border-radius: 5px;
}

.btn-circle, .btn-rounded {
}

.timeline-inverse > li > .timeline-item {
    background: #f0f0f0;
    border: 1px solid #ddd;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .timeline-inverse > li > .timeline-item > .timeline-header {
        border-bottom-color: #ddd;
    }
/*Button*/
.btn.dropdown-toggle::after, .btn-group-vertical .btn.dropdown-toggle::after {
    display: none;
}

button.btn.dropdown-toggle::after, .wysihtml5-toolbar .btn.dropdown-toggle::after {
    display: inline-block;
}

.dropdown-toggle.no-caret::after, button.btn.dropdown-toggle.no-caret::after {
    display: none;
}

.btn {
    border-radius: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    line-height: inherit;
}

.btn-circle {
    border-radius: 100%;
}

.btn-rounded {
    border-radius: 15px;
}

.btn-group-vertical > .btn:first-child:not(:last-child), .btn-group-vertical > .btn:last-child:not(:first-child), .btn.btn-flat {
    border-radius: 5px;
}

.btn.btn-flat {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-width: 1px;
}

.btn:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.btn:focus {
    outline: 0;
}

.btn, .btn:hover {
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

    .btn.btn-file {
        position: relative;
        overflow: hidden;
    }

        .btn.btn-file > input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            opacity: 0;
            filter: alpha(opacity=0);
            outline: 0;
            background: #fff;
            cursor: inherit;
            display: block;
        }

.btn-app, .pagination li a, table.text-center, table.text-center td, table.text-center th {
    text-align: center;
}

.btn-xs, .btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.btn-default {
    background-color: #f4f4f4;
    color: #455a64;
    border-color: #ddd;
    display: flex;
    align-items: center;
    padding: 6px 14px;
}

    .btn-default.hover, .btn-default:active, .btn-default:hover {
        background-color: #e7e7e7;
    }

.btn-link {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn[class*=bg-]:hover {
    /* -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .2);*/
    /*  box-shadow: inset 0 0 100px rgba(0, 0, 0, .2);*/
}

.btn-app {
    position: relative;
    padding: 15px 5px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    height: 60px;
    color: #67757c;
    border: 1px solid #ddd;
    background-color: #f4f4f4;
    font-size: 12px;
    overflow: visible;
}

    .btn-app .badge {
        font-size: 100%;
    }

    .btn-app.bg-aqua, .btn-app.bg-blue, .btn-app.bg-green, .btn-app.bg-light-blue, .btn-app.bg-maroon, .btn-app.bg-navy, .btn-app.bg-olive, .btn-app.bg-purple, .btn-app.bg-red, .btn-app.bg-teal, .btn-app.bg-yellow {
        border: none;
    }

.alert, .callout {
    border-radius: 5px;
}

.btn-app > .fa, .btn-app > .glyphicon, .btn-app > .ion {
    font-size: 20px;
    display: block;
}

.btn-app:hover {
    background: #f4f4f4;
    color: #455a64;
    border-color: #aaa;
}

.callout .highlight, .callout code, .wysihtml5-toolbar .btn-default {
    background-color: #fff;
}

.btn-app:active, .btn-app:focus {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.btn-app > .badge {
    position: absolute;
    top: -3px;
    right: -10px;
    font-weight: 300;
}

.blockquote {
    padding: .5rem 1rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    border-left: .25rem solid #eceeef;
}

.blockquote-reverse {
    padding-right: 1rem;
    padding-left: 0;
    text-align: right;
    border-right: .25rem solid #eceeef;
    border-left: 0;
}

@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 180px;
        clear: left;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dl-horizontal dd {
        margin-left: 180px;
    }
}

.alert h4, .callout h4, .nav-pills > li.active > a, .products-list .product-title {
    font-weight: 600;
}
/*---*/

.btn:hover {
    cursor: pointer;
}

.btn:focus, .btn.focus, .btn:active, .btn.active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-bold {
    font-family: 'Noto Sans Thai', sans-serif;
    /*text-transform: uppercase;*/
    font-weight: 500;
    font-size: 12px;
}

.btn-group-xs > .btn,
.btn-xs {
    font-size: 11px;
    padding: 2px 8px;
    line-height: 18px;
}

    .btn-group-xs > .btn.btn-bold,
    .btn-xs.btn-bold {
        font-size: 9px;
    }

.btn-group-sm > .btn,
.btn-sm {
    font-size: 11px;
    padding: 4px 12px;
    line-height: 20px;
    color: #464646;
}

    .btn-group-sm > .btn.btn-bold,
    .btn-sm.btn-bold {
        font-size: 11px;
    }

.btn-group-lg > .btn,
.btn-lg {
    font-size: 15px;
    padding: 7px 20px;
    line-height: 32px;
}

    .btn-group-lg > .btn.btn-bold,
    .btn-lg.btn-bold {
        font-size: 14px;
    }

.btn-w-xs {
    width: 85px;
}

.btn-w-sm {
    width: 100px;
}

.btn-w-md {
    width: 120px;
}

.btn-w-lg {
    width: 130px;
}

.btn-w-xl {
    width: 180px;
}

.btn-round {
    border-radius: 10rem;
}

.btn-sq,
.btn-square {
    padding: 5px;
    width: 36px;
    height: 36px;
}

    .btn-sq.btn-lg,
    .btn-square.btn-lg {
        width: 48px;
        height: 48px;
    }

    .btn-sq.btn-sm,
    .btn-square.btn-sm {
        width: 29px;
        height: 29px;
    }

    .btn-sq.btn-xs,
    .btn-square.btn-xs {
        width: 24px;
        height: 24px;
    }

.btn-primary {
    background-color: #D25055;
    border-color: #fb9678;
    color: #fff;
}

    .btn-primary:hover {
        background-color: #fa8181;
        border-color: #fa8181;
        color: #fff;
    }

    .btn-primary:focus, .btn-primary.focus {
        color: #fff;
    }

    .btn-primary.disabled, .btn-primary:disabled {
        background-color: #D25055;
        border-color: #fb9678;
        opacity: 0.5;
    }

    .btn-primary:active, .btn-primary.active,
    .show > .btn-primary.dropdown-toggle {
        background-color: #b4a1d8 !important;
        border-color: #b4a1d8 !important;
        color: #fff;
    }

.btn-success {
    background-color: #00c292;
    border-color: #00c292;
    color: #fff;
}

    .btn-success:hover {
        background-color: #16d17f;
        border-color: #16d17f;
        color: #fff;
    }

    .btn-success:focus, .btn-success.focus {
        color: #fff;
    }

    .btn-success.disabled, .btn-success:disabled {
        background-color: #00c292;
        border-color: #00c292;
        opacity: 0.5;
    }

    .btn-success:active, .btn-success.active,
    .show > .btn-success.dropdown-toggle {
        background-color: #14b56f !important;
        border-color: #14b56f !important;
        color: #fff;
    }

.btn-info {
    background-color: #03a9f3;
    border-color: #03a9f3;
    color: #fff;
}

    .btn-info:hover {
        background-color: #65bdf8;
        border-color: #65bdf8;
        color: #fff;
    }

    .btn-info:focus, .btn-info.focus {
        color: #fff;
    }

    .btn-info.disabled, .btn-info:disabled {
        background-color: #03a9f3;
        border-color: #03a9f3;
        opacity: 0.5;
    }

    .btn-info:active, .btn-info.active,
    .show > .btn-info.dropdown-toggle {
        background-color: #2ba3f6 !important;
        border-color: #2ba3f6 !important;
        color: #fff;
    }

.btn-warning {
    background-color: #faa64b;
    border-color: #faa64b;
    color: #fff;
}

    .btn-warning:hover {
        background-color: #fbb264;
        border-color: #fbb264;
        color: #fff;
    }

    .btn-warning:focus, .btn-warning.focus {
        color: #fff;
    }

    .btn-warning.disabled, .btn-warning:disabled {
        background-color: #faa64b;
        border-color: #faa64b;
        opacity: 0.5;
    }

    .btn-warning:active, .btn-warning.active,
    .show > .btn-warning.dropdown-toggle {
        background-color: #f99a32 !important;
        border-color: #f99a32 !important;
        color: #fff;
    }

.btn-danger {
    background-color: #D25055;
    border-color: #fb9678;
    color: #fff;
}

.btn-red {
    background-color: #ef5350;
    border-color: #fb9678;
    color: #fff;
}


.btn-danger:hover {
    background-color: #fa8181;
    border-color: #fa8181;
    color: #fff;
}

.btn-danger:focus, .btn-danger.focus {
    color: #fff;
}

.btn-danger.disabled, .btn-danger:disabled {
    background-color: #fb9678;
    border-color: #fb9678;
    opacity: 0.5;
}

.btn-danger:active, .btn-danger.active,
.show > .btn-danger.dropdown-toggle {
    background-color: #f84f4f !important;
    border-color: #f84f4f !important;
    color: #fff;
}

.btn-secondary {
    background: rgba(11, 143, 103, 0.16);
    border-color: rgba(11, 143, 103, 0.16);
    color: #0B8F67;
}

    .btn-secondary:hover {
        background: rgba(11, 143, 103, 0.26);
        border-color: rgba(11, 143, 103, 0.26);
        color: #0B8F67;
    }

    .btn-secondary:focus, .btn-secondary.focus {
        color: #616a78;
    }

    .btn-secondary.disabled, .btn-secondary:disabled {
        background-color: #e4e7ea;
        border-color: #e4e7ea;
        opacity: 0.5;
    }

    .btn-secondary:active, .btn-secondary.active,
    .show > .btn-secondary.dropdown-toggle {
        background-color: #dbdfe3;
        border-color: #dbdfe3;
        color: #fff;
    }

.btn-link {
    color: #03a9f3;
    font-weight: 500;
}

    .btn-link:hover {
        text-decoration: none;
        color: #e4e7ea;
    }

.btn-light {
    background-color: #fcfdfe;
    border-color: #ebebeb;
    color: #929daf;
}

    .btn-light:hover, .btn-light:focus {
        background-color: #f9fafb;
        color: #616a78;
    }

    .btn-light:active, .btn-light.active,
    .show > .btn-light.dropdown-toggle {
        background-color: #f9fafb;
        color: #616a78;
    }

.btn-purple {
    background-color: #926dde;
    border-color: #926dde;
    color: #fff;
}

    .btn-purple:hover {
        background-color: #a282e3;
        border-color: #a282e3;
        color: #fff;
    }

    .btn-purple:focus, .btn-purple.focus {
        color: #fff;
    }

    .btn-purple.disabled, .btn-purple:disabled {
        background-color: #926dde;
        border-color: #926dde;
        opacity: 0.5;
    }

    .btn-purple:active, .btn-purple.active,
    .show > .btn-purple.dropdown-toggle {
        background-color: #8258d9;
        border-color: #8258d9;
        color: #fff;
    }

.btn-pink {
    background-color: #f96197;
    border-color: #f96197;
    color: #fff;
}

    .btn-pink:hover {
        background-color: #fa75a4;
        border-color: #fa75a4;
        color: #fff;
    }

    .btn-pink:focus, .btn-pink.focus {
        color: #fff;
    }

    .btn-pink.disabled, .btn-pink:disabled {
        background-color: #f96197;
        border-color: #f96197;
        opacity: 0.5;
    }

    .btn-pink:active, .btn-pink.active,
    .show > .btn-pink.dropdown-toggle {
        background-color: #f84d8a;
        border-color: #f84d8a;
        color: #fff;
    }

.btn-cyan {
    background-color: #57c7d4;
    border-color: #57c7d4;
    color: #fff;
}

    .btn-cyan:hover {
        background-color: #77d2dc;
        border-color: #77d2dc;
        color: #fff;
    }

    .btn-cyan:focus, .btn-cyan.focus {
        color: #fff;
    }

    .btn-cyan.disabled, .btn-cyan:disabled {
        background-color: #57c7d4;
        border-color: #57c7d4;
        opacity: 0.5;
    }

    .btn-cyan:active, .btn-cyan.active,
    .show > .btn-cyan.dropdown-toggle {
        background-color: #37bccc;
        border-color: #37bccc;
        color: #fff;
    }

.btn-yellow {
    background-color: #e0bc00;
    border-color: #e0bc00;
    color: #fff;
}

    .btn-yellow:hover {
        background-color: #c1a200;
        border-color: #c1a200;
        color: #fff;
    }

    .btn-yellow:focus, .btn-yellow.focus {
        color: #fff;
    }

    .btn-yellow.disabled, .btn-yellow:disabled {
        background-color: #fcc525;
        border-color: #fcc525;
        opacity: 0.5;
    }

    .btn-yellow:active, .btn-yellow.active,
    .show > .btn-yellow.dropdown-toggle {
        background-color: #c1a200;
        border-color: #c1a200;
        color: #fff;
    }

.btn-brown {
    background-color: #8d6658;
    border-color: #8d6658;
    color: #fff;
}

    .btn-brown:hover {
        background-color: #9d7162;
        border-color: #9d7162;
        color: #fff;
    }

    .btn-brown:focus, .btn-brown.focus {
        color: #fff;
    }

    .btn-brown.disabled, .btn-brown:disabled {
        background-color: #8d6658;
        border-color: #8d6658;
        opacity: 0.5;
    }

    .btn-brown:active, .btn-brown.active,
    .show > .btn-brown.dropdown-toggle {
        background-color: #7d5b4e;
        border-color: #7d5b4e;
        color: #fff;
    }

.btn-dark {
    background-color: #465161;
    border-color: #465161;
    color: #fff;
}

    .btn-dark:hover {
        background-color: #515d70;
        border-color: #515d70;
        color: #fff;
    }

    .btn-dark:focus, .btn-dark.focus {
        color: #fff;
    }

    .btn-dark.disabled, .btn-dark:disabled {
        background-color: #465161;
        border-color: #465161;
        opacity: 0.5;
    }

    .btn-dark:active, .btn-dark.active,
    .show > .btn-dark.dropdown-toggle {
        background-color: #3b4552;
        border-color: #3b4552;
        color: #fff;
    }

.btn-facebook {
    background-color: #3b5998;
    border-color: #3b5998;
    color: #fff;
}

    .btn-facebook:hover {
        background-color: #466ab5;
        border-color: #466ab5;
        color: #fff;
    }

    .btn-facebook:focus, .btn-facebook.focus {
        color: #fff;
    }

    .btn-facebook.disabled, .btn-facebook:disabled {
        background-color: #3b5998;
        border-color: #3b5998;
        opacity: 0.5;
    }

    .btn-facebook:active, .btn-facebook.active,
    .show > .btn-facebook.dropdown-toggle {
        background-color: #30487b;
        border-color: #30487b;
        color: #fff;
    }

.btn-google {
    background-color: #dd4b39;
    border-color: #dd4b39;
    color: #fff;
}

    .btn-google:hover {
        background-color: #e36b5c;
        border-color: #e36b5c;
        color: #fff;
    }

    .btn-google:focus, .btn-google.focus {
        color: #fff;
    }

    .btn-google.disabled, .btn-google:disabled {
        background-color: #dd4b39;
        border-color: #dd4b39;
        opacity: 0.5;
    }

    .btn-google:active, .btn-google.active,
    .show > .btn-google.dropdown-toggle {
        background-color: #ca3523;
        border-color: #ca3523;
        color: #fff;
    }

.btn-twitter {
    background-color: #00aced;
    border-color: #00aced;
    color: #fff;
}

    .btn-twitter:hover {
        background-color: #17bfff;
        border-color: #17bfff;
        color: #fff;
    }

    .btn-twitter:focus, .btn-twitter.focus {
        color: #fff;
    }

    .btn-twitter.disabled, .btn-twitter:disabled {
        background-color: #00aced;
        border-color: #00aced;
        opacity: 0.5;
    }

    .btn-twitter:active, .btn-twitter.active,
    .show > .btn-twitter.dropdown-toggle {
        background-color: #008ec4;
        border-color: #008ec4;
        color: #fff;
    }

.btn-linkedin {
    background-color: #007bb6;
    border-color: #007bb6;
    color: #fff;
}

    .btn-linkedin:hover {
        background-color: #0097df;
        border-color: #0097df;
        color: #fff;
    }

    .btn-linkedin:focus, .btn-linkedin.focus {
        color: #fff;
    }

    .btn-linkedin.disabled, .btn-linkedin:disabled {
        background-color: #007bb6;
        border-color: #007bb6;
        opacity: 0.5;
    }

    .btn-linkedin:active, .btn-linkedin.active,
    .show > .btn-linkedin.dropdown-toggle {
        background-color: #005f8d;
        border-color: #005f8d;
        color: #fff;
    }

.btn-pinterest {
    background-color: #cb2027;
    border-color: #cb2027;
    color: #fff;
}

    .btn-pinterest:hover {
        background-color: #df353c;
        border-color: #df353c;
        color: #fff;
    }

    .btn-pinterest:focus, .btn-pinterest.focus {
        color: #fff;
    }

    .btn-pinterest.disabled, .btn-pinterest:disabled {
        background-color: #cb2027;
        border-color: #cb2027;
        opacity: 0.5;
    }

    .btn-pinterest:active, .btn-pinterest.active,
    .show > .btn-pinterest.dropdown-toggle {
        background-color: #a81a20;
        border-color: #a81a20;
        color: #fff;
    }

.btn-git {
    background-color: #666666;
    border-color: #666666;
    color: #fff;
}

    .btn-git:hover {
        background-color: #7a7a7a;
        border-color: #7a7a7a;
        color: #fff;
    }

    .btn-git:focus, .btn-git.focus {
        color: #fff;
    }

    .btn-git.disabled, .btn-git:disabled {
        background-color: #666666;
        border-color: #666666;
        opacity: 0.5;
    }

    .btn-git:active, .btn-git.active,
    .show > .btn-git.dropdown-toggle {
        background-color: #525252;
        border-color: #525252;
        color: #fff;
    }

.btn-tumblr {
    background-color: #32506d;
    border-color: #32506d;
    color: #fff;
}

    .btn-tumblr:hover {
        background-color: #3f6589;
        border-color: #3f6589;
        color: #fff;
    }

    .btn-tumblr:focus, .btn-tumblr.focus {
        color: #fff;
    }

    .btn-tumblr.disabled, .btn-tumblr:disabled {
        background-color: #32506d;
        border-color: #32506d;
        opacity: 0.5;
    }

    .btn-tumblr:active, .btn-tumblr.active,
    .show > .btn-tumblr.dropdown-toggle {
        background-color: #253b51;
        border-color: #253b51;
        color: #fff;
    }

.btn-vimeo {
    background-color: #aad450;
    border-color: #aad450;
    color: #fff;
}

    .btn-vimeo:hover {
        background-color: #badc71;
        border-color: #badc71;
        color: #fff;
    }

    .btn-vimeo:focus, .btn-vimeo.focus {
        color: #fff;
    }

    .btn-vimeo.disabled, .btn-vimeo:disabled {
        background-color: #aad450;
        border-color: #aad450;
        opacity: 0.5;
    }

    .btn-vimeo:active, .btn-vimeo.active,
    .show > .btn-vimeo.dropdown-toggle {
        background-color: #99ca32;
        border-color: #99ca32;
        color: #fff;
    }

.btn-youtube {
    background-color: #bb0000;
    border-color: #bb0000;
    color: #fff;
}

    .btn-youtube:hover {
        background-color: #e40000;
        border-color: #e40000;
        color: #fff;
    }

    .btn-youtube:focus, .btn-youtube.focus {
        color: #fff;
    }

    .btn-youtube.disabled, .btn-youtube:disabled {
        background-color: #bb0000;
        border-color: #bb0000;
        opacity: 0.5;
    }

    .btn-youtube:active, .btn-youtube.active,
    .show > .btn-youtube.dropdown-toggle {
        background-color: #920000;
        border-color: #920000;
        color: #fff;
    }

.btn-flickr {
    background-color: #ff0084;
    border-color: #ff0084;
    color: #fff;
}

    .btn-flickr:hover {
        background-color: #ff2998;
        border-color: #ff2998;
        color: #fff;
    }

    .btn-flickr:focus, .btn-flickr.focus {
        color: #fff;
    }

    .btn-flickr.disabled, .btn-flickr:disabled {
        background-color: #ff0084;
        border-color: #ff0084;
        opacity: 0.5;
    }

    .btn-flickr:active, .btn-flickr.active,
    .show > .btn-flickr.dropdown-toggle {
        background-color: #d6006f;
        border-color: #d6006f;
        color: #fff;
    }

.btn-reddit {
    background-color: #ff4500;
    border-color: #ff4500;
    color: #fff;
}

    .btn-reddit:hover {
        background-color: #ff6329;
        border-color: #ff6329;
        color: #fff;
    }

    .btn-reddit:focus, .btn-reddit.focus {
        color: #fff;
    }

    .btn-reddit.disabled, .btn-reddit:disabled {
        background-color: #ff4500;
        border-color: #ff4500;
        opacity: 0.5;
    }

    .btn-reddit:active, .btn-reddit.active,
    .show > .btn-reddit.dropdown-toggle {
        background-color: #d63a00;
        border-color: #d63a00;
        color: #fff;
    }

.btn-dribbble {
    background-color: #ea4c89;
    border-color: #ea4c89;
    color: #fff;
}

    .btn-dribbble:hover {
        background-color: #ee71a1;
        border-color: #ee71a1;
        color: #fff;
    }

    .btn-dribbble:focus, .btn-dribbble.focus {
        color: #fff;
    }

    .btn-dribbble.disabled, .btn-dribbble:disabled {
        background-color: #ea4c89;
        border-color: #ea4c89;
        opacity: 0.5;
    }

    .btn-dribbble:active, .btn-dribbble.active,
    .show > .btn-dribbble.dropdown-toggle {
        background-color: #e62771;
        border-color: #e62771;
        color: #fff;
    }

.btn-skype {
    background-color: #00aff0;
    border-color: #00aff0;
    color: #fff;
}

    .btn-skype:hover {
        background-color: #1ac1ff;
        border-color: #1ac1ff;
        color: #fff;
    }

    .btn-skype:focus, .btn-skype.focus {
        color: #fff;
    }

    .btn-skype.disabled, .btn-skype:disabled {
        background-color: #00aff0;
        border-color: #00aff0;
        opacity: 0.5;
    }

    .btn-skype:active, .btn-skype.active,
    .show > .btn-skype.dropdown-toggle {
        background-color: #0091c7;
        border-color: #0091c7;
        color: #fff;
    }

.btn-instagram {
    background-color: #517fa4;
    border-color: #517fa4;
    color: #fff;
}

    .btn-instagram:hover {
        background-color: #6993b5;
        border-color: #6993b5;
        color: #fff;
    }

    .btn-instagram:focus, .btn-instagram.focus {
        color: #fff;
    }

    .btn-instagram.disabled, .btn-instagram:disabled {
        background-color: #517fa4;
        border-color: #517fa4;
        opacity: 0.5;
    }

    .btn-instagram:active, .btn-instagram.active,
    .show > .btn-instagram.dropdown-toggle {
        background-color: #446a89;
        border-color: #446a89;
        color: #fff;
    }

.btn-lastfm {
    background-color: #c3000d;
    border-color: #c3000d;
    color: #fff;
}

    .btn-lastfm:hover {
        background-color: #ec0010;
        border-color: #ec0010;
        color: #fff;
    }

    .btn-lastfm:focus, .btn-lastfm.focus {
        color: #fff;
    }

    .btn-lastfm.disabled, .btn-lastfm:disabled {
        background-color: #c3000d;
        border-color: #c3000d;
        opacity: 0.5;
    }

    .btn-lastfm:active, .btn-lastfm.active,
    .show > .btn-lastfm.dropdown-toggle {
        background-color: #9a000a;
        border-color: #9a000a;
        color: #fff;
    }

.btn-behance {
    background-color: #1769ff;
    border-color: #1769ff;
    color: #fff;
}

    .btn-behance:hover {
        background-color: #4083ff;
        border-color: #4083ff;
        color: #fff;
    }

    .btn-behance:focus, .btn-behance.focus {
        color: #fff;
    }

    .btn-behance.disabled, .btn-behance:disabled {
        background-color: #1769ff;
        border-color: #1769ff;
        opacity: 0.5;
    }

    .btn-behance:active, .btn-behance.active,
    .show > .btn-behance.dropdown-toggle {
        background-color: #0054ed;
        border-color: #0054ed;
        color: #fff;
    }

.btn-rss {
    background-color: #f26522;
    border-color: #f26522;
    color: #fff;
}

    .btn-rss:hover {
        background-color: #f48049;
        border-color: #f48049;
        color: #fff;
    }

    .btn-rss:focus, .btn-rss.focus {
        color: #fff;
    }

    .btn-rss.disabled, .btn-rss:disabled {
        background-color: #f26522;
        border-color: #f26522;
        opacity: 0.5;
    }

    .btn-rss:active, .btn-rss.active,
    .show > .btn-rss.dropdown-toggle {
        background-color: #de500d;
        border-color: #de500d;
        color: #fff;
    }

.btn-primary-outline {
    color: #ab8ce4;
    background-color: transparent;
    border-color: #ab8ce4;
}

    .btn-primary-outline:hover {
        color: #fff;
        background-color: #ab8ce4;
        border-color: #ab8ce4;
    }

    .btn-primary-outline:active, .btn-primary-outline.active,
    .show > .btn-primary-outline.dropdown-toggle {
        background-color: #2ba99d;
        border-color: #2ba99d;
    }

.btn-success-outline {
    color: #00c292;
    background-color: transparent;
    border-color: #00c292;
}

    .btn-success-outline:hover {
        color: #fff;
        background-color: #00c292;
        border-color: #00c292;
    }

    .btn-success-outline:active, .btn-success-outline.active,
    .show > .btn-success-outline.dropdown-toggle {
        background-color: #12a766;
        border-color: #12a766;
    }

.btn-info-outline {
    color: #03a9f3;
    background-color: transparent;
    border-color: #03a9f3;
}

    .btn-info-outline:hover {
        color: #fff;
        background-color: #03a9f3;
        border-color: #03a9f3;
    }

    .btn-info-outline:active, .btn-info-outline.active,
    .show > .btn-info-outline.dropdown-toggle {
        background-color: #2ba3f6;
        border-color: #2ba3f6;
    }

.btn-warning-outline {
    color: #faa64b;
    background-color: transparent;
    border-color: #faa64b;
}

    .btn-warning-outline:hover {
        color: #fff;
        background-color: #faa64b;
        border-color: #faa64b;
    }

    .btn-warning-outline:active, .btn-warning-outline.active,
    .show > .btn-warning-outline.dropdown-toggle {
        background-color: #f99a32;
        border-color: #f99a32;
    }

.btn-danger-outline {
    color: #fb9678;
    background-color: transparent;
    border-color: #fb9678;
}

    .btn-danger-outline:hover {
        color: #fff;
        background-color: #fb9678;
        border-color: #fb9678;
    }

    .btn-danger-outline:active, .btn-danger-outline.active,
    .show > .btn-danger-outline.dropdown-toggle {
        background-color: #f84f4f;
        border-color: #f84f4f;
    }

.btn-secondary-outline {
    color: #e4e7ea;
    background-color: transparent;
    border-color: #e4e7ea;
}

    .btn-secondary-outline:hover {
        color: #fff;
        background-color: #e4e7ea;
        border-color: #e4e7ea;
    }

    .btn-secondary-outline:active, .btn-secondary-outline.active,
    .show > .btn-secondary-outline.dropdown-toggle {
        background-color: #dbdfe3;
        border-color: #dbdfe3;
    }

.btn-outline {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

    .btn-outline:hover {
        color: #121212;
        background-color: #fff;
    }

    .btn-outline.btn-primary {
        color: #ab8ce4;
        background-color: transparent;
        border-color: #ab8ce4;
    }

        .btn-outline.btn-primary:hover {
            color: #fff;
            background-color: #ab8ce4;
            border-color: #ab8ce4;
        }

        .btn-outline.btn-primary:active, .btn-outline.btn-primary.active,
        .show > .btn-outline.btn-primary.dropdown-toggle {
            background-color: #2ba99d;
            border-color: #2ba99d;
        }

    .btn-outline.btn-success {
        color: #00c292;
        background-color: transparent;
        border-color: #00c292;
    }

        .btn-outline.btn-success:hover {
            color: #fff;
            background-color: #00c292;
            border-color: #00c292;
        }

        .btn-outline.btn-success:active, .btn-outline.btn-success.active,
        .show > .btn-outline.btn-success.dropdown-toggle {
            background-color: #12a766;
            border-color: #12a766;
        }

    .btn-outline.btn-info {
        color: #03a9f3;
        background-color: transparent;
        border-color: #03a9f3;
    }

        .btn-outline.btn-info:hover {
            color: #fff;
            background-color: #03a9f3;
            border-color: #03a9f3;
        }

        .btn-outline.btn-info:active, .btn-outline.btn-info.active,
        .show > .btn-outline.btn-info.dropdown-toggle {
            background-color: #2ba3f6;
            border-color: #2ba3f6;
        }

    .btn-outline.btn-warning {
        color: #faa64b;
        background-color: transparent;
        border-color: #faa64b;
    }

        .btn-outline.btn-warning:hover {
            color: #fff;
            background-color: #faa64b;
            border-color: #faa64b;
        }

        .btn-outline.btn-warning:active, .btn-outline.btn-warning.active,
        .show > .btn-outline.btn-warning.dropdown-toggle {
            background-color: #f99a32;
            border-color: #f99a32;
        }

    .btn-outline.btn-danger {
        color: #fb9678;
        background-color: transparent;
        border-color: #fb9678;
    }

        .btn-outline.btn-danger:hover {
            color: #fff;
            background-color: #fb9678;
            border-color: #fb9678;
        }

        .btn-outline.btn-danger:active, .btn-outline.btn-danger.active,
        .show > .btn-outline.btn-danger.dropdown-toggle {
            background-color: #f84f4f;
            border-color: #f84f4f;
        }

    .btn-outline.btn-secondary {
        color: #e4e7ea;
        background-color: transparent;
        border-color: #e4e7ea;
    }

        .btn-outline.btn-secondary:hover {
            color: #fff;
            background-color: #e4e7ea;
            border-color: #e4e7ea;
        }

        .btn-outline.btn-secondary:active, .btn-outline.btn-secondary.active,
        .show > .btn-outline.btn-secondary.dropdown-toggle {
            background-color: #dbdfe3;
            border-color: #dbdfe3;
        }

    .btn-outline.btn-light {
        color: #fff;
        background-color: transparent;
        border-color: #fff;
    }

        .btn-outline.btn-light:hover {
            color: #fff;
            background-color: #fff;
            border-color: #fff;
        }

        .btn-outline.btn-light:active, .btn-outline.btn-light.active,
        .show > .btn-outline.btn-light.dropdown-toggle {
            background-color: #f2f2f2;
            border-color: #f2f2f2;
        }

    .btn-outline.btn-purple {
        color: #926dde;
        background-color: transparent;
        border-color: #926dde;
    }

        .btn-outline.btn-purple:hover {
            color: #fff;
            background-color: #926dde;
            border-color: #926dde;
        }

        .btn-outline.btn-purple:active, .btn-outline.btn-purple.active,
        .show > .btn-outline.btn-purple.dropdown-toggle {
            background-color: #8258d9;
            border-color: #8258d9;
        }

    .btn-outline.btn-pink {
        color: #f96197;
        background-color: transparent;
        border-color: #f96197;
    }

        .btn-outline.btn-pink:hover {
            color: #fff;
            background-color: #f96197;
            border-color: #f96197;
        }

        .btn-outline.btn-pink:active, .btn-outline.btn-pink.active,
        .show > .btn-outline.btn-pink.dropdown-toggle {
            background-color: #f84d8a;
            border-color: #f84d8a;
        }

    .btn-outline.btn-cyan {
        color: #57c7d4;
        background-color: transparent;
        border-color: #57c7d4;
    }

        .btn-outline.btn-cyan:hover {
            color: #fff;
            background-color: #57c7d4;
            border-color: #57c7d4;
        }

        .btn-outline.btn-cyan:active, .btn-outline.btn-cyan.active,
        .show > .btn-outline.btn-cyan.dropdown-toggle {
            background-color: #37bccc;
            border-color: #37bccc;
        }

    .btn-outline.btn-yellow {
        color: #e0bc00;
        background-color: transparent;
        border-color: #fcc525;
    }

        .btn-outline.btn-yellow:hover {
            color: #fff;
            background-color: #c1a200;
            border-color: #c1a200;
        }

        .btn-outline.btn-yellow:active, .btn-outline.btn-yellow.active,
        .show > .btn-outline.btn-yellow.dropdown-toggle {
            background-color: #c1a200;
            border-color: #c1a200;
        }

    .btn-outline.btn-brown {
        color: #8d6658;
        background-color: transparent;
        border-color: #8d6658;
    }

        .btn-outline.btn-brown:hover {
            color: #fff;
            background-color: #8d6658;
            border-color: #8d6658;
        }

        .btn-outline.btn-brown:active, .btn-outline.btn-brown.active,
        .show > .btn-outline.btn-brown.dropdown-toggle {
            background-color: #7d5b4e;
            border-color: #7d5b4e;
        }

    .btn-outline.btn-dark {
        color: #465161;
        background-color: transparent;
        border-color: #465161;
    }

        .btn-outline.btn-dark:hover {
            color: #fff;
            background-color: #465161;
            border-color: #465161;
        }

        .btn-outline.btn-dark:active, .btn-outline.btn-dark.active,
        .show > .btn-outline.btn-dark.dropdown-toggle {
            background-color: #3b4552;
            border-color: #3b4552;
        }

    .btn-outline.btn-light:hover {
        color: #616a78;
    }

    .btn-outline.btn-facebook {
        color: #3b5998;
        background-color: transparent;
        border-color: #3b5998;
    }

        .btn-outline.btn-facebook:hover {
            color: #fff;
            background-color: #3b5998;
            border-color: #3b5998;
        }

        .btn-outline.btn-facebook:active, .btn-outline.btn-facebook.active,
        .show > .btn-outline.btn-facebook.dropdown-toggle {
            background-color: #30487b;
            border-color: #30487b;
        }

    .btn-outline.btn-google {
        color: #dd4b39;
        background-color: transparent;
        border-color: #dd4b39;
    }

        .btn-outline.btn-google:hover {
            color: #fff;
            background-color: #dd4b39;
            border-color: #dd4b39;
        }

        .btn-outline.btn-google:active, .btn-outline.btn-google.active,
        .show > .btn-outline.btn-google.dropdown-toggle {
            background-color: #ca3523;
            border-color: #ca3523;
        }

    .btn-outline.btn-twitter {
        color: #00aced;
        background-color: transparent;
        border-color: #00aced;
    }

        .btn-outline.btn-twitter:hover {
            color: #fff;
            background-color: #00aced;
            border-color: #00aced;
        }

        .btn-outline.btn-twitter:active, .btn-outline.btn-twitter.active,
        .show > .btn-outline.btn-twitter.dropdown-toggle {
            background-color: #008ec4;
            border-color: #008ec4;
        }

    .btn-outline.btn-linkedin {
        color: #007bb6;
        background-color: transparent;
        border-color: #007bb6;
    }

        .btn-outline.btn-linkedin:hover {
            color: #fff;
            background-color: #007bb6;
            border-color: #007bb6;
        }

        .btn-outline.btn-linkedin:active, .btn-outline.btn-linkedin.active,
        .show > .btn-outline.btn-linkedin.dropdown-toggle {
            background-color: #005f8d;
            border-color: #005f8d;
        }

    .btn-outline.btn-pinterest {
        color: #cb2027;
        background-color: transparent;
        border-color: #cb2027;
    }

        .btn-outline.btn-pinterest:hover {
            color: #fff;
            background-color: #cb2027;
            border-color: #cb2027;
        }

        .btn-outline.btn-pinterest:active, .btn-outline.btn-pinterest.active,
        .show > .btn-outline.btn-pinterest.dropdown-toggle {
            background-color: #a81a20;
            border-color: #a81a20;
        }

    .btn-outline.btn-git {
        color: #666666;
        background-color: transparent;
        border-color: #666666;
    }

        .btn-outline.btn-git:hover {
            color: #fff;
            background-color: #666666;
            border-color: #666666;
        }

        .btn-outline.btn-git:active, .btn-outline.btn-git.active,
        .show > .btn-outline.btn-git.dropdown-toggle {
            background-color: #525252;
            border-color: #525252;
        }

    .btn-outline.btn-tumblr {
        color: #32506d;
        background-color: transparent;
        border-color: #32506d;
    }

        .btn-outline.btn-tumblr:hover {
            color: #fff;
            background-color: #32506d;
            border-color: #32506d;
        }

        .btn-outline.btn-tumblr:active, .btn-outline.btn-tumblr.active,
        .show > .btn-outline.btn-tumblr.dropdown-toggle {
            background-color: #253b51;
            border-color: #253b51;
        }

    .btn-outline.btn-vimeo {
        color: #aad450;
        background-color: transparent;
        border-color: #aad450;
    }

        .btn-outline.btn-vimeo:hover {
            color: #fff;
            background-color: #aad450;
            border-color: #aad450;
        }

        .btn-outline.btn-vimeo:active, .btn-outline.btn-vimeo.active,
        .show > .btn-outline.btn-vimeo.dropdown-toggle {
            background-color: #99ca32;
            border-color: #99ca32;
        }

    .btn-outline.btn-youtube {
        color: #bb0000;
        background-color: transparent;
        border-color: #bb0000;
    }

        .btn-outline.btn-youtube:hover {
            color: #fff;
            background-color: #bb0000;
            border-color: #bb0000;
        }

        .btn-outline.btn-youtube:active, .btn-outline.btn-youtube.active,
        .show > .btn-outline.btn-youtube.dropdown-toggle {
            background-color: #920000;
            border-color: #920000;
        }

    .btn-outline.btn-flickr {
        color: #ff0084;
        background-color: transparent;
        border-color: #ff0084;
    }

        .btn-outline.btn-flickr:hover {
            color: #fff;
            background-color: #ff0084;
            border-color: #ff0084;
        }

        .btn-outline.btn-flickr:active, .btn-outline.btn-flickr.active,
        .show > .btn-outline.btn-flickr.dropdown-toggle {
            background-color: #d6006f;
            border-color: #d6006f;
        }

    .btn-outline.btn-reddit {
        color: #ff4500;
        background-color: transparent;
        border-color: #ff4500;
    }

        .btn-outline.btn-reddit:hover {
            color: #fff;
            background-color: #ff4500;
            border-color: #ff4500;
        }

        .btn-outline.btn-reddit:active, .btn-outline.btn-reddit.active,
        .show > .btn-outline.btn-reddit.dropdown-toggle {
            background-color: #d63a00;
            border-color: #d63a00;
        }

    .btn-outline.btn-dribbble {
        color: #ea4c89;
        background-color: transparent;
        border-color: #ea4c89;
    }

        .btn-outline.btn-dribbble:hover {
            color: #fff;
            background-color: #ea4c89;
            border-color: #ea4c89;
        }


        .btn-outline.btn-dribbble:active, .btn-outline.btn-dribbble.active,
        .show > .btn-outline.btn-dribbble.dropdown-toggle {
            background-color: #e62771;
            border-color: #e62771;
        }

    .btn-outline.btn-skype {
        color: #00aff0;
        background-color: transparent;
        border-color: #00aff0;
    }

        .btn-outline.btn-skype:hover {
            color: #fff;
            background-color: #00aff0;
            border-color: #00aff0;
        }

        .btn-outline.btn-skype:active, .btn-outline.btn-skype.active,
        .show > .btn-outline.btn-skype.dropdown-toggle {
            background-color: #0091c7;
            border-color: #0091c7;
        }

    .btn-outline.btn-instagram {
        color: #517fa4;
        background-color: transparent;
        border-color: #517fa4;
    }

        .btn-outline.btn-instagram:hover {
            color: #fff;
            background-color: #517fa4;
            border-color: #517fa4;
        }

        .btn-outline.btn-instagram:active, .btn-outline.btn-instagram.active,
        .show > .btn-outline.btn-instagram.dropdown-toggle {
            background-color: #446a89;
            border-color: #446a89;
        }

    .btn-outline.btn-lastfm {
        color: #c3000d;
        background-color: transparent;
        border-color: #c3000d;
    }

        .btn-outline.btn-lastfm:hover {
            color: #fff;
            background-color: #c3000d;
            border-color: #c3000d;
        }

        .btn-outline.btn-lastfm:active, .btn-outline.btn-lastfm.active,
        .show > .btn-outline.btn-lastfm.dropdown-toggle {
            background-color: #9a000a;
            border-color: #9a000a;
        }

    .btn-outline.btn-behance {
        color: #1769ff;
        background-color: transparent;
        border-color: #1769ff;
    }

        .btn-outline.btn-behance:hover {
            color: #fff;
            background-color: #1769ff;
            border-color: #1769ff;
        }

        .btn-outline.btn-behance:active, .btn-outline.btn-behance.active,
        .show > .btn-outline.btn-behance.dropdown-toggle {
            background-color: #0054ed;
            border-color: #0054ed;
        }

    .btn-outline.btn-rss {
        color: #f26522;
        background-color: transparent;
        border-color: #f26522;
    }

        .btn-outline.btn-rss:hover {
            color: #fff;
            background-color: #f26522;
            border-color: #f26522;
        }

        .btn-outline.btn-rss:active, .btn-outline.btn-rss.active,
        .show > .btn-outline.btn-rss.dropdown-toggle {
            background-color: #de500d;
            border-color: #de500d;
        }

.btn-label {
    position: relative;
    padding-left: 52px;
    overflow: hidden;
}

    .btn-label label {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 36px;
        line-height: inherit;
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: rgba(0, 0, 0, 0.1);
        cursor: pointer;
        margin-bottom: 0;
    }

    .btn-label.btn-xs {
        padding-left: 32px;
    }

        .btn-label.btn-xs label {
            width: 24px;
        }

    .btn-label.btn-sm {
        padding-left: 41px;
    }

        .btn-label.btn-sm label {
            width: 29px;
        }

    .btn-label.btn-lg {
        padding-left: 64px;
    }

        .btn-label.btn-lg label {
            width: 48px;
        }

.btn-flat {
    position: relative;
    font-size: 13px;
    font-family: 'Noto Sans Thai', sans-serif;
    text-transform: uppercase;
    background-color: #fcfdfe;
    border: none;
    letter-spacing: 1px;
    border-radius: 0;
}

    .btn-flat:hover {
        background-color: #f9fafb;
    }

    .btn-flat svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .btn-flat circle {
        fill: rgba(255, 255, 255, 0.3);
    }

    .btn-flat.btn-primary {
        color: #ab8ce4;
    }

        .btn-flat.btn-primary circle {
            fill: rgba(51, 202, 187, 0.1);
        }

    .btn-flat.btn-secondary {
        color: #e4e7ea;
    }

        .btn-flat.btn-secondary circle {
            fill: rgba(228, 231, 234, 0.1);
        }

    .btn-flat.btn-success {
        color: #00c292;
    }

        .btn-flat.btn-success circle {
            fill: rgba(21, 195, 119, 0.1);
        }

    .btn-flat.btn-info {
        color: #03a9f3;
    }

        .btn-flat.btn-info circle {
            fill: rgba(72, 176, 247, 0.1);
        }

    .btn-flat.btn-warning {
        color: #faa64b;
    }

        .btn-flat.btn-warning circle {
            fill: rgba(250, 166, 75, 0.1);
        }

    .btn-flat.btn-danger {
        color: #fb9678;
    }

        .btn-flat.btn-danger circle {
            fill: rgba(249, 104, 104, 0.1);
        }

    .btn-flat.btn-pink {
        color: #f96197;
    }

        .btn-flat.btn-pink circle {
            fill: rgba(249, 97, 151, 0.1);
        }

    .btn-flat.btn-purple {
        color: #926dde;
    }

        .btn-flat.btn-purple circle {
            fill: rgba(146, 109, 222, 0.1);
        }

    .btn-flat.btn-brown {
        color: #8d6658;
    }

        .btn-flat.btn-brown circle {
            fill: rgba(141, 102, 88, 0.1);
        }

    .btn-flat.btn-cyan {
        color: #57c7d4;
    }

        .btn-flat.btn-cyan circle {
            fill: rgba(87, 199, 212, 0.1);
        }

    .btn-flat.btn-yellow {
        color: #e0bc00;
    }

        .btn-flat.btn-yellow circle {
            fill: rgba(252, 197, 37, 0.1);
        }

    .btn-flat.btn-gray {
        color: #868e96;
    }

        .btn-flat.btn-gray circle {
            fill: rgba(134, 142, 150, 0.1);
        }

    .btn-flat.btn-dark {
        color: #465161;
    }

        .btn-flat.btn-dark circle {
            fill: rgba(70, 81, 97, 0.1);
        }

    .btn-flat.btn-secondary {
        color: #788394;
    }

    .btn-flat.btn-facebook {
        color: #3b5998;
    }

        .btn-flat.btn-facebook circle {
            fill: rgba(59, 89, 152, 0.1);
        }

    .btn-flat.btn-google {
        color: #dd4b39;
    }

        .btn-flat.btn-google circle {
            fill: rgba(221, 75, 57, 0.1);
        }

    .btn-flat.btn-twitter {
        color: #00aced;
    }

        .btn-flat.btn-twitter circle {
            fill: rgba(0, 172, 237, 0.1);
        }

    .btn-flat.btn-linkedin {
        color: #007bb6;
    }

        .btn-flat.btn-linkedin circle {
            fill: rgba(0, 123, 182, 0.1);
        }

    .btn-flat.btn-pinterest {
        color: #cb2027;
    }

        .btn-flat.btn-pinterest circle {
            fill: rgba(203, 32, 39, 0.1);
        }

    .btn-flat.btn-git {
        color: #666666;
    }

        .btn-flat.btn-git circle {
            fill: rgba(102, 102, 102, 0.1);
        }

    .btn-flat.btn-tumblr {
        color: #32506d;
    }

        .btn-flat.btn-tumblr circle {
            fill: rgba(50, 80, 109, 0.1);
        }

    .btn-flat.btn-vimeo {
        color: #aad450;
    }

        .btn-flat.btn-vimeo circle {
            fill: rgba(170, 212, 80, 0.1);
        }

    .btn-flat.btn-youtube {
        color: #bb0000;
    }

        .btn-flat.btn-youtube circle {
            fill: rgba(187, 0, 0, 0.1);
        }

    .btn-flat.btn-flickr {
        color: #ff0084;
    }

        .btn-flat.btn-flickr circle {
            fill: rgba(255, 0, 132, 0.1);
        }

    .btn-flat.btn-reddit {
        color: #ff4500;
    }

        .btn-flat.btn-reddit circle {
            fill: rgba(255, 69, 0, 0.1);
        }

    .btn-flat.btn-dribbble {
        color: #ea4c89;
    }

        .btn-flat.btn-dribbble circle {
            fill: rgba(234, 76, 137, 0.1);
        }

    .btn-flat.btn-skype {
        color: #00aff0;
    }

        .btn-flat.btn-skype circle {
            fill: rgba(0, 175, 240, 0.1);
        }

    .btn-flat.btn-instagram {
        color: #517fa4;
    }

        .btn-flat.btn-instagram circle {
            fill: rgba(81, 127, 164, 0.1);
        }

    .btn-flat.btn-lastfm {
        color: #c3000d;
    }

        .btn-flat.btn-lastfm circle {
            fill: rgba(195, 0, 13, 0.1);
        }

    .btn-flat.btn-behance {
        color: #1769ff;
    }

        .btn-flat.btn-behance circle {
            fill: rgba(23, 105, 255, 0.1);
        }

    .btn-flat.btn-rss {
        color: #f26522;
    }

        .btn-flat.btn-rss circle {
            fill: rgba(242, 101, 34, 0.1);
        }

/*callout*/
.callout {
    margin: 0 0 20px;
    padding: 15px 30px 15px 15px;
    border-left: 5px solid #eee;
}

    .callout a {
        color: #fff;
        text-decoration: underline;
    }

        .callout a:hover {
            color: #eee;
        }

    .callout h4 {
        margin-top: 0;
    }

    .callout p:last-child {
        margin-bottom: 0;
    }

    .callout.callout-danger {
        border-color: #ef5350;
    }

    .callout.callout-warning {
        border-color: #fbae1c;
    }

    .callout.callout-info {
        border-color: #03a9f3;
    }

    .callout.callout-success {
        border-color: #00c292;
    }

.alert .icon {
    margin-right: 10px;
}

.alert .close {
    color: #000;
    opacity: .2;
    filter: alpha(opacity=20);
}

    .alert .close:hover {
        opacity: .5;
        filter: alpha(opacity=50);
    }

.alert a {
    color: #fff;
    text-decoration: underline;
}

.alert-success {
    border-color: #00c292;
}

.alert-danger, .alert-error {
    border-color: #e73f3c;
}

.alert-warning {
    border-color: #df9e1b;
}

.alert-info {
    border-color: #03a9f3;
}
/*tab*/
.nav > li > a:active, .nav > li > a:focus, .nav > li > a:hover {
    color: #455a64;
    background: #f7f7f7;
}

.nav-pills > li > a {
    border-radius: 0;
    border-top: 3px solid transparent;
    color: #455a64;
}

    .nav-pills > li > a > .fa, .nav-pills > li > a > .glyphicon, .nav-pills > li > a > .ion {
        margin-right: 5px;
    }

    .nav-pills > li > a.active, .nav-pills > li > a.active:focus, .nav-pills > li > a.active:hover {
        border-top-color: #03a9f3;
        background-color: #03a9f3 !important;
    }

.flex-column > li > a {
    border-radius: 0 !important;
    border-top: 0;
    border-left: 3px solid transparent;
    color: #455a64;
}

    .flex-column > li > a.nav-link.active, .flex-column > li > a.nav-link.active:hover {
        background: 0 0;
        color: #fff;
        border-top: 0;
        border-left-color: #03a9f3;
    }

.flex-column > li.header {
    border-bottom: 1px solid #ddd;
    color: #67757c;
    margin-bottom: 10px;
    padding: 5px 10px;
}

.nav-tabs-custom {
    margin-bottom: 20px;
    border-radius: 5px;
}

    .nav-tabs-custom > .nav-tabs {
        margin: 0;
        border-bottom-color: #f4f4f4;
        border-radius: 0;
    }

        .nav-tabs-custom > .nav-tabs > li {
            margin-bottom: -2px;
            margin-right: 5px;
        }

            .nav-tabs-custom > .nav-tabs > li.icon-btn {
                display: block;
                position: absolute;
                right: 15px;
                border: none;
                top: -2px;
            }

            .nav-tabs-custom > .nav-tabs > li.disabled > a {
                color: #67757c;
            }

            .nav-tabs-custom > .nav-tabs > li > a {
                color: #455a64;
                border-radius: 0;
                position: relative;
                display: block;
                padding: 1.25rem;
            }

                .nav-tabs-custom > .nav-tabs > li > a.text-muted, .nav-tabs-custom > .nav-tabs > li > a:hover {
                    color: #67757c;
                }

                .nav-tabs-custom > .nav-tabs > li > a, .nav-tabs-custom > .nav-tabs > li > a:hover {
                    background: 0 0;
                    margin: 0;
                }

                    .nav-tabs-custom > .nav-tabs > li > a.active:hover, .nav-tabs-custom > .nav-tabs > li > a.active {
                        background-color: #fff;
                        font-weight: 500;
                        color: #D25055;
                    }

                    .nav-tabs-custom > .nav-tabs > li > a.active {
                        border-left: 1px solid #f4f4f4;
                        border-right: 1px solid #f4f4f4;
                    }

            .nav-tabs-custom > .nav-tabs > li:first-of-type {
                margin-left: 0;
            }

                .nav-tabs-custom > .nav-tabs > li:first-of-type > a.active {
                    border-left-color: transparent;
                }

        .nav-tabs-custom > .nav-tabs.float-right {
            float: none !important;
            display: block;
        }

            .nav-tabs-custom > .nav-tabs.float-right > li {
                float: right;
            }

        .nav-tabs-custom > .nav-tabs > li > a {
            border-top: 3px solid transparent;
        }

        .nav-tabs-custom > .nav-tabs.float-right > li:first-of-type {
            margin-right: 0;
        }

            .nav-tabs-custom > .nav-tabs.float-right > li:first-of-type > a {
                border-left-width: 1px;
            }

                .nav-tabs-custom > .nav-tabs.float-right > li:first-of-type > a.active {
                    border-left-color: #f4f4f4;
                    border-right-color: transparent;
                }

        .nav-tabs-custom > .nav-tabs > li.header {
            line-height: 30px;
            padding: 1.25rem;
            font-size: 16px;
            color: #455a64;
        }

            .nav-tabs-custom > .nav-tabs > li.header > .fa, .nav-tabs-custom > .nav-tabs > li.header > .glyphicon, .nav-tabs-custom > .nav-tabs > li.header > .ion {
                margin-right: 5px;
            }

    .nav-tabs-custom > .tab-content {
        background: #fff;
        padding: 1.25rem;
        border-radius: 5px;
    }

    .nav-tabs-custom .dropdown.show > a:active, .nav-tabs-custom .dropdown.show > a:focus {
        background: 0 0;
        color: #67757c;
    }

    .nav-tabs-custom.tab-primary > .nav-tabs > li a.active {
        border-top-color: #398bf7;
    }

    .nav-tabs-custom.tab-info > .nav-tabs > li a.active {
        border-top-color: #398bf7;
    }

    .nav-tabs-custom.tab-danger > .nav-tabs > li a.active {
        border-top-color: #ef5350;
    }

    .nav-tabs-custom.tab-warning > .nav-tabs > li a.active {
        border-top-color: #fbae1c;
    }

    .nav-tabs-custom.tab-success > .nav-tabs > li a.active {
        border-top-color: #00c292;
    }

    .nav-tabs-custom.tab-default > .nav-tabs > li a.active {
        border-top-color: #d2d6de;
    }

    .nav-tabs-custom > .nav-tabs > li a.active {
        border-top-color: #D25055;
    }

.profile-tab li a.nav-link.active, .skin-blue .customtab li a.nav-link.active {
    border-bottom: 2px solid #398bf7;
    color: #fff;
}

.mailbox-nav .nav-pills > li > a.active, .mailbox-nav .nav-pills > li > a.active:focus, .mailbox-nav .nav-pills > li > a.active:hover, .mailbox-nav .nav-pills > li > a:focus, .mailbox-nav .nav-pills > li > a:hover {
    background: #f2f4f8;
    border-left-color: #398bf7;
}

.left-float {
    float: left;
}

.right-float {
    float: right;
}
/*pagination*/
.pagination > li > a {
    background-color: #fff;
    color: #455a64;
    border-color: #fff;
}

.pagination.pagination-flat > li > a {
    border-radius: 0;
}

.pagination li a.current, .pagination li a.current:hover {
    color: #fff;
    border: 1px solid #398bf7;
    background-color: #398bf7;
}

.pagination li a {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    min-width: 25px;
    padding: .4em 1em;
    text-decoration: none;
    cursor: pointer;
    color: #67757c;
    border: 1px solid transparent;
    border-radius: 2px;
    margin-left: 5px;
    margin-right: 5px;
}

.pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
    color: #67757c;
    background-color: #fff;
    border-color: #fff;
    cursor: not-allowed;
}

.pagination {
    margin-bottom: 10px;
}

    .pagination li a:hover {
        color: #fff;
        border: 1px solid #465060;
        background-color: #465060 !important;
    }

.products-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .products-list > .item {
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
        padding: 10px 0;
        background: #fff;
    }

        .products-list > .item:after, .products-list > .item:before {
            content: " ";
            display: table;
        }

    .products-list .product-img {
        float: left;
    }

        .products-list .product-img img {
            width: 50px;
            height: 50px;
            border-radius: 100%
        }

    .products-list .product-info {
        margin-left: 60px;
    }

    .products-list .product-description {
        display: block;
        color: #67757c;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.product-list-in-box > .item {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid #f4f4f4;
}

    .product-list-in-box > .item:last-of-type {
        border-bottom-width: 0;
    }
/*data table*/
.project-table.table-responsive {
    overflow-x: hidden;
}

@media screen and (max-width: 1440px) {
    .project-table.table-responsive {
        overflow-x: auto;
    }
}

@media screen and (max-width: 767px) {
    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        white-space: nowrap;
    }
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 0.7rem;
}

.table.no-border > tbody > tr > td, .table.no-border > tbody > tr > th, .table.no-border > tfoot > tr > td, .table.no-border > tfoot > tr > th, .table.no-border > thead > tr > td, .table.no-border > thead > tr > th {
    border-top: none;
}

.table > thead > tr > th {
    border-bottom: 2px solid #f4f4f4;
    color: #9B1B2C;
}

.table tr td .progress {
    margin-top: 5px;
}

.table th, .table thead th {
    font-weight: 600;
}

.contacts-list-name, .direct-chat-name {
    font-weight: 600;
}

.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid #d2d6de !important;
}

    .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
        border-bottom-width: 2px;
        background-color: #FAFAFA;
    }

.table.no-border, .table.no-border td, .table.no-border th {
    border: 0;
}

.table.align th {
    text-align: left;
}

.table.align td {
    text-align: right;
}

.table-separated {
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .table-separated thead th {
        border-bottom: none;
    }

    .table-separated tbody tr {
        -webkit-transition: .5s;
        transition: .5s;
    }

        .table-separated tbody tr > *:first-child {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .table-separated tbody tr th, .table-separated tbody tr td {
            border-top: none;
        }

        .table-separated tbody tr > *:last-child {
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

.dataTables_info, .dataTables_length, .dt-buttons {
    display: inline-block;
    padding-top: 10px;
    float: right;
}

    .dataTables_length label, .dataTables_filter label {
        font-weight: 300;
    }

.dt-buttons {
    margin-bottom: 10px;
}

    .dt-buttons .dt-button {
        padding: 0.5rem 1.25rem;
        border-radius: 5px;
        background: #398bf7;
        color: #fff;
        margin-right: 3px;
        display: inline-block;
    }

        .dt-buttons .dt-button:hover {
            background: #2f3d4a;
        }

.dataTables_filter {
    float: left;
    padding-top: 5px;
}

    .dataTables_filter input {
        border: 1px solid #d9d9d9;
        margin-left: 5px;
        border-radius: 5px;
        width: 300px;
        height: 30px;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .dataTables_filter input:focus,
        .dataTables_filter input:focus-visible {
            outline: none;
            border-color: var(--danger-btn-button);
            box-shadow: 0 0 0 3px rgba(210, 80, 85, 0.15);
        }

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_desc_disabled {
    background-color: #FAFAFA;
    color: #9B1B2C;
    height: 45px;
}

    table.dataTable thead .sorting_asc:after {
        content: "\f0de";
        margin-left: 10px;
        font-family: fontawesome;
        cursor: pointer;
    }

    table.dataTable thead .sorting_desc:after {
        content: "\f0dd";
        margin-left: 10px;
        font-family: fontawesome;
        cursor: pointer;
    }

    table.dataTable thead .sorting:after {
        content: "\f0dc";
        margin-left: 10px;
        font-family: fontawesome;
        cursor: pointer;
        color: rgba(50, 50, 50, .5);
    }

.dataTables_wrapper .dataTables_paginate, .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: .25em;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_paginate .paginate_button a {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        min-width: 1.5em;
        padding: .5em 1em;
        margin-left: 2px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        color: #67757c;
        border: 1px solid transparent;
        border-radius: 5px;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            color: #0B8F67;
            font-weight: 600;
            border: 1px solid #0B8F67;
            border-radius: 4px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            cursor: not-allowed;
            color: #67757c;
            border: 1px solid transparent;
            background: 0 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            color: #fff;
            border: 1px solid #3a4451;
            background-color: #FF8181;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:active {
            outline: 0;
            background-color: #FF8181;
        }

    .dataTables_wrapper .dataTables_paginate .ellipsis {
        padding: 0 1em;
    }

.tablesaw-bar .btn-group label {
    color: #67757c;
}

.dt-bootstrap {
    display: block;
}

.paging_simple_numbers .pagination .paginate_button {
    padding: 0;
    background: #fff;
}

    .paging_simple_numbers .pagination .paginate_button:hover {
        background: #fff;
    }

    .paging_simple_numbers .pagination .paginate_button a {
        padding: 5px 10px;
        border-radius: 4px;
        border: 0;
    }

    .paging_simple_numbers .pagination .paginate_button.active a, .paging_simple_numbers .pagination .paginate_button:hover a {
        background: #398bf7;
        color: #fff;
    }

.footable .pagination {
    display: inline-block;
    padding: 8px 0;
}

    .footable .pagination li {
        padding: 0;
        margin: 0 1px;
        display: inline-block;
    }

        .footable .pagination li a {
            padding: 5px 10px;
        }

            .footable .pagination li a.active, .footable .pagination li a:hover {
                background: #398bf7;
                color: #fff;
                border-radius: 4px;
            }

        .footable .pagination li.active a {
            color: #fff;
            border-radius: 4px;
        }

.label-default {
    background-color: #d2d6de;
    color: #455a64;
}

.label-infogray {
    background-color: #dde2e6;
    color: black;
}
/*direct-chat*/
.direct-chat .box-body {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.direct-chat.chat-pane-open .direct-chat-contacts {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.direct-chat-messages {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    padding: 10px;
    height: 55vh;
    overflow: auto;
}

.direct-chat-msg, .direct-chat-text {
    display: block;
}

/*.direct-chat-msg {
    margin-bottom: 10px;
}*/

.direct-chat-msg {
    margin-bottom: 10px;
    width: 100%; /*ทำให้ textarea ยืดตามขนาดของ div*/
    word-wrap: break-word; /* ตัดคำเมื่อเกินขนาด */
    /*overflow-wrap: break-word;*/ /* ตัดคำยาวๆ ที่ไม่สามารถแบ่งได้*/
    /*white-space: pre-wrap;*/ /*ทำให้การตัดบรรทัดตามขนาด div */
    resize: none; /*ป้องกันไม่ให้ผู้ใช้ขยายขนาด textarea*/
}

    .direct-chat-msg:after, .direct-chat-msg:before {
        content: " ";
        display: table;
    }

.direct-chat-contacts, .direct-chat-messages {
    -webkit-transition: -webkit-transform .5s ease-in-out;
    -moz-transition: -moz-transform .5s ease-in-out;
    -o-transition: -o-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}

.direct-chat-text-user {
    right: 0px;
    padding: 0px;
}

.direct-chat-text {
    border-radius: 0;
    position: relative;
    padding: 5px 10px;
    font-size: small;
    background: #fff;
    border: 1px solid #ebebeb;
    margin: 5px 0 0 50px;
    color: black;
    border-radius: 10px;
}

    .direct-chat-text:after, .direct-chat-text:before {
        position: absolute;
        right: 100%;
        top: 15px;
        border: solid transparent;
        border-right-color: #fff;
        content: ' ';
        height: 0;
        width: 0;
        pointer-events: none;
    }

    .direct-chat-text:after {
        border-width: 5px;
        margin-top: -5px;
    }

    .direct-chat-text:before {
        border-width: 6px;
        margin-top: -6px;
    }

.right .direct-chat-text {
    margin-right: 50px;
    margin-left: 0;
}

    .right .direct-chat-text:after, .right .direct-chat-text:before {
        right: auto;
        left: 100%;
        border-right-color: transparent;
        border-left-color: #fff;
    }

.direct-chat-img {
    float: left;
    width: 50px;
    height: 50px;
}

.right .direct-chat-img {
    float: right;
}

.direct-chat-info {
    display: block;
    margin-bottom: 2px;
}

.direct-chat-timestamp {
    color: #67757c;
}

.direct-chat-contacts-open .direct-chat-contacts {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.direct-chat-contacts {
    -webkit-transform: translate(101%, 0);
    -ms-transform: translate(101%, 0);
    -o-transform: translate(101%, 0);
    transform: translate(101%, 0);
    position: absolute;
    top: 0;
    bottom: 0;
    height: 250px;
    width: 100%;
    background: #222d32;
    color: #fff;
    overflow: auto;
}

.contacts-list > li {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    padding: 10px;
    margin: 0;
}

    .contacts-list > li:after, .contacts-list > li:before {
        content: " ";
        display: table;
    }

.contacts-list-name, .contacts-list-status, .users-list-date, .users-list-name {
    display: block;
}

.contacts-list > li:last-of-type {
    border-bottom: none;
}

.contacts-list-img {
    border-radius: 50%;
    width: 40px;
    float: left;
}

.contacts-list-info {
    margin-left: 45px;
    color: #fff;
}

.contacts-list-status {
    font-size: 12px;
}

.contacts-list-date {
    color: #aaa;
    font-weight: 300;
}

.contacts-list-email {
    color: #67757c;
}

.direct-chat-danger .right > .direct-chat-text {
    background: #ef5350;
    border-color: #ef5350;
    color: #fff;
}

    .direct-chat-danger .right > .direct-chat-text:after, .direct-chat-danger .right > .direct-chat-text:before {
        border-left-color: #ef5350;
    }

.direct-chat-primary .right > .direct-chat-text {
    background: #398bf7;
    border-color: #398bf7;
    color: #fff;
}

    .direct-chat-primary .right > .direct-chat-text:after, .direct-chat-primary .right > .direct-chat-text:before {
        border-left-color: #398bf7;
    }

.direct-chat-warning .right > .direct-chat-text {
    background: #fbae1c;
    border-color: #fbae1c;
    color: #fff;
}

    .direct-chat-warning .right > .direct-chat-text:after, .direct-chat-warning .right > .direct-chat-text:before {
        border-left-color: #fbae1c;
    }

.direct-chat-info .right > .direct-chat-text {
    background: #398bf7;
    border-color: #398bf7;
    color: #fff;
}

    .direct-chat-info .right > .direct-chat-text:after, .direct-chat-info .right > .direct-chat-text:before {
        border-left-color: #398bf7;
    }

.direct-chat-success .right > .direct-chat-text {
    background: #00c292;
    border-color: #00c292;
    color: #fff;
}

    .direct-chat-success .right > .direct-chat-text:after, .direct-chat-success .right > .direct-chat-text:before {
        border-left-color: #00c292;
    }

.users-list > li {
    width: 25%;
    float: left;
    padding: 10px;
    text-align: center;
}

    .users-list > li img {
        border-radius: 10px;
        max-width: 100%;
        height: auto;
    }

    .users-list > li > a:hover, .users-list > li > a:hover .users-list-name {
        color: #67757c;
    }

.users-list-name {
    font-weight: 600;
    color: #455a64;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.users-list-date {
    color: #67757c;
    font-size: 12px;
}

.carousel-control.left, .carousel-control.right {
    background-image: none;
}

.carousel-control > .fa {
    font-size: 40px;
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    margin-top: -20px;
}

.widget-user .widget-user-username, .widget-user-2 .widget-user-username, .widget-user-3 .widget-user-username, .widget-user-4 .widget-user-username {
    margin-bottom: 5px;
    font-size: 25px;
    font-weight: 300;
}

/*modal*/
.modal {
    background: rgba(0, 0, 0, .3);
}

.modal-content {
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .125);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .125);
    border: 0;
    height: auto;
    overflow: auto;
}

@media (min-width:768px) {
    .modal-content {
        -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .125);
        box-shadow: 0 2px 3px rgba(0, 0, 0, .125);
        height: auto;
        overflow: auto;
    }

    .modal-body {
        overflow-y: inherit;
        width: 99.9%;
    }
}

.modal-header {
    border-bottom-color: #f4f4f4;
}

.modal-footer {
    border-top-color: #f4f4f4;
    display: inline-block;
}

.modal-primary .modal-footer, .modal-primary .modal-header {
    border-color: #398bf7;
}

.modal-warning .modal-footer, .modal-warning .modal-header {
    border-color: #fbae1c;
}

.modal-info .modal-footer, .modal-info .modal-header {
    border-color: #398bf7;
}

.modal-success .modal-footer, .modal-success .modal-header {
    border-color: #00c292;
}

.modal-danger .modal-footer, .modal-danger .modal-header {
    border-color: #ef5350;
}
/*widget*/
.box-widget {
    border: none;
    position: relative;
}

.widget-user .widget-user-header {
    padding: 20px;
    height: 140px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.widget-user .widget-user-username {
    margin-top: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.widget-user .widget-user-desc {
    margin-top: 0;
}

.widget-user .widget-user-image {
    position: absolute;
    top: 85px;
    left: 50%;
    margin-left: -45px;
}

    .widget-user .widget-user-image > img {
        width: 90px;
        height: auto;
        border: 3px solid #fff;
    }

.widget-user-2 .widget-user-header, .widget-user-3 .widget-user-header {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    padding: 20px;
}

.widget-user .box-footer {
    padding-top: 30px;
}

.widget-user-2 .widget-user-username {
    margin-top: 5px;
}

.widget-user-2 .widget-user-desc {
    margin-top: 0;
}

.widget-user-2 .widget-user-desc, .widget-user-2 .widget-user-username {
    margin-left: 75px;
}

.widget-user-2 .widget-user-image > img {
    width: 65px;
    height: auto;
    float: left;
}

.widget-user-3 .widget-user-username {
    margin-top: 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.widget-user-3 .widget-user-desc {
    margin-top: 0;
}

.widget-user-3 .info-user {
    float: left;
    margin-top: 15px;
}

.widget-user-3 .widget-user-image > img {
    width: 100px;
    height: auto;
    float: right;
    border: 3px solid #fff;
}

.mailbox-controls.with-border, .mailbox-read-info {
    border-bottom: 1px solid #f4f4f4;
}

.widget-user-4 .widget-user-header {
    text-align: center;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.widget-user-4 .widget-user-username {
    margin-top: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.widget-user-4 .widget-user-desc {
    margin-top: 0;
    margin-bottom: 0;
}

.widget-user-4 .widget-user-image {
    text-align: center;
    margin-bottom: 15px;
}

    .widget-user-4 .widget-user-image > img {
        width: 100px;
        height: auto;
    }

.box.widget-user-4 .overlay {
    z-index: 50;
    border-radius: 0;
    padding: 20px;
}

    .box.widget-user-4 .overlay.overlay-none {
        background: rgba(0, 0, 0, 0);
    }

.widget-user-4 .box-footer {
    padding-top: 30px;
}
/*treevie*/
.treeview-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-page > .error-content, .login-box .fog-pwd, .mailbox-attachment-icon, .mailbox-attachment-info, .mailbox-attachment-size {
    display: block;
}

.treeview-menu .treeview-menu {
    padding-left: 20px;
}

.treeview-menu > li {
    margin: 0;
}

    .treeview-menu > li > a {
        padding: 8px 5px 8px 50px;
        display: block;
        font-size: 13px;
    }

.sidebar-collapse .treeview-menu > li > a {
    padding: 10px 5px 10px 30px;
}

.treeview-menu > li > a > .fa, .treeview-menu > li > a > .glyphicon, .treeview-menu > li > a > .ion {
    width: 20px;
}

.treeview-menu > li > a > .fa-angle-down, .treeview-menu > li > a > .fa-angle-left, .treeview-menu > li > a > .pull-right-container > .fa-angle-down, .treeview-menu > li > a > .pull-right-container > .fa-angle-left {
    width: auto;
}
/*mailbox*/
.mailbox-messages > .table {
    margin: 0;
}

.mailbox-messages .mailbox-date {
    font-size: 12px;
    color: #67757c;
}

.mailbox-messages table a {
    color: #67757c;
}

.mailbox-controls {
    padding: 1.25rem;
}

    .mailbox-controls .btn {
        padding: 10px 15px;
    }

.btn-shadow {
    box-shadow: 0 2px 2px 0 rgba(169, 169, 169, .14), 0 3px 1px -2px rgba(169, 169, 169, .2), 0 1px 5px 0 rgba(169, 169, 169, .12);
}

    .btn-shadow:hover {
        -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(169, 169, 169, .2);
        box-shadow: 0 14px 26px -12px rgba(169, 169, 169, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(169, 169, 169, .2);
    }

.mailbox-controls .btn i {
    font-size: 16px;
}

.mailbox-read-info {
    padding: 10px;
}

.mailbox-read-info {
    padding: 1.25rem;
}

    .mailbox-read-info h5 {
        margin: 0;
        padding: 5px 0 0;
    }

.mailbox-read-time {
    color: #67757c;
    font-size: 13px;
}

.mailbox-read-message {
    padding: 1.25rem;
}

.mailbox-attachments li {
    float: left;
    width: 140px;
    border: 1px solid #eee;
    margin-bottom: 10px;
    margin-right: 10px;
}

.mailbox-attachment-name {
    font-weight: 300;
    color: #67757c;
    font-size: 10px;
}

.mailbox-attachment-info {
    padding: 10px;
    background: #f4f4f4;
}

.mailbox-attachment-size {
    color: #67757c;
    font-size: 12px;
}

.mailbox-attachment-icon {
    text-align: center;
    font-size: 36px;
    color: #67757c;
    padding: 20px 10px;
}

    .mailbox-attachment-icon.has-img {
        padding: 0;
    }

        .mailbox-attachment-icon.has-img > img {
            max-width: 100%;
            height: auto;
        }
/*lockscreen*/
.lockscreen {
    background: url(../../images/login-register.jpg) center center no-repeat #d2d6de;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
}

.lockscreen-logo {
    font-size: 35px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
}

.lockscreen .lockscreen-name {
    text-align: center;
    font-weight: 600;
}

.lockscreen-image {
    border-radius: 50%;
    text-align: center;
}

    .lockscreen-image > img {
        border-radius: 50%;
        width: 90px;
        height: 90px;
    }

.lockscreen-credentials .form-control-feedback {
    line-height: 35px;
}

.lockscreen-credentials .form-control {
    border: 0;
}

.lockscreen-footer {
    margin-top: 10px;
}

.lockscreen-box-body {
    background: #FFF;
    padding: 20px;
    border-top: 0;
    color: #fff;
}

/*clock*/
.clock {
    position: absolute;
    color: #ef5350;
    font-size: 13px;
    font-family: Orbitron;
    letter-spacing: 2px;
    font-weight: 500;
}
/*clock*/

/*login-box*/
.login-logo, .register-logo {
    font-size: 35px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
}

.login-page, .register-page {
    background: url(../../Content/images/bglogin-ndpp-05.jpg);
    background-repeat: no-repeat;
    background-color: #d2d6de;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
}

.login-box, .register-box, .lockscreen-wrapper {
    width: 350px;
    margin: 0;
    padding: 7% 0;
    float: right;
    height: 100%;
    background-color: #FFF;
    overflow-y: scroll;
}

    .login-box .fog-pwd {
        position: relative;
        margin-bottom: 10px;
    }

        .login-box .fog-pwd i {
            position: relative;
            padding-right: 15px;
        }

.has-feedback {
    position: relative;
}

.register-page .form-control-feedback, .login-page .form-control-feedback, .lockscreen .form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none;
}

/*lable floting*/

.has-warning .bar:before,
.has-warning .bar:after {
    background: #fbae1c;
}

.has-success .bar:before,
.has-success .bar:after {
    background: #00c292;
}

.has-error .bar:before,
.has-error .bar:after {
    background: #ef5350;
}

.has-warning .form-control:focus ~ label,
.has-warning .form-control:valid ~ label {
    color: #fbae1c;
}

.has-success .form-control:focus ~ label,
.has-success .form-control:valid ~ label {
    color: #00c292;
}

.has-error .form-control:focus ~ label,
.has-error .form-control:valid ~ label {
    color: #ef5350;
}

.has-feedback label ~ .t-0 {
    top: 0;
}

.form-group.error input, .form-group.error select, .form-group.error textarea {
    border: 1px solid #ef5350 !important;
}

.form-group.validate input, .form-group.validate select, .form-group.validate textarea {
    border: 1px solid #00c292;
}

.form-group.error .help-block ul {
    padding: 0px;
    color: #ef5350;
}

    .form-group.error .help-block ul li {
        list-style: none;
    }

.form-group.issue .help-block ul {
    padding: 0px;
    color: #fbae1c;
}

    .form-group.issue .help-block ul li {
        list-style: none;
    }


@media (max-width:768px) {
    .lockscreen-wrapper, .login-box, .register-box {
        width: 360px;
    }

    .lockscreen, .login-page, .register-page {
        position: relative;
        background-size: inherit;
    }
}

@media (max-width: 767px) {
    .lockscreen-wrapper, .login-box, .register-box {
        width: 300px;
        margin: 10px auto;
        float: none;
        border-radius: 5px;
    }
}

.login-box-body, .register-box-body {
    padding: 20px 35px 10px;
    border-top: 0;
    color: rgba(0, 0, 0, 0.82);
    border-radius: 5px;
    box-shadow: none;
}

    .login-box-body .form-control-feedback, .register-box-body .form-control-feedback {
        color: #67757c;
        line-height: 35px;
    }

.login-box-msg, .register-box-msg {
    margin: 0;
    text-align: center;
    padding: 0 20px 20px;
}

.social-auth-links {
    margin: 10px 0;
}

.error-body {
    width: 100%;
    height: 100%;
    margin: 20px auto 0;
    text-align: center;
    position: fixed;
    background: url(../../images/error-bg.jpg) center center no-repeat #fff;
}

    .error-body.pace-inactive {
        background: #f3f5f7;
        margin-top: 0;
        padding-top: 100px;
    }

.error-page .search-form {
    width: 280px;
    margin: 0 auto;
}

.error-page .main-footer {
    margin-left: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    padding: 15px 30px 30px;
}

.error-page .headline {
    font-size: 180px;
    font-weight: 900;
    line-height: initial;
}

@media (max-width:991px) {
    .error-page {
        width: 100%
    }

        .error-page > .headline {
            float: none;
            text-align: center;
        }
}

.error-content .btn {
    width: auto;
    margin: 0 auto;
    display: inline-block;
}

@media (max-width:767px) {
    .error-page .headline {
        font-size: 72px;
        font-weight: 900;
    }
}

.error-page > .error-content > h3 {
    font-weight: 300;
    font-size: 25px;
}

@media (max-width:991px) {
    .error-page .error-content {
        margin-left: 0;
    }

    .error-page > .error-content > h3 {
        text-align: center;
    }
}

.invoice {
    position: relative;
    background: #fff;
    border: 1px solid #f4f4f4;
    padding: 20px;
    margin: 10px 25px 0px;
}

.btn-adn.active, .btn-adn:active, .btn-bitbucket.active, .btn-bitbucket:active, .btn-dropbox.active, .btn-dropbox:active, .btn-facebook.active, .btn-facebook:active, .btn-flickr.active, .btn-flickr:active, .btn-foursquare.active, .btn-foursquare:active, .btn-github.active, .btn-github:active, .btn-google.active, .btn-google:active, .btn-instagram.active, .btn-instagram:active, .btn-microsoft.active, .btn-microsoft:active, .btn-openid.active, .btn-openid:active, .btn-pinterest.active, .btn-pinterest:active, .btn-reddit.active, .btn-reddit:active, .btn-soundcloud.active, .btn-soundcloud:active, .btn-tumblr.active, .btn-tumblr:active, .btn-twitter.active, .btn-twitter:active, .btn-vimeo.active, .btn-vimeo:active, .btn-vk.active, .btn-vk:active, .btn-yahoo.active, .btn-yahoo:active, .show > .dropdown-toggle.btn-adn, show > .dropdown-toggle.btn-bitbucket, .show > .dropdown-toggle.btn-dropbox, .show > .dropdown-toggle.btn-facebook, .show > .dropdown-toggle.btn-flickr, .show > .dropdown-toggle.btn-foursquare, .show > .dropdown-toggle.btn-github, .show > .dropdown-toggle.btn-google, .show > .dropdown-toggle.btn-instagram, .show > .dropdown-toggle.btn-microsoft, .show > .dropdown-toggle.btn-openid, .show > .dropdown-toggle.btn-pinterest, .show > .dropdown-toggle.btn-reddit, .show > .dropdown-toggle.btn-soundcloud, .show > .dropdown-toggle.btn-tumblr, .show > .dropdown-toggle.btn-twitter, .show > .dropdown-toggle.btn-vimeo, .show > .dropdown-toggle.btn-vk, .show > .dropdown-toggle.btn-yahoo {
    background-image: none;
}

.invoice-details, .total-payment h3 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.invoice-title {
    margin-top: 0;
}

.invoice-details {
    background-color: #f2f6f8;
    margin-bottom: 15px;
    border: 1px solid #ccc;
}

.total-payment h3 {
    border-top: 1px solid #ccc;
    display: inline-block;
    margin-top: 0;
}

.profile-user-img {
    margin: 15px auto;
    width: 130px;
    height: 130px;
    box-shadow: 0 2px 2px 0 rgba(169, 169, 169, .14), 0 3px 1px -2px rgba(169, 169, 169, .2), 0 1px 5px 0 rgba(169, 169, 169, .12);
}

.profile-user-info {
    padding: 30px 15px;
    border-top: 1px solid #ccc;
    margin-top: 30px;
}

    .profile-user-info p {
        font-size: small;
    }

    .profile-user-info h5 {
        color: #67757c;
        margin-bottom: 25px;
    }

    .profile-user-info .map-box {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .profile-user-info .user-social-acount .btn {
        -webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, .14), 0 3px 1px -2px rgba(169, 169, 169, .2), 0 1px 5px 0 rgba(169, 169, 169, .12);
        box-shadow: 0 2px 2px 0 rgba(169, 169, 169, .14), 0 3px 1px -2px rgba(169, 169, 169, .2), 0 1px 5px 0 rgba(169, 169, 169, .12);
    }

.btn-default.green-btn.active, .dot-outline {
    box-shadow: none;
}

.profile-username {
    font-size: 21px;
    margin-top: 5px;
}

.activitytimeline {
    position: relative;
    margin-left: 50px;
    margin-right: 10px;
}

.box-profile .social-states {
    font-size: 16px;
}

    .box-profile .social-states a {
        color: #455a64;
    }

        .box-profile .social-states a:hover {
            color: #398bf7;
        }

.post {
    border-bottom: 1px solid #d2d6de;
    margin-bottom: 15px;
    padding-bottom: 15px;
    color: #67757c;
}

    .post:last-of-type {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .post .user-block {
        margin-bottom: 15px;
    }
/*btn-social*/
.btn-social {
    position: relative;
    padding-left: 44px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-social .btn-social {
    display: inline-block;
    width: auto;
    min-width: 250px;
    margin-bottom: 5px;
}

.demo-social .btn-social-icon {
    border: none;
}

.demo-social .btn-block + .btn-block {
    margin-top: 0;
}

.btn-social > :first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    line-height: 34px;
    font-size: 1.6em;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, .2);
}

.btn-social.btn-lg {
    padding-left: 61px;
}

    .btn-social.btn-lg > :first-child {
        line-height: 45px;
        width: 45px;
        font-size: 1.8em;
    }

.btn-social.btn-sm {
    padding-left: 38px;
}

    .btn-social.btn-sm > :first-child {
        line-height: 28px;
        width: 28px;
        font-size: 1.4em;
    }

.btn-social.btn-xs {
    padding-left: 30px;
}

    .btn-social.btn-xs > :first-child {
        line-height: 20px;
        width: 20px;
        font-size: 1.2em;
    }

.btn-social-icon {
    position: relative;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 40px;
    width: 40px;
    padding: 0;
}

    .btn-social-icon > :first-child {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        line-height: 40px;
        font-size: 1.6em;
    }

    .btn-social-icon.btn-lg > :first-child {
        line-height: 45px;
        width: 45px;
        font-size: 1.8em;
    }

    .btn-social-icon.btn-sm > :first-child {
        line-height: 28px;
        width: 28px;
        font-size: 1.4em;
    }

    .btn-social-icon.btn-xs > :first-child {
        line-height: 20px;
        width: 20px;
        font-size: 1.2em;
    }

    .btn-social-icon > :first-child {
        border: none;
        text-align: center;
        width: 100%
    }

    .btn-social-icon.btn-lg {
        height: 45px;
        width: 45px;
        padding-left: 0;
        padding-right: 0;
    }

    .btn-social-icon.btn-sm {
        height: 30px;
        width: 30px;
        padding-left: 0;
        padding-right: 0;
    }

    .btn-social-icon.btn-xs {
        height: 22px;
        width: 22px;
        padding-left: 0;
        padding-right: 0;
    }

.box .datepicker-inline, .box .datepicker-inline .datepicker-days, .box .datepicker-inline .datepicker-days > table, .box .datepicker-inline > table, .fc-grid {
    width: 100%
}

.fc-day-number, .fc-header-right {
    padding-right: 10px;
}

.btn-default.green-btn {
    background-color: #00c292;
}

.btn-default.red-btn {
    background-color: #f52e41;
}

.btn-adn {
    color: #fff;
    background-color: #d87a68;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-adn.active, .btn-adn.focus, .btn-adn:active, .btn-adn:focus, .btn-adn:hover, .show > .dropdown-toggle.btn-adn {
        color: #fff;
        background-color: #ce563f;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-adn .badge {
        color: #d87a68;
        background-color: #fff;
    }

.btn-bitbucket {
    color: #fff;
    background-color: #205081;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-bitbucket.active, .btn-bitbucket.focus, .btn-bitbucket:active, .btn-bitbucket:focus, .btn-bitbucket:hover, .show > .dropdown-toggle.btn-bitbucket {
        color: #fff;
        background-color: #163758;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-bitbucket .badge {
        color: #205081;
        background-color: #fff;
    }

.btn-dropbox {
    color: #fff;
    background-color: #007ee5;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-dropbox.active, .btn-dropbox.focus, .btn-dropbox:active, .btn-dropbox:focus, .btn-dropbox:hover, .show > .dropdown-toggle.btn-dropbox {
        color: #fff;
        background-color: #0d6aad;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-dropbox .badge {
        color: #1087dd;
        background-color: #fff;
    }

.btn-facebook {
    color: #fff;
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-facebook.active, .btn-facebook.focus, .btn-facebook:active, .btn-facebook:focus, .btn-facebook:hover, .show > .dropdown-toggle.btn-facebook {
        color: #fff;
        background-color: #2d4373;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-facebook .badge {
        color: #3b5998;
        background-color: #fff;
    }

.btn-flickr {
    color: #fff;
    background-color: #ff0084;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-flickr.active, .btn-flickr.focus, .btn-flickr:active, .btn-flickr:focus, .btn-flickr:hover, .show > .dropdown-toggle.btn-flickr {
        color: #fff;
        background-color: #cc006a;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-flickr .badge {
        color: #ff0084;
        background-color: #fff;
    }

.btn-foursquare {
    color: #fff;
    background-color: #f94877;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-foursquare.active, .btn-foursquare.focus, .btn-foursquare:active, .btn-foursquare:focus, .btn-foursquare:hover, .show > .dropdown-toggle.btn-foursquare {
        color: #fff;
        background-color: #f71752;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-foursquare .badge {
        color: #f94877;
        background-color: #fff;
    }

.btn-github {
    color: #fff;
    background-color: #455a64;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-github.active, .btn-github.focus, .btn-github:active, .btn-github:focus, .btn-github:hover, .show > .dropdown-toggle.btn-github {
        color: #fff;
        background-color: #2b2b2b;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-github .badge {
        color: #455a64;
        background-color: #fff;
    }

.btn-google {
    color: #fff;
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-google.active, .btn-google.focus, .btn-google:active, .btn-google:focus, .btn-google:hover, .show > .dropdown-toggle.btn-google {
        color: #fff;
        background-color: #c23321;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-google .badge {
        color: #ef5350;
        background-color: #fff;
    }

.btn-instagram {
    color: #fff;
    background-color: #e1306c;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-instagram.active, .btn-instagram.focus, .btn-instagram:active, .btn-instagram:focus, .btn-instagram:hover, .show > .dropdown-toggle.btn-instagram {
        color: #fff;
        background-color: #c13584;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-instagram .badge {
        color: #3f729b;
        background-color: #fff;
    }

.btn-linkedin {
    color: #fff;
    background-color: #007bb6;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-linkedin.active, .btn-linkedin.focus, .btn-linkedin:active, .btn-linkedin:focus, .btn-linkedin:hover, .show > .dropdown-toggle.btn-linkedin {
        color: #fff;
        background-color: #005983;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-linkedin.active, .btn-linkedin:active, .show > .dropdown-toggle.btn-linkedin {
        background-image: none;
    }

    .btn-linkedin .badge {
        color: #007bb6;
        background-color: #fff;
    }

.btn-microsoft {
    color: #fff;
    background-color: #2672ec;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-microsoft.active, .btn-microsoft.focus, .btn-microsoft:active, .btn-microsoft:focus, .btn-microsoft:hover, .show > .dropdown-toggle.btn-microsoft {
        color: #fff;
        background-color: #125acd;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-microsoft .badge {
        color: #2672ec;
        background-color: #fff;
    }

.btn-openid {
    color: #fff;
    background-color: #f7931e;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-openid.active, .btn-openid.focus, .btn-openid:active, .btn-openid:focus, .btn-openid:hover, .show > .dropdown-toggle.btn-openid {
        color: #fff;
        background-color: #da7908;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-openid .badge {
        color: #f7931e;
        background-color: #fff;
    }

.btn-pinterest {
    color: #fff;
    background-color: #cb2027;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-pinterest.active, .btn-pinterest.focus, .btn-pinterest:active, .btn-pinterest:focus, .btn-pinterest:hover, .show > .dropdown-toggle.btn-pinterest {
        color: #fff;
        background-color: #9f191f;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-pinterest .badge {
        color: #cb2027;
        background-color: #fff;
    }

.btn-reddit {
    color: #000;
    background-color: #eff7ff;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-reddit.active, .btn-reddit.focus, .btn-reddit:active, .btn-reddit:focus, .btn-reddit:hover, .show > .dropdown-toggle.btn-reddit {
        color: #000;
        background-color: #bcddff;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-reddit .badge {
        color: #eff7ff;
        background-color: #000;
    }

.btn-soundcloud {
    color: #fff;
    background-color: #f50;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-soundcloud.active, .btn-soundcloud.focus, .btn-soundcloud:active, .btn-soundcloud:focus, .btn-soundcloud:hover, .show > .dropdown-toggle.btn-soundcloud {
        color: #fff;
        background-color: #c40;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-soundcloud .badge {
        color: #f50;
        background-color: #fff;
    }

.btn-tumblr {
    color: #fff;
    background-color: #2c4762;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-tumblr.active, .btn-tumblr.focus, .btn-tumblr:active, .btn-tumblr:focus, .btn-tumblr:hover, .show > .dropdown-toggle.btn-tumblr {
        color: #fff;
        background-color: #1c2d3f;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-tumblr .badge {
        color: #2c4762;
        background-color: #fff;
    }

.btn-twitter {
    color: #fff;
    background-color: #55acee;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-twitter.active, .btn-twitter.focus, .btn-twitter:active, .btn-twitter:focus, .btn-twitter:hover, .show > .dropdown-toggle.btn-twitter {
        color: #fff;
        background-color: #2795e9;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-twitter .badge {
        color: #55acee;
        background-color: #fff;
    }

.btn-vimeo {
    color: #fff;
    background-color: #1ab7ea;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-vimeo.active, .btn-vimeo.focus, .btn-vimeo:active, .btn-vimeo:focus, .btn-vimeo:hover, .show > .dropdown-toggle.btn-vimeo {
        color: #fff;
        background-color: #1295bf;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-vimeo .badge {
        color: #1ab7ea;
        background-color: #fff;
    }

.btn-vk {
    color: #fff;
    background-color: #587ea3;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-vk.active, .btn-vk.focus, .btn-vk:active, .btn-vk:focus, .btn-vk:hover, .show > .dropdown-toggle.btn-vk {
        color: #fff;
        background-color: #466482;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-vk .badge {
        color: #587ea3;
        background-color: #fff;
    }

.btn-yahoo {
    color: #fff;
    background-color: #720e9e;
    border-color: rgba(0, 0, 0, .2);
}

    .btn-yahoo.active, .btn-yahoo.focus, .btn-yahoo:active, .btn-yahoo:focus, .btn-yahoo:hover, .show > .dropdown-toggle.btn-yahoo {
        color: #fff;
        background-color: #500a6f;
        border-color: rgba(0, 0, 0, .2);
    }

    .btn-yahoo .badge {
        color: #720e9e;
        background-color: #fff;
    }

.fc-button.hover, .fc-button:active, .fc-button:hover {
    background-color: #e9e9e9;
}

.fc-header-title h2 {
    font-size: 15px;
    line-height: 1.6em;
    color: #67757c;
    margin-left: 10px;
}

.fc-header-left {
    padding-left: 10px;
}

.fc-widget-header {
    background: #fafafa;
}

.fc-grid {
    border: 0;
}

.fc-widget-content:first-of-type, .fc-widget-header:first-of-type {
    border-left: 0;
    border-right: 0;
}

.fc-widget-content:last-of-type, .fc-widget-header:last-of-type {
    border-right: 0;
}

.fc-day-number {
    font-size: 20px;
    font-weight: 300;
}

.fc-color-picker {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .fc-color-picker > li {
        float: left;
        font-size: 30px;
        margin-right: 5px;
        line-height: 30px;
    }

        .fc-color-picker > li .fa {
            -webkit-transition: -webkit-transform linear .3s;
            -moz-transition: -moz-transform linear .3s;
            -o-transition: -o-transform linear .3s;
            transition: transform linear .3s;
        }

            .fc-color-picker > li .fa:hover {
                -webkit-transform: rotate(30deg);
                -ms-transform: rotate(30deg);
                -o-transform: rotate(30deg);
                transform: rotate(30deg);
            }

.calendar {
    float: left;
    margin-bottom: 0;
}

.none-border .modal-footer {
    border-top: none;
}

.fc-toolbar {
    margin-bottom: 5px;
    margin-top: 15px;
}

    .fc-toolbar h2 {
        font-size: 18px;
        font-weight: 500;
        line-height: 30px;
    }

.fc-day {
    background: #fff;
}

.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active, .fc-toolbar .ui-state-hover, .fc-toolbar button:focus, .fc-toolbar button:hover {
    z-index: 0;
}

.fc-widget-header {
    border: 0;
}

.fc-widget-content {
    border-color: rgba(120, 130, 140, .13) !important;
}

.fc th.fc-widget-header {
    color: #67757c;
    font-size: 13px;
    font-weight: 300;
    line-height: 20px;
    padding: 7px 0;
}

.fc th.fc-fri, .fc th.fc-mon, .fc th.fc-sat, .fc th.fc-sun, .fc th.fc-thu, .fc th.fc-tue, .fc th.fc-wed {
    background: #f2f7f8;
}

.fc-view {
    margin-top: 0;
}

.fc-toolbar {
    margin: 0;
    padding: 0.2rem;
}

.fc-button {
    background: #fff;
    border: 1px solid rgba(120, 130, 140, .13);
    color: #67757c;
    text-transform: capitalize;
}

.description-block > .description-text, .external-event {
    text-transform: uppercase;
}

.fc-button:hover {
    background: #f2f4f8;
    opacity: .8;
}

.fc-text-arrow {
    font-family: inherit;
    font-size: 16px;
}

.fc-state-hover {
    background: #F5F5F5;
}

.fc-unthemed .fc-today {
    background: rgba(210, 80, 85, 0.2);
}

.fc-cell-overlay, .fc-state-highlight {
    background: #f0f0f0;
}

.calendar-event, .fc-event {
    background: #398bf7;
    cursor: move;
    text-align: center;
}

.fc-event {
    border-radius: 0;
    border: none;
    color: #fff !important;
    font-size: 13px;
    margin: 1px -1px 0;
    padding: 5px;
    background: #177EE6;
}

.calendar-event {
    margin: 10px 5px 0 0;
    padding: 6px 10px;
    display: inline-block;
    color: #fff;
    min-width: 140px;
}

    .calendar-event a {
        float: right;
        opacity: .6;
        font-size: 10px;
        margin: 4px 0 0 10px;
        color: #fff;
    }

.fc-basic-view td.fc-week-number span {
    padding-right: 5px;
}

.fc-basic-view .fc-day-number {
    padding: 0px 15px;
    display: inline-block;
}

@media (min-width: 1100px) {
    .fc-basic-view .fc-day-number {
        padding: 10px 15px;
    }
}

#add-new-event {
    -webkit-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}

.dot-outline {
    border: 1px dotted #ccc;
}

.external-event i {
    margin-right: 5px;
}

.external-event {
    padding: 1rem;
    font-weight: 300;
    margin-bottom: 5px;
    cursor: move;
    border-radius: 5px;
}

    .external-event:hover {
        background-color: #f7f7f7;
    }

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background: #f5f7fa !important;
    border-color: #e5e7eb !important;
    opacity: 1;
    cursor: not-allowed;
}

.select2-container--default.select2-container--disabled .select2-selection__rendered,
.select2-container--default.select2-container--disabled .select2-selection__choice {
    color: #94a3b8 !important;
}

.select2-container--default.select2-container--focus, .select2-container--default:active, .select2-container--default:focus, .select2-selection.select2-container--focus, .select2-selection:active, .select2-selection:focus {
    outline: 0;
}

.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
    border: 1px solid #d2d6de;
    border-radius: 5px;
    padding: 6px 12px;
    height: 3.5rem;
}

.select2-container--default.select2-container--open {
    border-color: #398bf7;
}

.select2-dropdown {
    border: 1px solid #d2d6de;
    border-radius: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #398bf7;
    color: #fff;
}

.select2-results__option {
    padding: 6px 12px;
    user-select: none;
    -webkit-user-select: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    height: auto;
    margin-top: 0;
    line-height: 2.5rem;
}

.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
    padding-right: 6px;
    padding-left: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 3.4rem;
    right: 3px;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        margin-top: 0;
    }

.select2-dropdown .select2-search__field, .select2-search--inline .select2-search__field {
    border: 1px solid #d2d6de;
    line-height: 1.8rem;
    width: 100% !important;
}

    .select2-dropdown .select2-search__field:focus, .select2-search--inline .select2-search__field:focus {
        outline: 0;
    }

.select2-container--default .select2-search--dropdown .select2-search__field, .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #398bf7 !important;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #67757c;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ddd;
}

    .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
        color: #455a64;
    }

.select2-container--default .select2-selection--multiple {
    border: 1px solid #d2d6de;
    border-radius: 5px;
    min-height: 3.5rem;
}

    .select2-container--default .select2-selection--multiple:focus {
        border-color: #398bf7;
    }

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #d2d6de;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #177ee524;
    border-color: #177ee500;
    padding: 5px 15px;
    color: #177ee5;
    margin: 5px 0px 5px 5px !important;
    /* chip เป็น flex + สั่ง × (remove) ให้อยู่ท้าย → × ตามท้าย label เสมอ
       LTR=× ขวา, RTL=× ซ้าย (ตาม direction ที่ inherit โดยอัตโนมัติ); gap = ช่องว่าง label↔× */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin: 0;
    color: #b3b3b3;
    order: 1;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #ef5350;
    }

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 10px;
}

.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
    background: rgba(0, 0, 0, .15) !important;
}

.box .datepicker-inline .datepicker-days td:hover, .box .datepicker-inline .datepicker-days > table td:hover, .box .datepicker-inline td:hover, .box .datepicker-inline > table td:hover {
    background-color: rgba(255, 255, 255, .3);
}

.box .datepicker-inline .datepicker-days td.day.new, .box .datepicker-inline .datepicker-days td.day.old, .box .datepicker-inline .datepicker-days > table td.day.new, .box .datepicker-inline .datepicker-days > table td.day.old, .box .datepicker-inline td.day.new, .box .datepicker-inline td.day.old, .box .datepicker-inline > table td.day.new, .box .datepicker-inline > table td.day.old {
    color: #455a64;
}

.pad {
    padding: 10px;
}

.margin {
    margin: 10px;
}

.margin-bottom {
    margin-bottom: 20px;
}

.margin-bottom-none {
    margin-bottom: 0;
}

.margin-r-5 {
    margin-right: 5px;
}

.inline {
    display: inline;
}

.res-tb-block {
    display: block;
    overflow: auto;
}

.description-block {
    display: block;
    margin: 10px 0;
    text-align: center;
}

    .description-block.margin-bottom {
        margin-bottom: 10px;
    }

    .description-block > .description-header {
        margin: 0;
        padding: 0;
        font-weight: 600;
        font-size: 16px;
    }

.list-header, .text-bold, .text-bold.table td, .text-bold.table th {
    font-weight: 700;
}

.alert-danger, .alert-error, .alert-info, .alert-success, .alert-warning, .bg-aqua, .bg-aqua-active, .bg-black, .bg-black-active, .bg-blue, .bg-blue-active, .bg-fuchsia, .bg-fuchsia-active, .bg-green, .bg-green-active, .bg-light-blue, .bg-light-blue-active, .bg-lime, .bg-lime-active, .bg-maroon, .bg-maroon-active, .bg-navy, .bg-navy-active, .bg-olive, .bg-olive-active, .bg-orange, .bg-orange-active, .bg-purple, .bg-purple-active, .bg-red, .bg-red-active, .bg-teal, .bg-teal-active, .bg-yellow, .bg-yellow-active, .callout.callout-danger, .callout.callout-info, .callout.callout-success, .callout.callout-warning, .label-danger, .label-info, .label-primary, .label-success, .label-warning, .modal-danger .modal-body, .modal-danger .modal-footer, .modal-danger .modal-header, .modal-info .modal-body, .modal-info .modal-footer, .modal-info .modal-header, .modal-primary .modal-body, .modal-primary .modal-footer, .modal-primary .modal-header, .modal-success .modal-body, .modal-success .modal-footer, .modal-success .modal-header, .modal-warning .modal-body, .modal-warning .modal-footer, .modal-warning .modal-header, .bg-warning, .bg-pink, .bg-gray {
    color: #fff !important;
}
/*background Patterns*/
.bg-hexagons-white {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ffffff' fill-opacity='0.05' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-hexagons-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23000000' fill-opacity='0.03' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-deathstar-white {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='105' viewBox='0 0 80 105'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='death-star' fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M20 10a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm15 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zM20 75a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zm30-65a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm0 65a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zM35 10a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zM5 45a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zm60 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-deathstar-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='105' viewBox='0 0 80 105'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='death-star' fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M20 10a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm15 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zM20 75a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zm30-65a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm0 65a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zM35 10a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zM5 45a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zm60 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-banknote-white {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.bg-banknote-dark {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23000000' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/*color Skin*/

.border-primary {
    border-color: #ab8ce4 !important;
}

.border-secondary {
    border-color: #e4e7ea !important;
}

.border-success {
    border-color: #00c292 !important;
}

.border-info {
    border-color: #03a9f3 !important;
}

.border-warning {
    border-color: #faa64b !important;
}

.border-danger {
    border-color: #fb9678 !important;
}

.border-pink {
    border-color: #f96197;
}

.border-purple {
    border-color: #926dde;
}

.border-brown {
    border-color: #8d6658;
}

.border-cyan {
    border-color: #57c7d4;
}

.border-yellow {
    border-color: #e0bc00;
}

.border-aqua {
    border-color: #00FFFF;
}

.border-green {
    border-color: #06D73E;
}

.border-gray {
    border-color: #868e96;
}

.border-dark {
    border-color: #465161 !important;
}

.border-transparent {
    border-color: transparent !important;
}

.border-white {
    border-color: #fff !important;
}

.border-light {
    border-color: #f1f2f3 !important;
}

.border-fade {
    border-color: rgba(97, 106, 120, 0.07) !important;
}

.bg-lightest {
    background-color: #fcfdfe !important;
}

.bg-lighter {
    background-color: #f9fafb !important;
}

.bg-light {
    background-color: #f5f6f7 !important;
}

.box-solid > .box-body {
    background-color: #ffffff !important;
    color: #67757c;
}

.box-solid .box-content {
    background-color: #ffffff !important;
    color: #67757c;
    height: 100%;
}

.bg-primary {
    background-color: #ab8ce4 !important;
    color: #fff;
}

.bg-secondary {
    background-color: #e4e7ea !important;
    color: #616a78;
}

.bg-success {
    background-color: #00c292 !important;
    color: #fff;
}

.bg-info {
    background-color: #177EE6 !important;
    color: #fff;
}

.bg-warning {
    background-color: #fbae1c !important;
    color: #fff;
}

.bg-danger {
    background-color: #00a898 !important;
    color: #fff;
}

.bg-pink {
    background-color: #f96197;
    color: #fff;
}

.bg-purple {
    background-color: #926dde;
    color: #fff;
}

.bg-brown {
    background-color: #8d6658;
    color: #fff;
}

.bg-cyan {
    background-color: #57c7d4;
    color: #fff;
}

.bg-yellow {
    background-color: #e0bc00;
    color: #a80b0b;
}

.bg-extreme {
    background-color: #c10b0b;
    color: #fff;
}

.bg-gray {
    background-color: #d1e7e3;
    color: #fff;
}

.bg-dark {
    background-color: #465161 !important;
    color: #fff;
}

.bg-white {
    background-color: #fff !important;
}

.bg-inverse {
    background-color: #465161 !important;
    color: #fff;
}

.bg-transparent {
    background-color: transparent !important;
}

.bg-secondary {
    color: #616a78;
}

.bg-lightest {
    background-color: #fcfdfe !important;
}

.bg-lighter {
    background-color: #f9fafb !important;
}

.bg-light {
    background-color: #f5f6f7 !important;
}

.bg-pale-primary {
    background-color: #f0e8ff;
}

.bg-pale-secondary {
    background-color: #f7fafc;
}

.bg-pale-success {
    background-color: #e3fcf2;
}

.bg-pale-info {
    background-color: #e3f3fc;
}

.bg-pale-warning {
    background-color: #fcf0e3;
}

.bg-pale-danger {
    background-color: #fce3e3;
}

.bg-pale-pink {
    background-color: #fce3ec;
}

.bg-pale-purple {
    background-color: #ece3fc;
}

.bg-pale-brown {
    background-color: #eddcd5;
}

.bg-pale-cyan {
    background-color: #e3fafc;
}

.bg-pale-yellow {
    background-color: #fcf8e3;
}

.bg-pale-gray {
    background-color: #f2f2f2;
}

.bg-pale-dark {
    background-color: #c8c8c8;
}

.text-primary {
    color: #ab8ce4 !important;
}

.text-secondary {
    color: #e4e7ea !important;
}

.text-success {
    color: #00c292 !important;
}

.text-info {
    color: #177EE6 !important;
}

.text-warning {
    color: #E6002A !important;
}

.text-danger {
    color: #ef5350 !important;
}

.text-pink {
    color: #f96197;
}

.text-purple {
    color: #926dde;
}

.text-brown {
    color: #8d6658;
}

.text-cyan {
    color: #57c7d4;
}

.text-yellow {
    color: #e0bc00 !important;
}

.text-gray {
    color: #868e96;
}

.text-dark {
    color: #465161 !important;
}

.text-facebook {
    color: #3b5998;
}

.text-google {
    color: #dd4b39;
}

.text-twitter {
    color: #00aced;
}

.text-linkedin {
    color: #007bb6;
}

.text-pinterest {
    color: #cb2027;
}

.text-git {
    color: #666666;
}

.text-tumblr {
    color: #32506d;
}

.text-vimeo {
    color: #aad450;
}

.text-youtube {
    color: #bb0000;
}

.text-flickr {
    color: #ff0084;
}

.text-reddit {
    color: #ff4500;
}

.text-dribbble {
    color: #ea4c89;
}

.text-skype {
    color: #00aff0;
}

.text-instagram {
    color: #517fa4;
}

.text-lastfm {
    color: #c3000d;
}

.text-behance {
    color: #1769ff;
}

.text-rss {
    color: #f26522;
}

.text-default {
    color: #616a78;
}

.text-muted {
    color: #868e96 !important;
}

.text-light {
    color: #788394 !important;
}

.text-lighter {
    color: #a5b3c7 !important;
}

.text-fade {
    color: rgba(97, 106, 120, 0.7) !important;
}

.text-fader {
    color: rgba(97, 106, 120, 0.5) !important;
}

.text-fadest {
    color: rgba(97, 106, 120, 0.4) !important;
}

.text-transparent {
    color: transparent !important;
}

a.text-primary:hover, a.text-primary:focus {
    color: #ab8ce4 !important;
}

a.text-secondary:hover, a.text-secondary:focus {
    color: #e4e7ea !important;
}

a.text-info:hover, a.text-info:focus {
    color: #03a9f3 !important;
}

a.text-success:hover, a.text-success:focus {
    color: #00c292 !important;
}

a.text-warning:hover, a.text-warning:focus {
    color: #faa64b !important;
}

a.text-danger:hover, a.text-danger:focus {
    color: #fb9678 !important;
}

.hover-primary:hover, .hover-primary:focus {
    color: #ab8ce4;
}

.hover-secondary:hover, .hover-secondary:focus {
    color: #e4e7ea;
}

.hover-success:hover, .hover-success:focus {
    color: #00c292;
}

.hover-info:hover, .hover-info:focus {
    color: #03a9f3;
}

.hover-warning:hover, .hover-warning:focus {
    color: #faa64b;
}

.hover-danger:hover, .hover-danger:focus {
    color: #fb9678;
}

.hover-pink:hover, .hover-pink:focus {
    color: #f96197;
}

.hover-purple:hover, .hover-purple:focus {
    color: #926dde;
}

.hover-brown:hover, .hover-brown:focus {
    color: #8d6658;
}

.hover-cyan:hover, .hover-cyan:focus {
    color: #57c7d4;
}

.hover-yellow:hover, .hover-yellow:focus {
    color: #c1a200;
}

.hover-gray:hover, .hover-gray:focus {
    color: #868e96;
}

.hover-dark:hover, .hover-dark:focus {
    color: #465161;
}

.hover-facebook:hover, .hover-facebook:focus {
    color: #3b5998;
}

.hover-google:hover, .hover-google:focus {
    color: #dd4b39;
}

.hover-twitter:hover, .hover-twitter:focus {
    color: #00aced;
}

.hover-linkedin:hover, .hover-linkedin:focus {
    color: #007bb6;
}

.hover-pinterest:hover, .hover-pinterest:focus {
    color: #cb2027;
}

.hover-git:hover, .hover-git:focus {
    color: #666666;
}

.hover-tumblr:hover, .hover-tumblr:focus {
    color: #32506d;
}

.hover-vimeo:hover, .hover-vimeo:focus {
    color: #aad450;
}

.hover-youtube:hover, .hover-youtube:focus {
    color: #bb0000;
}

.hover-flickr:hover, .hover-flickr:focus {
    color: #ff0084;
}

.hover-reddit:hover, .hover-reddit:focus {
    color: #ff4500;
}

.hover-dribbble:hover, .hover-dribbble:focus {
    color: #ea4c89;
}

.hover-skype:hover, .hover-skype:focus {
    color: #00aff0;
}

.hover-instagram:hover, .hover-instagram:focus {
    color: #517fa4;
}

.hover-lastfm:hover, .hover-lastfm:focus {
    color: #c3000d;
}

.hover-behance:hover, .hover-behance:focus {
    color: #1769ff;
}

.hover-rss:hover, .hover-rss:focus {
    color: #f26522;
}

.hover-white:hover, .hover-white:focus {
    color: #fff;
}

.hover-muted:hover, .hover-muted:focus {
    color: #868e96;
}

.hover-light:hover, .hover-light:focus {
    color: #788394;
}

.hover-lighter:hover, .hover-lighter:focus {
    color: #a5b3c7;
}

.hover-fade:hover, .hover-fade:focus {
    color: rgba(97, 106, 120, 0.4) !important;
}

.hover-transparent:hover, .hover-transparent:focus {
    color: transparent !important;
}

.active.active-primary {
    background-color: #f0e8ff;
}

.active.active-secondary {
    background-color: #f7fafc;
}

.active.active-success {
    background-color: #e3fcf2;
}

.active.active-info {
    background-color: #e3f3fc;
}

.active.active-warning {
    background-color: #fcf0e3;
}

.active.active-danger {
    background-color: #fce3e3;
}

.active.active-pink {
    background-color: #fce3ec;
}

.active.active-purple {
    background-color: #ece3fc;
}

.active.active-brown {
    background-color: #eddcd5;
}

.active.active-cyan {
    background-color: #e3fafc;
}

.active.active-yellow {
    background-color: #c1a200;
}

.active.active-gray {
    background-color: #f2f2f2;
}

.active.active-dark {
    background-color: #c8c8c8;
}

.active.active-white {
    background-color: #fff;
}

.active.active-transparent {
    background-color: transparent;
}

/*--------- animeted gradient-----------*/

.bg-primary-gradient {
    background: linear-gradient(270deg, #ab8ce4, #f0e8ff);
    background-size: 200% 200%;
}

.bg-secondary-gradient {
    background: linear-gradient(270deg, #e4e7ea, #f7fafc);
    background-size: 200% 200%;
}

.bg-success-gradient {
    background: linear-gradient(270deg, #00c292, #e3fcf2);
    background-size: 200% 200%;
}

.bg-info-gradient {
    background: linear-gradient(270deg, #03a9f3, #e3f3fc);
    background-size: 200% 200%;
}

.bg-warning-gradient {
    background: linear-gradient(270deg, #fbae1c, #fcf0e3);
    background-size: 200% 200%;
}

.bg-danger-gradient {
    background: linear-gradient(270deg, #fb9678, #fce3e3);
    background-size: 200% 200%;
}


/*--------- animeted gradient-----------*/

.bg-primary-gradient-animet {
    background: linear-gradient(270deg, #ab8ce4, #f0e8ff);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
}

.bg-secondary-gradient-animet {
    background: linear-gradient(270deg, #e4e7ea, #f7fafc);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
}

.bg-success-gradient-animet {
    background: linear-gradient(270deg, #00c292, #e3fcf2);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
}

.bg-info-gradient-animet {
    background: linear-gradient(270deg, #03a9f3, #e3f3fc);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
}

.bg-warning-gradient-animet {
    background: linear-gradient(270deg, #fbae1c, #fcf0e3);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
}

.bg-danger-gradient-animet {
    background: linear-gradient(270deg, #fb9678, #fce3e3);
    background-size: 400% 400%;
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
}

@-webkit-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}



/*---------add-----------*/

.bg-gray-light {
    background-color: #f7f7f7;
}

.bg-black, .bg-inverse {
    background-color: #2A1010;
}

.alert-danger, .alert-error, .bg-red, .callout.callout-danger, .label-danger, .modal-danger .modal-body {
    background-color: #ef5350;
}

.alert-warning, .bg-warning, .callout.callout-warning, .label-warning, .modal-warning .modal-body {
    background-color: #fbae1c;
}

.alert-info, .callout.callout-info, .label-info, .modal-info .modal-body {
    background-color: #03a9f3;
}

.bg-aqua {
    background-color: #00FFFF;
}

.label-inverse {
    background-color: #2f3d4a;
}

.bg-blue {
    background-color: #398bf7;
}

.label-primary, .modal-primary .modal-body {
    background-color: #398bf7;
}

.bg-light-blue {
    background-color: #ADD8E6;
}

.alert-success, .callout.callout-success, .label-success, .modal-success .modal-body {
    background-color: #00c292;
}

.bg-green {
    background-color: #06D73E;
}

.bg-navy {
    background-color: #001f3f;
}

.bg-teal {
    background-color: #39cccc;
}

.bg-olive {
    background-color: #7dab2e;
}

.bg-lime {
    background-color: #01ff70;
}

.bg-orange {
    background-color: #f7941d;
}

.bg-fuchsia {
    background-color: #f012be;
}

.bg-maroon {
    background-color: #8C1919;
}

.bg-gray-active {
    color: #000;
    background-color: #b5bbc8;
}

.bg-black-active {
    background-color: #000;
}

.bg-red-active, .modal-danger .modal-footer, .modal-danger .modal-header {
    background-color: #e73f3c;
}

.bg-yellow-active, .modal-warning .modal-footer, .modal-warning .modal-header {
    background-color: #df9e1b;
}

.modal-info .modal-footer, .modal-info .modal-header {
    background-color: #2e7de5;
}

.bg-aqua-active {
    background-color: #03CCCC;
}

.bg-blue-active {
    background-color: #2f88d6;
}

.modal-primary .modal-footer, .modal-primary .modal-header {
    background-color: #2b95d4;
}

.bg-light-blue-active {
    background-color: #86B9C9;
}

.bg-green-active, .modal-success .modal-footer, .modal-success .modal-header {
    background-color: #0fc491;
}

.bg-navy-active {
    background-color: #001a35;
}

.bg-teal-active {
    background-color: #30bbbb;
}

.bg-olive-active {
    background-color: #61881f;
}

.bg-lime-active {
    background-color: #00e765;
}

.bg-orange-active {
    background-color: #df8214;
}

.bg-fuchsia-active {
    background-color: #db0ead;
}

.bg-purple-active {
    background-color: #664ce1;
}

.bg-maroon-active {
    background-color: #7e1616;
}

[class^=bg-].disabled {
    opacity: .65;
    filter: alpha(opacity=65);
}

.text-danger, .text-red {
    color: #ef5350;
}

.text-white {
    color: #fff;
}

.text-warning {
    color: #fbae1c;
}

.text-info {
    color: #398bf7;
}

.text-blue {
    color: #398bf7;
}

.text-light-blue {
    color: #398bf7;
}

.text-success {
    color: #00c292;
}

.text-aqua {
    color: #00FFFF;
}

.text-green {
    color: #06D73E;
}

.text-gray {
    color: #d2d6de;
}

.text-navy {
    color: #001f3f;
}

.text-teal {
    color: #39cccc;
}

.text-olive {
    color: #7dab2e;
}

.text-lime {
    color: #01ff70;
}

.text-orange {
    color: #f7941d;
}

.text-fuchsia {
    color: #f012be;
}

.text-purple {
    color: #926dde;
}

.text-maroon {
    color: #8C1919;
}

.text-black, .text-inverse {
    color: #000;
}

.link-muted {
    color: #7a869d;
}

    .link-muted:focus, .link-muted:hover {
        color: #606c84;
    }

.link-black {
    color: #67757c;
}

    .link-black:focus, .link-black:hover {
        color: #67757c;
    }

.hide {
    display: none;
}

.no-border {
    border: 0;
}

.no-radius {
    border-radius: 0;
}

.no-padding {
    padding: 0;
}

.no-margin {
    margin: 0;
}

.no-shadow {
    box-shadow: none;
}

.margin-top-0 {
    margin-top: 0;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-40 {
    margin-top: 40px;
}

.chart-legend, .contacts-list, .list-unstyled, .mailbox-attachments, .users-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-group-unbordered > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.flat {
    border-radius: 0 !important;
}

.text-sm {
    font-size: 12px;
}

.jqstooltip {
    padding: 5px !important;
    width: auto !important;
    height: auto !important;
}

.description-block .description-icon {
    font-size: 16px;
}

.no-pad-top {
    padding-top: 0;
}

.position-static {
    position: static !important;
}

.list-header {
    font-size: 15px;
    padding: 10px 4px;
    color: #67757c;
}

.list-seperator {
    height: 1px;
    background: #f4f4f4;
    margin: 15px 0 9px;
}

.list-link > a {
    padding: 4px;
    color: #67757c;
}

    .list-link > a:hover {
        color: #455a64;
    }

.font-light {
    font-weight: 300;
}

.user-block:after, .user-block:before {
    content: " ";
    display: table;
}

.user-block img {
    width: 40px;
    height: 40px;
    float: left;
}

.user-block .comment, .user-block .description, .user-block .username {
    display: block;
    margin-left: 50px;
}

.img-sm + .img-push, .user-block.user-block-sm .comment, .user-block.user-block-sm .description, .user-block.user-block-sm .username {
    margin-left: 40px;
}

.user-block .username {
    font-size: 16px;
    font-weight: 600;
}

.user-block .description {
    color: #67757c;
    font-size: 13px;
}

.user-block.user-block-sm .username {
    font-size: 14px;
}

.box-comments .box-comment img, .img-lg, .img-md, .img-sm, .user-block.user-block-sm img {
    float: left;
}

.box-comments .box-comment img, .img-sm, .user-block.user-block-sm img {
    width: 30px !important;
    height: 30px !important;
}

.img-md {
    width: 60px;
    height: 60px;
}

    .img-md + .img-push {
        margin-left: 70px;
    }

.attachment-block .attachment-pushed, .img-lg + .img-push {
    margin-left: 110px;
}

.img-lg {
    width: 100px;
    height: 100px;
}

.img-bordered {
    border: 3px solid #d2d6de;
    padding: 3px;
}

.img-bordered-sm {
    border: 2px solid #d2d6de;
    padding: 2px;
}

.attachment-block {
    border: 1px solid #f4f4f4;
    padding: 5px;
    margin-bottom: 10px;
    background: #f7f7f7;
}

    .attachment-block .attachment-img {
        max-width: 100px;
        max-height: 100px;
        height: auto;
        float: left;
    }

    .attachment-block .attachment-heading {
        margin: 0;
    }

    .attachment-block .attachment-text {
        color: #555;
    }

.connectedSortable {
    min-height: 100px;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.sort-highlight {
    background: #f4f4f4;
    border: 1px dashed #ddd;
    margin-bottom: 10px;
}

.full-opacity-hover {
    opacity: .65;
    filter: alpha(opacity=65);
}

    .full-opacity-hover:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

.chart {
    position: relative;
    overflow: hidden;
    width: 100%
}

    .chart canvas, .chart svg {
        width: 100% !important;
    }

@media print {
    .content-header, .left-side, .main-header, .main-sidebar, .no-print {
        display: none !important;
    }

    .content-wrapper, .main-footer, .right-side {
        margin-left: 0 !important;
        min-height: 0 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .fixed .content-wrapper, .fixed .right-side {
        padding-top: 0 !important;
    }

    .invoice {
        width: 100%;
        border: 0;
        margin: 0;
        padding: 0;
    }

    .invoice-col {
        float: left;
        width: 33.3333333%
    }

    .table-responsive {
        overflow: auto;
    }

        .table-responsive > .table tr td, .table-responsive > .table tr th {
            white-space: normal;
        }
}

@media (min-width: 768px) {
    .material-icon-list-demo .icons div {
        width: 33%;
        padding: 5px;
        display: inline-block;
        line-height: 40px;
    }

    .material-icon-list-demo .mdi {
        font-size: 21px;
    }
}

.material-icon-list-demo .icons div code {
    margin: 0px 5px;
}

.icon-list-demo .col-md-4, .icon-list-demo .col-3 {
    border-radius: 4px;
}

.icon-list-demo div {
    cursor: pointer;
    line-height: 60px;
    white-space: nowrap;
    color: #67757c;
}

.icon-list-demo .col-md-4:hover, .icon-list-demo .col-3:hover {
    background-color: #ebf3f5;
}

.icon-list-demo div:hover {
    color: #263238;
}

.icon-list-demo i {
    -webkit-transition: all 0.2s;
    -webkit-transition: font-size .2s;
    display: inline-block;
    font-size: 18px;
    margin: 0 15px 0 10px;
    text-align: left;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    -o-transition: font-size .2s;
    transition: font-size .2s;
    vertical-align: middle;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.divider-dash {
    opacity: .7;
    margin: 0 4px;
    vertical-align: middle;
    color: #929daf;
}

    .divider-dash::before {
        content: '\2014 \00A0';
    }

.divider-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    margin: 0 4px;
    vertical-align: middle;
    opacity: .5;
    background-color: #929daf;
}

.divider-line {
    display: -webkit-inline-box;
    display: inline-flex;
    height: 20px;
    width: 1px;
    margin: 0 4px;
    background-color: rgba(97, 106, 120, 0.07);
}

.divider {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    flex: 0 1 0%;
    color: #929daf;
    font-size: 11px;
    letter-spacing: .5px;
    margin: 2rem auto;
    width: 100%;
}

    .divider::before, .divider::after {
        content: '';
        -webkit-box-flex: 1;
        flex-grow: 1;
        border-top: 1px solid #ebebeb;
    }

    .divider::before {
        margin-right: 16px;
    }

    .divider::after {
        margin-left: 16px;
    }

    .divider a {
        color: #929daf;
    }

.divider-vertical {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 2rem;
}

    .divider-vertical::before, .divider-vertical::after {
        border-top: none;
        border-right: 1px solid #ebebeb;
        margin: 0;
    }

    .divider-vertical::before {
        margin-bottom: 16px;
    }

    .divider-vertical::after {
        margin-top: 16px;
    }

.hr-sm,
.divider-sm {
    margin: 1rem auto;
}

.hr-lg,
.divider-lg {
    margin: 3rem auto;
}

.divider-vertical.divider-sm {
    padding: 0 1rem;
}

.divider-vertical.divider-lg {
    padding: 0 3rem;
}

.box-img-top {
    width: 100%;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.box-group .box {
    border: 1px solid rgba(0,0,0,0.05);
}

.box-deck {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media (min-width: 576px) {
    .box-group .box:first-child .box-img-top {
        border-top-right-radius: 0;
    }

    .box-group .box:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .box-group .box {
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    }

    .box-group {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }

    .box-deck {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

        .box-deck .box {
            display: -ms-flexbox;
            display: flex;
            -ms-flex: 1 0 0%;
            flex: 1 0 0%;
            -ms-flex-direction: column;
            flex-direction: column;
            margin-right: 15px;
            margin-bottom: 0;
            margin-left: 15px;
        }
}

.box-deck .box {
    margin-bottom: 20px;
}

.box-columns .box {
    margin-bottom: 20px;
}

@media (min-width: 576px) {
    .box-columns {
        -webkit-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 1.25rem;
        column-gap: 1.25rem;
    }

        .box-columns .box {
            display: inline-block;
            width: 100%;
        }
}

.doc-dropdown .dropdown, .doc-dropdown .dropup {
    display: inline-block;
}

.doc-dropdown .dropdown-menu, .doc-dropdown .dropdown-grid {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

.show > .dropdown-grid {
    display: -webkit-box;
    display: flex;
}

.dropdown-grid {
    display: none;
    flex-wrap: wrap;
    padding: 8px;
}

.dropdown-menu, .dropdown-grid {
    color: #FFF;
    border-radius: 2px;
    font-size: 13px;
    border-color: inherit;
    padding: 0;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.06);
    z-index: 992;
}

.dropdown-grid {
    position: absolute;
    top: 100%;
    float: left;
    min-width: 300px;
    margin: 2px 0 0;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

    .dropdown-grid .dropdown-item {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: center;
        justify-content: center;
        flex-basis: 33.333333%;
        overflow: hidden;
        text-align: center;
        padding: 12px;
        margin: 0;
        min-height: 90px;
        border: 1px solid transparent;
    }

.dropdown-item .icon {
    vertical-align: baseline;
    margin-right: 6px;
    font-size: 0.875rem;
}

.dropdown-grid .icon {
    font-size: 24px;
}

.dropdown-grid .dropdown-item:hover {
    border-color: #f1f2f3;
    color: rgba(0, 0, 0, 0.2);
}

.dropdown-grid .dropdown-item .icon:first-child {
    width: auto;
    margin-right: 0em;
    text-align: center;
}

.dropdown-grid .dropdown-item img.icon:first-child {
    width: 60%;
    margin: 0 auto;
}

.dropdown-grid.cols-2 .dropdown-item {
    flex-basis: 50%;
}

.dropdown-grid.cols-2 {
    min-width: 200px;
}

.dropdown-grid.cols-4 .dropdown-item {
    flex-basis: 25%;
}

.dropdown-grid.cols-4 {
    min-width: 400px;
}

.dropdown-grid .dropdown-item.disabled:hover {
    background-color: transparent;
}

.dropdown-grid .dropdown-item.disabled {
    opacity: .5;
    cursor: not-allowed;
}

.dropdown-grid .dropdown-item.active, .dropdown-grid .dropdown-item:active {
    color: #616a78;
    background-color: #f5f6f7;
}

.bring-front {
    z-index: 1;
}

.contact-page-aside ul.list-style-none {
    margin: 0px;
    padding: 0px;
}

ul.list-style-none li {
    list-style: none;
}

.list-style-none li.box-label a {
    font-weight: 500;
}

ul.list-style-none li a {
    color: #67757c;
    padding: 10px 0px;
    display: block;
    text-decoration: none;
}

.list-style-none li.divider {
    margin: 10px 0;
    height: 1px;
    background: rgba(120, 130, 140, 0.13);
}

ul.list-style-none li a:hover {
    color: #1976d2;
}

.list-style-none li a span {
    float: right;
}

div#employeelist_filter {
    margin-top: -60px;
    position: relative;
    z-index: 99;
}

.direct-chat-messages.chat-app {
    padding: 0.8rem 1.25rem;
}

.chat-app .direct-chat-img {
    width: 44px;
    height: 44px;
    line-height: 44px;
}

.chat-app .direct-chat-text {
    margin: 5px 0 0 60px;
}

.chat-app .right .direct-chat-text {
    /*    margin: 5px 60px 0 0px;*/
    margin: 0px 50px 0px 0px;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
    border: 1px solid var(--ndpp-line, #e6e8ec);
    border-radius: 14px;
    /* box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);*/
}

    .grid-stack > .grid-stack-item > .grid-stack-item-content:hover {
        border-color: #d4d7dd;
        /* box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08);*/
    }

    .grid-stack > .grid-stack-item > .grid-stack-item-content > .box,
    .grid-stack > .grid-stack-item > .grid-stack-item-content > .ndpp-widget {
        position: relative;
        height: 100%;
        margin-bottom: 0;
        background: #fff;
        border-radius: 14px;
        box-shadow: none;
        overflow: hidden;
    }

        /* เปิดเมนู kebab widget → ให้ dropdown ล้นออกนอกกรอบได้ (widget เล็ก ๆ เมนูจะโดน overflow:hidden ตัดจนกด Remove ไม่ได้) */
        .grid-stack > .grid-stack-item > .grid-stack-item-content > .ndpp-widget:has(.ndpp-widget__menu.show) {
            overflow: visible;
        }

/* R2: dropdown ที่ล้นออกมา (overflow:visible ด้านบน) ต้องอยู่เหนือ widget เพื่อนบ้าน + resize handle (z-index:2) + เนื้อหา
       ไม่งั้นเมนูจะโดนทับดู UI แปลก — ยก grid-stack-item ทั้งตัว + ยก dropdown เฉพาะตอนเมนูเปิด (ไม่กระทบสถานะปกติ) */
.grid-stack > .grid-stack-item:has(.ndpp-widget__menu.show) {
    z-index: 100;
}

.ndpp-widget__menu.show .ndpp-widget__menu-list {
    z-index: 1050;
}

/* ตอนเมนูเปิด ซ่อน resize handle (โดยเฉพาะ -s แถบล่างเต็มความกว้าง + -se ไอคอนมุม) ที่บังเมนูซึ่งล้นลงมา
       ทำให้ menu item (เช่น Full Screen) โดนแถบ handle ทับดู UI แปลก — ไม่ได้ resize ระหว่างเปิดเมนูอยู่แล้ว
       (mirror จาก .ui-draggable-dragging > .ui-resizable-handle { display:none } ตอนลาก) */
.grid-stack > .grid-stack-item:has(.ndpp-widget__menu.show) > .ui-resizable-handle {
    display: none !important;
}

/* .ndpp-widget__foot เป็นแถบ footer (position:absolute; bottom:0; z-index:2; bg ขาวทึบ; มุมล่างโค้ง) ว่างเปล่า
       เมื่อ widget เล็ก dropdown ที่ล้นลงมาจะโดนแถบนี้ทับ — ซ่อนตอนเมนูเปิด (เมนู overlay พื้นที่นั้นอยู่แล้ว) */
.grid-stack > .grid-stack-item:has(.ndpp-widget__menu.show) .ndpp-widget__foot {
    display: none;
}

/* fullscreen ต้องชนะ rule ด้านบนที่ตั้ง position: relative (specificity สูงกว่า .box-fullscreen)
       ไม่งั้น widget ได้ class box-fullscreen แต่ยังเป็น relative → ไม่ขยายเต็มจอ */
.grid-stack > .grid-stack-item > .grid-stack-item-content > .box.box-fullscreen,
.grid-stack > .grid-stack-item > .grid-stack-item-content > .ndpp-widget.box-fullscreen {
    position: fixed;
    height: auto;
    border-radius: 0;
    overflow: auto;
}

.grid-stack.ndpp-grid > .grid-stack-item > .grid-stack-item-content {
    overflow: visible;
}

.grid-stack.ndpp-grid .highcharts-container {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 27px !important;
}

.grid-stack.ndpp-grid .ndpp-widget__head ~ highchart .highcharts-container {
    margin-top: 52px !important;
}

.grid-stack.ndpp-grid .ndpp-widget__head ~ highchart .highcharts-title,
.grid-stack.ndpp-grid .ndpp-widget__head ~ highchart .highcharts-subtitle {
    display: none !important;
}

/* statistic box (nsdx-info-box) ในการ์ด widget: ดันลงใต้ header / เหนือ footer แล้วจัดกึ่งกลางแนวตั้ง-แนวนอน
   (เดิมเนื้อหาเกาะบนสุด เลขโดน header บัง และไม่อยู่กลางกล่อง) */
.grid-stack.ndpp-grid .ndpp-widget__head ~ nsdx-info-box {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.box-fullscreen .ndpp-widget__head ~ nsdx-info-box {
    bottom: 0;
}

.grid-stack.ndpp-grid .ndpp-widget__head ~ nsdx-info-box > .col-xl-12 {
    width: 100%;
    padding: 0;
}

.grid-stack.ndpp-grid .ndpp-widget__head ~ nsdx-info-box .flexbox {
    display: none;
}

.grid-stack.ndpp-grid > .grid-stack-item > .ui-resizable-se,
.grid-stack.ndpp-grid > .grid-stack-item.ui-resizable-autohide > .ui-resizable-se {
    display: block !important;
    width: 20px;
    height: 20px;
    right: 13px;
    bottom: 7px;
    z-index: 2 !important;
    transform: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2C7CE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 8 8 20'/%3E%3Cpath d='M20 13 13 20'/%3E%3Cpath d='M20 18 18 20'/%3E%3C/svg%3E");
    opacity: 1;
    transition: opacity .15s ease;
}

.grid-stack.ndpp-grid > .grid-stack-item:hover > .ui-resizable-se {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A929E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 8 8 20'/%3E%3Cpath d='M20 13 13 20'/%3E%3Cpath d='M20 18 18 20'/%3E%3C/svg%3E");
}

.grid-stack.ndpp-grid > .grid-stack-item > .ui-resizable-sw {
    background-image: none;
}

.ndpp-widget__foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 30px;
    background: #fff;
    border-top: 1px solid #eef0f3;
    border-radius: 0 0 14px 14px;
}

.box-fullscreen .ndpp-widget__foot {
    display: none;
}

.ndpp-widget__sk {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    background: #fff;
    border-radius: 0 0 14px 14px;
}

.box-fullscreen .ndpp-widget__sk {
    bottom: 0;
}

.ndpp-widget.is-loaded .ndpp-widget__sk {
    display: none;
}

.ndpp-widget__sk-chart {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 100%;
}

.ndpp-widget__skbar {
    height: 12px;
    border-radius: 6px;
}

.ndpp-widget__sk-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 100%;
}

    .ndpp-widget__sk-stat .ndpp-widget__sknum {
        height: 46px;
        width: 52%;
        max-width: 150px;
        border-radius: 10px;
    }

    .ndpp-widget__sk-stat .ndpp-widget__sklabel {
        height: 12px;
        width: 38%;
        max-width: 110px;
        border-radius: 6px;
    }

.ndpp-widget__sk-donut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
}

    .ndpp-widget__sk-donut .ndpp-widget__skring {
        flex: 0 0 auto;
        width: 132px;
        height: 132px;
        border-radius: 50%;
        -webkit-mask: radial-gradient(circle, transparent 49%, #000 51%);
        mask: radial-gradient(circle, transparent 49%, #000 51%);
    }

.ndpp-widget__sk-legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    width: 86%;
    max-width: 240px;
}

    .ndpp-widget__sk-legend .ndpp-sk {
        flex: 0 0 auto;
        width: 46px;
        height: 10px;
        border-radius: 5px;
    }

/* แบบ column: แท่งแนวตั้ง */
.ndpp-widget__sk-vbars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding-top: 10px;
}

    .ndpp-widget__sk-vbars .ndpp-sk {
        flex: 1 1 0;
        border-radius: 6px 6px 0 0;
    }

/* ===== Add/Edit/New-Dashboard modal — body/form styling (header+footer ใช้ .header2025-home-* ตาม "Set home page" modal) ===== */
.ndpp-wmodal .modal-body {
    padding: 1.25rem 1.4rem;
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #d6dae0 transparent;
}

    /* scrollbar บาง โมเดิร์น: track โปร่ง, thumb เทาอ่อนขอบมน, เข้มขึ้นตอน hover */
    .ndpp-wmodal .modal-body::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .ndpp-wmodal .modal-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .ndpp-wmodal .modal-body::-webkit-scrollbar-thumb {
        background: #d6dae0;
        border-radius: 6px;
    }

    .ndpp-wmodal .modal-body:hover::-webkit-scrollbar-thumb {
        background: #c2c8d0;
    }

    .ndpp-wmodal .modal-body::-webkit-scrollbar-thumb:hover {
        background: #aeb4bd;
    }

.ndpp-wmodal,
.ndpp-wmodal * {
    scrollbar-width: thin;
    scrollbar-color: #d6dae0 transparent;
}

    .ndpp-wmodal::-webkit-scrollbar, .ndpp-wmodal .ndpp-wmodal__form
    .ndpp-wmodal *::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }

    .ndpp-wmodal::-webkit-scrollbar-track,
    .ndpp-wmodal *::-webkit-scrollbar-track {
        background: transparent;
    }

    .ndpp-wmodal::-webkit-scrollbar-thumb,
    .ndpp-wmodal *::-webkit-scrollbar-thumb {
        background: #d6dae0;
        border-radius: 6px;
    }

        .ndpp-wmodal::-webkit-scrollbar-thumb:hover,
        .ndpp-wmodal *::-webkit-scrollbar-thumb:hover {
            background: #aeb4bd;
        }

    .ndpp-wmodal .control-label {
        font-weight: 600;
        font-size: .9rem;
        color: var(--ndpp-ink) !important;
        margin-bottom: 9px;
    }

    .ndpp-wmodal .form-group {
        margin-bottom: 1rem;
    }

    .ndpp-wmodal .form-control {
        border-radius: 9px;
        border: 1px solid #e1e5ea;
        transition: border-color .15s, box-shadow .15s;
    }

        .ndpp-wmodal .form-control:focus {
            border-color: var(--danger-btn-button);
            box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .15);
        }

    .ndpp-wmodal .has-error .form-control {
        border-color: #e7515a;
    }

.ndpp-wmodal__split {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
}

.ndpp-wmodal__left {
    flex: 1 1 56%;
    min-width: 0;
}

.ndpp-wmodal__toptabs {
    display: inline-flex;
    gap: .25rem;
    padding: .28rem;
    margin-bottom: 1.1rem;
    background: #eef1f5;
    border-radius: 12px;
    max-width: max-content;
}

.ndpp-wmodal__toptab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: none;
    background: transparent;
    border-radius: 9px;
    padding: .5rem 1.15rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ndpp-muted, #6b7280);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    outline: none;
}

    .ndpp-wmodal__toptab > i {
        margin: 0;
    }

    .ndpp-wmodal__toptab:hover {
        color: var(--ndpp-ink);
    }

    .ndpp-wmodal__toptab.is-active {
        background: #fff;
        color: var(--ndpp-accent, var(--danger-btn-button));
        box-shadow: 0 1px 3px rgba(16,24,40,.12);
    }

    .ndpp-wmodal__toptab:focus,
    .ndpp-wmodal__toptab:active {
        outline: none;
        box-shadow: none;
    }

    .ndpp-wmodal__toptab.is-active:focus {
        box-shadow: 0 1px 3px rgba(16,24,40,.12);
    }

.ndpp-wmodal__gallery {
    flex: 1 1 56%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.ndpp-tpl__search {
    position: relative;
    margin: 0 0 .7rem;
}

.ndpp-tpl__search-ic {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .82rem;
    color: #9aa2ad;
    pointer-events: none;
}

.ndpp-tpl__search-input {
    width: 100%;
    height: 40px;
    padding: 0 2.2rem 0 2.35rem;
    border: 1px solid #e5e8ee;
    border-radius: 11px;
    background: #fff;
    font-size: .86rem;
    color: var(--ndpp-ink, #1f2937);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ndpp-tpl__search-input::placeholder {
        color: #aab0b9;
    }

    .ndpp-tpl__search-input:focus {
        border-color: var(--ndpp-accent, var(--danger-btn-button));
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .12);
    }

.ndpp-tpl__search-clear {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #9aa2ad;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .ndpp-tpl__search-clear:hover {
        background: #f1f3f5;
        color: var(--ndpp-ink, #1f2937);
    }

[dir="rtl"] .ndpp-tpl__search-ic {
    left: auto;
    right: .85rem;
}

[dir="rtl"] .ndpp-tpl__search-input {
    padding: 0 2.35rem 0 2.2rem;
}

[dir="rtl"] .ndpp-tpl__search-clear {
    right: auto;
    left: .5rem;
}

.ndpp-tpl__head {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.6rem;
    padding: 0 0 .85rem;
    background: none;
    border: 0;
    border-bottom: 1px solid #edf0f4;
    border-radius: 0;
}

.ndpp-tpl__modules {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    flex: 1 1 auto;
    min-width: 0;
}

.ndpp-tpl__field {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex: 1 1 250px;
}

.ndpp-tpl__lbl {
    flex: 0 0 auto;
    margin: 0;
    font-weight: 600;
    font-size: .8rem;
    color: var(--ndpp-ink);
    white-space: nowrap;
}

.ndpp-tpl__field select2-custom {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
}

    .ndpp-tpl__field select2-custom .ndpp-dd,
    .ndpp-tpl__field select2-custom .ndpp-dd__toggle {
        width: 100%;
        min-width: 0;
    }

.ndpp-tpl__field .ndpp-dd__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.ndpp-tpl__field--mod,
.ndpp-tpl__field--type {
    flex: 1 1 0;
    min-width: 0;
}

.ndpp-tpl__typesel {
    flex: 0 0 auto;
    width: auto;
    min-width: 118px;
    height: 34px;
    border: 1px solid #e2e7ee;
    border-radius: 9px;
    padding: 0 .6rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ndpp-ink);
    background: #fff;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .ndpp-tpl__typesel:focus {
        border-color: var(--ndpp-accent, var(--danger-btn-button));
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .15);
    }

.ndpp-tpl__mod {
    border: 1px solid #e2e7ee;
    background: #fff;
    border-radius: 999px;
    padding: .35rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ndpp-ink);
    cursor: pointer;
    transition: all .15s;
    outline: none;
}

    .ndpp-tpl__mod:hover {
        border-color: var(--ndpp-accent, var(--danger-btn-button));
    }

    .ndpp-tpl__mod.is-active {
        background: var(--ndpp-accent, var(--danger-btn-button));
        border-color: var(--ndpp-accent, var(--danger-btn-button));
        color: #fff;
    }

.ndpp-tpl__chips {
    display: flex;
    gap: .35rem;
}

.ndpp-tpl__chip {
    border: none;
    background: #f1f3f5;
    border-radius: 8px;
    padding: .3rem .7rem;
    font-size: .76rem;
    font-weight: 600;
    color: var(--ndpp-muted, #6b7280);
    cursor: pointer;
    transition: all .15s;
    outline: none;
}

    .ndpp-tpl__chip > i {
        margin-right: .3rem;
    }

    .ndpp-tpl__chip.is-active {
        background: rgba(var(--danger-btn-button-rgb), .12);
        color: var(--ndpp-accent, var(--danger-btn-button));
    }

.ndpp-tpl__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .7rem;
    max-height: 56vh;
    overflow-y: auto;
    padding-right: .35rem;
    scrollbar-width: thin;
    scrollbar-color: #d6dae0 transparent;
}

    .ndpp-tpl__grid::-webkit-scrollbar {
        width: 6px;
    }

    .ndpp-tpl__grid::-webkit-scrollbar-track {
        background: transparent;
    }

    .ndpp-tpl__grid::-webkit-scrollbar-thumb {
        background: #d6dae0;
        border-radius: 6px;
    }

        .ndpp-tpl__grid::-webkit-scrollbar-thumb:hover {
            background: #aeb4bd;
        }

/* Add/Edit widget: ไม่ให้ modal-body เลื่อนทั้งก้อน (scrollbar ใหญ่) — ยุบความสูงข้างในให้พอดีจอ
   แล้วให้เลื่อนเฉพาะ .ndpp-tpl__grid (แท็บ Template) หรือฟอร์ม (Custom/Edit) เมื่อเนื้อหาเกินจริง ๆ */
.ndpp-wmodal .ndpp-wmodal__body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .ndpp-wmodal .ndpp-wmodal__body .ndpp-wmodal__split {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    .ndpp-wmodal .ndpp-wmodal__body .ndpp-wmodal__left {
        display: flex;
        flex-direction: column;
        min-height: 0;
        align-self: stretch;
    }

.ndpp-wmodal .ndpp-wmodal__gallery {
    min-height: 0;
}

.ndpp-wmodal .ndpp-tpl__grid {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
}

.ndpp-wmodal .ndpp-wmodal__form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.ndpp-tpl__card {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-align: left;
    border: 1px solid #e2e7ee;
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
    transition: border-color .15s, box-shadow .15s, transform .1s;
    outline: none;
}

    .ndpp-tpl__card:hover {
        border-color: #cfd6e0;
        box-shadow: 0 3px 8px rgba(16,24,40,.09);
        transform: translateY(-1px);
    }

    .ndpp-tpl__card:focus,
    .ndpp-tpl__card:focus-visible,
    .ndpp-tpl__card:active {
        outline: none !important;
        box-shadow: none;
    }

    .ndpp-tpl__card.is-active,
    .ndpp-tpl__card.is-active:focus {
        border-color: var(--ndpp-accent, var(--danger-btn-button));
        box-shadow: 0 0 0 2px rgba(var(--danger-btn-button-rgb), .18);
    }

.ndpp-tpl__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--danger-btn-button-rgb), .1);
    color: var(--ndpp-accent, var(--danger-btn-button));
    font-size: 1rem;
}

    .ndpp-tpl__icon .ndpp-tpl__icon-pie,
    .ndpp-tpl__icon .ndpp-tpl__icon-col,
    .ndpp-tpl__icon .ndpp-tpl__icon-line,
    .ndpp-tpl__icon .ndpp-tpl__icon-bar,
    .ndpp-tpl__icon .ndpp-tpl__icon-stat {
        width: 22px;
        height: 22px;
        display: block;
    }

    .ndpp-tpl__icon:has(.ndpp-tpl__icon-pie),
    .ndpp-tpl__icon:has(.ndpp-tpl__icon-col),
    .ndpp-tpl__icon:has(.ndpp-tpl__icon-line),
    .ndpp-tpl__icon:has(.ndpp-tpl__icon-bar),
    .ndpp-tpl__icon:has(.ndpp-tpl__icon-stat) {
        background: #f4f6f9;
        box-shadow: inset 0 0 0 1px #e6eaef;
    }

.ndpp-tpl__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ndpp-tpl__title {
    font-weight: 600;
    font-size: .84rem;
    color: var(--ndpp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndpp-tpl__sub {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ndpp-muted, #98a0ab);
}

.ndpp-tpl__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ndpp-muted, #98a0ab);
    font-size: .85rem;
    padding: 2rem 1rem;
}

    .ndpp-tpl__empty > i {
        display: block;
        font-size: 1.8rem;
        margin-bottom: .5rem;
        opacity: .5;
    }

.ndpp-wmodal__form,
.ndpp-wmodal__gallery {
    flex: 1 1 56%;
    min-width: 0;
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 14px;
    padding: 1.15rem 1.25rem 1.25rem;
}

.ndpp-wmodal__gallery {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.ndpp-wmodal__preview {
    flex: 1 1 44%;
    min-width: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    background: #f5f7fa;
    border: 1px solid #e6eaef;
    border-radius: 14px;
    padding: .9rem 1rem 1rem;
}

#nsdx-admin-dashboard-setup-add-modal .modal-dialog,
#nsdx-admin-dashboard-setup-edit-modal .modal-dialog {
    width: 1180px;
    max-width: 90vw;
}

.ndpp-wmodal__pv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

    .ndpp-wmodal__pv-head > span {
        font-weight: 600;
        font-size: .82rem;
        color: var(--ndpp-muted, #6b7280);
        text-transform: uppercase;
        letter-spacing: .03em;
    }

.ndpp-wmodal__pv-refresh {
    border: 1px solid #e1e5ea;
    background: #fff;
    color: var(--ndpp-accent, var(--danger-btn-button));
    border-radius: 8px;
    padding: .28rem .6rem;
    font-size: .78rem;
    line-height: 1;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}

    .ndpp-wmodal__pv-refresh:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
        transform: translateY(-1px);
    }

    /* กดแล้วอย่าให้มีขอบดำ (default focus outline ของ browser) */
    .ndpp-wmodal__pv-refresh:focus,
    .ndpp-wmodal__pv-refresh:active {
        outline: none;
        border-color: color-mix(in srgb, var(--danger-btn-button) 45%, #e1e5ea);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-btn-button) 15%, transparent);
    }

    .ndpp-wmodal__pv-refresh > i {
        margin-right: .3rem;
    }

.ndpp-wmodal .modal-body.ndpp-wmodal__body {
    max-height: calc(88vh - 135px);
    min-height: 50vh;
}

.ndpp-wmodal__pv-body {
    position: relative;
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    min-height: 57.5vh;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    max-height: 57.5vh;
}

    .ndpp-wmodal__pv-body highchart {
        display: block;
        width: 100%;
        min-height: 42vh;
    }

.ndpp-wmodal__pv-hint {
    text-align: center;
    color: var(--ndpp-muted, #9aa1ab);
    font-size: .85rem;
    padding: 2rem 1rem;
}

    .ndpp-wmodal__pv-hint > i {
        display: block;
        font-size: 2rem;
        margin-bottom: .6rem;
        opacity: .5;
    }

.ndpp-wmodal__info {
    color: #b3b9c2;
    font-size: .8rem;
    margin-left: .3rem;
    cursor: help;
}

    .ndpp-wmodal__info:hover {
        color: var(--ndpp-accent, var(--danger-btn-button));
    }

@media (max-width: 991px) {
    .ndpp-wmodal__split {
        flex-direction: column;
    }

    .ndpp-wmodal__preview {
        position: static;
        width: 100%;
    }
}

/* หัวข้อกลุ่มฟิลด์ */
.ndpp-wmodal__section {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    padding-bottom: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ndpp-muted);
    border-bottom: 1px solid #eef0f3;
}

    .ndpp-wmodal__section:not(:first-child) {
        margin-top: 1.15rem;
    }

.ndpp-wmodal__adv-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .35rem 0 .15rem;
    padding: .5rem .85rem;
    background: #f6f7f9;
    border: 1px solid #e8eaee;
    border-radius: 8px;
    color: #475467;
    font-size: .82rem;
    font-weight: 600;
    transition: background .15s;
}

    .ndpp-wmodal__adv-toggle:hover {
        background: #eef0f3;
    }

    .ndpp-wmodal__adv-toggle > i {
        font-size: .72rem;
    }

.ndpp-wmodal__adv {
    margin-top: .9rem;
}

.ndpp-adv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    /*margin-top: .9rem;*/
}

    .ndpp-adv-grid > [class*="col-"] {
        flex: 1 1 235px;
        max-width: none;
        padding: 0;
    }

        .ndpp-adv-grid > [class*="col-"] > .form-group {
            height: 100%;
            margin: 0;
            border: 1px solid #e2e7ee;
            border-radius: 12px;
            background: #fff;
            padding: .8rem .9rem;
            display: flex;
            flex-direction: column;
            gap: .55rem;
            box-shadow: 0 1px 2px rgba(16,24,40,.05);
            transition: border-color .15s, box-shadow .15s;
        }

            .ndpp-adv-grid > [class*="col-"] > .form-group:hover {
                border-color: #cfd6e0;
                box-shadow: 0 3px 8px rgba(16,24,40,.08);
            }

    .ndpp-adv-grid .form-group.has-error {
        border-color: #e7515a;
        background: #fef7f7;
    }

    .ndpp-adv-grid .form-group > .ndpp-check,
    .ndpp-adv-grid .form-group > .control-label {
        margin: 0;
        min-height: 26px;
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: .9rem;
        color: var(--ndpp-ink);
    }

    .ndpp-adv-grid .form-group > br {
        display: none;
    }

.ndpp-adv-card__desc {
    margin: -.2rem 0 0;
    font-size: .72rem;
    line-height: 1.35;
    font-weight: 400;
    color: var(--ndpp-muted, #98a0ab);
}

.ndpp-adv-grid .form-group > .form-control {
    width: 100%;
}

.ndpp-adv-grid .form-control:disabled,
.ndpp-adv-grid .form-control[disabled] {
    background: #f1f3f5;
    color: #a6acb5;
    border-color: #e6e9ee;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 1;
}

    .ndpp-adv-grid .form-control:disabled::placeholder,
    .ndpp-adv-grid .form-control[disabled]::placeholder {
        color: #c2c7ce;
    }

.ndpp-adv-grid .form-group > .btn {
    width: 100%;
    border-radius: 9px;
    margin-top: auto;
}

.ndpp-check {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: .82rem;
    color: var(--ndpp-ink);
    position: relative;
}

    .ndpp-check > input {
        /* defect #3999 / full-page scroll-jump: ซ่อน input แบบ absolute ใต้ label (position:relative)
           — input จะอยู่ตรง label ที่คลิก (เห็นอยู่แล้วเสมอ) พอได้ focus เบราว์เซอร์จึงไม่ scroll ไปหา
           ห้ามใช้ position:fixed: ancestor ที่มี transform (.content-wrapper ตอน sidebar slide) ทำให้ fixed
           ยึด content-wrapper แทน viewport → top:0 หลุดจอตอน scroll ลง → ติ๊กแล้วหน้าเด้งขึ้นบน (หน้า full-page)
           ส่วน modal ไม่อยู่ใต้ content-wrapper เลยไม่เคยโชว์บั๊กนี้; absolute+label relative เวิร์คทั้งสองเคส */
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 0;
        height: 0;
    }

.ndpp-check__box {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid #d0d6de;
    border-radius: 7px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s cubic-bezier(.4,0,.2,1), border-color .2s, box-shadow .2s, transform .1s;
}

    .ndpp-check__box > svg {
        width: 13px;
        height: 13px;
        fill: none;
        stroke: #fff;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 18;
        stroke-dashoffset: 18;
        transition: stroke-dashoffset .22s ease .04s;
    }

.ndpp-check > input:checked + .ndpp-check__box {
    background: var(--danger-btn-button, var(--danger-btn-button));
    border-color: var(--danger-btn-button, var(--danger-btn-button));
    box-shadow: 0 2px 6px rgba(var(--danger-btn-button-rgb), .3);
}

    .ndpp-check > input:checked + .ndpp-check__box > svg {
        stroke-dashoffset: 0;
    }

.ndpp-check:hover .ndpp-check__box {
    border-color: var(--danger-btn-button, var(--danger-btn-button));
}

.ndpp-check:active .ndpp-check__box {
    transform: scale(.9);
}

.ndpp-check > input:focus-visible + .ndpp-check__box {
    box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .25);
}

.ndpp-check > input:disabled + .ndpp-check__box {
    background: #f1f3f5;
    border-color: #e1e5ea;
    box-shadow: none;
}

.ndpp-check__text {
    line-height: 1.2;
}

.ndpp-wmodal__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    list-style: none;
    margin: .15rem 0 1.15rem;
    padding: 0;
    border-bottom: 1px solid #eef0f3;
}

    .ndpp-wmodal__tabs > li > button {
        border: none;
        background: transparent;
        margin-bottom: -1px;
        padding: .6rem .95rem;
        font-size: .85rem;
        font-weight: 600;
        color: var(--ndpp-muted);
        border-bottom: 2px solid transparent;
        transition: color .15s, border-color .15s;
        outline: none;
    }

        .ndpp-wmodal__tabs > li > button:focus,
        .ndpp-wmodal__tabs > li > button:active,
        .ndpp-wmodal__tabs > li > button:focus-visible {
            outline: none;
            box-shadow: none;
        }

        .ndpp-wmodal__tabs > li > button:hover {
            color: var(--ndpp-ink);
        }

    .ndpp-wmodal__tabs > li.is-active > button {
        color: var(--danger-btn-button);
        border-bottom-color: var(--danger-btn-button);
    }

.ndpp-wmodal .modal-body + .modal-body {
    border-top: 1px solid #f0f2f5;
}

.ndpp-wmodal .table thead th {
    border-top: none;
    border-bottom: 1px solid #eef0f3;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ndpp-muted);
}

/* หัวตารางคอลัมน์ Action ใน datatable บน modal (.ndpp-wmodal) ถูกบีบ (width 1%) จน
   "Action" ตัดเป็นตัวอักษรต่อบรรทัด เพราะกฎ `.ndpp-wmodal .ndpp-datatable table.table
   thead th { white-space: normal }` (ตั้งใจให้หัวยาว ๆ เช่น Business Process ตัดบรรทัดได้)
   ชนะ specificity ของ .ndpp-col-action จึงเจาะเฉพาะคอลัมน์ action ให้ไม่ตัดคำ ด้วย
   specificity ที่สูงกว่า (0,4,3) โดยไม่แตะหัวคอลัมน์อื่น (defect #3810) */
.ndpp-wmodal .ndpp-datatable table.table thead th.ndpp-col-action {
    white-space: nowrap;
}

.ndpp-wmodal .table td {
    vertical-align: middle;
}

.ndpp-wmodal .header2025-home-footer {
    /* .5rem ปุ่มใหญ่ดูติดกันเกิน — 0.75rem ให้มีที่หายใจ */
    gap: .75rem;
    align-items: center;
}

.ndpp-wmodal .header2025-home-cancel {
    background: #fff;
    border: 1px solid #E5E7EB;
    color: #475467;
    font-size: 13px;
    padding: 6px 18px;
    font-weight: 500;
    border-radius: 6px;
}

    .ndpp-wmodal .header2025-home-cancel:hover {
        background: #f8fafc;
        transform: translateY(-1px);
    }

.ndpp-grid .ndpp-widget.is-just-added {
    animation: ndppWidgetFlash 1.1s ease-out 1;
    z-index: 6;
}

@keyframes ndppWidgetFlash {
    0% {
        transform: translateY(7px);
        box-shadow: inset 0 0 0 2px rgba(148, 163, 184, .55);
    }

    45% {
        transform: translateY(0);
        box-shadow: inset 0 0 0 2px rgba(148, 163, 184, .32);
    }

    100% {
        transform: translateY(0);
        box-shadow: inset 0 0 0 0 rgba(148, 163, 184, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ndpp-grid .ndpp-widget.is-just-added {
        animation: none;
    }
}

.ndpp-widget__head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 50px;
    padding: 0 .9rem;
    background: #fff;
    border-bottom: 1px solid #eef0f3;
    border-radius: 14px 14px 0 0;
}

    .ndpp-widget__head .ndpp-widget__drag {
        flex: 0 0 auto;
        width: 18px;
        height: 20px;
        cursor: move;
        opacity: 1;
        background: center/14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23687078'%3E%3Cpath d='m10 19a2 2 0 1 1 -2-2 2 2 0 0 1 2 2zm-2-9a2 2 0 1 0 2 2 2 2 0 0 0 -2-2zm0-7a2 2 0 1 0 2 2 2 2 0 0 0 -2-2zm8 14a2 2 0 1 0 2 2 2 2 0 0 0 -2-2zm0-7a2 2 0 1 0 2 2 2 2 0 0 0 -2-2zm0-7a2 2 0 1 0 2 2 2 2 0 0 0 -2-2z'/%3E%3C/svg%3E");
    }

        .ndpp-widget__head .ndpp-widget__drag:hover {
            opacity: .9;
        }

.ndpp-widget__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: .92rem;
    font-weight: 600;
    color: #2b2f38;
}

.ndpp-widget__menu {
    flex: 0 0 auto;
}

    .ndpp-widget__menu .ndpp-widget__menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: #98a0ac;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease;
    }

        .ndpp-widget__menu .ndpp-widget__menu-btn:hover,
        .ndpp-widget__menu.show .ndpp-widget__menu-btn {
            background-color: rgba(100, 107, 117, .1);
            color: #5b6168;
        }

        /* ตัดขอบดำ (focus outline/box-shadow) ตอนกดปุ่ม kebab */
        .ndpp-widget__menu .ndpp-widget__menu-btn:focus,
        .ndpp-widget__menu .ndpp-widget__menu-btn:active {
            outline: none;
            box-shadow: none;
        }

        .ndpp-widget__menu .ndpp-widget__menu-btn > .fa {
            display: inline;
            margin: 0;
            font-size: 15px;
            line-height: 1;
        }

        .ndpp-widget__menu .ndpp-widget__menu-btn > .ndpp-widget__menu-ico {
            display: block;
            width: 16px;
            height: 16px;
            color: #687078;
        }

.ndpp-widget__menu-list {
    min-width: 190px;
    padding: 7px;
    border: 1px solid var(--ndpp-line, #eceef1);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 23, 28, .14);
    transform-origin: top right;
    animation: ndppMoreIn .16s ease-out;
}

    .ndpp-widget__menu-list > .dropdown-item {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .5rem .55rem;
        border-radius: 8px;
        font-size: .88rem;
        font-weight: 500;
        color: #2b2f38;
        cursor: pointer;
        transition: background-color .13s, color .13s;
    }

        /* ไอคอนเป็น chip กลมมน ดูมีมิติ */
        .ndpp-widget__menu-list > .dropdown-item > .fa {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            background: #f1f3f5;
            border-radius: 8px;
            font-size: 13px;
            text-align: center;
            color: #6b7280;
            transition: background-color .13s, color .13s;
        }

        .ndpp-widget__menu-list > .dropdown-item:hover,
        .ndpp-widget__menu-list > .dropdown-item:focus {
            background-color: #f4f5f7;
            color: #2b2f38;
        }

            .ndpp-widget__menu-list > .dropdown-item:hover > .fa {
                background: rgba(var(--danger-btn-button-rgb), .12);
                color: var(--danger-btn-button);
            }

    /* Remove: คั่นด้วยเส้น + chip แดงตั้งแต่แรก ไม่ต้องรอ hover */
    .ndpp-widget__menu-list > .ndpp-widget__menu-danger {
        margin-top: 5px;
        padding-top: .6rem;
        border-top: 1px solid #f0f2f5;
    }

        .ndpp-widget__menu-list > .ndpp-widget__menu-danger,
        .ndpp-widget__menu-list > .ndpp-widget__menu-danger > .fa {
            color: var(--b64-clear-color, #ef4444);
        }

            .ndpp-widget__menu-list > .ndpp-widget__menu-danger > .fa,
            .ndpp-widget__menu-list > .ndpp-widget__menu-danger:hover > .fa {
                background: rgba(239, 68, 68, .12);
                color: var(--b64-clear-color, #ef4444);
            }

            .ndpp-widget__menu-list > .ndpp-widget__menu-danger:hover {
                background-color: rgba(239, 68, 68, .08);
                color: var(--b64-clear-color, #ef4444);
            }

.ndpp-widget__ctrl {
    display: none !important;
}

.gridstack-box-header.box-controls {
    margin: 2px 2px 0 0;
    gap: 2px;
}

    .gridstack-box-header.box-controls > li > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin: 0;
        border-radius: 6px;
        color: #aab0b8;
        opacity: 1;
        transition: background-color .15s ease, color .15s ease;
    }

        .gridstack-box-header.box-controls > li > a:hover {
            background-color: rgba(100, 107, 117, .1);
            color: #5b6168;
        }

        .gridstack-box-header.box-controls > li > a > .fa,
        .gridstack-box-header.box-controls .box-btn-fullscreen::before {
            display: inline;
            margin: 0;
            font-size: 12px;
            line-height: 1;
        }

.grid-stack-item-content {
    background: #fff;
    color: #2b2b2b;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.box-body ul li {
    line-height: 24px;
}

.code-preview {
    border: 1px solid #ebebeb;
    border-bottom: none;
    padding: 20px;
    background-color: #fff;
}

hr {
    border-top-color: rgba(97,106,120,0.07);
    margin: 1rem auto;
}
/* date-paginator */
.dp-selected[style] {
    background-color: #01c0c8 !important;
}

.grid-stack-item-content {
    background: #ffffff;
    color: #2b2b2b;
    font-family: 'Noto Sans Thai', sans-serif;
    text-align: center;
    font-size: 16px;
    font-display: swap;
}

    .grid-stack-item-content .fa {
        font-size: 64px;
        display: block;
        margin: 16px 0 10px;
    }

.dp-item {
    position: relative;
    line-height: 1.42857143;
}

.cd-horizontal-timeline .timeline {
    padding: 20px 0 20px;
}

.myadmin-dd .dd-list .dd-item .dd-handle {
    background: #ffffff;
    border: 1px solid rgba(120, 130, 140, 0.13);
    padding: 8px 16px;
    height: auto;
    font-weight: 600;
    border-radius: 0px;
}

    .myadmin-dd .dd-list .dd-item .dd-handle:hover {
        color: #03a9f3;
    }

.myadmin-dd .dd-list .dd-item button {
    height: auto;
    font-size: 17px;
    margin: 8px auto;
    color: #2b2b2b;
    width: 30px;
}

.myadmin-dd-empty .dd-list .dd3-handle {
    border: 1px solid rgba(120, 130, 140, 0.13);
    border-bottom: 0px;
    background: #ffffff;
    height: 36px;
    width: 36px;
}

    .myadmin-dd-empty .dd-list .dd3-handle:before {
        color: inherit;
        top: 7px;
    }

    .myadmin-dd-empty .dd-list .dd3-handle:hover {
        color: #03a9f3;
    }

.myadmin-dd-empty .dd-list .dd3-content {
    height: auto;
    border: 1px solid rgba(120, 130, 140, 0.13);
    padding: 8px 16px 8px 46px;
    background: #ffffff;
    font-weight: 600;
}

    .myadmin-dd-empty .dd-list .dd3-content:hover {
        color: #03a9f3;
    }

.myadmin-dd-empty .dd-list button {
    width: 26px;
    height: 26px;
    font-size: 16px;
    font-weight: 600;
}

/* ribbon */
.ribbon-wrapper,
.ribbon-wrapper-reverse,
.ribbon-wrapper-bottom,
.ribbon-wrapper-right-bottom {
    position: relative;
    background: #f7f7f7;
    padding: 50px 15px 15px 50px;
    border-radius: 5px;
}

.ribbon-overflow {
    overflow: hidden;
}

.ribbon-wrapper-reverse {
    padding: 50px 50px 15px 15px;
}

.ribbon-wrapper-bottom {
    padding: 15px 15px 50px 50px;
}

.ribbon-wrapper-right-bottom {
    padding: 15px 50px 50px 15px;
}

.ribbon {
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    clear: left;
    position: absolute;
    top: 0px;
    left: -2px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
}

.ribbon-bookmark:before {
    position: absolute;
    top: 0;
    left: 100%;
    display: block;
    width: 0;
    height: 0;
    content: '';
    border: 15px solid #2b2b2b;
    border-right: 10px solid transparent;
}

.ribbon-right {
    left: auto;
    right: -2px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.ribbon-bookmark.ribbon-right:before {
    right: 100%;
    left: auto;
    border-right: 15px solid #2b2b2b;
    border-left: 10px solid transparent;
}

.ribbon-vertical-l,
.ribbon-vertical-r {
    clear: none;
    padding: 0 5px;
    height: 40px;
    width: 30px;
    line-height: 40px;
    text-align: center;
    left: 0px;
    top: -2px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
}

.ribbon-vertical-r {
    left: auto;
    right: 0px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 0px;
}

.ribbon-bookmark.ribbon-vertical-l:before,
.ribbon-bookmark.ribbon-vertical-r:before {
    top: 100%;
    left: 0;
    margin-top: -14px;
    border-right: 15px solid #2b2b2b;
    border-bottom: 10px solid transparent;
}

.ribbon-bookmark {
    border-radius: 0;
    top: -5px;
    left: -5px;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
}

    .ribbon-bookmark.ribbon-right {
        right: -5px;
        left: auto;
    }

.ribbon-badge {
    top: 15px;
    overflow: hidden;
    left: -90px;
    width: 100%;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

    .ribbon-badge.ribbon-right {
        left: auto;
        right: -90px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ribbon-badge.ribbon-bottom {
        top: auto;
        bottom: 15px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .ribbon-badge.ribbon-right.ribbon-bottom {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }



.ribbon-bookmark.bg-primary:before {
    border-color: #33cabb;
    border-right-color: transparent;
}

.ribbon-bookmark.ribbon-right.bg-primary:before {
    border-right-color: #33cabb;
    border-left-color: transparent;
}

.ribbon-bookmark.ribbon-vertical-l.bg-primary:before,
.ribbon-bookmark.ribbon-vertical-r.bg-primary:before {
    border-right-color: #33cabb;
    border-bottom-color: transparent;
}


.ribbon-bookmark.bg-success:before {
    border-color: #06d79c;
    border-right-color: transparent;
}

.ribbon-bookmark.ribbon-right.bg-success:before {
    border-right-color: #06d79c;
    border-left-color: transparent;
}

.ribbon-bookmark.ribbon-vertical-l.bg-success:before,
.ribbon-bookmark.ribbon-vertical-r.bg-success:before {
    border-right-color: #06d79c;
    border-bottom-color: transparent;
}


.ribbon-bookmark.bg-info:before {
    border-color: #03a9f3;
    border-right-color: transparent;
}

.ribbon-bookmark.ribbon-right.bg-info:before {
    border-right-color: #03a9f3;
    border-left-color: transparent;
}

.ribbon-bookmark.ribbon-vertical-l.bg-info:before,
.ribbon-bookmark.ribbon-vertical-r.bg-info:before {
    border-right-color: #03a9f3;
    border-bottom-color: transparent;
}


.ribbon-bookmark.bg-warning:before {
    border-color: #e9ab2e;
    border-right-color: transparent;
}

.ribbon-bookmark.ribbon-right.bg-warning:before {
    border-right-color: #e9ab2e;
    border-left-color: transparent;
}

.ribbon-bookmark.ribbon-vertical-l.bg-warning:before,
.ribbon-bookmark.ribbon-vertical-r.bg-warning:before {
    border-right-color: #e9ab2e;
    border-bottom-color: transparent;
}


.ribbon-bookmark.bg-danger:before {
    border-color: #fb9678;
    border-right-color: transparent;
}

.ribbon-bookmark.ribbon-right.bg-danger:before {
    border-right-color: #fb9678;
    border-left-color: transparent;
}

.ribbon-bookmark.ribbon-vertical-l.bg-danger:before,
.ribbon-bookmark.ribbon-vertical-r.bg-danger:before {
    border-right-color: #fb9678;
    border-bottom-color: transparent;
}

.ribbon-bookmark.bg-secondary:before {
    border-color: #e4e7ea;
    border-right-color: transparent;
}

.ribbon-bookmark.ribbon-right.bg-secondary:before {
    border-right-color: #e4e7ea;
    border-left-color: transparent;
}

.ribbon-bookmark.ribbon-vertical-l.bg-secondary:before,
.ribbon-bookmark.ribbon-vertical-r.bg-secondary:before {
    border-right-color: #e4e7ea;
    border-bottom-color: transparent;
}

a.box.box-link-shadow.box-link-pop-hover, a.box.box-link-shadow:hover {
    box-shadow: 0 0 36px #dee2e5;
    opacity: 1;
}

a.box.box-link-pop.box-link-pop-hover, a.box.box-link-pop:hover {
    box-shadow: 0 2px 30px #dee2e5;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    opacity: 1;
}

a.block.block-link-pop:active {
    box-shadow: 0 2px 10px #f2f3f5;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.block-content.block-content-full {
    padding-bottom: 18px;
}

.block-content {
    transition: opacity .2s ease-out;
    margin: 0 auto;
    padding: 18px 18px 1px;
    width: 100%;
    overflow-x: visible;
}

.avatar.img-avatar16 {
    width: 16px;
    height: 16px;
}

.avatar.img-avatar20 {
    width: 20px;
    height: 20px;
}

.avatar.img-avatar32 {
    width: 32px;
    height: 32px;
}

.avatar.img-avatar48 {
    width: 48px;
    height: 48px;
}

.avatar.img-avatar96 {
    width: 96px;
    height: 96px;
}

.avatar.img-avatar128 {
    width: 128px;
    height: 128px;
}

.avatar-thumb {
    margin: 5px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4);
}

.img-thumb {
    padding: 6px;
    background-color: #fff;
    border-radius: 3px;
}

.form-material {
    position: relative;
    padding-top: 26px;
}

    .form-material > .form-control {
        padding-left: 0;
        padding-right: 0;
        border-color: transparent;
        border-radius: 0;
        background-color: transparent;
    }

    .form-material.floating > label {
        font-size: 1.142857rem;
        font-weight: 400;
        cursor: text;
        z-index: 2;
        transition: all .2s ease-out;
        -webkit-transform: translateY(25px);
        transform: translateY(25px);
    }

    .form-material > label {
        position: absolute;
        top: 6px;
        left: 0;
        margin-bottom: 0;
    }

    .form-material.form-material-sm.floating > label {
        font-size: 1rem;
        -webkit-transform: translateY(22px);
        transform: translateY(22px);
    }

    .form-material.form-material-lg.floating > label {
        font-size: 1.285714rem;
        -webkit-transform: translateY(27px);
        transform: translateY(27px);
    }

    .form-material > label,
    .form-material > .form-control:focus + label,
    .form-material.floating.open > label {
        font-size: 1rem;
        font-weight: 600;
        cursor: default;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    .form-material.floating > .form-control:-webkit-autofill + label {
        font-size: 1rem;
        font-weight: 600;
        cursor: default;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    .form-material.floating > .form-control[disabled] + label,
    .form-material.floating > .form-control[readonly] + label,
    fieldset[disabled] .form-material.floating > label {
        cursor: not-allowed;
    }

.has-feedback .form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none;
}

.w-p32-5 {
    width: 32.5%;
}
/* Rickshaw Charts
------------------------------------
*/
.rickshaw-chart.rickshaw_graph .detail {
    padding-left: 15px;
    transform: translateX(-15px);
    width: 30px;
    background: rgba(0, 0, 0, 0.04);
    right: -15px;
}

    .rickshaw-chart.rickshaw_graph .detail .item,
    .rickshaw-chart.rickshaw_graph .detail .x_label {
        transform: translateX(15px);
    }

    .rickshaw-chart.rickshaw_graph .detail:after {
        content: "";
        width: 1px;
        background: rgba(0, 0, 0, 0.2);
        height: 100%;
        display: block;
    }

.rickshaw-chart .y_grid .tick.major line {
    stroke-dasharray: 3px, 5px;
    opacity: .7;
}

.rickshaw-chart.rickshaw_graph .detail .x_label {
    display: none;
}

.rickshaw-chart.rickshaw_graph .detail .item {
    line-height: 1.4;
    padding: 0.5em;
}

.rickshaw-chart.rickshaw_graph .detail_swatch {
    float: right;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px 0 0;
}

.rickshaw-chart.rickshaw_graph .detail .date {
    font-size: 11px;
    color: #a0a0a0;
    opacity: .5;
}

#rickshaw-realtime_y_axis {
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    bottom: 0;
    width: 40px;
    left: 0;
    z-index: 1;
}

    #rickshaw-realtime_y_axis .rickshaw_graph .y_ticks path,
    #rickshaw-realtime_y_axis .rickshaw_graph .x_ticks_d3 path {
        fill: none;
        stroke: none;
    }

    #rickshaw-realtime_y_axis .rickshaw_graph .y_ticks text,
    #rickshaw-realtime_y_axis .rickshaw_graph .x_ticks_d3 text {
        opacity: 0.35;
        font-family: 'Montserrat';
        font-size: 11px;
    }

#rickshaw-stacked-bars.rickshaw_graph .detail .dot {
    border-radius: 50px;
}

#rickshaw-stacked-bars.rickshaw_graph .detail .x_label {
    display: none;
}

#rickshaw-stacked-bars.rickshaw_graph .detail .item {
    line-height: 1.4;
    padding: 0.5em;
}

#rickshaw-stacked-bars .detail_swatch {
    float: right;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px 0 0;
}

#rickshaw-stacked-bars.rickshaw_graph .detail .date {
    font-size: 11px;
    color: #a0a0a0;
    opacity: .5;
}

#rickshaw-slider {
    height: 500px;
}

    #rickshaw-slider .rickshaw_graph .x_grid_d3 .tick {
        stroke-opacity: 0;
    }

    #rickshaw-slider .rickshaw_graph .y_ticks path,
    #rickshaw-slider .rickshaw_graph .x_ticks_d3 path {
        stroke: none;
    }

    #rickshaw-slider .rickshaw_graph .y_ticks text,
    #rickshaw-slider .rickshaw_graph .x_ticks_d3 text {
        font-family: 'Montserrat';
        font-size: 11px;
    }

    #rickshaw-slider .rickshaw_range_slider_preview .frame {
        opacity: 0;
    }

    #rickshaw-slider .rickshaw_range_slider_preview .left_handle,
    #rickshaw-slider .rickshaw_range_slider_preview .right_handle {
        fill: #000;
        fill-opacity: 0.1 !important;
    }

    #rickshaw-slider .slider {
        position: absolute;
        top: 0;
        height: 93px;
        overflow: hidden;
    }

    #rickshaw-slider .chart {
        position: absolute;
        top: 150px;
        left: 33px;
        right: 0;
        width: auto;
    }

        #rickshaw-slider .chart .x_tick.plain .title {
            font-family: 'Montserrat';
            font-size: 11px;
        }

    #rickshaw-slider .y_axis {
        bottom: 0;
        position: absolute;
        top: 150px;
        width: 40px;
        left: -6px;
    }

    #rickshaw-slider .rickshaw_graph .x_tick {
        border-color: transparent;
    }

        #rickshaw-slider .rickshaw_graph .x_tick .title {
            bottom: -24px;
            left: -15px;
        }

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/*---project table---*/
.dataTable tbody .details-control:before {
    font-family: FontAwesome;
    content: "\f055";
    font-size: 1.4em;
    color: #739e73;
}

.dataTable tbody .shown .details-control::before {
    content: "\f056";
    color: #a90329;
}

.dataTable tbody .details-control {
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    width: 50px;
}

.project-members img {
    width: 25px;
    border-radius: 0;
}

img.away {
    border-left-color: #ffc40d !important;
}

img.online {
    border-left-color: #40ac2b !important;
}

img.busy {
    border-left-color: #ed1c24 !important;
}

img.offline {
    border-left-color: #ddd !important;
}

img.away, img.busy, img.offline, img.online {
    border-left: 3px solid #fff;
}

.project-members a {
    display: inline-block;
    overflow: hidden;
    margin: 0 3px 0 0;
    border-radius: 0;
}

.dataTables_paginate.paging_simple_numbers .pagination .paginate_button a {
    padding: .5em 1em;
    border-radius: 2px;
    border: 0;
    margin: 0;
    min-width: 1.5em;
}

.dataTables_wrapper .form-control {
    margin: 0 10px;
    padding: 5px 30px 5px 15px;
}


/*---dataTable_crypto---*/
#dataTable_crypto span a i {
    margin: 0;
    font-size: 25px;
}

table h1, table h2, table h3, table h4, table h5, table h6 {
    margin: 0;
}



/*---flip-clock-coundown---*/
.flip-clock-wrapper ul li {
    line-height: 87px !important;
}

.flip-clock-divider .flip-clock-label {
    top: 10em !important;
    color: #fff !important;
}

.flip-clock-wrapper {
    text-align: center;
    display: inline-block;
    width: auto;
    margin: 0 auto;
}


/*---ico-progress---*/
.new-progress-wrap {
    min-width: 600px;
}

.new-progress-line {
    margin-top: 140px;
    margin-bottom: 100px
}

    .new-progress-line > li {
        background-color: rgba(211,211,211,0.3);
        min-height: 50px;
        position: relative
    }

        .new-progress-line > li:first-child {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px
        }

        .new-progress-line > li:last-child {
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px
        }

        .new-progress-line > li + li:before {
            content: "";
            position: absolute;
            left: 0;
            top: -7px;
            height: 64px;
            width: 1px;
            background: #000000;
            background: hsla(0, 0%, 100%, 0.3);
        }

    .new-progress-line .progress {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        -webkit-animation: k 1.7s infinite linear;
        -o-animation: k 1.7s infinite linear;
        animation: k 1.7s infinite linear;
        transition: all 2000ms;
        height: 50px;
        margin-top: 0 !important;
    }

    .new-progress-line .history {
        position: absolute;
        bottom: 100%;
        left: 0;
        margin-bottom: 12px;
        padding: 0px;
        width: 100%;
        text-align: center;
    }

    .new-progress-line .done-1 .scale {
        left: 0
    }

    .new-progress-line .done-6 .scale.last {
        margin-top: 15px
    }

    .new-progress-line .filled {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 100%;
        text-align: right;
        line-height: 50px;
        padding-right: 10px;
        color: #fff;
    }

    .new-progress-line .scale {
        position: absolute;
        top: 100%;
        left: -24px;
        width: 100%;
        margin-top: 15px;
    }

        .new-progress-line .scale.last {
            left: auto;
            right: 0;
            text-align: right;
            line-height: 10px;
        }

.progress-badge {
    position: absolute;
    display: block;
    left: 41%;
    bottom: 100%;
}

    .progress-badge.flash {
        -webkit-animation-delay: .2s;
        -o-animation-delay: .2s;
        animation-delay: .2s;
        -webkit-animation-duration: 2s;
        -o-animation-duration: 2s;
        animation-duration: 2s
    }

/*---ICO Listing Filters---*/

.mixitup-control-active {
    border-bottom: 2px solid;
}

/*---Currency Exchange---*/

.exchange-calculator {
    font-weight: bold;
    margin: 0 auto 20px;
    width: 85%;
    background: rgba(0,0,0,.1);
    padding: 20px 5px;
}

    .exchange-calculator input {
        width: 30%;
        height: 60px;
        transition: all 300ms ease;
        -webkit-transition: all 300ms ease;
        background: #f0e8cb;
        display: inline-block;
    }

    .exchange-calculator .select2-container {
        width: 15% !important;
        border: 0;
        margin-top: -2px;
    }

    .exchange-calculator .select2-container--default .select2-selection--single {
        border-color: transparent;
        height: 60px;
    }

        .exchange-calculator .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 55px;
        }

        .exchange-calculator .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 55px;
            right: 3px;
        }

.equal {
    width: 6%;
    display: inline-block;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
    vertical-align: top;
}

@media (max-width: 767px) {
    .exchange-calculator .select2-container {
        width: 100% !important;
    }

    .exchange-calculator input {
        width: 100%;
    }
}

/*---web tickers---*/
.tickers-block .tickercontainer .cc {
    font-size: 20px;
    margin: 0;
}

.tickers-block .tickercontainer li {
    font-size: 14px;
    font-weight: 500;
    line-height: 45px;
}

/*---amcharts---*/
.amcharts-compare-item-div {
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}

/*---waves---*/
.waveHorizontals {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1; /* iOS safariで隙間が空くことへの対応 */
}

.waveHorizontal {
    width: 200%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 350px 100%;
    transform-origin: 0 100% 0;
    /* animation: move linear infinite; */
    animation-name: move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#waveHorizontal1 {
    background-image: url(http://www.greenmarble.jp/wave1.svg);
    animation-delay: -2s;
    animation-duration: 12s;
}

#waveHorizontal2 {
    background-image: url(http://www.greenmarble.jp/wave2.svg);
    animation-delay: -2s;
    animation-duration: 5s;
}

#waveHorizontal3 {
    background-image: url(http://www.greenmarble.jp/wave3.svg);
    animation-delay: -1s;
    animation-duration: 3s;
}

@keyframes move {
    0% {
        transform: translate(-175px,0px) scale(1,1);
    }

    50% {
        transform: translate(-87px,0px) scale(1,0.5);
    }

    100% {
        transform: translate(0px,0px) scale(1,1);
    }
}

.loader {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #3498db;
    width: 20px;
    height: 20px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.related {
    cursor: pointer;
}

    .related .hightligth {
        background-color: yellow;
        font-weight: 500;
    }

.category .hightligth {
    font-weight: 500;
    border-radius: 6px;
    color: #D25055
}

.tags a, .tags label
.tags a:visited, .tags label:visited {
    display: inline-block;
    padding: 5px 10px 6px;
    position: relative;
    color: #fff !important;
    font-size: 9px;
    line-height: 10px;
    margin: 0 0 5px 20px;
    text-decoration: none;
    background-color: rgb(239, 83, 80);
    border-radius: 0px 3px 3px 0px;
}

    .tags a:hover {
        background: #4a4a4a;
        color: #fff;
        text-decoration: none;
    }

    .tags a:before {
        border-image: none;
        border-style: solid;
        border-width: 10px 8px;
        content: "";
        height: 1px;
        left: -17px;
        position: absolute;
        top: 0;
        width: 1px;
        border-color: transparent rgb(239, 83, 80) transparent transparent;
    }

    .tags a:hover:before {
        border-color: transparent #4a4a4a transparent transparent;
    }

    .tags a:after {
        background: #fff;
        content: "";
        height: 4px;
        left: -2px;
        position: absolute;
        top: 8px;
        width: 4px;
        z-index: 999;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

.breadcrumb-item.active {
    font-weight: bold;
    font-weight: 600;
    color: #000;
}

.circular-menu {
    position: fixed;
    bottom: 1em;
    right: 1em;
}

    .circular-menu .floating-btn {
        display: block;
        width: 3.8em;
        height: 3.8em;
        border-radius: 50%;
        background: #D25055;
        box-shadow: 0 2px 5px 0 hsla(0, 0%, 0%, .36);
        color: #fff;
        text-align: center;
        line-height: 4.2;
        cursor: pointer;
        outline: 0;
    }

    .circular-menu.active .floating-btn {
        box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3);
    }

    .circular-menu .floating-btn:active {
        box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .4);
    }

    .circular-menu .floating-btn i {
        font-size: 1.3em;
        transition: transform .2s;
    }

    .circular-menu.active .floating-btn i {
        transform: rotate(-45deg);
    }

    .circular-menu:after {
        display: block;
        content: ' ';
        width: 3.5em;
        height: 3.5em;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -2;
        transition: all .3s ease;
        opacity: 0.4;
    }

    .circular-menu.active:after {
        transform: scale3d(5.5, 5.5, 1);
        transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
    }

    .circular-menu .items-wrapper {
        padding: 0;
        margin: 0;
    }

    .circular-menu .menu-item {
        position: absolute;
        top: .2em;
        right: .2em;
        z-index: -1;
        display: block;
        text-decoration: none;
        color: hsl(0, 0%, 100%);
        font-size: 1.05em;
        width: 3em;
        height: 3em;
        border-radius: 50%;
        text-align: center;
        line-height: 3;
        background-color: hsla(0,0%,0%,.6);
        transition: transform .3s ease, background .2s ease;
    }

        .circular-menu .menu-item:hover {
            background-color: #D25055;
        }

    .circular-menu.active .menu-item {
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

        .circular-menu.active .menu-item:nth-child(1) {
            transform: translate3d(1em,-7em,0);
        }

        .circular-menu.active .menu-item:nth-child(2) {
            transform: translate3d(-3.5em,-6.3em,0);
        }

        .circular-menu.active .menu-item:nth-child(3) {
            transform: translate3d(-6.5em,-3.2em,0);
        }

        .circular-menu.active .menu-item:nth-child(4) {
            transform: translate3d(-7em,1em,0);
        }

    .circular-menu.circular-menu-left {
        right: auto;
        left: 1em;
    }

        .circular-menu.circular-menu-left .floating-btn {
            background-color: hsl(217, 89%, 61%);
        }

        .circular-menu.circular-menu-left:after {
            background-color: hsl(217, 89%, 61%);
        }

        .circular-menu.circular-menu-left.active .floating-btn i {
            transform: rotate(90deg);
        }

        .circular-menu.circular-menu-left.active .menu-item:nth-child(1) {
            transform: translate3d(-1em,-7em,0);
        }

        .circular-menu.circular-menu-left.active .menu-item:nth-child(2) {
            transform: translate3d(3.5em,-6.3em,0);
        }

        .circular-menu.circular-menu-left.active .menu-item:nth-child(3) {
            transform: translate3d(6.5em,-3.2em,0);
        }

        .circular-menu.circular-menu-left.active .menu-item:nth-child(4) {
            transform: translate3d(7em,1em,0);
        }

.select2-selection--multiple {
    overflow: hidden !important;
    height: auto !important;
}

.required:after {
    content: " *";
    color: red;
}

select option.disabled {
    cursor: not-allowed;
    background-color: #e9ecef;
}

.w-full {
    width: 100% !important;
}

.dropdown-item-custom {
    color: inherit !important;
}

    .dropdown-item-custom:hover {
        color: #000 !important;
        text-decoration: none;
    }

.div-error, .summernote-error .note-editing-area {
    border: 1px solid #ef535069;
    border-radius: inherit;
}

.datepicker.dropdown-menu {
    color: #000000 !important;
}

body {
    background-color: #F0F0F0;
    height: 100vh;
    /* ห้ามใช้ 100vw — รวม scrollbar → ล้นขวา (LTR) / ซ้าย (RTL) */
    width: 100%;
    position: relative;
}

.menu-up {
    position: fixed;
    bottom: 1em;
    right: 1em;
}

.menu-toggle {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background-color: #D25055;
    cursor: pointer;
    position: absolute;
    z-index: 5;
    bottom: 0;
    right: 0;
    display: table;
    text-align: center;
}

    .menu-toggle .fa {
        color: #fff;
        font-size: 1.3em;
        display: table-cell;
        vertical-align: middle;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

    .menu-toggle.open .fa {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

.btn-app-line {
    width: 3em;
    height: 3em;
    border-radius: 50%;
    position: absolute;
    background-color: hsla(0,0%,0%,.9);
    color: hsl(0, 0%, 100%);
    text-align: center;
}

    .btn-app-line .fa {
        line-height: 2.5em;
    }

    .btn-app-line .mdi {
        line-height: 2.5em;
    }

.open .btn-app-line {
}

.menu-round {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
}

    .menu-round .btn-app {
        bottom: 0.25em;
        right: 0.25em;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

    .menu-round.open .btn-app:nth-of-type(1) {
        right: 0.5em;
        bottom: 4.25em;
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .menu-round.open .btn-app:nth-of-type(2) {
        right: 3.5em;
        bottom: 3.5em;
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }

    .menu-round.open .btn-app:nth-of-type(3) {
        right: 4.25em;
        bottom: 0.5em;
    }

.menu-line {
    position: center;
    z-index: 2;
}

    .menu-line .btn-app-line {
        bottom: 0.25em;
        right: 0.25em;
        -webkit-transition: 0.1s;
        transition: 0.1s;
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

        .menu-line .btn-app-line:hover {
            background-color: #D25055;
        }

    .menu-line.open .btn-app-line:nth-of-type(1) {
        bottom: 5em;
    }

    .menu-line.open .btn-app-line:nth-of-type(2) {
        bottom: 9em;
    }

    .menu-line.open .btn-app-line:nth-of-type(3) {
        bottom: 13em;
    }

    .menu-line.open .btn-app-line:nth-of-type(4) {
        bottom: 17em;
    }

    .menu-line.open .btn-app-line:nth-of-type(5) {
        bottom: 21em;
    }

    .menu-line.open .btn-app-line:nth-of-type(6) {
        bottom: 25em;
    }

    .menu-line.open .btn-app-line:nth-of-type(7) {
        bottom: 29em;
    }

.note-icon-caret::before {
    content: "" !important;
}


#menu-node {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}

    #menu-node li {
        padding: 8px 12px;
        cursor: pointer;
        list-style-type: none;
        transition: all .3s ease;
        user-select: none;
    }

        #menu-node li:hover {
            background-color: #DEF;
        }

.slimScrollDiv, .slimScrollDiv ul {
    height: 200px !important;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: inline-block;
    vertical-align: middle;
}

.ellipsis {
    text-overflow: ellipsis;
    /*Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
}

table.dataTable tbody tr.selected {
    background-color: #b0bed9;
}

.select2-selection__rendered {
    line-height: calc(1.3rem) !important;
}

.select2-container .select2-selection--single {
    height: calc(2.2rem) !important;
}

.has-error .select2-container .select2-selection--single {
    border: 1px solid #dc3545 !important;
}

.has-error .select2-container--default .select2-selection--single {
    border-color: #dc3545 !important;
}

.has-error .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #dc3545 !important;
}

.select2-container .select2-selection--multiple {
    line-height: calc(0.8rem) !important;
}

.select2-selection__arrow {
    height: calc(1.8rem) !important;
    right: calc(0.6rem) !important
}

.adropdown-new {
    background-color: #fff;
    margin: 0;
    padding: 0;
    display: block;
    top: 0px;
    text-align: left;
    position: absolute;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.10), 0px 10px 20px rgba(0,0,0,0.05), 0px 20px 20px rgba(0,0,0,0.05), 0px 30px 20px rgba(0,0,0,0.05);
}

.modal-lg-custom {
    width: 90%;
    max-width: 90%;
}

.choose-colours [type=radio] + label:after,
.choose-colours [type=radio] + label:before {
    display: none !important;
}

.choose-colours .input-hidden {
    position: absolute !important;
    left: -9999px !important;
}

.choose-colours input[type=radio]:checked + label {
    border-color: #1f323c !important;
}

.choose-colours input[type=radio] + label {
    padding: 3px !important;
    border: 1px solid transparent !important;
    height: auto !important;
}

.theme-preview-container {
    background: #000;
    height: 30px;
    width: 45px;
    padding: 5px;
}

.theme-preview-button {
    background: #ffffff;
    height: 10px;
    width: 15px;
    margin-top: 10px;
    margin-left: 20px;
}

.table-responsive input[type=search] {
    padding-left: 10px;
}

.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.top {
    z-index: 1001 !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour {
    color: #000;
}

.bootstrap-datetimepicker-widget table td.day {
    min-width: 40px !important;
}

.borderless td, .borderless th {
    border: none;
}

.mt-2em {
    margin-top: 2em;
}

.content-header {
    display: none !important;
}

.navbar {
    box-shadow: none !important;
}

.sidebar-toggle:before {
    font-family: fontAwesome;
    font-size: 20px;
    content: "\f0c9"
}

/* Tooltip container */
.tooltip-2 {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    opacity: 1;
    position: absolute;
}

    /* Tooltip text */
    .tooltip-2 .tooltiptext {
        visibility: visible;
        width: 180px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text */
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 60%;
        /*margin-left: -60px;*/
        /* Fade in tooltip */
        opacity: 1;
        transition: opacity 0.3s;
    }

        /* Tooltip arrow */
        .tooltip-2 .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

.right-0 {
    right: 0;
}

.h-2em {
    height: 2em;
}

.h-3em {
    height: 3em;
}

.content-bottom {
    display: flex;
    align-self: self-end;
}

.cookietable table,
.cookietable tr,
.cookietable td {
    border: 1px solid;
    border-collapse: collapse;
}

.cookietable th {
    font-weight: bold;
    border: 1px solid;
    border-collapse: collapse;
    text-align: center;
}

div.note-editable > ol {
    list-style: none;
    counter-reset: item;
}

    div.note-editable > ol > li {
        counter-increment: item;
        margin-bottom: 5px;
    }

        div.note-editable > ol > li:before {
            margin-right: 10px;
            content: counter(item);
            width: 1.2em;
            text-align: center;
            display: inline-block;
        }

div.note-editable > ul {
    list-style: inside;
}

.otp-field {
    flex-direction: row;
    column-gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .otp-field input {
        height: 45px;
        width: 42px;
        border-radius: 6px;
        outline: none;
        font-size: 1.125rem;
        text-align: center;
        border: 1px solid #ddd;
    }

        .otp-field input:focus {
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
        }

        .otp-field input::-webkit-inner-spin-button,
        .otp-field input::-webkit-outer-spin-button {
            display: none;
        }

.info-flex-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 0.5rem;
    column-gap: 0.5rem;
    border-bottom: 1px solid #f4f4f4;
    align-items: start;
}

.info-flex-label {
    text-align: left;
    white-space: nowrap;
}

.info-flex-value {
    text-align: left;
    min-width: 0;
}

    .info-flex-value::before {
        content: ":";
        margin-right: 0.25rem;
    }

.scrollable-objective-content {
    max-height: 60vh;
    overflow-y: auto;
    margin-top: 15px;
    padding-right: 10px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-color: #e9e9e961 transparent;
}

.scrollable-objective-content-25 {
    max-height: 25vh;
    overflow-y: auto;
    margin-top: 15px;
    padding-right: 10px;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-color: #e9e9e961 transparent;
}

.sidebar-nav {
    max-height: 80vh;
    overflow-y: auto;
    padding-bottom: 1rem;
    scroll-behavior: smooth;
    scrollbar-color: #e9e9e961 transparent;
}

    /* Chrome, Safari, Edge */
    .sidebar-nav::-webkit-scrollbar {
        width: 8px;
    }

    .sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background-color: var(--danger-btn-button);
        border-radius: 4px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    .sidebar-nav::-webkit-scrollbar-button {
        display: none;
        height: 0;
        width: 0;
    }

.sidebar-nav-item {
    cursor: pointer;
    user-select: none;
    border-bottom: none !important;
}

.sidebar-nav-link {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    color: #ccc;
}

    .sidebar-nav-link:not(.active) .step-label {
        color: #ccc;
    }

    .sidebar-nav-link:not(.active) .fa-label {
        color: #ccc;
    }

    .sidebar-nav-link.active {
        background: var(--active-sub-menu) !important;
        color: var(--danger-btn-button) !important;
    }

        .sidebar-nav-link.active .step-circle {
            background: var(--active-sub-menu) !important;
            color: var(--danger-btn-button) !important;
            border: 2px solid var(--danger-btn-button) !important;
        }

.step-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #ccc;
    color: #ccc;
    text-align: center;
    line-height: 41px;
    font-size: 1.25rem;
    font-weight: normal;
    flex-shrink: 0;
    margin-right: 10px;
    transition: all 0.2s ease;
}

.sidebar-nav-step-done .step-circle {
    background-color: var(--danger-btn-button);
    border-color: var(--danger-btn-button);
    color: #fff;
}

.sidebar-nav-step-done .sidebar-nav-link .step-label {
    color: rgba(0, 0, 0, 0.72) !important;
}

.sidebar-nav-step-done .sidebar-nav-link.active .step-label {
    color: var(--danger-btn-button) !important;
}

.sidebar-nav-step-done .sidebar-nav-link .fa-label {
    color: var(--danger-btn-button) !important;
}

.fa-primary {
    color: var(--danger-btn-button);
}

.fa-secondary {
    color: #ccc;
}

.step-label {
    flex-grow: 1;
    font-weight: 500;
    transition: color 0.2s ease;
}

.sidebar-progressbar-label {
    font-weight: 500;
    padding-top: 20px;
    text-align: center;
}

.sidebar-progressbar {
    height: 10px;
    background: linear-gradient(to bottom, #ddd, #ffffff);
    border-radius: 6px;
    overflow: hidden;
    margin-inline: 10px;
    margin-bottom: 30px;
}

.sidebar-progressbar-fill {
    height: 100%;
    background-color: var(--danger-btn-button);
    width: 0%;
    transition: width 0.3s ease-in-out;
    border-radius: 6px;
}

.status-label-right {
    background-color: var(--danger-btn-button);
    color: white;
    padding: 0.7rem 7rem;
    display: inline-block;
    float: right;
    border-bottom-left-radius: 50px 50px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 1.2rem;
    line-height: 1.5;
}

.label-step-primary {
    color: var(--danger-btn-button);
}

[type=checkbox].filled-in:not(:checked) + label.checkbox-selectall:after {
    border: 2px solid var(--danger-btn-button);
}


.menu-layout-container {
    gap: 10px;
}

.single-column-layout {
    column-count: 1;
}

.two-column-layout {
    column-count: 2;
    column-gap: 24px;
    margin-bottom: 40px;
}

@media (max-width: 992px) {
    .two-column-layout {
        column-count: 1;
    }
}

@media (max-width: 992px) {
    .menu-column-layout {
        column-count: 1;
    }
}

@media (max-width: 992px) {
    .two-column-layout {
        grid-template-columns: 1fr;
    }
}

.card-body {
    padding: 0px;
}

.modern-search-container {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 700px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
}

    .modern-search-container .search-icon-left {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #868e96;
        z-index: 10;
        font-size: 16px;
    }

    .modern-search-container .form-control {
        border: 1px solid #e9ecef;
        border-right: none;
        border-radius: 10px 0 0 10px;
        height: 48px;
        padding-left: 48px;
        box-shadow: none;
        font-size: 15px;
    }

    .modern-search-container .btn-search {
        background-color: #00A998;
        color: #fff;
        border: 1px solid #00A998;
        border-radius: 0 10px 10px 0;
        height: 48px;
        width: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .modern-search-container .btn-search:hover {
            background-color: #008a7c;
            /
        }

.menu-group-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 24px 24px 5px 24px;
    box-shadow: 0 0px 12px rgba(0,0,0,0.15);
    flex-direction: column;
    break-inside: avoid;
    margin-bottom: 24px;
    width: 100%;
}

.card-header-title {
    display: flex;
    gap: 12px;
    padding: 0px 20px 20px;
    align-items: center;
}

    .card-header-title .group-title,
    .card-header-title .group-description {
        margin: 10px;
    }

    .card-header-title .group-description {
        font-size: 13px;
        color: #6c757d;
    }

.menu-group-card .group-title {
    font-size: 18px;
    font-weight: normal;
    color: #00A998;
}

.menu-group-card .group-description {
    font-size: 13px;
    color: #6c757d;
    margin-top: 0px !important;
}

    .menu-group-card .group-description .p {
        margin-top: 0px !important;
    }

.p .group-description {
    margin-top: 0px !important;
    margin: 0px;
}

.menu-item-row a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px;
    text-decoration: none;
    color: inherit;
    border: 1px solid #E6E6E6;
    margin: 0 20px 20px;
    margin-top: 0px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.page-header-container {
    text-align: center;
    margin: 0px;
}

    .page-header-container .page-description {
        margin: 20px 40px 40px 40px;
    }

.menu-item-row .item-details {
    flex-grow: 1;
}

.menu-item-row .item-title {
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 2px 0;
    color: #1A1A25;
}

.menu-item-row a {
    background: #fff;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: all 0.3s ease;
}

    .menu-item-row a:hover {
        transform: scale(1.02);
        box-shadow: 0 1px 20px rgba(0, 0, 0, 0.05);
    }

        .menu-item-row a:hover .item-title span:first-child {
            color: #01A998;
        }

.menu-item-row .item-description {
    font-size: 13px;
    color: #6c757d;
    margin: 0;
}

.arrow-icon {
    transition: opacity 0.3s ease;
}

.arrow-icon-hover {
    opacity: 1;
    display: none;
}

@media (min-width: 500px) {
    .arrow-icon {
        transition: opacity 0.3s ease;
        width: 20px;
        height: 20px;
    }

    .arrow-icon-hover {
        opacity: 1;
        display: none;
        width: 20px;
        height: 20px;
    }
}

.menu-item-row a:hover .arrow-icon {
    display: none;
}

.menu-item-row a:hover .arrow-icon-hover {
    display: inline;
}

.recommended-text {
    color: #01A998;
    font-weight: normal;
    margin-left: 8px;
}

.menu-group-card .group-icon {
    width: 58px;
    height: 57px;
    object-fit: cover;
    color: #01A998;
}

.menu-item-row .item-icon {
    width: 43px;
    height: 43px;
    object-fit: contain;
    flex-shrink: 0;
}

.step-box {
    border: 1px solid var(--danger-btn-button);
    border-radius: 30px;
    padding: 10px 15px;
    background-color: white;
}

    .step-box .steptext {
        font-size: 14px;
        color: var(--danger-btn-button);
        font-weight: bold;
    }

.step-icon i {
    color: var(--danger-btn-button);
    font-size: 12px;
    line-height: 1;
}

.tooltip-custom {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    .tooltip-custom .tooltipicon {
        opacity: 0.5;
    }

    .tooltip-custom .tooltiptext {
        visibility: hidden;
        width: max-content;
        background-color: #fff;
        color: rgba(0, 0, 0, 0.72);
        white-space: normal;
        word-wrap: break-word;
        padding: 5px 8px;
        border-radius: 4px;
        position: absolute;
        bottom: 125%;
        overflow-wrap: break-word;
        transform: translateX(-50%);
        left: 50%;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        overflow-y: auto;
        max-height: 150px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .tooltip-custom:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

.tooltip-red-text {
    color: red;
}

/*for mobile view*/
@media (max-width: 576px) {
    .tooltip-custom .tooltiptext {
        width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-height: 180px;
        overflow-y: auto;
        font-size: 14px;
    }
}

.badge-consent-success {
    display: inline-flex;
    align-items: center;
    background-color: #28a745;
    /*background-color: var(--danger-btn-button);*/
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.file-upload {
    margin: 1rem;
}

.custom-file {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hidden-input {
    display: none;
}

.file-button {
    border: 1px solid var(--danger-btn-button);
    color: var(--danger-btn-button);
    padding: 3px 12px;
    border-radius: 4px;
    cursor: pointer;
}

    .file-button:hover {
        background-color: var(--active-sub-menu);
        transition: .3s ease-in-out
    }

.file-info {
    font-size: 0.9em;
    color: #555;
}

.file-validation {
    color: #ef5350;
    margin-top: 0.5rem;
    margin-right: 10px;
}


.netka-cookiebanner-ndpp-container {
    max-width: 75%;
    margin: 0px auto;
    background: none;
    border-radius: 12px;
    padding: 135px 20px 111px 20px;
}

/* Preview */
.netka-cookiebanner-ndpp-top {
    width: 95%;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 66px;
    left: 78px;
    background-color: #f7f8fa00;
    border: none;
    z-index: 11;
}

    .netka-cookiebanner-ndpp-top.is-top {
        width: 95%;
        align-self: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 93.6%;
        left: 78px;
        background-color: #ffffff;
        border: none;
        z-index: 997;
    }

.netka-cookiebanner-ndpp-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    padding: 8px 16px;
    width: fit-content;
    background-color: #fff;
    border: 1px solid #EDEEF0;
    z-index: 9999;
    border-radius: 0px 0px 20px 20px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 6%);
}

.netka-cookiebanner-ndpp-switch {
    margin-left: 10px;
}

/* Accordion */
.netka-cookiebanner-ndpp-accordion {
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
}

.netka-cookiebanner-ndpp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 30px;
    cursor: pointer;
}

    .netka-cookiebanner-ndpp-header img {
        width: 77px;
        height: 77px;
        margin-right: 12px;
        margin-top: 2px;
    }

.netka-cookiebanner-ndpp-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #000000;
}

.netka-cookiebanner-ndpp-description {
    font-size: 13px;
    color: #000000;
    font-weight: 300;
}

.netka-cookiebanner-ndpp-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.netka-cookiebanner-ndpp-arrow {
    font-size: 14px;
    margin-left: 10px;
    align-self: center;
}

.netka-cookiebanner-ndpp-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 16px;
}

.netka-cookiebanner-ndpp-accordion.active .netka-cookiebanner-ndpp-content {
    max-height: max-content;
    padding: 10px 50px;
    min-height: 42vh;
}

.netka-cookiebanner-ndpp-accordion.active.is-locked {
    max-height: 55vh;
}

.ndpp-card-header {
    display: flex;
    align-items: center;
    padding: 0px 0px 10px 0px;
}

    .ndpp-card-header .fa {
        font-size: 1.5rem;
        margin-right: 0.75rem;
    }

    .ndpp-card-header h2 {
        font-size: 17px;
        font-weight: 500;
        margin-left: 12px;
        color: #01A998;
    }
/* Footer */
.netka-cookiebanner-ndpp-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

    .netka-cookiebanner-ndpp-footer button {
        background: #00a693;
        border: none;
        color: #fff;
        padding: 10px 18px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
    }

        .netka-cookiebanner-ndpp-footer button:hover {
            background: #008b7b;
        }

.netka-cookiebanner-ndpp-switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 5em;
    height: 2em;
    margin-bottom: 0px;
}

    .netka-cookiebanner-ndpp-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* --- โครงสร้างหลัก (nq2025 style applied to original class) --- */
.netka-cookiebanner-ndpp-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative; /* เพิ่มเพื่อให้ขนาดคงที่ */
    width: 36px;
    height: 20px;
}

    /* ซ่อน Input เดิม */
    .netka-cookiebanner-ndpp-switch input {
        display: none;
    }

.netka-cookiebanner-ndpp-slider {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #cbd5e1;
    border: 1px solid #e5e7eb;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.18s ease;
}

.netka-cookiebanner-ndpp-switch:hover .netka-cookiebanner-ndpp-slider {
    background: #F3F4F6;
}

.netka-cookiebanner-ndpp-slider:before {
    display: none;
}

.netka-cookiebanner-ndpp-slider:after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 999px;
    position: absolute;
    top: 1px;
    left: 1px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(148, 163, 184, 0.7);
    transition: 0.18s ease;
    transform: translateX(0);
}

.netka-cookiebanner-ndpp-switch input:checked + .netka-cookiebanner-ndpp-slider {
    background: linear-gradient(135deg, #22C55E, #16A9E0);
    border-color: rgba(34, 197, 94, 0.35);
}

    .netka-cookiebanner-ndpp-switch input:checked + .netka-cookiebanner-ndpp-slider:after {
        transform: translateX(16px);
        box-shadow: 0 6px 14px rgba(16, 185, 129, 0.7);
    }

.netka-cookiebanner-ndpp-arrow i {
    transition: transform 0.3s ease-in-out;
    font-size: 1rem;
}

.netka-cookiebanner-ndpp-header.active .netka-cookiebanner-ndpp-arrow i {
    transform: rotate(-180deg);
}

.netka-banner-setup {
    padding: 1.5rem 1.5rem;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
}

.netka-banner-setup__row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
}

.netka-banner-setup__group {
    display: flex;
    flex-direction: column;
}

.netka-banner-setup__group--full {
    flex-basis: 100%;
}

.netka-banner-setup__group--split {
    flex: 1 1 45%;
}

.netka-banner-setup__group--wide {
    flex: 3 1 60%;
}

.netka-banner-setup__group--narrow {
    flex: 1 1 30%;
}

.netka-banner-setup__radius-control {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    padding: 4px;
    width: fit-content;
    border-radius: 29px;
    justify-content: center;
}

.radius-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 56px;
    background-color: #000000;
    cursor: pointer;
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 400;
    color: #ffffff;
    transition: all 0.2s ease;
}

    .radius-button:hover {
        border-color: #000000;
        background-color: #000000;
    }

    .radius-button:focus {
        border: none;
        outline: none;
    }

.radius-value-wrapper {
    padding: 0 16px;
    text-align: center;
    min-width: 60px;
}

.radius-value {
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
}

.radius-unit {
    font-size: 13px;
    color: #6b7280;
    margin-left: 4px;
}

.netka-banner-setup__label {
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
}

.netka-banner-setup__input, .netka-banner-setup__select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: #000;
}

    .netka-banner-setup__input:focus, .netka-banner-setup__select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
    }

.netka-banner-setup__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.25em;
    padding-right: 2.5rem;
}

.has-error .netka-banner-setup__input, .has-error .netka-banner-setup__select {
    border-color: #ef4444;
}

.netka-banner-setup__help-block {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 4px;
}

.netka-banner-setup__file-upload {
    display: contents;
    align-items: center;
    margin-bottom: 20px;
}

    .netka-banner-setup__file-upload.is-disabled {
        opacity: .6;
        pointer-events: none;
    }

.netka-banner-setup__hint {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #000;
}

div.netka-banner-setup__file-upload .netka-banner-setup__logo-preview {
    width: 8em !important;
    height: 8em !important;
    object-fit: contain !important;
}

.netka-banner-setup__logo-preview {
    object-fit: contain !important;
    border: none !important;
    margin-right: 20px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .netka-banner-setup__logo-preview:hover {
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

.netka-banner-setup__logo {
    height: 6em;
    width: auto;
    border-radius: 10px;
    object-fit: cover;
}

.netka-banner-setup__file-input {
    border: none;
    padding: 0;
}

.netka-banner-setup__input-group {
    display: flex;
}

.netka-banner-setup__button {
    border: 1px solid #14b8a6;
    background-color: #14b8a6;
    color: white;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.2s;
}

    .netka-banner-setup__button:hover {
        background-color: #0f9688;
    }

    .netka-banner-setup__button:focus,
    .netka-banner-setup__button:active,
    .netka-banner-setup__button:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

.netka-banner-setup__results-panel {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.netka-banner-setup__results-header {
    padding: 12px 16px;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.netka-banner-setup__results-body {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.netka-banner-setup__results-item {
    word-wrap: break-word;
    font-size: 0.9rem;
}

.netka-banner-setup__status-tag {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-left: 8px;
}

.netka-banner-setup__status-tag--scanning {
    background-color: #fffbeb;
    color: #d97706;
}

.netka-banner-setup__status-tag--scanned {
    background-color: #ecfdf5;
    color: #10b981;
}

.netka-banner-setup__checkbox-group {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-top: 8px;
}

.netka-banner-setup__custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

    .netka-banner-setup__custom-checkbox input {
        display: none;
    }

.netka-banner-setup__checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    margin-right: 8px;
    display: inline-block;
    position: relative;
}

.netka-banner-setup__custom-checkbox input:checked + .netka-banner-setup__checkmark {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

    .netka-banner-setup__custom-checkbox input:checked + .netka-banner-setup__checkmark::after {
        content: '';
        position: absolute;
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }

.netka-banner-setup__group--split .select2-container {
    width: 100% !important;
    box-sizing: border-box;
}
/* --- Card Layout --- */
/*.netka-content-card {
    padding: 0.5rem 1.5rem;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
}*/

.netka-content-card__header {
    display: flex;
    align-items: center;
    padding: 0px 0px 10px 0px;
}

    .netka-content-card__header img {
        width: 28px;
        height: 28px;
        margin-right: 0.75rem;
    }

    .netka-content-card__header h2 {
        font-size: 17px;
        font-weight: 500;
        margin-left: 12px;
        color: #01A998;
    }

.netka-content-card__body {
    padding: 0rem;
}

/* --- Language Tabs --- */
.netka-content-card__lang-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 0px;
    border-radius: 10px;
    cursor: pointer;
}

    .netka-content-card__lang-tabs .nav-tabs {
        border-bottom-color: #fff;
        cursor: pointer;
    }

        .netka-content-card__lang-tabs .nav-tabs .nav-link.active {
            border-bottom-color: #01A998;
            background-color: #01A998;
            border-radius: 5px 5px 0px 0px;
            cursor: pointer;
        }

.netka-content-card__lang-tab {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    background-color: #f9fafb;
    color: #374151;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .netka-content-card__lang-tab:hover {
        background-color: #f3f4f6;
    }

    .netka-content-card__lang-tab.active {
        background-color: #14b8a6;
        border-color: #14b8a6;
        color: white;
    }

.netka-content-card__tab-content {
    padding: 20px 10px 0px 10px;
}

    .netka-content-card__tab-content .tab-pane {
        display: none;
    }

        .netka-content-card__tab-content .tab-pane.active.show {
            display: block;
        }

.netka-content-card__form-group {
    margin-bottom: 24px;
}

.netka-content-card__label {
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.netka-content-card__input,
.netka-content-card__textarea-main {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.netka-content-card__textarea-main {
    resize: vertical;
}

    .netka-content-card__input:focus,
    .netka-content-card__textarea-main:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.netka-content-card__form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.netka-content-card__button-group .netka-content-card__input {
    margin-top: 8px;
}

.netka-content-card__custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
}

    .netka-content-card__custom-checkbox input {
        display: none;
    }

    .netka-content-card__custom-checkbox .netka-content-card__checkmark {
        width: 20px;
        height: 20px;
        border: 2px solid #d1d5db;
        border-radius: 4px;
        margin-right: 8px;
        position: relative;
    }

    .netka-content-card__custom-checkbox input:checked + .netka-content-card__checkmark {
        background-color: #3b82f6;
        border-color: #3b82f6;
    }

        .netka-content-card__custom-checkbox input:checked + .netka-content-card__checkmark::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

.netka-content-card__link-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.netka-content-card__custom-link {
    color: #3b82f6;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

    .netka-content-card__custom-link:hover {
        text-decoration: underline;
    }

    .netka-content-card__custom-link:focus,
    .netka-content-card__custom-link:active {
        outline: none;
        box-shadow: none;
    }

.link-editor__group {
    display: flex;
    align-items: center;
    gap: 16px;
}


.link-editor__input--display-text {
    flex-grow: 1;
}

.netka-content-card__custom-link {
    white-space: nowrap;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.policy-editor__visible-part {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal-radio-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 15px;
}

    .modal-radio-option input[type="radio"] {
        display: none;
    }


        .modal-radio-option input[type="radio"]:checked + .radio-checkmark::after {
            transform: scale(1);
        }

.radio-label-text {
    color: #374151;
    font-size: 13px;
    font-weight: 500;
}

    .radio-label-text .fa-external-link {
        margin-left: 8px;
        color: #3b82f6;
    }

.modal-input-group {
    margin-top: 1.5rem;
}

.policy-editor {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #ffffff;
}

    .policy-editor:focus-within {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

.policy-editor__visible-part {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 12px;
}

.policy-editor .netka-content-card__input {
    border: none !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}

.policy-editor__options {
    padding: 1rem;
    margin-top: 2px;
}

.netka-content-card__custom-link {
    white-space: nowrap;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #3b82f6;
    font-weight: 500;
    font-size: 13px;
}


.modal-radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .modal-radio-option input[type="radio"] {
        display: none;
    }

.radio-checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

    .radio-checkmark::after {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #3b82f6;
        border-radius: 50%;
        display: block;
        transform: scale(0);
        transition: transform 0.2s ease;
    }

.modal-radio-option input[type="radio"]:checked + .radio-checkmark::after {
    transform: scale(1);
}

.radio-label-text {
    color: #374151;
}

    .radio-label-text .fa-external-link {
        margin-left: 8px;
        color: #3b82f6;
    }

.modal-input-group {
    margin-top: 0.5rem;
}

.url-input-container {
    position: relative;
    border-radius: 6px;
}

.url-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
    color: #9ca3af;
    font-size: 13px;
    transition: color 0.2s;
}

.url-input-field {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    padding-left: 36px;
}

    .url-input-field:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    .url-input-field:disabled {
        background-color: #f3f4f6;
        cursor: not-allowed;
    }

.url-input-container.is-disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

    .url-input-container.is-disabled .url-input-icon {
        color: #d1d5db;
    }

.netka-content-card__custom-link i {
    margin-right: 6px;
}

.layout-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 25px;
}

.layout-section {
    padding: 0px 10px 0px 10px;
}

.layout-section__title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.layout-options-group {
    display: flex;
    gap: 1rem;
}

.display-option-card {
    cursor: pointer;
}

    .display-option-card input[type="radio"] {
        display: none;
    }

.card-content-wrapper {
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    width: 125px;
    transition: all 0.2s ease;
}

.display-option-card:hover .card-content-wrapper {
    border: none
}

.display-option-card input[type="radio"]:checked + .card-content-wrapper {
    border: 2px solid #00c292;
}

.display-option-card__icon {
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

    .display-option-card__icon img {
        max-width: 100px;
        max-height: 50px;
    }

.display-option-card__label {
    font-weight: 500;
    color: #374151;
}


.position-options {
    flex-direction: column;
}

.position-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.position-option-btn {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
    width: 90%;
}

    .position-option-btn:has(> input[type="radio"]:checked) {
        border: 2px solid #00c292;
    }

    .position-option-btn:hover {
        border-color: #9ca3af;
    }

    .position-option-btn input[type="radio"] {
        display: none;
    }

        .position-option-btn input[type="radio"]:checked + .icon + span {
            color: #14b8a6;
        }

        .position-option-btn input[type="radio"]:checked ~ * {
        }

.position-option-btn {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
}

.position-option-btn__icon {
    width: 24px;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.layout-color-picker {
    padding: 0rem 1.5rem;
}

.layout-color-picker__title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.layout-color-picker__theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 0.75rem;
    margin-bottom: 25px;
}

.layout-color-picker__theme-option {
    cursor: pointer;
}

.input-hidden {
    display: none;
}

.layout-color-picker__theme-preview {
    width: 100%;
    padding-top: 100%;
    position: relative;
    border-radius: 6px;
    border: 2px solid #e5e7eb;
    transition: all 0.2s ease;
    background-clip: padding-box;
}

.layout-color-picker__theme-preview-button {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 25%;
    height: 25%;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.color-copy-btn {
    border-left: 1px solid #cbcbcb;
    cursor: pointer;
    width: 65px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

    .color-copy-btn:focus {
        outline: none;
    }

    .color-copy-btn:active {
        transform: scale(0.98);
        outline: none;
    }

.copy-toast {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 9999;
}

.layout-color-picker__theme-option:hover .layout-color-picker__theme-preview {
    border-color: #9ca3af;
}

.layout-color-picker__theme-option input:checked + .layout-color-picker__theme-preview {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
}

.theme-preview-button {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 25%;
    height: 25%;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.layout-color-picker__or-divider {
    display: block;
    text-align: center;
    margin: 1.5rem 0;
    color: #6b7280;
    font-size: 13px;
}

.layout-color-picker__custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.layout-color-picker__label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #374151;
    font-size: 13px;
}

.layout-color-picker__input-group {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background-color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .layout-color-picker__input-group:focus-within {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

.layout-color-picker__color-preview {
    width: 40px;
    height: 42px;
    flex-shrink: 0;
    border-right: 1px solid #d1d5db;
    background-color: #f9fafb;
    margin: 0px;
    cursor: pointer;
}

.layout-color-picker__input {
    width: 100%;
    padding: 10px 12px;
    border: none;
    outline: none;
    font-size: 13px;
    color: #111827;
    background: transparent;
}

.color-picker-section {
    transition: all 0.3s ease;
}


    .color-picker-section.is-hidden {
        display: none;
    }


.layout-color-picker__toggle-container {
    text-align: center;
    margin-top: 1.5rem;
}

.netka-content-card__custom-link {
    color: #3b82f6;
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
}

    .netka-content-card__custom-link:hover {
        text-decoration: underline;
    }

.layout-color-picker__custom-theme-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    position: relative;
    border: 2px dashed #d1d5db;
    background-color: #f9fafb;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .layout-color-picker__custom-theme-btn:hover {
        background-image: linear-gradient( to right, rgb(250, 82, 82), rgb(250, 82, 82) 16.65%, rgb(190, 75, 219) 16.65%, rgb(190, 75, 219) 33.3%, rgb(76, 110, 245) 33.3%, rgb(76, 110, 245) 49.95%, rgb(64, 192, 87) 49.95%, rgb(64, 192, 87) 66.6%, rgb(250, 176, 5) 66.6%, rgb(250, 176, 5) 83.25%, rgb(253, 126, 20) 83.25%, rgb(253, 126, 20) 100%, rgb(250, 82, 82) 100% );
        animation: var(--timing) linear dance6123 infinite;
        transform: scale(1.1) translateY(-1px);
        color: #fff;
        border: none;
    }

    .layout-color-picker__custom-theme-btn > * {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .layout-color-picker__custom-theme-btn > i {
        transform: translate(-50%, -100%);
        font-size: 1rem;
    }

    .layout-color-picker__custom-theme-btn > span {
        transform: translate(-50%, 40%);
    }

@keyframes dance6123 {
    to {
        background-position: var(--width);
    }
}

.box-body-ndpp {
    padding: 0em 1.5em;
}

​
#customPickerSection {
    display: flex;
    flex-direction: column;
}

.back-to-themes-button {
    margin-bottom: 25px;
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    color: #00c292;
}

    .back-to-themes-button:focus,
    .back-to-themes-button:active,
    .back-to-themes-button:hover {
        border: none;
        outline: none;
        box-shadow: none;
    }

.pref-category-accordion-main {
    border-radius: 8px;
    margin-top: 10px;
}

.header-right-toggle-main {
    display: flex;
    justify-content: center;
}

.pref-category-accordion__item-main {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

    .pref-category-accordion__item-main.is-active {
        border-color: #14b8a669;
    }

.pref-category-accordion__header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    user-select: none;
}

.header-left-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .header-left-main .fa {
        color: #000000;
    }

.header-title-main {
    font-weight: 600;
    color: #111827;
}

.always-active-text-main {
    font-size: 13px;
    color: #007bff;
    font-weight: 500;
}

.pref-category-accordion__body-main {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    margin-bottom: 0px;
}

.pref-category-accordion__item-main.is-active .pref-category-accordion__body-main {
    max-height: 2000px;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
}

.category-description-main {
    font-size: 13px;
    color: #6b7280;
    margin-top: 0;
}

.cookie-total-summary-main {
    font-size: 13px;
    font-weight: 600;
    color: #00c292;
    margin: 1.5rem 1em 1rem 0;
    text-align: end;
}

.pref-category-table-main {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
}

    .pref-category-table-main th,
    .pref-category-table-main td {
        padding: 0.75rem 1rem;
        text-align: left;
        border: 1px solid #e5e7eb;
        font-size: 13px;
        word-wrap: break-word;
    }

    .pref-category-table-main th {
        padding: 0.75rem 1rem;
        text-align: left;
        border: 1px solid #e5e7eb;
        font-size: 13px;
        word-wrap: break-word;
        font-weight: 600;
    }


        .pref-category-table-main th:nth-child(1),
        .pref-category-table-main td:nth-child(1) {
            width: 10%;
        }

        .pref-category-table-main th:nth-child(2),
        .pref-category-table-main td:nth-child(2) {
            width: 50%;
        }

        .pref-category-table-main th:nth-child(3),
        .pref-category-table-main td:nth-child(3) {
            width: 10%;
        }

.themed-textarea--small-main { /* Textarea inside table */
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
    color: #111827;
}

.themed-toggle-switch-main {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

    .themed-toggle-switch-main input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .themed-toggle-switch-main .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        border-radius: 24px;
        transition: .4s;
    }

        .themed-toggle-switch-main .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            border-radius: 50%;
            transition: .4s;
        }

    .themed-toggle-switch-main input:checked + .slider {
        background-color: #16a34a;
    }

        .themed-toggle-switch-main input:checked + .slider:before {
            transform: translateX(20px);
        }

.header-title-input-main {
    font-weight: 400;
    color: #000000;
    font-size: 13px;
    flex-grow: 1;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 6px;
    background-color: #ffffff;
}

.header-title-input:focus {
    outline: none;
    border-color: #3b82f6;
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.layout-section__content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.layout-color-picker__input-wrapper {
    display: flex;
    flex-direction: column;
}

.layout-section__header {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 10px;
}

    .layout-section__header span {
        color: #56cbdb;
    }

    .layout-section__header hr {
        flex: 1;
        margin-left: 10px;
        border: none;
        border-top: 1px solid #56cbdb;
    }

.layout-section__header_accept {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 10px;
}

    .layout-section__header_accept span {
        color: #4fca55;
    }

    .layout-section__header_accept hr {
        flex: 1;
        margin-left: 10px;
        border: none;
        border-top: 1px solid #4fca55;
    }

.layout-section__header_reject {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 10px;
}

    .layout-section__header_reject span {
        color: #c73535;
    }

    .layout-section__header_reject hr {
        flex: 1;
        margin-left: 10px;
        border: none;
        border-top: 1px solid #c73535;
    }

.layout-section__header_setting {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 10px;
}

    .layout-section__header_setting span {
        color: #434343;
    }

    .layout-section__header_setting hr {
        flex: 1;
        margin-left: 10px;
        border: none;
        border-top: 1px solid #434343;
    }

.netka-banner-setup__group--split {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.netka-banner-setup__label {
    font-weight: 600;
    font-size: 13px;
    color: #222;
}

.netka-banner-setup__group--split {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.netka-banner-setup__label {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.radius-input-container {
    position: relative;
    width: 120px;
}

.radius-value-input {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0 35px 0 15px;
    text-align: left;
    font-size: 16px;
    box-sizing: border-box;
}


.radius-value-input {
    -moz-appearance: textfield;
}

.radius-input-container .radius-unit {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    pointer-events: none;
}


:root {
    --tut-ink: #111827;
    --tut-ink2: #374151;
    --tut-muted: #6b7280;
    --tut-faint: #9ca3af;
    --tut-line: #e5e7eb;
    --tut-line2: #f3f4f6;
    --tut-soft: #f9fafb;
    --tut-accent: #00a898;
    --tut-accent600: #0d9488;
    --tut-accent-ink: #0f766e;
    --tut-accent50: #f0fdfa;
    --tut-accent100: #ccfbf1;
}

.tu-shepherd-centered.shepherd-element,
.shepherd-element.shepherd-centered {
    max-width: 1152px;
    width: min(1152px, calc(100vw - 32px));
    border: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
}

    .tu-shepherd-centered .shepherd-content,
    .shepherd-element.shepherd-centered .shepherd-content {
        max-width: none;
        width: 100%;
        padding: 0;
        border: 1px solid var(--tut-line);
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    }

.tu-shepherd-centered .shepherd-header {
    display: none;
}

.tu-shepherd-centered .shepherd-text {
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.tut-app button:focus,
.tut-app button:focus:active {
    outline: none;
}

.tut-app button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--tut-accent100);
}

.tut-app .tut-row:focus-visible {
    border-color: var(--tut-accent);
}

.tut-app .tut-tab:focus-visible {
    border-radius: 6px 6px 0 0;
}

.tut-app p {
    font-weight: 400;
}

    .tut-app p.tut-sub {
        font-size: 14px;
        color: var(--tut-muted);
    }

    .tut-app p.tut-desc {
        font-size: 14.5px;
        line-height: 1.7;
        color: var(--tut-ink2);
    }

    .tut-app p.tut-demo__lead {
        font-size: 14px;
        line-height: 1.7;
        color: var(--tut-ink2);
    }

    .tut-app p.tut-sample-note {
        font-size: 13px;
    }

        .tut-app p.tut-sample-note.is-info {
            color: var(--tut-ink2);
        }

        .tut-app p.tut-sample-note.is-success {
            color: var(--tut-accent-ink);
        }

        .tut-app p.tut-sample-note.is-error {
            color: #b91c1c;
        }

    .tut-app p.tut-empty {
        font-size: 13px;
        color: var(--tut-muted);
    }

.tut-app .tut-seedcard__d {
    font-weight: 400;
}


/* landing/*.css ใส่ border-bottom แบบจุดไข่ปลาไว้กับ .shepherd-text a ทุกตัว และกฎนั้น
   น้ำหนักสูงกว่า .tut-* ธรรมดา จึงต้องล้างเส้นและทวงสีคืนด้วยตัวเลือกที่หนักกว่า */
.tu-shepherd-centered .shepherd-text a,
.tu-shepherd-centered .shepherd-text a:visited,
.tu-shepherd-centered .shepherd-text a:active,
.tu-shepherd-centered .shepherd-text a:hover {
    border-bottom: 0;
    text-decoration: none;
}

.tut-app a.tut-yt {
    color: var(--tut-accent600);
}

    .tut-app a.tut-yt:hover {
        color: var(--tut-accent-ink);
    }

.tut-app a.tut-ghost,
.tut-app a.tut-ghost:hover,
.tut-app a.tut-ghost:focus {
    color: var(--tut-ink2);
}

.tut-app a.tut-link {
    color: var(--tut-muted);
}

    .tut-app a.tut-link:hover,
    .tut-app a.tut-link:focus {
        color: var(--tut-ink2);
    }

.tut-app {
    display: flex;
    flex-direction: column;
    height: min(90vh, 850px);
    background: #fff;
    color: var(--tut-ink);
    font-size: 14px;
    line-height: 1.5;
}

/* ── จังหวะเปิดตัว ──
   ไล่เผยทีละชั้นจากบนลงล่าง ให้ตาไปหยุดที่ปุ่มเล่นซึ่งเป็นสิ่งที่อยากให้กดที่สุด
   ใส่เฉพาะองค์ประกอบที่ไม่ถูก JS render ซ้ำ (.tut-row ถูกวาดใหม่ทุกคลิก จึงไม่ใส่) */
@keyframes tut-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes tut-rise {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes tut-pop {
    0% {
        opacity: 0;
        transform: scale(.86);
    }

    65% {
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tut-ring {
    0% {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 255, 255, .55);
    }

    70% {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 0 0 20px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.tut-app {
    animation: tut-in .42s cubic-bezier(.16, 1, .3, 1) both;
}

.tut-head {
    animation: tut-rise .42s .05s cubic-bezier(.16, 1, .3, 1) both;
}

.tut-tabs {
    animation: tut-rise .42s .11s cubic-bezier(.16, 1, .3, 1) both;
}

.tut-video {
    animation: tut-rise .46s .17s cubic-bezier(.16, 1, .3, 1) both;
}

.tut-detail {
    animation: tut-rise .46s .25s cubic-bezier(.16, 1, .3, 1) both;
}

.tut-side {
    animation: tut-rise .46s .21s cubic-bezier(.16, 1, .3, 1) both;
}

.tut-bar {
    animation: tut-rise .42s .32s cubic-bezier(.16, 1, .3, 1) both;
}

/* ปุ่มเล่นเด้งเข้ามาท้ายสุด แล้วกระเพื่อมสองครั้งเป็นการชี้เป้า */
.tut-play i {
    animation: tut-pop .5s .34s cubic-bezier(.16, 1, .3, 1) backwards, tut-ring 1.5s 1.1s ease-out 2;
}

/* สลับแท็บก็ให้เนื้อหาไหลเข้ามา ไม่ใช่กระตุกเปลี่ยน */
/* แถวบทเรียนไหลเข้าทีละใบ ต่อจากจังหวะของแผงขวา (.tut-side หน่วง .21s)
   ปลอดภัยเพราะ renderList() วาดครั้งเดียวตอนเปิด — คลิกเลือกใช้ paintList() ที่ไม่รื้อ DOM */
.tut-list .tut-row {
    animation: tut-rise .34s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: .46s;
}

    .tut-list .tut-row:nth-child(1) {
        animation-delay: .28s;
    }

    .tut-list .tut-row:nth-child(2) {
        animation-delay: .32s;
    }

    .tut-list .tut-row:nth-child(3) {
        animation-delay: .36s;
    }

    .tut-list .tut-row:nth-child(4) {
        animation-delay: .4s;
    }

    .tut-list .tut-row:nth-child(5) {
        animation-delay: .43s;
    }


.tut-pane.is-on {
    animation: tut-rise .26s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .tut-app,
    .tut-head,
    .tut-tabs,
    .tut-video,
    .tut-detail,
    .tut-side,
    .tut-bar,
    .tut-play i,
    .tut-list .tut-row,
    .tut-pane.is-on {
        animation: none;
    }
}


/* ── หัว + แท็บ ── */
.tut-head {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 32px 0;
}

.tut-head__text {
    min-width: 0;
}

.tut-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tut-ink);
}

.tut-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--tut-muted);
}

.tut-x {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tut-line);
    border-radius: 50%;
    background: #fff;
    color: var(--tut-faint);
    cursor: pointer;
    transition: .15s;
}

    .tut-x:hover {
        background: var(--tut-line2);
        color: var(--tut-ink2);
    }

.tut-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 32px;
    padding: 24px 32px 0;
    border-bottom: 1px solid var(--tut-line);
}

.tut-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--tut-muted);
    cursor: pointer;
    transition: color .15s;
}

    .tut-tab:hover {
        color: var(--tut-ink2);
    }

    .tut-tab.is-on {
        border-bottom-color: var(--tut-accent600);
        color: var(--tut-accent-ink);
        font-weight: 600;
    }

.tut-tab__n {
    padding: 1px 8px;
    border: 1px solid var(--tut-line);
    border-radius: 999px;
    background: var(--tut-line2);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tut-muted);
}

.tut-tab.is-on .tut-tab__n {
    border-color: var(--tut-accent100);
    background: var(--tut-accent50);
    color: var(--tut-accent600);
}

.tut-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: none;
}

    .tut-pane.is-on {
        display: flex;
    }

/* ── แท็บบทเรียน ── */
.tut-body {
    display: flex;
    width: 100%;
    min-height: 0;
}

.tut-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 15px 15px 35px 30px;
}

.tut-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #111827;
    cursor: pointer;
}

    .tut-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

.tut-poster {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .tut-poster.is-hidden {
        display: none;
    }

    .tut-poster img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .9;
        transition: transform .5s ease;
    }

.tut-video:hover .tut-poster img {
    transform: scale(1.05);
}

.tut-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: rgba(0, 0, 0, .1);
    cursor: pointer;
}

    .tut-play i {
        width: 72px;
        height: 72px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-left: 3px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .92);
        color: var(--tut-ink);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3);
        transition: transform .3s, background .3s;
    }

.tut-video:hover .tut-play i {
    transform: scale(1.08);
    background: #fff;
}

.tut-detail {
    margin-top: 28px;
}

    .tut-detail h3 {
        margin: 0 0 12px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
        color: var(--tut-ink);
    }

.tut-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

    .tut-meta > span:first-child {
        font-size: 13px;
        font-weight: 500;
        color: var(--tut-muted);
    }

.tut-seen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid var(--tut-accent100);
    border-radius: 6px;
    background: var(--tut-accent50);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tut-accent600);
}

.tut-desc {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--tut-ink2);
}

.tut-yt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tut-accent600);
    text-decoration: none;
}

    .tut-yt:hover {
        color: var(--tut-accent-ink);
        text-decoration: none;
    }

    .tut-yt svg {
        transition: transform .15s;
    }

    .tut-yt:hover svg {
        transform: translate(2px, -2px);
    }

/* ── รายการบทเรียน ── */
.tut-side {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid var(--tut-line2);
    background: #fff;
}

.tut-side__top {
    flex: 0 0 auto;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--tut-line2);
    background: rgba(249, 250, 251, .6);
}

.tut-side__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

    .tut-side__head h4 {
        margin: 0;
        font-size: 14.5px;
        font-weight: 700;
        color: var(--tut-ink);
    }

.tut-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--tut-muted);
}

    .tut-count b {
        color: var(--tut-accent600);
    }

.tut-search {
    position: relative;
    display: flex;
    align-items: center;
}

    .tut-search svg {
        position: absolute;
        left: 12px;
        color: var(--tut-faint);
        pointer-events: none;
    }

    .tut-search input {
        width: 100%;
        height: 38px;
        padding: 0 12px 0 34px;
        border: 1px solid var(--tut-line);
        border-radius: 8px;
        background: #fff;
        font: inherit;
        font-size: 13.5px;
        color: var(--tut-ink);
        outline: none;
        transition: .15s;
    }

        .tut-search input::placeholder {
            color: var(--tut-faint);
        }

        .tut-search input:focus {
            border-color: var(--tut-accent);
            box-shadow: 0 0 0 1px var(--tut-accent);
        }

.tut-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.tut-list,
.tut-main,
.tut-demo,
.tut-body,
.tut-seed__scroll {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    scrollbar-gutter: stable;
}

    .tut-list::-webkit-scrollbar,
    .tut-main::-webkit-scrollbar,
    .tut-demo::-webkit-scrollbar,
    .tut-body::-webkit-scrollbar,
    .tut-seed__scroll::-webkit-scrollbar {
        width: 6px;
    }

    .tut-list::-webkit-scrollbar-track,
    .tut-main::-webkit-scrollbar-track,
    .tut-demo::-webkit-scrollbar-track,
    .tut-body::-webkit-scrollbar-track,
    .tut-seed__scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .tut-list::-webkit-scrollbar-thumb,
    .tut-main::-webkit-scrollbar-thumb,
    .tut-demo::-webkit-scrollbar-thumb,
    .tut-body::-webkit-scrollbar-thumb,
    .tut-seed__scroll::-webkit-scrollbar-thumb {
        border: 1px solid transparent;
        border-radius: 10px;
        background: #cbd5e1;
        background-clip: content-box;
    }

        .tut-list::-webkit-scrollbar-thumb:hover,
        .tut-main::-webkit-scrollbar-thumb:hover,
        .tut-demo::-webkit-scrollbar-thumb:hover,
        .tut-body::-webkit-scrollbar-thumb:hover,
        .tut-seed__scroll::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
            background-clip: content-box;
        }

.tut-row {
    display: flex;
    gap: 12px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: .15s;
}

    .tut-row:hover {
        background: var(--tut-line2);
    }

    .tut-row.is-on {
        background: rgba(240, 253, 250, .6);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }

.tut-row__th {
    position: relative;
    flex: 0 0 112px;
    width: 112px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #e5e7eb;
}

    .tut-row__th img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.tut-eq {
    position: absolute;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding-bottom: 25px;
    background: rgba(0, 0, 0, .4);
}

.tut-row.is-on .tut-eq {
    display: flex;
}

.tut-eq i {
    width: 3px;
    height: 12px;
    border-radius: 1px;
    background: #fff;
    animation: tut-eq 1s infinite;
}

    .tut-eq i:nth-child(2) {
        height: 16px;
        animation-delay: .2s;
    }

    .tut-eq i:nth-child(3) {
        height: 9px;
        animation-delay: .4s;
    }

@keyframes tut-eq {
    0%, 100% {
        transform: scaleY(.5);
    }

    50% {
        transform: scaleY(1);
    }
}

.tut-tick {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tut-accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.tut-row.is-done .tut-tick {
    display: flex;
}

.tut-row__b {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 0;
}

.tut-row__t {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tut-ink);
    transition: color .15s;
}

.tut-row:hover .tut-row__t {
    color: var(--tut-accent-ink);
}

.tut-row__s {
    font-size: 11px;
    font-weight: 500;
    color: var(--tut-muted);
}

.tut-empty {
    margin: 40px 0;
    text-align: center;
    font-size: 13px;
    color: var(--tut-muted);
}

/* ── แท็บข้อมูลตัวอย่าง ── */
.tut-seed {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.tut-seed__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 26px 28px 22px;
}

.tut-seed__in {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    max-width: 1000px;
    margin: 0 auto;
}

.tut-seed__col {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

/* หัวเรื่องฝั่งซ้าย */
.tut-seed__hd {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.tut-seed__ico {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tut-accent100);
    border-radius: 12px;
    background: var(--tut-accent50);
    color: var(--tut-accent);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.tut-seed__hd h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--tut-ink);
}

.tut-seed__lead {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--tut-ink2);
}

/* ข้อดี */
.tut-seed__list {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .tut-seed__list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        line-height: 1.6;
        color: var(--tut-ink2);
        font-weight: 400;
    }

.tut-seed__ok {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--tut-accent);
}

/* คำเตือน */
.tut-seed__warn {
    display: flex;
    gap: 11px;
    padding: 14px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
}

.tut-seed__warnico {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #f59e0b;
}

.tut-seed__warn b {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
}

.tut-seed__warn span {
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(146, 64, 14, .8);
}

/* ภาพประกอบท้ายคอลัมน์ซ้าย ถ่วงความสูงกับแผงเลือกชุดข้อมูลฝั่งขวา */
.tut-seed__art {
    position: relative;
    margin: 22px auto 0;
    max-width: 128px;
    background: radial-gradient(58% 52% at 50% 48%, var(--tut-accent50) 0%, rgba(240, 253, 250, 0) 72%);
}

    .tut-seed__art svg {
        display: block;
        overflow: visible;
    }

.tut-seed__ring {
    transform-origin: 196.4px 152px;
    animation: tut-seed-spin 90s linear infinite;
}

@keyframes tut-seed-spin {
    to {
        transform: rotate(360deg);
    }
}

.tut-seed__lid {
    transform-origin: center;
    animation: tut-seed-lid 6s infinite ease-in-out;
}

.tut-seed__docs {
    animation: tut-seed-docs 6s infinite ease-in-out;
}

.tut-seed__spark {
    animation: tut-seed-twinkle 6s infinite ease-in-out;
}

.tut-seed__spark--a {
    transform-origin: 196px 0px;
    animation-delay: .2s;
}

.tut-seed__spark--b {
    transform-origin: 90px 40px;
    animation-delay: .4s;
}

.tut-seed__spark--c {
    transform-origin: 300px 50px;
}

@keyframes tut-seed-lid {
    0%, 10% {
        transform: translateY(0);
        opacity: 1;
    }

    20%, 80% {
        transform: translateY(-70px);
        opacity: 0;
    }

    90%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes tut-seed-docs {
    0%, 15% {
        transform: translateY(80px);
        opacity: 0;
    }

    25%, 35% {
        transform: translateY(-30px);
        opacity: 1;
    }

    45%, 70% {
        transform: translateY(-40px);
        opacity: 1;
    }

    80%, 100% {
        transform: translateY(80px);
        opacity: 0;
    }
}

@keyframes tut-seed-twinkle {
    0%, 25% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }

    30%, 45% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    50%, 65% {
        transform: scale(.6) rotate(10deg);
        opacity: .7;
    }

    70%, 75% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    80%, 100% {
        transform: scale(0) rotate(20deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tut-seed__lid, .tut-seed__docs, .tut-seed__spark, .tut-seed__ring {
        animation: none;
    }

    .tut-seed__lid {
        transform: translateY(-70px);
        opacity: 0;
    }

    .tut-seed__docs {
        transform: translateY(-40px);
    }
}

@media (max-height: 720px) {
    .tut-seed__art {
        display: none;
    }
}

/* แผงเลือกชุดข้อมูล */
.tut-seed__panel {
    flex: 0 0 400px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--tut-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    overflow: hidden;
}

.tut-seed__panelhd {
    padding: 14px 18px;
    border-bottom: 1px solid var(--tut-line2);
    background: var(--tut-soft);
    font-size: 13px;
    font-weight: 600;
    color: var(--tut-ink2);
}

.tut-seed__panelbody {
    padding: 16px;
}

.tut-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* การ์ดชุดข้อมูล */
.tut-seedcard {
    display: flex;
    gap: 14px;
    padding: 14px;
    border: 2px solid var(--tut-line2);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

    .tut-seedcard:hover:not(:disabled) {
        background: rgba(240, 253, 250, .5);
    }

    .tut-seedcard:disabled {
        cursor: default;
        opacity: .75;
    }

.tut-seedcard__radio {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    transition: border-color .15s;
}

.tut-seedcard:hover:not(:disabled) .tut-seedcard__radio {
    border-color: #5eead4;
}

.tut-seedcard.is-on .tut-seedcard__radio {
    border-color: var(--tut-accent);
}

    .tut-seedcard.is-on .tut-seedcard__radio::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--tut-accent);
        transform: translate(-50%, -50%);
    }

.tut-seedcard__b {
    min-width: 0;
}

.tut-seedcard__n {
    display: block;
    margin-bottom: 4px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tut-ink);
}

.tut-seedcard__d {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--tut-muted);
}


/* ปุ่มลงมือทำอยู่ท้ายแผงเลือกชุดข้อมูล */
.tut-seed__act {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--tut-line2);
}

.tut-seed__hint {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--tut-muted);
}

    .tut-seed__hint b {
        font-weight: 600;
        color: var(--tut-ink);
    }

.tut-primary {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--tut-accent);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
    transition: .18s;
}

    .tut-primary:hover:not(:disabled) {
        background: var(--tut-accent600);
        box-shadow: 0 6px 14px -4px rgba(0, 168, 152, .5);
    }

    .tut-primary:disabled {
        background: #e5e7eb;
        color: var(--tut-faint);
        box-shadow: none;
        cursor: not-allowed;
    }

    .tut-primary.is-confirm {
        background: #d97706;
    }

        .tut-primary.is-confirm:hover:not(:disabled) {
            background: #b45309;
        }

    .tut-primary i {
        font-style: normal;
    }

/* ข้อความแจ้งผล */
.tut-sample-note {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 12.5px;
}

    .tut-sample-note.is-info {
        border: 1px solid var(--tut-line);
        background: var(--tut-soft);
        color: var(--tut-ink2);
    }

    .tut-sample-note.is-success {
        border: 1px solid var(--tut-accent100);
        background: var(--tut-accent50);
        color: var(--tut-accent-ink);
    }

    .tut-sample-note.is-error {
        border: 1px solid #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

    .tut-sample-note i {
        margin-right: 6px;
    }

.tut-done {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.tut-done__go {
    padding: 6px 11px;
    border: 1px solid var(--tut-accent100);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--tut-accent-ink);
    cursor: pointer;
    transition: .15s;
}

    .tut-done__go:hover {
        background: var(--tut-accent50);
        border-color: var(--tut-accent);
    }

/* ── แถบท้าย ── */
.tut-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-top: 1px solid var(--tut-line);
    background: rgba(249, 250, 251, .8);
}

.tut-check {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: 13.5px;
    color: var(--tut-muted);
    cursor: pointer;
    user-select: none;
}

    .tut-check:hover {
        color: var(--tut-ink);
    }

    .tut-check input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .tut-check span {
        position: relative;
        padding-left: 24px;
        line-height: 16px;
        font-weight: 500;
    }

        .tut-check span::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 16px;
            height: 16px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            background: #fff;
            transition: .15s;
        }

        .tut-check span::after {
            content: "";
            position: absolute;
            left: 5.5px;
            top: 2.5px;
            width: 5px;
            height: 9px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg) scale(0);
            transition: transform .15s;
        }

    .tut-check:hover span::before {
        border-color: var(--tut-accent);
    }

    .tut-check input:checked + span::before {
        background: var(--tut-accent600);
        border-color: var(--tut-accent600);
    }

    .tut-check input:checked + span::after {
        transform: rotate(45deg) scale(1);
    }

    .tut-check input:focus-visible + span::before {
        box-shadow: 0 0 0 3px var(--tut-accent100);
    }

.tut-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.tut-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--tut-line);
    border-radius: 8px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tut-ink2);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: .15s;
}

    .tut-ghost:hover {
        background: var(--tut-soft);
        border-color: #d1d5db;
        color: var(--tut-ink2);
        text-decoration: none;
    }

    .tut-ghost svg {
        color: var(--tut-muted);
    }

.tut-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tut-muted);
    text-decoration: none;
    transition: color .15s;
}

    .tut-link:hover {
        color: var(--tut-ink2);
        text-decoration: none;
    }

/* ── responsive ── */
@media (max-width: 900px) {
    .tut-demo__in {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .tut-demo__side {
        position: static;
    }

    .tut-app {
        height: min(92vh, 850px);
    }

    .tut-head,
    .tut-tabs {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tut-body {
        flex-direction: column;
        overflow-y: auto;
    }

    .tut-main {
        overflow: visible;
        padding: 20px;
    }

    .tut-side {
        flex: 0 0 auto;
        border-left: 0;
        border-top: 1px solid var(--tut-line);
    }

    .tut-list {
        max-height: 320px;
    }

    .tut-title {
        font-size: 18px;
    }

    .tut-demo__in {
        padding: 28px 20px;
    }

    .tut-bar {
        padding: 14px 20px;
    }
}

:root {
    --b64-bg: #ffffff;
    --b64-border: #e5e7eb;
    --b64-border-hover: #cfd4dc;
    --b64-shadow: 0 6px 24px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.03);
    --b64-radius: 12px;
    --b64-primary: #01A998;
    --b64-primary-2: #01A998;
    --b64-primary-hover: #e43b4c;
    --b64-text: #111827;
    --b64-muted: #6b7280;
    --b64-clear-hover-bg: rgba(234, 74, 90, 0.09);
    --b64-clear-color: #ef4444;
}

.b64-upload-wrapper {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 12px;
    background: var(--b64-bg);
    /* border: 1px dashed var(--b64-border);*/
    border-radius: var(--b64-radius);
    padding: 10px 12px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease;
    /*box-shadow: var(--b64-shadow);*/
}

    .b64-upload-wrapper:hover {
        border-color: var(--b64-border-hover);
    }

    .b64-upload-wrapper:active {
        transform: translateY(0.5px);
    }

.b64-btn-choose {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    background-image: linear-gradient(135deg, var(--b64-primary), var(--b64-primary-2));
    transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0px;
}

    .b64-btn-choose:focus,
    .b64-btn-choose:focus-visible,
    .b64-btn-choose:active {
        outline: none !important;
        box-shadow: none !important;
    }

    .b64-btn-choose i {
        font-size: 14px;
    }

    .b64-btn-choose:active {
        transform: translateY(1px);
    }

.b64-file-name {
    max-width: 32ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--b64-muted);
    font-size: 0.95rem;
    line-height: 1.2;
}

.b64-btn-clear {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--b64-clear-color);
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: background-color .2s ease, transform .06s ease, border-color .2s ease;
}

    .b64-btn-clear:hover {
        background: var(--b64-clear-hover-bg);
        border-color: rgba(239,68,68,0.25);
    }

    .b64-btn-clear:active {
        transform: translateY(1px);
    }

    .b64-btn-clear:focus-visible {
        outline: 3px solid rgba(239,68,68,0.35);
        outline-offset: 2px;
    }

    .b64-btn-clear i {
        font-size: 16px;
        line-height: 1;
    }

@media (max-width: 520px) {
    .b64-upload-wrapper {
        flex-wrap: wrap;
        gap: 10px;
    }

    .b64-file-name {
        flex: 1 1 100%;
        max-width: 100%;
        order: 3;
    }

    .b64-btn-clear {
        order: 2;
    }
}

.is-disabled .b64-btn-choose,
.is-disabled .b64-btn-clear {
    opacity: .55;
    pointer-events: none;
}

.is-disabled .b64-file-name {
    opacity: .7;
}

.netka-banner-setup__connect-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    transition: box-shadow 0.2s;
}

    .netka-banner-setup__connect-box:hover {
        box-shadow: 0 0 0 2px #2563EB33;
    }

.netka-banner-setup__connect-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.netka-banner-setup__connect-text .title {
    font-weight: 600;
    color: #111827;
}

.netka-banner-setup__connect-text .sub {
    font-size: 0.875rem;
    color: #6B7280;
}

.netka-banner-setup__button--primary {
    background: var(--danger-btn-button);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

    .netka-banner-setup__button--primary:hover {
        opacity: 0.9;
    }

.ndpp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px
}

    .ndpp-card-header h1 {
        font-size: 17px;
        font-weight: 500;
        margin-left: 12px;
        color: #01A998;
    }

/* Buttons */
.netka-btn {
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font: inherit
}

    .netka-btn[disabled] {
        opacity: .5;
        cursor: not-allowed
    }

.netka-btn--cookiebanner {
    border: none;
    background: #14b8a6;
    color: #fff;
    width: max-content;
}

.netka-btn--outline {
    background: #fff;
    border: 1px solid #94A3B8
}

.netka-btn--danger {
    background: #EF4444;
    border-color: #EF4444;
    color: #fff
}

.netka-btn--ghost {
    background: transparent;
    border: 1px solid #E5E7EB
}

/* Empty */
.netka-empty-state {
    margin: 10px 0
}

.netka-empty {
    border: 1px dashed #CBD5E1;
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    background: #F8FAFC
}

.netka-empty__icon {
    font-size: 28px;
    margin-bottom: 8px
}

.netka-empty__title {
    margin: 0 0 4px;
    font-weight: 600;
    color: #0F172A
}

.netka-empty__sub {
    margin: 0 0 14px;
    color: #64748B
}

/* Form */
.netka-form-state {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #fff;
    margin: 16px 0
}

.netka-form-header {
    padding: 14px 16px;
    border-bottom: 1px solid #E5E7EB
}

    .netka-form-header h3 {
        margin: 0;
        font-size: 16px
    }

.netka-form__group {
    padding: 12px 16px 4px
}

.netka-input-group {
    display: flex;
    gap: 8px;
    align-items: center
}

.netka-banner-help {
    color: #6B7280;
    font-size: 12px;
    margin-top: 6px
}

.netka-banner-error {
    color: #B91C1C;
    font-size: 12px;
    margin-top: 6px
}

.netka-form-footer-banner {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #E5E7EB
}

.netka-status-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 16px 12px
}

.netka-status__dot-banner {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #CBD5E1
}

.netka-status__dot.ok {
    background: #16A34A
}

.netka-status__dot.fail {
    background: #DC2626
}

.netka-status__text-banner {
    font-weight: 500
}

.netka-list-toolbar-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0
}

.netka-gtm-count-banner {
    color: #6B7280;
    font-size: 14px
}

.netka-gtm-list-banner {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.netka-gtm-item-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #FFFFFF;
    padding: 12px 14px
}

.netka-gtm-item__left-banner {
    display: ruby;
}

.netka-gtm-id-banner {
    font-weight: 600;
    color: #111827
}

.netka-gtm-meta--banner {
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px
}

.netka-dot--banner {
    width: 4px;
    height: 4px;
    background: #CBD5E1;
    border-radius: 999px;
    display: inline-block
}

.netka-gtm-note--banner.is-muted {
    opacity: .7
}

.netka-badge-banner {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    background: #F3F4F6;
    color: #374151
}

    .netka-badge-banner.is-success {
        background: #DCFCE7;
        color: #166534
    }

    .netka-badge-banner.is-danger {
        background: #FEE2E2;
        color: #991B1B
    }


.ndpp-docs-container {
    display: flex;
    width: 100%;
    gap: 24px;
    padding: 20px 0;
}


.ndpp-docs-sidebar {
    width: 315px;
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e6e8eb;
}

.ndpp-docs-sidebar-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 16px;
    margin-top: 0px !important;
    color: #01A998;
}

.ndpp-docs-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .ndpp-docs-menu li {
        padding: 10px 12px;
        margin-bottom: 6px;
        border-radius: 8px;
        cursor: pointer;
        transition: .15s;
    }

        .ndpp-docs-menu li:hover {
            background: #f1faf8;
        }

        .ndpp-docs-menu li.active {
            background: #E6F7F4;
            color: #01A998;
            font-weight: 600;
        }


.ndpp-guide-hero {
    position: relative;
    display: flex;
    gap: 28px;
    width: 100%;
    align-items: center;
    padding: 42px;
    border-radius: 20px;
    border: 1px solid #e6e8eb;
    background: linear-gradient(180deg, #ffffff, #f9fdfc);
    overflow: hidden;
}

.ndpp-guide-hero__text {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.ndpp-guide-hero__art {
    width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

    .ndpp-guide-hero__art img {
        width: 100%;
        height: auto;
        filter: drop-shadow(0 12px 22px rgba(0,0,0,.08));
        animation: heroFloat 4.8s ease-in-out infinite;
    }

.ndpp-badge {
    display: inline-block;
    background: #E6F7F4;
    color: #01A998;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}

.ndpp-guide-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #445;
    margin: 0 0 18px;
}

    .ndpp-guide-desc .hl {
        color: #01A998;
        font-weight: 700;
    }

.ndpp-guide-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

    .ndpp-guide-list li {
        padding: 6px 0;
        color: #2f3a3d;
        font-size: 14px;
    }

.ndpp-light-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #cecece00 0%, rgb(188 188 188 / 12%) 15%, rgba(255, 255, 255, .35) 20%, rgb(83 83 83 / 12%) 15%, transparent 30%);
    z-index: 0;
}

.light-sweep {
    position: absolute;
    top: -40%;
    width: 60%;
    height: 180%;
    background: linear-gradient(120deg, #cecece00 0%, rgb(188 188 188 / 12%) 15%, rgba(255, 255, 255, .35) 20%, rgb(83 83 83 / 12%) 15%, transparent 30%);
    filter: blur(6px);
    opacity: .7;
    transform: rotate(12deg);
    z-index: 1;
    pointer-events: none;
}

.sweep-1 {
    left: -80%;
    animation: sweepMove 9s linear infinite;
}

.sweep-2 {
    left: -120%;
    animation: sweepMove 12s linear infinite 3s;
}

@keyframes sweepMove {
    0% {
        left: -120%;
    }

    100% {
        left: 140%;
    }
}

@keyframes heroFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.netka-btn-red {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: #ED1C23 !important;
    color: #ffffff !important;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
    transition: .25s ease;
    box-shadow: 0px 4px 12px rgba(237, 28, 35, 0.30);
    animation: btnBreath 2.8s ease-in-out infinite;
    cursor: pointer;
}

    .netka-btn-red:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0px 8px 18px rgba(237, 28, 35, 0.45);
        animation: btnBounce 0.35s ease;
    }

@keyframes btnBreath {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes btnBounce {
    0% {
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(-3px) scale(1.05);
    }

    60% {
        transform: translateY(1px) scale(0.98);
    }

    100% {
        transform: translateY(-4px) scale(1.05);
    }
}

.arrow-anim {
    animation: arrowPulse 1.3s infinite;
}

@keyframes arrowPulse {
    0% {
        transform: translateX(0);
        opacity: .7;
    }

    50% {
        transform: translateX(6px);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: .7;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ndpp-badge {
    display: inline-block;
    background: #E6F7F4;
    color: #01A998;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.ndpp-guide-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 10px;
}

.ndpp-guide-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #445;
    margin: 0 0 16px;
}

    .ndpp-guide-desc .hl {
        color: #01A998;
        font-weight: 700;
    }

.ndpp-guide-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

    .ndpp-guide-list li {
        padding: 6px 0;
        color: #2f3a3d;
        font-size: 14px;
    }

@media (max-width: 768px) {
    .ndpp-guide-hero {
        flex-direction: column;
        text-align: center;
    }

    .ndpp-guide-hero__art {
        width: 180px;
    }
}

.gotobtn {
    display: flex;
    justify-content: end;
    align-items: end;
}

.ndpp-video-box {
    background: #ffffff;
    border: 1px solid #e6e8eb;
    border-radius: 14px;
    padding: 18px 18px 20px;
    flex: 1;
    margin-bottom: 28px;
}

.ndpp-video-box-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

    .ndpp-video-box-header h1 {
        font-size: 13px;
        font-weight: 500;
        margin: 0;
        color: #2f3a3d;
    }

.ndpp-step-badge {
    background: #E6F7F4;
    color: #01A998;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.ndpp-video-box-body {
    padding-top: 6px;
}

.ndpp-docs-video {
    width: 100%;
    height: 460px;
    border-radius: 10px;
    border: none;
    background: #000;
}

@media (max-width: 768px) {
    .ndpp-docs-video {
        height: 220px;
    }
}

.netka-cookiebanner-ndpp-google {
    margin-top: 20px;
}

.ndpp-google-card {
    background: #fff;
    padding: 16px;
    width: 100%;
}

.ndpp-google-card__top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ndpp-google-card__title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.ndpp-google-card__subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #64748b;
}

.ndpp-google-status {
    margin-top: 14px;
    border-radius: 14px;
    padding: 12px 12px;
    border: 1px solid #e8edf3;
    background: #f9fafb;
}

    .ndpp-google-status.is-on {
        border-color: #01a99800;
        background: rgb(34 197 94 / 0%);
        margin-top: 0px !important;
        height: 0px !important;
        padding: 0px !important;
    }

    .ndpp-google-status.is-off {
        border-color: rgb(191 46 46 / 22%);
        background: rgb(239 171 171 / 7%);
    }

.ndpp-google-status__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #0f172a;
}



.ndpp-google-status__text {
    font-size: 14px;
    line-height: 1.55;
    color: #334155;
}

.ndpp-google-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    font-size: 12px;
    margin: 2px 4px 0 0;
    white-space: nowrap;
}

.ndpp-google-note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: #64748b;
    font-size: 12.5px;
}


.nq2025-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

    .nq2025-toggle input {
        display: none;
    }

.nq2025-toggle-slider {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #F9FAFB;
    border: 1px solid #e5e7eb;
    position: relative;
    transition: 0.18s ease;
}

.nq2025-toggle:hover .nq2025-toggle-slider {
    background: #F3F4F6;
}

.nq2025-toggle-slider::after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 999px;
    position: absolute;
    top: 1px;
    left: 1px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(148,163,184,0.7);
    transition: 0.18s ease;
}

.nq2025-toggle input:checked + .nq2025-toggle-slider {
    background: linear-gradient(135deg, #22C55E, #16A9E0);
    border-color: rgba(34, 197, 94, 0.35);
}

    .nq2025-toggle input:checked + .nq2025-toggle-slider::after {
        transform: translateX(16px);
        box-shadow: 0 6px 14px rgba(16,185,129,0.7);
    }

.nq2025-toggle input:checked + .nq2025-toggle-slider {
    background: linear-gradient(135deg, #22C55E, #16A9E0);
    border-color: rgba(34, 197, 94, 0.35);
}

    .nq2025-toggle input:checked + .nq2025-toggle-slider::after {
        transform: translateX(16px);
        box-shadow: 0 6px 14px rgba(16,185,129,0.7);
    }

.nq2025-toggle.active-manual .nq2025-toggle-slider {
    background: linear-gradient(135deg, #22C55E, #16A9E0);
    border-color: rgba(34, 197, 94, 0.35);
}

    .nq2025-toggle.active-manual .nq2025-toggle-slider::after {
        transform: translateX(16px);
        box-shadow: 0 6px 14px rgba(16,185,129,0.7);
    }

.ndpp-google-status-container {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e0e6ed;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-top: 15px;
}

.setup-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.icon-wrapper {
    background: #f1f5f9;
    color: #4285F4;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.setup-header h2 {
    margin: 0;
    color: #1e293b;
    font-size: 17px;
    font-weight: 600;
}

.setup-header p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.divider {
    border: 0;
    border-top: 1px solid #f1f5f9;
    margin: 20px 0;
}

.setup-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.step-item {
    display: flex;
    gap: 16px;
    padding: 0px 20px;
}

.step-number {
    background: #4285F4;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
    flex-shrink: 0;
}

.step-content h5 {
    margin: 0 0 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.step-content p {
    margin: 0 0 10px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.input-wrapper {
    background: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-top: 12px;
}

.input-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.prefix-icon {
    position: absolute;
    left: 12px;
    color: #94a3b8;
}

.custom-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 0.95rem;
    transition: all 0.2s;
}

    .custom-input:focus {
        outline: none;
        border-color: #4285F4;
        box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
    }

.external-link {
    color: #4285F4;
    text-decoration: none;
    font-weight: 500;
}

    .external-link:hover {
        text-decoration: underline;
    }

.instruction-list {
    padding-left: 18px;
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

    .instruction-list li {
        margin-bottom: 4px;
    }

code {
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
    color: #0f172a;
    font-weight: 500;
}

.sub-steps {
    background-color: #f8fafc;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
    border: 1px solid #edf2f7;
}

.sub-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
    color: #000;
    border-bottom: 1px solid #f1f5f9;
}

    .sub-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .sub-item:first-child {
        padding-top: 0;
    }

    .sub-item i {
        background: #398bf7;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0rem;
        color: #4285F4;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

.sub-item-plugin {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
    color: #000;
    border-bottom: 1px solid #f1f5f9;
}

    .sub-item-plugin:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .sub-item-plugin:first-child {
        padding-top: 0;
    }

    .sub-item-plugin i {
        width: 5px;
        height: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: #4285F4;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* ข้อความยาวห่อด้วย <div> ก้อนเดียว (กัน flex หั่นเป็นคอลัมน์) — ลูกศรข้างในต้องอยู่ในบรรทัด */
    .sub-item-plugin > div i {
        display: inline-block;
        width: auto;
        height: auto;
        margin: 0 4px;
        box-shadow: none;
    }

.ndpp-callout-clean {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin: 0px 0px 0px 0px;
}

.ndpp-callout-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}

    .ndpp-callout-title i {
        color: #64748b;
        font-size: 1rem;
    }

.ndpp-callout-desc {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 15px;
    padding-left: 26px;
}

.ndpp-callout-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 26px;
}

.ndpp-callout-clean {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0px 0px 0px;
}

.ndpp-callout-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 15px;
}

.ndpp-step-table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.ndpp-step-row {
    display: table-row;
}

.ndpp-step-bullet {
    display: table-cell;
    width: 25px;
    vertical-align: top;
    padding-top: 5px;
}

.ndpp-step-content {
    display: table-cell;
    vertical-align: top;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
    text-align: left;
    direction: ltr;
}

.ndpp-step-dot {
    width: 6px;
    height: 6px;
    background: #c5c4c3;
    border-radius: 50%;
    display: block;
}

.ndpp-step-content b {
    color: #1e293b;
    font-weight: 600;
}

.ndpp-step-content code {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
    color: #e11d48;
}

.ndpp-step-content .external-link {
    color: #2563eb;
    text-decoration: underline;
}

.ndpp-callout-dot {
    width: 5px;
    height: 5px;
    margin-top: 9px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}

.ndpp-callout-clean b {
    color: #1e293b;
    font-weight: 600;
}

.ndpp-callout-clean code {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #e11d48;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.ndpp-callout-clean .external-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(37, 99, 235, 0.2);
    transition: all 0.2s;
}

    .ndpp-callout-clean .external-link:hover {
        border-bottom-color: #2563eb;
        color: #1d4ed8;
    }

.arrow-separator {
    color: #94a3b8;
    margin: 0 4px;
    font-size: 0.75rem;
}

.copy-input-group {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 15px;
}

.copy-input-field {
    flex-grow: 1;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem;
    color: #475569;
}

.btn-copy-custom {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4285F4;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-copy-custom:hover {
        background: #f0f7ff;
        border-color: #4285F4;
    }

    .btn-copy-custom:focus {
        outline: none;
    }

    .btn-copy-custom:active {
        background-color: #e2eefc;
        transform: scale(0.98);
    }

.arrow-separator {
    color: #94a3b8;
    margin: 0 8px;
    font-size: 0.8rem;
}

.modal-radio-option--inline {
    display: flex;
    align-items: center;
    gap: 15px;
}

.policy-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 10px 10px;
    border-radius: 20px;
    line-height: 1;
    white-space: nowrap;
}

.policy-badge--recommended {
    background: #e6f4ea;
    color: #1e7f43;
    border: 1px solid #b7e1c1;
}

.policy-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #0056b3;
    background-color: rgba(0, 86, 179, 0.08);
    border-radius: 23px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border: 1px solid #0056b347
}

    .policy-inline-link:hover {
        background-color: rgba(0, 86, 179, 0.15);
        color: #003d82;
        text-decoration: none;
    }

    .policy-inline-link i.fa {
        font-size: 12px;
    }

.header-up-down {
    display: flex;
    align-items: center;
    margin-left: 4px;
    position: relative;
    cursor: pointer;
}

    .header-up-down::before {
        content: "";
        position: absolute;
        inset: -12px;
    }

.header2025-left-sidebar {
    align-items: center;
    display: flex;
    width: max-content;
    height: max-content;
    height: 69px;
    padding: 0px 0px;
}

@media (max-width: 950px) {

    .main-sidebar {
        padding-top: 0px !important;
    }

    .navbar.navbar-static-top .header2025-right {
        margin-left: 20px;
        width: 100%;
    }

    .header2025-avatar-trigger {
        display: none !important;
    }

    .navbar.navbar-static-top .header2025-right {
        margin-left: 20px;
        width: 100%;
    }

    .main-header.header2025 {
        /*  margin-left: 0px !important;*/
    }

    .nq2025-content {
        margin-left: 0px !important;
    }
}

.nq2025-content {
    margin-left: 60px;
    transition: margin-left 0.18s ease;
    background: #F5F6FA;
    min-height: 100vh;
}

.nd-2025-sidebar.nd-2025-sidebar--pinned ~ .nq2025-content {
    margin-left: 284px;
}

.nd-2025-sidebar.nd-2025-sidebar--pinned ~ .content-wrapper.nq2025-content ~ .main-footer {
    margin-left: 284px;
}

/* rail mode (ไม่ pin): footer margin ต้อง = ความกว้าง sidebar rail จริง (--nd-w-collapsed 78px)
   ไม่ใช่ 60px ของ .nq2025-content — เพราะ content มี padding ในตัวเลยไม่โดนบัง แต่ footer text (padding แค่ 15px)
   จะถูก sidebar ทับ/ตัดตัวอักษรตัวแรก. pinned ถูก override เป็น 284px ด้วย selector ที่ specificity สูงกว่าด้านบน */
.content-wrapper.nq2025-content ~ .main-footer {
    margin-left: 78px;
}

.wrapper.nd-sidebar-pinned .main-header .navbar {
    margin-left: 284px;
}

.header2025-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    margin-left: 5px;
    height: 100%;
    cursor: pointer;
}

    .header2025-sidebar-toggle .sidebar-toggle-icon {
        transition: transform 0.25s ease;
        transform: scaleX(-1);
    }

body:not(.sidebar-collapse) .header2025-sidebar-toggle .sidebar-toggle-icon {
    transform: scaleX(1);
}

.header2025-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 23px;
    /*margin-right: 32px;*/
    height: 69px;
}

/* Keep the breadcrumb (left) and the action bar (right) on ONE row on wide screens —
   the Bootstrap navbar's flex-wrap otherwise drops the action bar to a second line when
   the two together get too wide. Let the breadcrumb truncate instead of wrapping the actions.
   (≤950px keeps the existing stacked layout via the media query above.) */
@media (min-width: 951px) {
    .main-header.header2025 .navbar.navbar-static-top {
        flex-wrap: nowrap;
    }

    .main-header.header2025 .header2025-left-sidebar {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .main-header.header2025 #header-new {
        min-width: 0;
        overflow: hidden;
        max-width: 100%;
    }

    .main-header.header2025 .header2025-right {
        flex: 0 0 auto;
    }
}

.header2025-item {
    position: relative;
    display: flex;
    align-items: center;
}

.nq2025-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #F9FAFB;
    transition: background 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}

    .nq2025-toggle:hover {
        background: #F3F4F6;
    }

    .nq2025-toggle input[type="checkbox"] {
        display: none;
    }

.nq2025-toggle-slider {
    position: relative;
    flex: 0 0 36px;
    height: 20px;
    border-radius: 999px;
    background: #E5E7EB;
    transition: background 0.18s ease;
}

    .nq2025-toggle-slider::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        /*background: #FFFFFF;*/
        box-shadow: 0 1px 3px rgba(148, 163, 184, 0.7);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

.nq2025-toggle-label {
    font-size: 12px;
    font-weight: 400;
    color: #111827;
}


.nq2025-toggle input[type="checkbox"]:checked + .nq2025-toggle-slider {
    background: linear-gradient(135deg, #22C55E, #16A9E0);
}

    .nq2025-toggle input[type="checkbox"]:checked + .nq2025-toggle-slider::before {
        transform: translateX(16px);
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.7);
    }

.nq2025-toggle input[type="checkbox"]:checked ~ .nq2025-toggle-label {
    color: #0F172A;
}


.header2025-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 12px;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

    .header2025-lang-btn .lang-flag {
        width: 20px;
        height: 14px;
        border-radius: 2px;
        object-fit: cover;
    }

    .header2025-lang-btn .lang-title {
        color: white;
        font-size: 14px;
    }

    .header2025-lang-btn .lang-arrow {
        margin-left: 4px;
    }

.lang-dropdown {
    padding: 6px 0;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    cursor: pointer;
}

    .lang-option:hover {
        background: rgba(0,0,0,0.05);
    }

    .lang-option .lang-flag {
        width: 20px;
        height: 14px;
        border-radius: 2px;
    }

@media (max-width: 599px) {
    .header2025-item.lang-dd .header2025-btn.lang-btn i {
        display: none !important;
    }
}

.header2025-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

    .header2025-btn.icon-btn .noti-header {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.avatar-btn img {
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.header2025-item .lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid #D6D8DD;
    opacity: 0.98;
}

    .header2025-item .lang-btn:hover {
        background: rgba(255, 255, 255, 0.38);
        border-color: #C9CCD3;
        box-shadow: 0 4px 12px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
        transform: translateY(-1px);
    }


    .header2025-item .lang-btn i {
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
    }


.header2025-item .lang-text {
    font-size: 13px;
    font-weight: 400;
    color: #000;
}

.header2025-item .dropdown-menu {
    min-width: 459px;
    padding: 8px 0;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 22%);
    cursor: pointer;
}

.lang-dd .dropdown-menu {
    min-width: auto !important;
}

    .lang-dd .dropdown-menu a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        font-size: 13px;
        color: #333;
        text-decoration: none;
        transition: background 0.15s ease;
    }

        .lang-dd .dropdown-menu a:hover {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            font-size: 13px;
            color: #333;
            text-decoration: none;
            background: #f9f6f6;
            transition: background 0.15s ease;
        }

.header2025-item .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    top: 20% !important;
}

    .header2025-item .dropdown-menu a:hover {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #333;
        text-decoration: none;
        transition: background 0.15s ease;
    }

.header2025-item .dropdown-menu i {
    font-size: 18px;
}

.mh2025-caret {
    transition: transform 0.2s ease;
    transform: rotate(0deg);
}

.mh2025-dd.open .mh2025-caret {
    transform: rotate(180deg);
}

.ann-icon {
    display: block;
    pointer-events: none;
}

.header2025-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 69px;
    cursor: pointer;
    box-shadow: none;
}

    .header2025-item .icon-btn {
        cursor: pointer;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid #D6D8DD;
        opacity: 0.98;
        width: 37px;
        height: 37px;
        background: rgb(255 255 255);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.15s ease;
    }

        .header2025-item .icon-btn:hover {
            background: rgba(255, 255, 255, 0.38);
            border-color: #C9CCD3;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .6);
            transform: translateY(-1px);
        }

        .header2025-item .icon-btn i,
        .header2025-item .icon-btn svg {
            width: 24px;
            height: 24px;
            pointer-events: none;
        }

.header2025-menu.header2025-menu-tasks {
    min-width: 380px;
    max-width: 420px;
    padding: 0;
    border-radius: 12px;
    border: none;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 22%);
    overflow: hidden;
}

.header2025-menu-header {
    padding: 12px 18px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background-color: #ffffff;
}

.header2025-menu-title {
    font-size: 15px;
    font-weight: 600;
}

.header2025-menu-body {
    max-height: 320px;
    overflow-y: auto;
    background-color: #ffffff;
}

.header2025-menu-footer {
    padding: 10px 18px 12px;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.06);
    background-color: #ffffff;
    font-weight: 600;
}

    .header2025-menu-footer a {
        color: #E53935;
        text-decoration: none;
    }

.header2025-task-empty {
    padding: 32px 18px;
    text-align: center;
    opacity: 0.75;
}

.header2025-task-empty-icon {
    font-size: 32px;
    margin-bottom: 6px;
}

.header2025-task-empty-text {
    font-size: 13px;
}

.header2025-task-list {
    display: flex;
    flex-direction: column;
}

.header2025-task-item {
    display: flex;
    padding: 10px 18px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s ease;
}

    .header2025-task-item:last-child {
        border-bottom: none;
    }

    .header2025-task-item:hover {
        background: rgba(0,0,0,0.03);
    }

.header2025-task-avatar {
    margin-right: 12px;
}

    .header2025-task-avatar img {
        width: 36px;
        height: 36px;
        object-fit: cover;
    }

.header2025-task-content {
    flex: 1;
    min-width: 0;
}

.header2025-task-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.header2025-task-message {
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
}

.header2025-task-meta {
    font-size: 11px;
    color: #1e88e5;
    display: flex;
    align-items: center;
}

.header2025-task-time .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1e88e5;
    margin-right: 5px;
}


.header2025-tasks-header {
    padding: 14px 18px 17px 18px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

    .header2025-tasks-header h4 {
        margin: 0;
        font-size: 14px;
    }

.header2025-tasks-body {
    max-height: 375px;
    height: auto;
    overflow-y: auto;
}

.header2025-tasks-panel .slimScrollDiv {
    height: auto !important;
    max-height: 375px !important;
}

    .header2025-tasks-panel .slimScrollDiv .header2025-tasks-body {
        height: auto !important;
        max-height: 375px !important;
    }

.header2025-task-row {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

    .header2025-task-row:last-child {
        border-bottom: none;
    }

    .header2025-task-row a {
        display: flex;
        text-decoration: none !important;
        color: inherit;
    }

    .header2025-task-row:hover {
        background: rgba(0,0,0,0.03);
    }

.header2025-task-avatar {
    margin-right: 12px;
}

    .header2025-task-avatar img {
        width: 36px;
        height: 36px;
        object-fit: cover;
    }

.header2025-task-content {
    flex: 1;
}

.header2025-task-title {
    font-size: 13px;
    margin-bottom: 3px;
}

.header2025-task-message {
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
}

.header2025-task-meta {
    font-size: 11px;
    color: #1e88e5;
    display: flex;
    align-items: center;
}

.header2025-tasks-footer {
    padding: 10px 18px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.06);
    text-align: center;
    display: flex;
    justify-content: center;
}

    .header2025-tasks-footer a {
        color: #e53935 !important;
    }

.mh2025-dd.dropdown.open > .header2025-tasks-panel,
.mh2025-dd.dropdown.show > .header2025-tasks-panel {
    left: auto !important;
    right: 3px !important;
    top: calc(100% + -14px) !important;
    transform-origin: top right !important;
    -webkit-transform-origin: top right !important;
}

.header2025-notif-panel {
    min-width: 320px;
    max-width: 380px;
    padding: 0;
    border-radius: 12px;
    border: none;
    box-shadow: 0 16px 30px rgba(0,0,0,0.18);
    background-color: #ffffff;
    overflow: hidden;
}

.header2025-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 9px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background-color: #ffffff;
}

.header2025-notif-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.header2025-notif-header-right {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9CA3AF;
}

.header2025-notif-body {
    max-height: 280px;
    overflow-y: auto;
    background-color: #ffffff;
}

.header2025-notif-footer {
    padding: 8px 16px 10px;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,0.06);
    background-color: #ffffff;
    font-weight: 600;
}

    .header2025-notif-footer a {
        color: #E53935;
        text-decoration: none;
    }


.header2025-empty {
    text-align: center;
}

.header2025-notif-row {
    padding: 8px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s ease;
}

    .header2025-notif-row:last-child {
        border-bottom: none;
    }

    .header2025-notif-row > a {
        display: flex;
        text-decoration: none;
        color: inherit;
    }

.header2025-notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(37,99,235,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
}

    .header2025-notif-icon i {
        font-size: 16px;
        color: #2563EB;
    }

.header2025-notif-content {
    flex: 1;
    min-width: 0;
}

.header2025-notif-message {
    font-size: 13px;
    color: #374151;
    margin-bottom: 3px;
    word-break: break-word;
}

.header2025-notif-meta {
    font-size: 11px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.header2025-notif-row:hover {
    background: rgba(0,0,0,0.03);
}

.header2025-task-row > a {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, transform 0.1s ease;
}

    .header2025-task-row > a:hover {
        background: #F3F4F6;
    }

.header2025-task-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 999px;
}

.header2025-task-content {
    flex: 1;
}

.cal-line-1 {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
}

.cal-rel {
    color: #9CA3AF;
    white-space: nowrap;
    font-size: 11px;
}

.cal-line-2 {
    max-width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #374151;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 4px;
}

.cal-line-3 {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #6B7280;
    align-items: center;
}

.cal-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .cal-time svg {
        display: block;
    }

.cal-location {
    color: #2563EB;
}

.header2025-section-title {
    padding: 14px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid transparent;
    background: linear-gradient(to right, rgb(243, 244, 246), white);
}

.header2025-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
}

.header2025-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header2025-profile-trigger-avatar img {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
}

.header2025-profile-trigger-name {
    font-size: 13px;
    color: #000;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.header2025-profile-panel {
    min-width: 260px;
    padding: 0;
}

.header2025-profile-header {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 15px;
}

    .header2025-profile-header::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 80%;
        height: 100%;
        background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 45%, rgba(255, 255, 255, 0) 100% );
        animation: header2025Shine 8s infinite ease-in-out;
        pointer-events: none;
    }

@keyframes header2025Shine {
    0% {
        transform: translateX(-120%) skewX(-15deg);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    70% {
        transform: translateX(150%) skewX(-15deg);
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}


.header2025-profile-header img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #d1d5db;
}

.header2025-profile-header p {
    margin: 0;
    padding: 0;
    line-height: 1.35;
}

    .header2025-profile-header p b {
        font-size: 15px;
        font-weight: 600;
        color: #111827;
    }

.header2025-profile-header small {
    display: block;
    font-size: 12px;
    color: #4B5563;
    margin-top: 2px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header2025-profile-header .text-blue {
    color: #3B82F6 !important;
}


.header2025-profile-menu li a {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
}

    .header2025-profile-menu li a i {
        width: 18px;
        text-align: center;
        margin-right: 6px;
        color: #6B7280;
    }

    .header2025-profile-menu li a:hover {
        background: #F3F4F6;
    }

.header2025-profile-divider {
    border-top: 1px solid #E5E7EB;
    margin: 4px 0;
}

.header2025-avatar-trigger {
    width: 25px;
    height: 25px;
}

.header2025-item .dropdown-menu.header2025-profile-panel {
    min-width: 280px !important;
    width: auto !important;
}

.header2025-profile-body {
    padding: 10px 0;
    background: #fff;
}

.header2025-profile-list li {
    list-style: none;
}

    .header2025-profile-list li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        font-size: 13px;
        color: #374151;
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
    }

        .header2025-profile-list li a:hover {
            background: #F3F4F6;
            color: #1F2937;
        }

        .header2025-profile-list li a i {
            width: 16px;
            text-align: center;
            font-size: 14px;
            color: #6B7280;
        }

.header2025-profile-logout {
    color: #DC2626 !important;
}

    .header2025-profile-logout i {
        color: #DC2626 !important;
    }

.header2025-profile-panel .slimScrollDiv,
.header2025-profile-panel .slimScrollDiv ul {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 6px 6px 4px 10px;
}

.header2025-profile-panel a {
    all: unset;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    cursor: pointer;
}

.header2025-profile-panel a {
    cursor: pointer;
}

    .header2025-profile-panel a:hover {
        background: #F3F4F6;
        border-radius: 6px;
        color: #111;
    }

    .header2025-profile-panel a i {
        width: 16px;
        text-align: center;
        font-size: 14px;
        opacity: 0.9;
    }

.header2025-noti-modal {
    border-radius: 14px;
    overflow: hidden;
    border: none;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.4);
}

.header2025-noti-header {
    display: flex;
    justify-content: space-between;
    padding: 23px 18px 23px;
    border-bottom: 1px solid #E5E7EB;
    background: radial-gradient(120% 180% at 0% 0%, rgba(59,130,246,0.12), rgba(15,23,42,0.02));
}

.header2025-noti-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header2025-noti-header .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0F172A;
}

.header2025-noti-subtitle {
    margin: 0;
    font-size: 12px;
    color: #6B7280;
}

.header2025-noti-close {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #6B7280;
    font-size: 20px;
    line-height: 1;
    opacity: 0.8;
}

    .header2025-noti-close:hover {
        opacity: 1;
    }

.header2025-noti-body {
    padding: 20px 24px 25px;
    background: #F9FAFB;
}

.header2025-noti-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header2025-noti-group-label {
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    margin-bottom: 4px;
}

.header2025-noti-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 18px 16px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease;
}

    .header2025-noti-row:hover {
        background: #F3F4F6;
    }

.header2025-noti-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.header2025-noti-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #140808;
    margin-right: 10px;
    color: #FFFFFF;
}

.header2025-noti-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.header2025-noti-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.header2025-noti-desc {
    font-size: 11px;
    color: #6B7280;
    line-height: 1.35;
}

.header2025-noti-switch {
    margin: 0;
    flex-shrink: 0;
}

.header2025-noti-footer {
    padding: 10px 14px 14px;
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
    display: flex;
    justify-content: end;
}

.header2025-noti-save {
    background: var(--danger-btn-background) !important;
    border: none;
    color: #FFFFFF;
    font-size: 13px !important;
    width: 28%;
    padding: 5px 20px !important;
    font-weight: 500;
    border-radius: 6px;
}

    .header2025-noti-save:hover {
        transform: translateY(-1px);
    }

#nsdx-notification-setting-modal .modal-dialog {
    max-width: 520px !important;
    width: 520px !important;
}

#nsdx-notification-setting-modal .modal-content {
    border-radius: 10px;
}

.header2025-home-modal {
    border-radius: 14px;
    overflow: hidden;
    border: none;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.4);
}

.header2025-home-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px 18px;
    border-bottom: 1px solid #E5E7EB;
    background: radial-gradient( 120% 180% at 0% 0%, rgba(59,130,246,0.12), rgba(15,23,42,0.02) );
}

    .header2025-home-header .modal-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #0F172A;
    }

.modal.center-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background: rgba(0,0,0,0.1);
}

.header2025-home-close {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #6B7280;
    font-size: 20px;
    line-height: 1;
    opacity: 0.8;
}

    .header2025-home-close:hover {
        opacity: 1;
    }

    .header2025-home-close:focus {
        outline: none;
        box-shadow: none;
    }

    .header2025-home-close:focus-visible {
        outline: 2px solid #E5E7EB;
        outline-offset: 2px;
    }

.ndpp-series-modal .header2025-home-modal {
    display: flex;
    flex-direction: column;
}

.ndpp-series-modal .header2025-home-header {
    align-items: center;
    flex: 0 0 auto;
}

.ndpp-series-modal .header2025-home-titlewrap {
    min-width: 0;
    overflow: hidden;
}

    .ndpp-series-modal .header2025-home-titlewrap .modal-title {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.ndpp-series-modal__caption {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: .15rem 0 1.2rem;
    padding: 1.4rem 1.4rem;
    border: 1px solid var(--ndpp-line, #e9edf2);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
}

.ndpp-series-modal__caption-ic {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.46V19l4 2v-8.54L22 3z'/%3E%3C/svg%3E") center / 18px no-repeat, var(--danger-btn-button);
}

.ndpp-series-modal__caption-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ndpp-series-modal__caption-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ndpp-muted, #98a0ab);
}

.ndpp-series-modal__caption-val {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ndpp-ink);
    word-break: break-word;
}

.ndpp-series-modal .ndpp-datatable .dataTables_wrapper .dataTables_length {
    margin: 0 0 1rem auto;
}

.ndpp-series-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.15rem 1.15rem;
    scrollbar-width: thin;
    scrollbar-color: #cdd4df transparent;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

    .ndpp-series-modal .modal-body::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .ndpp-series-modal .modal-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .ndpp-series-modal .modal-body::-webkit-scrollbar-thumb {
        background: #cdd4df;
        border-radius: 999px;
        border: 3px solid transparent;
        background-clip: padding-box;
        transition: background-color .2s ease;
    }

        .ndpp-series-modal .modal-body::-webkit-scrollbar-thumb:hover {
            background: #aab3c2;
            background-clip: padding-box;
        }

    .ndpp-series-modal .modal-body::-webkit-scrollbar-corner {
        background: transparent;
    }

    .ndpp-series-modal .modal-body .ndpp-datatable {
        border: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }

.header2025-home-body {
    padding: 10px 25px 25px;
    background: #F9FAFB;
    overflow-y: auto;
}

.header2025-home-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header2025-home-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

    .header2025-home-row:hover {
        background: #F3F4F6;
    }

.header2025-home-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header2025-home-icon {
    font-size: 22px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0F172A;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header2025-home-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header2025-home-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.header2025-home-desc {
    font-size: 12px;
    color: #6B7280;
}

.header2025-home-switch {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 48px;
}


.header2025-home-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
    display: flex;
    justify-content: end;
}

.header2025-home-save {
    background-color: var(--danger-btn-button) !important;
    border-color: var(--danger-btn-border) !important;
    color: #fff;
    font-size: 13px !important;
    width: auto;
    padding: 6px 20px !important;
    font-weight: 500;
    border-radius: 6px;
}

    .header2025-home-save:hover {
        transform: translateY(-1px);
    }

#nsdx-homepage-setting-modal .modal-dialog {
    max-width: calc(100vw - 32px) !important;
    width: 940px !important;
}

#nsdx-homepage-setting-modal .modal-content {
    border-radius: 12px;
}

#nsdx-homepage-setting-modal .header2025-home-icon,
#nsdx-homepage-setting-modal i.fa,
#nsdx-homepage-setting-modal i[class*="fa-"],
#nsdx-homepage-setting-modal svg {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px;
}

#nsdx-change-password-modal .modal-dialog {
    max-width: calc(100vw - 32px) !important;
    width: 720px !important;
}

#nsdx-change-password-modal .header2025-pwd-modal {
    border-radius: 14px;
    overflow: hidden;
    border: none;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
    background: #FFFFFF;
}

/* Header */
#nsdx-change-password-modal .header2025-pwd-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 18px 18px;
    border-bottom: 1px solid #E5E7EB;
    background: radial-gradient(120% 180% at 0% 0%, rgba(59,130,246,0.14), rgba(15,23,42,0.02));
}

#nsdx-change-password-modal .header2025-pwd-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#nsdx-change-password-modal .header2025-pwd-header .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0F172A;
}

#nsdx-change-password-modal .header2025-pwd-subtitle {
    margin: 0;
    font-size: 12px;
    color: #6B7280;
}

#nsdx-change-password-modal .header2025-pwd-close {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #6B7280;
    font-size: 20px;
    line-height: 1;
    opacity: 0.8;
}

    #nsdx-change-password-modal .header2025-pwd-close:hover {
        opacity: 1;
    }

    #nsdx-change-password-modal .header2025-pwd-close:focus-visible {
        outline: 2px solid #E5E7EB;
        outline-offset: 2px;
    }

#nsdx-change-password-modal .header2025-pwd-body {
    padding: 18px 20px 16px;
    background: #F9FAFB;
}

#nsdx-change-password-modal .header2025-pwd-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#nsdx-change-password-modal .header2025-pwd-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#nsdx-change-password-modal .header2025-pwd-label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    margin: 0;
}

#nsdx-change-password-modal .header2025-pwd-inputgroup {
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    #nsdx-change-password-modal .header2025-pwd-inputgroup:focus-within {
        border-color: #2563EB;
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
        background: #FFFFFF;
    }

    #nsdx-change-password-modal .header2025-pwd-inputgroup .form-control {
        border: none;
        box-shadow: none;
        font-size: 13px;
        padding: 7px 10px;
        background: transparent;
    }

        #nsdx-change-password-modal .header2025-pwd-inputgroup .form-control:focus {
            box-shadow: none;
            background: transparent;
        }

/* Eye button (โชว์/ซ่อนรหัส) */
#nsdx-change-password-modal .header2025-pwd-append {
    display: flex;
}

#nsdx-change-password-modal .header2025-pwd-eye-btn {
    border: none;
    background: transparent;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    #nsdx-change-password-modal .header2025-pwd-eye-btn .fa {
        color: #6B7280;
        font-size: 13px;
    }

    #nsdx-change-password-modal .header2025-pwd-eye-btn:hover .fa {
        color: #111827;
    }
    /* remove focus/active outline for eye button */
    #nsdx-change-password-modal .header2025-pwd-eye-btn:focus,
    #nsdx-change-password-modal .header2025-pwd-eye-btn:active,
    #nsdx-change-password-modal .header2025-pwd-eye-btn:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    /* กันกรณี bootstrap ใส่ outline ให้ element ลูก */
    #nsdx-change-password-modal .header2025-pwd-eye-btn::-moz-focus-inner {
        border: 0;
    }

/* Requirements box */
#nsdx-change-password-modal .header2025-pwd-require {
    border-radius: 10px;
    padding: 10px 12px;
    background: #ffeeee;
    border: 1px solid #ffe0e0;
}

#nsdx-change-password-modal .header2025-pwd-require-title {
    font-size: 11px;
    font-weight: 600;
    color: #d25055;
    margin-bottom: 2px;
}

#nsdx-change-password-modal .header2025-pwd-require-body {
    font-size: 11px;
    color: #4B5563;
}

#nsdx-change-password-modal .header2025-pwd-field.has-error .header2025-pwd-inputgroup {
    border-color: #DC2626;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15);
}

#nsdx-change-password-modal .header2025-pwd-error {
    display: block;
    font-size: 11px;
    color: #DC2626;
    margin-top: 4px;
}

#nsdx-change-password-modal .header2025-pwd-footer {
    padding: 10px 14px 14px;
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
    display: flex;
}

#nsdx-change-password-modal .header2025-pwd-save {
    background-color: var(--danger-btn-button) !important;
    border-color: var(--danger-btn-border) !important;
    color: #fff;
    font-size: 13px !important;
    width: auto;
    padding: 6px 20px !important;
    font-weight: 500;
    border-radius: 6px;
}

    #nsdx-change-password-modal .header2025-pwd-save:hover {
        transform: translateY(-1px);
    }

.save-footer-section {
    width: 100%;
    display: flex;
    justify-content: end;
}

/* ====== FLOATING ANNOUNCEMENT FAB (BOTTOM RIGHT) ====== */
.header2025-announcement-fab {
    position: fixed;
    right: 24px;
    bottom: 120px;
    width: 320px;
    max-height: 380px;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.5);
    font-size: 12px;
    color: #111827;
    z-index: 2050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: header2025-announcement-fab-in 0.22s ease-out;
}

@keyframes header2025-announcement-fab-in {
    from {
        transform: translateY(12px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* HEADER */
.header2025-announcement-fab__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 10px 4px 10px;
    gap: 8px;
}

.header2025-announcement-fab__title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.header2025-announcement-fab__icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #FBBF24;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

    .header2025-announcement-fab__icon .fa {
        font-size: 13px;
        color: #92400E;
    }

.header2025-announcement-fab__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.header2025-announcement-fab__label {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #92400E;
}

.header2025-announcement-fab__subject {
    font-size: 12px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 205px;
}

.header2025-announcement-fab__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.header2025-announcement-fab__btn {
    border: none;
    background: transparent;
    padding: 4px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
}

    .header2025-announcement-fab__btn:hover {
        background: rgba(15, 23, 42, 0.05);
    }

.header2025-announcement-fab__meta {
    padding: 0 12px 6px 46px;
    font-size: 11px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.header2025-announcement-fab__list {
    padding: 4px 8px 8px 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #FFFBEB;
    overflow-y: auto;
    max-height: 250px;
}

.header2025-announcement-fab__item {
    padding: 6px 6px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
}

    .header2025-announcement-fab__item:hover {
        background: rgba(251, 191, 36, 0.16);
    }

.header2025-announcement-fab__item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header2025-announcement-fab__item-title {
    font-size: 12px;
    font-weight: 500;
    color: #111827;
}

.header2025-announcement-fab__item-time {
    font-size: 11px;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.header2025-announcement-fab__footer {
    margin-top: 4px;
    padding: 4px 6px 2px 6px;
    border-top: 1px dashed rgba(148, 163, 184, 0.7);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 11px;
    color: #2563EB;
    cursor: pointer;
}

    .header2025-announcement-fab__footer:hover {
        color: #1D4ED8;
    }

.header2025-announcement {
    position: relative;
    width: 100%;
    height: 45px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.header2025-announcement-glow-black {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 120deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.12) 20%, rgba(0, 0, 0, 0.28) 45%, rgba(255, 255, 255, 0.18) 65%, rgba(255, 255, 255, 0.10) 75%, rgba(255, 255, 255, 0.00) 100% );
    background-size: 200% 200%;
    mix-blend-mode: multiply;
    opacity: 0.50;
    z-index: 1;
    animation: glowBlackSweep 30s ease-out infinite;
}

@keyframes glowBlackSweep {
    0% {
        background-position: -150% 0;
        opacity: 0;
    }

    2% {
        background-position: 0% 0;
        opacity: 0.55;
    }

    4% {
        background-position: 150% 0;
        opacity: 0.35;
    }

    100% {
        background-position: 150% 0;
        opacity: 0;
    }
}

.header2025-announcement-inner {
    position: relative;
    z-index: 2;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    white-space: nowrap;
}

.header2025-left-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 15px;
}

.header2025-announcement-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #140808;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.header2025-title-strong {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    flex-shrink: 0;
}

.header2025-dot {
    color: #9ca3af;
    font-size: 14px;
    flex-shrink: 0;
}

.header2025-announcement-text {
    font-size: 12px;
    color: #4b5563;
    max-width: 100%;
}

.header2025-announcement-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header2025-right-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.header2025-announcement-sub {
    font-size: 12px;
    color: #6b7280;
}

.header2025-ack-btn {
    border: none;
    outline: none;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, #101010, #272626);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: 0.15s ease;
}

    .header2025-ack-btn,
    .header2025-ack-btn:focus,
    .header2025-ack-btn:focus-visible,
    .header2025-ack-btn:active {
        outline: none !important;
        box-shadow: none !important;
    }

        .header2025-ack-btn:hover {
            background: linear-gradient(135deg, #101010, #272626);
            transform: translateY(-1px);
        }

        .header2025-ack-btn:active {
            transform: scale(0.96);
        }

.header2025-announce-modal {
    border-radius: 14px;
    overflow: hidden;
    border: none;
    min-height: 65vh;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.40);
    background: #ffffff;
}

.header2025-announce-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 18px;
    border-bottom: 1px solid #E5E7EB;
    background: radial-gradient( 120% 180% at 0% 0%, rgba(59,130,246,0.12), rgba(15,23,42,0.02) );
}

.header2025-announce-titlewrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header2025-announce-textblock {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header2025-announce-header .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0F172A;
}

.header2025-announce-subtitle {
    margin: 0;
    font-size: 12px;
    color: #6B7280;
}

.header2025-announce-close {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #6B7280;
    font-size: 22px;
    line-height: 1;
    opacity: 0.85;
}

    .header2025-announce-close:hover {
        opacity: 1;
    }

.header2025-announce-body {
    padding: 16px 20px 20px;
    background: #F9FAFB;
    max-height: 500px;
    overflow-y: auto;
}

.header2025-announce-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header2025-announce-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.header2025-announce-item-main {
    position: relative;
    padding: 16px 16px 16px 75px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 18px 45px rgb(0 0 0 / 8%);
    transition: all 0.18s ease;
}

.header2025-announce-icon {
    position: absolute;
    left: 18px;
    top: 18px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, #111827, #1F2937);
    color: #F9FAFB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.header2025-announce-item-titlewrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.header2025-announce-item-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.header2025-announce-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6B7280;
    white-space: nowrap;
}

.header2025-announce-item-message {
    font-size: 13px;
    line-height: 1.45;
    color: #4B5563;
    margin-bottom: 0px;
}

.netkagpt-root {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1039;
}

[ng-cloak] {
    display: none !important;
}

netkagpt-window {
    position: relative;
}

.netkagpt-panel {
    width: 520px;
    height: 88vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 40px rgb(0 0 0 / 40%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.netkagpt-header {
    padding: 13px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.netkagpt-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.netkagpt-header-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.netkagpt-header-title {
    font-weight: 600;
    font-size: 14px;
}

.netkagpt-header-subtitle {
    font-size: 10px;
    font-weight: 400;
    color: #6b7280;
}

.netkagpt-header-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #6b7280;
}

.netkagpt-body {
    flex: 1;
    position: relative;
    background: #fdfdfd;
    padding: 30px;
    overflow-y: auto;
    z-index: 1;
}

    .netkagpt-body::before {
        content: "";
        position: absolute;
        top: -25%;
        left: -15%;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, #00c29261, transparent 70%);
        filter: blur(70px);
        pointer-events: none;
        animation: glowDrift 24s ease-in-out infinite;
        opacity: 0.6;
    }

@keyframes glowDrift {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    20% {
        transform: translate(30px, -10px) scale(1.05);
    }

    40% {
        transform: translate(60px, 25px) scale(1.1);
    }

    60% {
        transform: translate(20px, 45px) scale(1.03);
    }

    80% {
        transform: translate(-10px, 10px) scale(1.08);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}


.netkagpt-messages {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.netkagpt-message-time {
    font-size: 10px;
    color: #9ca3af;
}

.netkagpt-message-time--right {
    float: right;
}

.netkagpt-message-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.netkagpt-row-reverse {
    flex-direction: row-reverse;
}

.netkagpt-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.netkagpt-bubble {
    max-width: 75%;
    background: #0d0d0d0d;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid #ededed;
    z-index: 10;
    margin-left: 10px;
}

.netkagpt-bubble--user {
    background: linear-gradient(135deg, #2c2c2e, #1c1c1d);
    border: none;
    color: #fff;
    margin-right: 10px;
}

.netkagpt-footer {
    padding: 15px 12px 12px 12px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.netkagpt-input-wrap {
    position: relative;
}

.netkagpt-input {
    width: 100%;
    min-height: 100px;
    padding: 8px 40px 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    resize: none;
    font-size: 13px;
}

.netkagpt-send-btn {
    position: absolute;
    right: 12px;
    bottom: 42px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(145deg, #0f0f0f, #1a1a1a);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.45), 0 0 8px rgba(60,60,60,0.25);
    transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease;
    animation: netkaPulseBlack 2.4s infinite ease-in-out;
}

    .netkagpt-send-btn:hover {
        transform: scale(1.12);
        background: linear-gradient(145deg, #1c1c1c, #222222);
        box-shadow: 0 4px 10px rgba(0,0,0,0.55), 0 0 12px rgba(120,120,120,0.28);
    }

    .netkagpt-send-btn:active {
        transform: scale(0.92);
        background: linear-gradient(145deg, #080808, #121212);
        box-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 0 6px rgba(80,80,80,0.3);
    }

@keyframes netkaPulseBlack {
    0% {
        box-shadow: 0 0 8px rgba(80,80,80,0.22);
    }

    50% {
        box-shadow: 0 0 14px rgba(120,120,120,0.28);
    }

    100% {
        box-shadow: 0 0 8px rgba(80,80,80,0.22);
    }
}

.netkagpt-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1039;
}

.netkagpt-fab-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 12px 30px rgb(0 168 152 / 33%);
    cursor: pointer;
}

.netkagpt-fab-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.netkagpt-message-meta {
    margin-bottom: 2px;
    display: flex;
    justify-content: flex-start;
}

.netkagpt-message-meta--right {
    justify-content: flex-end;
}

.netkagpt-message-time-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 8px;
    font-size: 10px;
    color: #6b7280;
}

.netkagpt-message-time-icon {
    font-size: 10px;
    opacity: 0.8;
}

.netkagpt-message-time-text {
    line-height: 1;
    white-space: nowrap;
}

.netkagpt-thinking {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}

    .netkagpt-thinking span {
        width: 6px;
        height: 6px;
        background: #9ca3af;
        border-radius: 50%;
        display: inline-block;
        animation: netkagpt-bounce 1.25s infinite ease-in-out;
    }

        .netkagpt-thinking span:nth-child(1) {
            animation-delay: 0s;
        }

        .netkagpt-thinking span:nth-child(2) {
            animation-delay: 0.15s;
        }

        .netkagpt-thinking span:nth-child(3) {
            animation-delay: 0.3s;
        }

@keyframes netkagpt-bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    40% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

.netkagpt-body::-webkit-scrollbar {
    width: 6px;
}

.netkagpt-body::-webkit-scrollbar-track {
    background: transparent;
}

.netkagpt-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 50px;
}

    .netkagpt-body::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,0.40);
    }

.netkagpt-input {
    border: none !important;
    background: #f3f4f6;
}

    .netkagpt-input:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.netkagpt-fab-btn {
    border: none !important;
    outline: none !important;
    box-shadow: 0 12px 30px rgb(0 168 152 / 33%);
}

    .netkagpt-fab-btn:focus,
    .netkagpt-fab-btn:active {
        border: none !important;
        outline: none !important;
        box-shadow: 0 12px 30px rgb(0 168 152 / 33%);
    }

.netkagpt-header-close {
    border: none !important;
    font-size: 26px;
    outline: none !important;
    background: transparent;
}

    .netkagpt-header-close:focus,
    .netkagpt-header-close:active {
        border: none !important;
        outline: none !important;
        background: transparent;
        box-shadow: none !important;
    }

.netkagpt-input-hint {
    margin-top: 10px;
    font-size: 11px;
    color: #9ca3af;
    opacity: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 3px;
    user-select: none;
    justify-content: left;
}

.netkagpt-hint-key {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-family: inherit;
}

.netkagpt-body {
    position: relative;
}

.netkagpt-reco-overlay {
    position: absolute;
    inset: 0 0 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 18px 18px 22px;
    pointer-events: none;
    z-index: 5;
}

.netkagpt-reco-card {
    pointer-events: auto;
    max-width: 100%;
    width: 100%;
    border-radius: 18px;
    padding: 14px 14px 12px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #e5e7eb;
}

@media (min-width: 768px) {
    .netkagpt-reco-card {
        width: 92%;
        margin: 0 auto;
    }
}

.netkagpt-reco-header {
    margin-bottom: 10px;
}

.netkagpt-reco-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(248, 250, 252, 0.1);
    color: #e5e7eb;
}

.netkagpt-reco-title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
}

.netkagpt-reco-subtitle {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.netkagpt-reco-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.netkagpt-reco-chip {
    border: none;
    font-size: 11px;
    padding: 10px 13px;
    border-radius: 999px;
    color: #6b7280;
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.14s ease-out, box-shadow 0.14s ease-out, background 0.14s ease-out, border-color 0.14s ease-out;
    max-width: 100%;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    border: 1px solid rgba(148, 163, 184, 0.5);
    line-height: 1.35;
}

    .netkagpt-reco-chip:hover {
        transform: translateY(-1px);
    }

    .netkagpt-reco-chip:focus,
    .netkagpt-reco-chip:active {
        outline: none !important;
        box-shadow: none !important;
        border-color: rgba(148, 163, 184, 0.5) !important;
        background: #f9fafb !important;
    }

.swal-text {
    text-align: center !important;
}

.page-item.active .page-link {
    z-index: 2 !important;
}

@keyframes heat-shimmer {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }

    50% {
        transform: translateY(-1.2px) scale(1.05);
        filter: brightness(1.2);
    }
}

@keyframes cloud-move {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(2.5px, -1.5px);
    }
}

@keyframes ray-advanced {
    0% {
        opacity: 0.4;
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        opacity: 1;
        transform: rotate(15deg) scale(1.2);
    }

    100% {
        opacity: 0.4;
        transform: rotate(0deg) scale(0.8);
    }
}

@keyframes slide-right {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.5;
    }

    50% {
        transform: translateX(3px);
        opacity: 1;
    }
}

@keyframes slide-left {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.5;
    }

    50% {
        transform: translateX(-3px);
        opacity: 1;
    }
}

#header-new {
    display: flex;
    align-items: center;
    height: 100%;
    /*padding-left: 20px;*/
    color: #000;
    font-weight: 600;
    font-size: 16px;
    margin-left: 8px;
}

    #header-new > i {
        margin-right: 5px !important;
    }

.ndpp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    margin: 0;
    line-height: 1.7;
    font-weight: 400;
    min-width: 0;
    overflow: hidden;
}

.ndpp-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ndpp-muted, #6b7280);
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: color .15s;
}

.ndpp-breadcrumb__item--current {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

    .ndpp-breadcrumb__item--current > span {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

a.ndpp-breadcrumb__item:hover,
a.ndpp-breadcrumb__item:focus {
    color: var(--danger-btn-button);
    text-decoration: none;
}

    .ndpp-breadcrumb__item--current {
        font-size: 13px;
        font-weight: 600;
        color: var(--ndpp-ink, #1f2937);
    }

    .ndpp-breadcrumb__sep {
        color: #c2c8d0;
        font-size: 12px;
        margin: 0 !important;
    }

[dir="rtl"] .ndpp-breadcrumb__sep {
    transform: scaleX(-1);
}

/* สีตั้งต้นก่อน SetMasterStyle โหลดสี theme จาก DB — ชุดเดียวกับ Use default ของหน้า Rebranding Config */
:root {
    --danger-header-background: #ffffff;
    --danger-sidebar-background: #ffffff;
    --danger-body-background: #f7f8fa;
}

/* หน้าหลักถูกซ่อนด้วย ng-cloak จน Angular พร้อม (_Layout) — ค่อย ๆ ขึ้นแทนการโผล่ทันที */
@keyframes ndppShellIn { from { opacity: 0; } }
body > .wrapper { animation: ndppShellIn .22s ease-out; }
@media (prefers-reduced-motion: reduce) { body > .wrapper { animation: none; } }

.nd-2025-sidebar {
    --nd-w-collapsed: 78px;
    --nd-w-hover: 284px;
    --nd-w-expanded: 284px;
    --nd-header-h: 69.8px;
    --nd-row-h: 50px;
    --nd-row2-h: 44px;
    --nd-r: 14px;
    --nd-r2: 12px;
    --nd-bg: #ffffff;
    --nd-border: #EDEEF0;
    --nd-text: #0F172A;
    --nd-muted: #64748B;
    --nd-muted2: #94A3B8;
    --nd-accent: var(--danger-btn-button, #00a898);
    --nd-accent-2: #2EB681;
    --nd-accent-soft: color-mix(in srgb, var(--danger-btn-button, #00a898) 5%, transparent);
    --nd-accent-softer: color-mix(in srgb, var(--danger-btn-button, #00a898) 6%, transparent);
    --nd-hover: rgba(15, 23, 42, .04);
    --nd-hover-2: rgba(15, 23, 42, .06);
    --nd-shadow: 0 18px 40px rgba(15,23,42,.10);
    --nd-shadow-soft: 0 12px 28px rgba(15,23,42,.08);
    --nd-focus: 0 0 0 3px color-mix(in srgb, var(--danger-btn-button, #00a898) 18%, transparent);
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    background: var(--danger-sidebar-background) !important;
    /*background: var(--nd-bg);*/
    color: var(--nd-muted);
    overflow: hidden;
    z-index: 1000;
    border-right: 1px solid var(--nd-border);
    transition: width .18s ease, box-shadow .18s ease, background .18s ease;
    font-size: 18px;
}

.nd-2025-sidebar__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nd-2025-sidebar__header {
    height: var(--nd-header-h);
    border-bottom: 1px solid var(--nd-border);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--danger-btn-button, #00a898) 4%, transparent), rgba(255,255,255,0));
}

.nd-2025-menu {
    flex: 1;
    padding: 15px 10px 16px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .nd-2025-menu::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.nd-2025-menu__lv1,
.nd-2025-menu__lv2 {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nd-2025-sidebar.nd-2025-sidebar--collapsed {
    width: var(--nd-w-collapsed);
    box-shadow: none;
}

.nd-2025-sidebar--collapsed .nd-2025-sidebar__header {
    justify-content: center;
    padding: 12px 10px;
}


.nd-2025-sidebar--collapsed .nd-2025-productmark {
    width: 50px;
    height: 50px;
    border-radius: var(--nd-r);
    background: #00c29205;
    border: 0;
    box-shadow: none;
    display: grid;
    place-items: center;
}

.nd-2025-sidebar--collapsed .logo-wrapper {
    width: 25px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: floating-premium 15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.nd-2025-sidebar--collapsed .logo-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.08));
    position: relative;
    transform-style: preserve-3d;
}

.nd-2025-sidebar--collapsed .floor-shadow {
    position: absolute;
    bottom: -6px;
    width: 80%;
    height: 2px;
    background: radial-gradient(ellipse at center, rgba(46, 182, 129, 0.3) 0%, rgba(255, 255, 255, 0) 80%);
    border-radius: 50%;
    filter: blur(2px);
    animation: shadow-behavior 15s ease-in-out infinite;
}

.nd-2025-sidebar--collapsed .logo-svg,
.nd-2025-sidebar--collapsed .logo-wrapper {
    will-change: transform, opacity;
}

@keyframes floating-premium {
    0% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(1);
    }

    8% {
        transform: translateY(-4px) rotateX(15deg) rotateY(-10deg) scale(1.1);
    }

    18% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(1);
    }

    100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(1);
    }
}

@keyframes shadow-behavior {
    0%, 18%, 100% {
        transform: scale(1);
        opacity: 0.5;
        filter: blur(2px);
    }

    8% {
        transform: scale(0.6);
        opacity: 0.2;
        filter: blur(3px);
    }
}


.nd-2025-sidebar--collapsed .nd-2025-menu__lv1link {
    width: 45px;
    height: 47px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 0;
    padding: 0 !important;
    margin: 0 auto 6px !important;
    border-radius: 12px;
    box-sizing: border-box;
    transition: background .15s ease, color .15s ease;
    cursor: pointer;
}

    .nd-2025-sidebar--collapsed .nd-2025-menu__lv1link:hover {
        background: var(--nd-hover-2);
    }

.nd-2025-sidebar--collapsed .nd-2025-menu__icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;
    color: #7991b4;
    transition: color .15s ease;
    margin: 0px !important;
}

    .nd-2025-sidebar--collapsed .nd-2025-menu__icon::before {
        display: block;
        line-height: 1;
        margin-right: 0px;
    }

.nd-2025-sidebar--collapsed .nd-2025-menu__text,
.nd-2025-sidebar--collapsed .nd-2025-menu__caret,
.nd-2025-sidebar--collapsed .nd-2025-menu__lv2 {
    display: none !important;
}

.nd-2025-sidebar.nd-2025-sidebar--hover {
    width: var(--nd-w-hover);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border-right: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 20px 40px rgb(15 23 42 / 5%), inset 0 1px 0 rgba(255, 255, 255, .65);
}

.nd-2025-sidebar--hover .nd-2025-expandbtn {
    width: 100%;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    justify-content: space-between;
    color: #475569;
}

    .nd-2025-sidebar--hover .nd-2025-expandbtn:hover {
        transform: translateY(-1px);
        background: #f8fafc;
    }

.nd-2025-expandbtn__text {
    font-size: 14px;
    font-weight: 500;
}

@keyframes elegant-float {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-0.8px);
        opacity: 1;
    }
}

@keyframes playful-shuffle {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }

    25% {
        transform: translateX(-2.5px) rotate(-3deg);
    }

    75% {
        transform: translateX(2.5px) rotate(3deg);
    }
}

.svg-container {
    width: 12px;
    height: 10px;
    overflow: visible;
}

.bar {
    fill: #00A898;
    transform-origin: center;
}

.bar-top {
    animation-delay: 0s;
}

.bar-mid {
    animation-delay: 0.4s;
}

.bar-bot {
    animation-delay: 0.8s;
}

.nd-2025-expandbtn:hover .bar {
    animation: playful-shuffle 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
    opacity: 1;
}

.nd-2025-expandbtn:hover .bar-mid {
    animation-direction: reverse;
    animation-delay: 0.05s;
}

.nd-2025-expandbtn__text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--danger-btn-button, #00a898);
}

.nd-2025-sidebar--hover .nd-2025-menu__lv1link,
.nd-2025-sidebar--pinned .nd-2025-menu__lv1link {
    height: var(--nd-row-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: var(--nd-r);
    text-decoration: none;
    color: var(--nd-text);
    margin: 0 0 6px !important;
    position: relative;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

    .nd-2025-sidebar--hover .nd-2025-menu__lv1link:hover,
    .nd-2025-sidebar--pinned .nd-2025-menu__lv1link:hover {
        background: var(--nd-hover-2);
    }

.nd-2025-sidebar--hover .nd-2025-menu__icon,
.nd-2025-sidebar--pinned .nd-2025-menu__icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #7991b4;
    font-size: 15px;
    background: transparent;
    transition: color .15s ease;
    margin: 0px;
}

.nd-2025-sidebar--hover .nd-2025-menu__lv1link:hover .nd-2025-menu__icon,
.nd-2025-sidebar--pinned .nd-2025-menu__lv1link:hover .nd-2025-menu__icon,
.nd-2025-sidebar--collapsed .nd-2025-menu__lv1link:hover .nd-2025-menu__icon {
    color: #334155;
    margin: 0px;
}

.nd-2025-sidebar--hover .nd-2025-menu__text,
.nd-2025-sidebar--pinned .nd-2025-menu__text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    color: var(--nd-text);
    font-weight: 500;
    letter-spacing: .1px;
}

.nd-2025-menu__caret {
    width: 28px;
    height: 28px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    opacity: .9;
    transition: background .15s ease, transform .15s ease;
}

    .nd-2025-menu__caret::before {
        content: "";
        width: 4.5px;
        height: 4.5px;
        border-right: 1.25px solid currentColor;
        border-bottom: 1.25px solid currentColor;
        border-radius: 0 0 1px 0;
        transform: translateX(-.75px) rotate(-45deg);
        transition: transform .2s ease;
    }

    .nd-2025-menu__caret.is-open::before {
        transform: translateY(-1px) rotate(45deg);
    }

.nd-2025-sidebar--hover .nd-2025-menu__lv1link:hover .nd-2025-menu__caret,
.nd-2025-sidebar--pinned .nd-2025-menu__lv1link:hover .nd-2025-menu__caret {
    background: rgba(15,23,42,.04);
}

.nd-2025-sidebar.nd-2025-sidebar--pinned {
    width: var(--nd-w-expanded);
}

.nd-2025-sidebar--pinned .nd-2025-header--pinned {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nd-2025-sidebar--pinned .nd-2025-productbrand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.nd-2025-sidebar--pinned .nd-2025-productbrand__img {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

/* ---------- LV2 (submenu) ---------- */

.nd-2025-sidebar--hover .nd-2025-menu__lv2,
.nd-2025-sidebar--pinned .nd-2025-menu__lv2 {
    margin: 0px 0 10px;
    padding: 0px 0px 0px 8px;
    border-radius: 14px;
    background: rgba(15, 23, 42, .02);
}

.nd-2025-menu__lv2item {
    margin: 0;
}

.nd-2025-sidebar--hover .nd-2025-menu__lv2link,
.nd-2025-sidebar--pinned .nd-2025-menu__lv2link {
    height: var(--nd-row2-h);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0px 9px 0px 19px;
    border-radius: 12px;
    color: var(--nd-muted);
    text-decoration: none;
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
}

    .nd-2025-sidebar--hover .nd-2025-menu__lv2link:hover,
    .nd-2025-sidebar--pinned .nd-2025-menu__lv2link:hover {
        background: rgba(15,23,42,.04);
    }

.nd-2025-menu__icon--sm {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

.nd-2025-menu__group.is-active > .nd-2025-menu__lv1link {
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 9%, transparent);
    font-weight: 600;
    color: var(--danger-btn-button, #00a898);
}

    .nd-2025-menu__group.is-active > .nd-2025-menu__lv1link::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 50%;
        height: 20px;
        width: 3px;
        transform: translateY(-50%);
        border-radius: 0 3px 3px 0;
        background: var(--danger-btn-button) !important;
    }

    .nd-2025-sidebar--collapsed .nd-2025-menu__group.is-active > .nd-2025-menu__lv1link::before {
        left: -16px;
    }

.nd-2025-menu__group.is-active::before {
    content: none !important;
}

.nd-2025-menu__group.is-active > .nd-2025-menu__lv1link .nd-2025-menu__icon {
    color: var(--nd-accent);
}

.nd-2025-menu__group.is-active > .nd-2025-menu__lv1link .nd-2025-menu__text {
    color: var(--nd-accent);
}

.nd-2025-menu__lv2item.is-active-sub > .nd-2025-menu__lv2link .nd-2025-menu__icon {
    background: rgba(16,185,129,.10);
    color: #059669;
}

.nd-2025-menu__group > .nd-2025-menu__lv1link,
.nd-2025-menu__lv2link {
    box-sizing: border-box;
}

    .nd-2025-menu__lv1link:focus-visible,
    .nd-2025-menu__lv2link:focus-visible,
    .nd-2025-expandbtn:focus-visible,
    .nd-2025-pinclose:focus-visible {
        outline: none;
        box-shadow: var(--nd-focus);
    }

.nd-2025-menu__lv2 {
    transform-origin: top;
}

.nd-2025-menu__group .nd-2025-menu__lv2 {
    animation: ndSubFadeIn .16s ease both;
}

@keyframes ndSubFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-wrapper {
    position: relative;
    width: 28px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: floating-premium 15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.logo-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.08));
    position: relative;
    transform-style: preserve-3d;
}

.floor-shadow {
    position: absolute;
    bottom: -6px;
    width: 86%;
    height: 2px;
    background: radial-gradient(ellipse at center, rgba(46, 182, 129, 0.28) 0%, rgba(255, 255, 255, 0) 80%);
    border-radius: 50%;
    filter: blur(2px);
    animation: shadow-behavior 15s ease-in-out infinite;
}

.logo-svg, .logo-wrapper {
    will-change: transform, opacity;
}


.nd-2025-menu__group.is-open > .nd-2025-menu__lv1link {
    border-radius: 16px;
    transform: translateY(-1px);
}

    .nd-2025-menu__group.is-open > .nd-2025-menu__lv1link .nd-2025-menu__icon {
        color: var(--danger-btn-button, #00a898);
    }

    .nd-2025-menu__group.is-open > .nd-2025-menu__lv1link .nd-2025-menu__text {
        color: var(--danger-btn-button, #00a898);
    }

.nd-2025-menu__group.is-open:not(.is-active) > .nd-2025-menu__lv1link {
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 10%, transparent);
    color: var(--danger-btn-button, #00a898);
}

.nd-2025-menu__lv2link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nd-lv2-marker {
    position: relative;
    width: 5px;
    height: 44px;
    flex: 0 0 5px;
}

    .nd-lv2-marker svg {
        position: absolute;
        inset: 0;
        transition: opacity .15s ease, transform .15s ease;
    }

.nd-lv2-marker__line {
    opacity: 1;
}

.nd-lv2-marker__dot,
.nd-lv2-marker__hover {
    opacity: 0;
    transform: scale(0.9);
}

.nd-2025-menu__lv2link.is-hover:not(.is-active)
.nd-lv2-marker__line {
    opacity: 0;
}

.nd-2025-menu__lv2link.is-hover:not(.is-active)
.nd-lv2-marker__hover {
    opacity: 1;
    transform: scale(1);
}

.nd-2025-menu__lv2link.is-active
.nd-lv2-marker__line,
.nd-2025-menu__lv2link.is-active
.nd-lv2-marker__hover {
    opacity: 0;
}

.nd-2025-menu__lv2link.is-active
.nd-lv2-marker__dot {
    opacity: 1;
    transform: scale(1);
}

.nd-2025-menu tspan {
    display: none !important;
}

.nd-2025-search {
    padding: 5px 10px 10px 10px;
}

.nd-2025-sidebar {
    --nd-search-accent: var(--nd-accent);
}

.nd-2025-search {
    width: 100%;
    box-sizing: border-box;
}

    .nd-2025-search.nd-search--collapsed {
        padding: 17px 10px 0px;
        display: flex;
        justify-content: center;
    }

    .nd-2025-search.nd-search--hover,
    .nd-2025-search.nd-search--pinned {
        padding: 17px 13px 0px;
    }

.nd-search__iconbtn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.78);
    place-items: center;
    cursor: pointer;
    position: relative;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

    .nd-search__iconbtn i {
        font-size: 14px;
        color: var(--nd-search-accent);
    }

    .nd-search__iconbtn:hover {
        background: rgba(255,255,255,.96);
        box-shadow: 0 12px 22px rgba(15,23,42,.10);
        transform: translateY(-1px);
    }

    .nd-search__iconbtn:active {
        transform: translateY(0);
        box-shadow: 0 7px 14px rgba(15,23,42,.09);
    }

.nd-search__bar {
    height: 42px;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.10);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 12px;
    box-sizing: border-box;
    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.nd-2025-search.nd-search--hover .nd-search__bar {
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(12px) saturate(1.12);
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
}

    .nd-2025-search.nd-search--hover .nd-search__bar:hover {
        background: rgba(255,255,255,.90);
        transform: translateY(-1px);
    }

.nd-2025-search.nd-search--pinned .nd-search__bar {
    background: #fff;
}

    .nd-2025-search.nd-search--pinned .nd-search__bar:hover {
        box-shadow: 0 16px 26px rgba(15,23,42,.10);
        transform: translateY(-1px);
    }


.nd-search__icon {
    font-size: 10px !;
    color: var(--nd-muted);
    opacity: .95;
    padding: 8px;
    transition: color .15s ease, opacity .15s ease;
}

.nd-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--nd-text);
}

    .nd-search__input::placeholder {
        color: var(--nd-muted2);
    }

.nd-search__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    opacity: .92;
    transition: opacity .15s ease;
}

.nd-search__keycap {
    height: 22px;
    min-width: 26px;
    padding: 0 8px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: var(--nd-muted);
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    user-select: none;
    pointer-events: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.nd-search__hintText {
    font-size: 12px;
    font-weight: 500;
    color: #9ca9bd;
    letter-spacing: .15px;
    user-select: none;
    pointer-events: none;
    transition: color .15s ease, opacity .15s ease;
}

.nd-search__clearText {
    margin-left: auto;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 500;
    color: #E93959;
    letter-spacing: .15px;
    cursor: pointer;
    border-radius: 8px;
    user-select: none;
    transition: color .15s ease, background .15s ease, transform .12s ease;
}

    .nd-search__clearText:hover {
        color: #E93959;
        background: rgba(233,57,89,.0.8);
    }

    .nd-search__clearText:active {
        transform: translateY(1px);
    }

.nd-search__bar:hover .nd-search__clearText,
.nd-search__bar:focus-within .nd-search__clearText {
    color: #E93959;
}

.nd-search--hover .nd-search__icon,
.nd-search--pinned .nd-search__icon {
    font-size: 12px;
    opacity: .85;
}

.nd-search__bar:focus-within {
    background: rgba(255,255,255,.96);
}

.nd-marquee {
    position: relative;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nd-marquee__inner {
    display: inline-block;
    white-space: nowrap;
    transform: translateX(0);
    will-change: transform;
}

.nd-marquee.nd-marquee--overflow:hover {
    text-overflow: clip;
}

    .nd-marquee.nd-marquee--overflow:hover .nd-marquee__inner {
        animation: nd-marquee-move var(--nd-marquee-duration, 2.8s) linear infinite;
    }

@keyframes nd-marquee-move {
    0% {
        transform: translateX(0);
    }

    12% {
        transform: translateX(0);
    }

    88% {
        transform: translateX(calc(-1 * var(--nd-marquee-distance, 0px)));
    }

    100% {
        transform: translateX(calc(-1 * var(--nd-marquee-distance, 0px)));
    }
}

#header-new img {
    max-height: 15px;
    width: 15px;
    margin-right: 15px;
}

.nd-2025-productbrandtop {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
}

.nd-2025-productbrand__logo {
    width: 26px;
    height: auto;
    display: block;
    margin-right: 15px;
}

.nd-2025-productbrand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.nd-2025-productbrand__title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nd-2025-productbrand__sub {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nd-2025-pinclose {
    margin-left: auto;
    width: 25px;
    height: 25px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    user-select: none;
    border: 1px solid rgba(226, 232, 240, 1);
    background: rgba(248, 250, 252, 0.9);
    color: #050606;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

    .nd-2025-pinclose:hover {
        background: #fff;
        color: #0F172A;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
        transform: translateY(-1px);
    }

    .nd-2025-pinclose:active {
        transform: translateY(0px) scale(0.98);
        box-shadow: none;
    }

    .nd-2025-pinclose:focus {
        outline: none;
    }

    .nd-2025-pinclose:focus-visible {
        outline: 2px solid rgba(34, 197, 94, 0.35);
        outline-offset: 2px;
    }

.header2025-announce-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 360px;
    background: linear-gradient(135deg, #0ea5a4, #0d9488);
    color: #fff;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 14px 36px rgba(0,0,0,.25);
    z-index: 1050;
    animation: toastFadeUp .25s ease-out;
}

@keyframes toastFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.announce-toast-content {
    padding-right: 36px;
}

.announce-toast-item {
    display: block;
    color: inherit;
    text-decoration: none;
}

.announce-toast-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.announce-toast-icon {
    opacity: .9;
}

.announce-toast-title {
    letter-spacing: .3px;
}

.announce-toast-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.announce-toast-subject {
    max-width: 70%;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.announce-toast-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    opacity: .85;
}

.announce-toast-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
}

    .announce-toast-toggle a {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: #fff;
    }

        .announce-toast-toggle a:hover {
            background: rgba(255,255,255,.18);
        }

.announce-toast {
    position: fixed;
    right: 9px;
    bottom: 93px;
    z-index: 2;
    width: 310px;
    gap: 10px;
    cursor: pointer;
    background: #fff;
    display: grid;
    padding: 10px;
    border-radius: 25px;
    box-shadow: 0 18px 34px rgb(15 23 42 / 6%);
}

.announce-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(22,169,224,0.10));
    box-shadow: 0 12px 28px rgb(15 23 42 / 5%);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .announce-row:hover {
        transform: translateY(-2px);
        border-color: rgba(34,197,94,0.45);
    }

.announce-left {
    flex: 0 0 auto;
}

.announce-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22C55E, #16A9E0);
    box-shadow: 0 10px 18px rgba(16,185,129,0.22);
}

    .announce-badge i {
        color: #fff;
        font-size: 14px;
    }

.announce-body {
    flex: 1 1 auto;
    min-width: 0;
}

.announce-title {
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.announce-meta {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 400;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .announce-meta i {
        opacity: .9;
    }

.announce-right {
    flex: 0 0 auto;
    color: #c7cacf;
    transition: transform .18s ease, color .18s ease;
    font-size: 10px;
}

.announce-row:hover .announce-right {
    transform: translateX(2px);
    color: #0EA5A4;
}

.header2025-subscription__pill {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #ff910f5e;
    background: #ffffff;
    padding: 3px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s position: relative;
    overflow: hidden;
    will-change: transform, filter;
    isolation: isolate;
}

    .header2025-subscription__pill:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, .0.08);
        filter: saturate(1.05);
    }

.header2025-subscription__icon {
    width: 9px;
    height: 23px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    animation: header2025-sub-bob .65s ease-in-out infinite;
    justify-content: center;
}

.header2025-subscription__content {
    display: flex;
    gap: 7px;
    align-items: center;
}

.header2025-subscription__title {
    font-size: 12px;
    font-weight: 500;
    color: #FF910F;
    letter-spacing: .2px;
    margin-top: 2px;
}

.header2025-subscription__desc {
    font-size: 12px;
    color: #FF910F;
    font-weight: 500;
}

.header2025-subscription__days {
    color: #FF910F;
    font-weight: 900;
    margin: 0px 7px;
    font-size: 16px;
}

.header2025-subscription__cta {
    margin-left: auto;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
    color: #111827;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header2025-subscription__link {
    display: inline-block;
    text-decoration: none !important;
}

.header2025-subscription__pill {
    position: relative;
    overflow: hidden;
    will-change: transform, filter;
    isolation: isolate;
}

    .header2025-subscription__pill::before {
        content: "";
        position: absolute;
        inset: -2px;
        transform: translateX(-120%) skewX(-18deg);
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }

    .header2025-subscription__pill::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: inherit;
        opacity: .0;
        filter: blur(10px);
        pointer-events: none;
        z-index: 0;
    }

    .header2025-subscription__pill > * {
        position: relative;
        z-index: 1;
    }

.header2025-subscription__link:hover .header2025-subscription__pill {
    transform: translateY(-2px);
    filter: saturate(1.08);
}

    .header2025-subscription__link:hover .header2025-subscription__pill::before {
        opacity: 1;
        animation: header2025-sub-glint .85s ease-out forwards;
    }

    .header2025-subscription__link:hover .header2025-subscription__pill::after {
        opacity: 1;
        animation: header2025-sub-glow 1.2s ease-out forwards;
    }

.header2025-subscription__icon {
    transform: translateZ(0);
    will-change: transform;
}

.header2025-subscription__link:hover .header2025-subscription__icon {
    animation: header2025-sub-bob .65s ease-in-out infinite;
}

.header2025-subscription__days {
    display: inline-block;
    transform: translateZ(0);
    will-change: transform, filter;
}

.header2025-subscription__link:hover .header2025-subscription__days {
    animation: header2025-sub-pop .35s ease-out forwards;
}

.header2025-subscription__cta {
    transition: transform .15s ease, background .15s ease, filter .15s ease;
}

.header2025-subscription__link:hover .header2025-subscription__cta {
    transform: translateX(1px);
    background: rgba(255, 255, 255, .18);
    filter: saturate(1.05);
}

.header2025-subscription.is-expiring .header2025-subscription__pill {
    animation: header2025-sub-breathe 2.2s ease-in-out infinite;
}

.header2025-subscription__link:focus-visible .header2025-subscription__pill {
    outline: 2px solid rgba(255,219,0,.55);
    outline-offset: 3px;
}

@keyframes header2025-sub-glint {
    from {
        transform: translateX(-120%) skewX(-18deg);
    }

    to {
        transform: translateX(120%) skewX(-18deg);
    }
}

@keyframes header2025-sub-glow {
    0% {
        opacity: 0;
        transform: scale(.98);
    }

    60% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: .65;
        transform: scale(1.02);
    }
}

@keyframes header2025-sub-bob {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

@keyframes header2025-sub-pop {
    0% {
        transform: scale(1);
    }

    55% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1.06);
    }
}

@keyframes header2025-sub-breathe {
    0%,100% {
        filter: saturate(1);
    }

    50% {
        filter: saturate(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header2025-subscription__pill,
    .header2025-subscription__pill::before,
    .header2025-subscription__pill::after,
    .header2025-subscription__icon,
    .header2025-subscription__days {
        animation: none !important;
        transition: none !important;
    }
}

.form-inline.pull-right button .fa-plus {
    margin-right: 10px;
}

button.btn.btn-danger > i.fa-plus {
    margin-right: 10px;
}

label > i.fa-search {
    margin-right: 5px;
}

.dropdown-toggle:after {
    margin-right: 0;
}

button[date-range-picker] span > i.fa-caret-down {
    margin-left: 11px;
}

a.btn.btn-danger > i.fa-plus {
    margin-right: 10px;
}

button[date-range-picker] > i.fa-clock-o {
    margin-right: 5px;
}

button.btn.btn-secondary > i.mdi {
    margin-right: 10px;
}

button.btn.btn-default > i.fa-plus {
    margin-right: 10px;
}

button.btn.btn-secondary > i.fa-edit {
    margin-right: 10px;
}

.nd-2025-flyout {
    position: fixed;
    width: auto;
    min-width: 256px;
    padding: 10px;
    overflow-y: auto;
    border-radius: 14px;
    z-index: 99999;
    background: var(--danger-sidebar-background) !important;
    border: 1px solid #EDEEF0;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
    transform-origin: left center;
    animation: ndFlyoutIn .16s cubic-bezier(.2, .9, .2, 1) both;
}

.nd-2025-flyout-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    color: #0F172A;
    border-bottom: 1px solid #F1F2F4;
}

.nd-2025-flyout-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 0;
}

.nd-2025-flyout-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: #1E293B;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: 0;
    transition: background .15s ease, color .15s ease;
}

    .nd-2025-flyout-item:hover {
        background: rgba(15, 23, 42, .035);
        color: #0F172A;
        text-decoration: none;
    }

    .nd-2025-flyout-item:active {
        background: rgba(15, 23, 42, .08);
    }

    .nd-2025-flyout-item:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger-btn-button, #00a898) 35%, transparent);
    }

    .nd-2025-flyout-item.is-active {
        background: color-mix(in srgb, var(--danger-btn-button, #00a898) 9%, transparent);
        color: var(--danger-btn-button, #00a898);
        font-weight: 600;
    }

.nd-2025-flyout-icon {
    width: 18px;
    min-width: 18px;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: #7991b4;
    transition: color .15s ease;
}

.nd-2025-flyout-item:hover .nd-2025-flyout-icon {
    color: #334155;
}

.nd-2025-flyout-item.is-active .nd-2025-flyout-icon {
    color: var(--danger-btn-button, #00a898);
}

.nd-2025-flyout-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: inherit;
}

.nd-2025-flyout::-webkit-scrollbar {
    width: 8px;
}

.nd-2025-flyout::-webkit-scrollbar-track {
    background: transparent;
}

.nd-2025-flyout::-webkit-scrollbar-thumb {
    background: rgba(17, 24, 39, 0.14);
    border-radius: 999px;
}

    .nd-2025-flyout::-webkit-scrollbar-thumb:hover {
        background: rgba(17, 24, 39, 0.22);
    }

@keyframes ndFlyoutIn {
    from {
        opacity: 0;
        transform: translateX(-6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nd-2025-flyout {
        animation: none !important;
    }

    .nd-2025-flyout-item {
        transition: none !important;
    }
}

.nd-2025-pin-toggle {
    position: fixed;
    top: 23px;
    left: 66px;
    z-index: 1001;
    width: 24px;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #64748B;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
    cursor: pointer;
    outline: none;
    transition: left .18s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}

    .nd-2025-pin-toggle.is-wide {
        left: 272px;
    }

    .nd-2025-pin-toggle:hover {
        color: var(--danger-btn-button, #00a898);
        border-color: color-mix(in srgb, var(--danger-btn-button, #00a898) 45%, transparent);
        box-shadow: 0 4px 10px rgba(15, 23, 42, .10);
    }

    .nd-2025-pin-toggle:focus {
        outline: none;
    }

    .nd-2025-pin-toggle:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-btn-button, #00a898) 25%, transparent);
    }

    .nd-2025-pin-toggle::-moz-focus-inner {
        border: 0;
    }

    .nd-2025-pin-toggle > .ndpp-ico {
        width: 14px;
        height: 14px;
        transition: transform .18s ease;
    }

    .nd-2025-pin-toggle.is-pinned > .ndpp-ico {
        transform: rotate(180deg);
    }

.main-header.header2025 #header-new {
    margin-left: 28px;
}

.nd-2025-productbrand__shortcut {
    position: relative;
    margin-left: auto;
    padding: 0;
    display: grid;
    place-items: center;
    flex: none;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

    .nd-2025-productbrand__shortcut:hover .nd-2025-productbrand__kbd {
        color: var(--danger-btn-button, #00a898);
        border-color: color-mix(in srgb, var(--danger-btn-button, #00a898) 45%, transparent);
    }

    .nd-2025-productbrand__shortcut:focus {
        outline: none;
    }

    .nd-2025-productbrand__shortcut:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-btn-button, #00a898) 25%, transparent);
    }

.nd-2025-productbrand__tip {
    position: absolute;
    top: 50%;
    right: calc(100% + 6px);
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    white-space: nowrap;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: #334155;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    opacity: 0;
    transform: translate(4px, -50%);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.nd-2025-productbrand__shortcut:hover .nd-2025-productbrand__tip,
.nd-2025-productbrand__shortcut:focus-visible .nd-2025-productbrand__tip {
    opacity: 1;
    transform: translate(0, -50%);
}

.nd-2025-productbrand__kbd {
    box-sizing: border-box;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #64748B;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: color .15s ease, border-color .15s ease;
}

.nd-2025-sidebar--collapsed .nd-2025-productmark {
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    outline: none;
    transition: background .15s ease;
}

.nd-2025-productmark .logo-wrapper {
    transition: opacity .15s ease;
}

.nd-2025-productmark__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--danger-btn-button, #00a898);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

    .nd-2025-productmark__hint > kbd {
        box-sizing: border-box;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        color: #64748B;
        background: #fff;
        border: 1px solid #E2E8F0;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }

.nd-2025-sidebar--collapsed .nd-2025-productmark:hover,
.nd-2025-sidebar--collapsed .nd-2025-productmark:focus-visible {
    background: rgba(15, 23, 42, .04);
}

    .nd-2025-sidebar--collapsed .nd-2025-productmark:hover .logo-wrapper,
    .nd-2025-sidebar--collapsed .nd-2025-productmark:focus-visible .logo-wrapper {
        opacity: 0;
    }

    .nd-2025-sidebar--collapsed .nd-2025-productmark:hover .nd-2025-productmark__hint,
    .nd-2025-sidebar--collapsed .nd-2025-productmark:focus-visible .nd-2025-productmark__hint {
        opacity: 1;
    }

.nd-2025-sidebar--collapsed .nd-2025-productmark .logo-wrapper {
    animation: floating-premium 15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite, ndPmLogoSwap 30s ease-in-out infinite;
}

.nd-2025-sidebar--collapsed .nd-2025-productmark__hint {
    animation: ndPmHintSwap 30s ease-in-out infinite;
}

.nd-2025-sidebar--collapsed .nd-2025-productmark:hover .logo-wrapper,
.nd-2025-sidebar--collapsed .nd-2025-productmark:focus-visible .logo-wrapper {
    animation: floating-premium 15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.nd-2025-sidebar--collapsed .nd-2025-productmark:hover .nd-2025-productmark__hint,
.nd-2025-sidebar--collapsed .nd-2025-productmark:focus-visible .nd-2025-productmark__hint {
    animation: none;
}

@keyframes ndPmLogoSwap {
    0%, 82%, 100% {
        opacity: 1;
    }

    84%, 98% {
        opacity: 0;
    }
}

@keyframes ndPmHintSwap {
    0%, 82%, 100% {
        opacity: 0;
    }

    84%, 98% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nd-2025-sidebar--collapsed .nd-2025-productmark .logo-wrapper,
    .nd-2025-sidebar--collapsed .nd-2025-productmark__hint {
        animation: none;
    }
}

@media (max-width: 991px) {
    .nd-2025-pin-toggle {
        display: none;
    }
}

@media (max-width: 991px) {

    .nd-2025-sidebar--collapsed {
        display: none !important;
    }

    .content-wrapper,
    .nq2025-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .nd-2025-flyout {
        display: none !important;
    }

    .navbar {
        position: static;
    }

    #header-new {
        position: static;
    }
}

body.header2025-search-open .wrapper,
body.header2025-search-open .content-wrapper,
body.header2025-search-open .main-header {
    transform: none !important;
    filter: none !important;
}

.header2025-search-overlay {
    position: fixed;
    top: 0;
    left: -55px;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding-top: 10vh;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .header2025-search-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

.header2025-search-panel {
    width: 100%;
    max-width: 570px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 5px 28px -5px rgb(0 0 0 / 31%), 0 10px 10px -5px rgb(0 0 0 / 9%);
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 53vh;
}

.header2025-search-overlay.is-open .header2025-search-panel {
    transform: translateY(0);
}

.header2025-search-input-wrap {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}

.search-icon {
    font-size: 14px;
    color: #64748b;
    margin-right: 12px !important;
}

.header2025-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    color: #1e293b;
    background: transparent;
}

/* Shortcuts & Buttons */
kbd {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    font-family: sans-serif;
    color: #64748b;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.search-shortcut {
    display: flex;
    gap: 4px;
    align-items: center;
}

.search-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    margin-right: 8px;
    transition: color 0.2s;
}

    .search-clear:hover {
        color: #ef4444;
    }

.header2025-search-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
    min-height: 0;
}

.search-empty {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 11px;
}

.search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 4px;
}

    .search-item.is-active {
        background: #f1f5f9;
    }

.search-item-title {
    font-size: 13px;
    color: #334155;
    font-weight: 500;
}

.search-item-action {
    opacity: 0;
    transition: opacity .2s ease;
}

.search-item.is-show-enter .search-item-action {
    opacity: 1;
}

.sk-row {
    padding: 12px 16px;
}

.sk-t {
    height: 16px;
    background: #f1f5f9;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

    .sk-t::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
        animation: shimmer 1.5s infinite;
    }

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.header2025-search-footer {
    flex: 0 0 auto;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.search-footer-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

    .search-footer-split .hint-left,
    .search-footer-split .hint-right {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
    }

    .search-footer-split .hint-or {
        opacity: .4;
        font-size: 11px;
    }

.search-footer-hint {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    font-size: 13px;
    color: #64748b;
}

.header2025-search .header2025-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
}


body.header2025-search-expanded
.header2025-search .header2025-search-label {
    max-width: 140px;
    opacity: 1;
    transform: translateX(0);
}

.header2025-search .header2025-search-btn {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0;
    gap: 0;
    transition: width .35s ease, border-radius .35s ease;
}

.header2025-search .header2025-search-label {
    position: absolute;
    left: 44px;
    top: 51%;
    transform: translateY(-50%) translateX(-6px);
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    font-size: 12px;
    font-weight: 500;
    color: #000;
    transition: opacity .2s ease, transform .35s ease;
}

body.header2025-search-expanded
.header2025-search .header2025-search-btn {
    width: 160px;
    border-radius: 999px;
    justify-content: flex-start;
    padding: 10px;
}

body.header2025-search-expanded
.header2025-search .header2025-search-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.header2025-icon {
    color: var(--danger-btn-button);
}
/* User Profile Page */
.UP-page {
    max-width: 1380px;
    margin-inline: auto;
    padding-inline: 32px;
    margin-top: 32px;
    margin-bottom: 32px;
}

@media (min-width: 1600px) {
    .UP-page {
        max-width: 1580px;
        padding-inline: 48px;
    }
}

@media (min-width: 1900px) {
    .UP-page {
        max-width: 1580px;
        padding-inline: 56px;
    }
}

@media (max-width: 991.98px) {
    .UP-page {
        padding-inline: 20px;
    }

    .UP-layout {
        column-gap: 16px;
        flex-direction: column;
    }

    .lock-options {
        flex-direction: column;
    }

    .skill-row-card {
        margin-bottom: 15px;
        border-bottom: 1px solid #d5d3d3;
        border-radius: 0px !important;
    }
}

@media (max-width: 575.98px) {
    .UP-page {
        padding-inline: 16px;
    }
}

.UP-layout {
    gap: 16px;
    display: flex;
    justify-content: center;
}

.UP-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #EDEEF0;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, .06); */
    padding: 25px;
}

.UP-sidebar {
    position: sticky;
    top: 24px;
}

.UP-avatar-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin: auto;
}

.UP-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.UP-avatar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.UP-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient( 180deg, rgba(0,0,0,.35), rgba(0,0,0,.6) );
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    cursor: pointer;
    transition: opacity .2s ease;
    backdrop-filter: blur(2px);
    margin-bottom: 0px !important;
}

.UP-avatar-wrap:hover .UP-avatar-overlay {
    opacity: 1;
}

.UP-avatar-overlay i {
    font-size: 20px;
    line-height: 1;
    margin-top: 5px;
    display: block;
    margin-right: 0px !important;
}

.UP-avatar-overlay span {
    font-size: 11px !important;
    margin-top: 6px;
    line-height: 1;
    text-align: center;
}

.UP-avatar-overlay span {
    font-size: 12px;
}

.UP-name {
    text-align: center;
    font-weight: 600;
    margin: 10px 0 6px;
    font-size: 16px;
}

.UP-rank {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.UP-rank-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.UP-info {
    display: grid;
    margin-top: 14px;
}

.UP-info-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px;
}

.UP-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.UP-info-label {
    font-size: 13px;
    color: #0000007a;
    font-weight: 500;
    line-height: 1.2;
}

.UP-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.UP-info-value {
    font-size: 13px;
    font-weight: 400;
    color: #000000;
    line-height: 1.4;
    word-break: break-word;
}

.box-body-UP {
    padding: 0rem 1.25rem 1.25rem 1.25rem;
}

.UP-tabs {
    margin-bottom: 12px;
}

.UP-tab-content {
    padding-top: 8px;
}

.UP-section-title {
    color: var(--danger-btn-button);
    font-weight: 600;
    margin: 20px 0 20px;
}

.UP-main .form-control {
    border-radius: 5px;
    border-color: #DBDCE1;
}

.btn-danger.px-50 {
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .UP-sidebar {
        position: static;
    }
}

.UP-tabs {
    border-bottom: 0 !important;
    background-image: linear-gradient(to right, #efefef 0%, #ebebeb 100%);
    border-radius: 9px;
    padding: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
    max-width: 454px;
}

    .UP-tabs .nav-item {
        flex: 1 1 0;
        text-align: center;
    }

        .UP-tabs .nav-item > a {
            display: block;
            border: 0 !important;
            background: transparent;
            color: #0000007a;
            font-weight: 500;
            padding: 10px 16px;
            border-radius: 8px;
            line-height: 1.25;
            transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
            cursor: pointer;
        }

            .UP-tabs .nav-item > a:hover {
                background: rgba(255,255,255,.6);
                color: #6b7280;
            }

            .UP-tabs .nav-item > a.active,
            .UP-tabs .nav-item > a[aria-selected="true"] {
                background: #ffffff;
                color: var(--danger-btn-button);
                box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 12px rgba(0,0,0,.06);
            }

            .UP-tabs .nav-item > a:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(213,75,75,.12), 0 1px 2px rgba(0,0,0,.06), 0 6px 12px rgba(0,0,0,.06);
            }

@media (max-width: 575.98px) {
    .UP-tabs .nav-item > a {
        padding: 8px 12px;
        font-size: 14px;
    }
}

.UP-page .btn[origin="Choose File"],
.UP-page button[origin="Choose File"] {
    background: none !important;
    border: none !important;
    color: #1f7ae0 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    text-decoration: none;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

    .UP-page button[origin="Choose File"]:hover {
        text-decoration: underline !important;
        color: #1458b0 !important;
    }

    .UP-page .btn[origin="Choose File"]:focus,
    .UP-page button[origin="Choose File"]:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.UP-page .btn[origin="Choose File"],
.UP-page button[origin="Choose File"] {
    background-color: transparent !important;
    border-radius: 0 !important;
    line-height: 1.2;
    width: 100%;
    margin-top: 20px;
}

.UP-info-row {
    opacity: 0;
    transform: translateY(10px);
    animation: UPfadeIn 0.5s ease forwards;
}

    .UP-info-row:nth-child(1) {
        animation-delay: 0.1s;
    }

    .UP-info-row:nth-child(2) {
        animation-delay: 0.2s;
    }

    .UP-info-row:nth-child(3) {
        animation-delay: 0.3s;
    }

    .UP-info-row:nth-child(4) {
        animation-delay: 0.4s;
        background: #f5f6f8;
    }

@keyframes UPfadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.UP-info-row {
    transition: background 0.25s ease, transform 0.2s ease;
    border-radius: 8px;
    padding: 15px 10px;
}

    .UP-info-row:hover {
        background: #f5f6f8;
        transform: translateY(-2px);
    }

        .UP-info-row:hover .UP-info-icon svg {
            transform: scale(1.15) rotate(4deg);
            opacity: 1;
        }

.UP-info-icon svg {
    color: var(--danger-btn-button);
    opacity: 1;
    transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.UP-inline-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.UP-label-action {
    display: inline-flex;
    align-items: center;
    padding-left: 4px;
}

.UP-main .form-group {
    margin-bottom: 14px;
}

.UP-main .select2-container--default .select2-selection--single {
    height: 34px;
    border-radius: 10px;
    border-color: #e5e7eb;
}

.UP-main .select2-selection__rendered {
    line-height: 40px;
}

.UP-main .select2-selection__arrow {
    height: 25px;
}

.UP-main .select2-selection--multiple {
    min-height: 44px;
    border-radius: 10px;
    border-color: #e5e7eb;
    padding-top: 4px;
    padding: 7px 2px 7px 2px;
}

.help-block {
    margin-top: 4px;
}

@media (min-width: 992px) {
    .UP-main .row + .row {
        margin-top: 10px;
    }
}

.UP-main .form-group {
    margin-bottom: 14px;
    position: relative;
}

.UP-main .control-label {
    font-weight: 500;
    font-size: 13px;
    color: #00000099;
    margin-bottom: 6px;
    display: inline-block;
}

.UP-main .form-control {
    border-radius: 5px;
    border: 1px solid #dcdfe4;
    height: 34px;
    font-size: 13px;
    font-weight: 400;
    color: #000000;
    box-shadow: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

    .UP-main .form-control:focus {
        border-color: #0066cc;
        box-shadow: 0 0 0 2px rgba(0,102,204,0.15);
    }

.UP-main .form-group.has-error .form-control {
    border-color: #e71a1a;
    box-shadow: none;
}

.UP-main .help-block {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 4px;
}

    .UP-main .help-block.ng-hide {
        display: none !important;
    }

.UP-main .select2-container--default .select2-selection--single {
    height: 34px !important;
    border-radius: 5px;
    border-color: #dcdfe4;
}

.UP-main .select2-selection__rendered {
    line-height: 20px !important;
    font-size: 13px;
    font-weight: 400;
    color: #000000 !important;
}

.UP-main .select2-selection__arrow {
    height: 27px !important;
}

.UP-main .select2-selection--multiple {
    min-height: 44px;
    border-radius: 8px;
    border-color: #dcdfe4;
}

.UP-main .UP-inline-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.UP-main .UP-label-action i {
    font-size: 13px;
    cursor: pointer;
}

    .UP-main .UP-label-action i:hover {
        color: #1f7ae0;
    }

.UP-main .form-group.has-error input::placeholder {
    color: #e71a1a !important;
    opacity: 1;
}

.UP-main .form-group.has-error input:focus::placeholder {
    color: #ef53505e !important;
}

.UP-main .help-block {
    display: none;
}

.UP-main .form-group.has-error:hover .help-block {
    display: block;
    position: absolute;
    top: calc(100% + 3px);
    right: 0;
    background: #fff;
    color: #d93025;
    border: 1px solid #f3b7b7;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 20;
    animation: fadeInTooltip 0.25s ease;
}

.UP-main .form-group.has-error .select2-container--default .select2-selection__rendered {
    color: #e71a1a !important;
}

.UP-main .help-block-pwd {
    display: none;
}

.UP-main .form-group.has-error .help-block-pwd {
    display: block;
    position: relative;
    margin-top: 6px;
    background-color: #f9e6e6;
    color: #e71a1a;
    border-radius: 6px;
    width: fit-content;
    height: auto;
    font-size: 13px;
    line-height: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 15px 20px;
    max-width: 100%;
    animation: fadeInTooltip 0.25s ease;
}

@keyframes fadeInTooltip {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lock-options {
    display: flex;
    gap: 20px;
    margin-top: 5px;
}

.lock-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    width: auto;
    padding: 12px 16px;
    cursor: pointer;
    background-color: #fff;
}

    .lock-card:hover {
        /*background-color: #ffb5b524;*/
        /* border-color: #000000;*/
    }

    .lock-card.is-active {
        border-color: #177ee64f;
        background-color: #177ee60d;
        /*  box-shadow: 0 0 0 2px rgb(255 0 0 / 15%)*/
    }

    .lock-card input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.lock-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lock-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #999;
    transition: all 0.25s ease;
}

.lock-card.is-active .lock-dot {
    border-color: #177EE6;
    background-color: #177EE6;
}

.lock-title {
    font-weight: 400;
    color: #000;
}

.lock-sub {
    font-size: 12px;
    color: #0000007a;
    margin-top: 2px;
    font-weight: 400;
}

.lock-right {
    display: flex;
    align-items: center;
    gap: 0px;
}

    .lock-right input[type="number"] {
        height: 36px;
        border-radius: 6px;
        border: 1px solid #ccc;
        padding: 0 6px;
        margin: 0px 10px;
        text-align: center;
        transition: all 0.25s;
    }

        .lock-right input[type="number"]:focus {
            outline: none;
            border-color: none;
        }

    .lock-right input[disabled] {
        opacity: 0.5;
        background-color: #f5f5f5;
        cursor: not-allowed;
    }

.lock-card > input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.lock-unit {
    font-size: 13px;
    color: #555;
}

.lock-ornament {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

    .lock-ornament svg {
        width: 27px;
        height: 27px;
        flex-shrink: 0;
        opacity: .9;
    }

.UP-info-collapsible .UP-collapse-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.UP-info-collapsible {
    cursor: pointer;
}

.UP-collapse-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,.4);
    transition: transform .25s ease, color .25s ease;
}

    .UP-collapse-icon.is-open {
        transform: rotate(180deg);
        color: rgba(0,0,0,.6);
    }

.UP-collapse-svg {
    width: 22px;
    height: 22px;
}

.UP-collapse-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    transition: max-height .35s ease, opacity .25s ease, padding .25s ease;
}

    .UP-collapse-body.is-open {
        max-height: 800px;
        opacity: 1;
        padding-top: 8px;
    }

.b64-upload-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background-color: #fff;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

    .b64-upload-wrapper:hover {
        border-color: #d1d5db;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

.b64-btn-choose {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #2e3192, #0cc262);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .b64-btn-choose:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(46,49,146,0.3);
    }

    .b64-btn-choose i {
        font-size: 14px;
    }

.b64-btn-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

    .b64-btn-clear:hover {
        background: #fee2e2;
        color: #dc2626;
    }

.b64-file-name {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 500px) {
    .b64-upload-wrapper {
        flex-wrap: wrap;
        gap: 6px;
    }

    .b64-file-name {
        width: 100%;
        text-align: center;
    }
}

.form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.netka-cookiebanner-ndpp-content {
    position: relative;
}

.netka-cookiebanner-ndpp-accordion.is-locked .tab-content {
    filter: blur(1px);
    opacity: .45;
    pointer-events: none;
}

.netka-cookiebanner-ndpp-accordion.is-locked .netka-content-card {
    filter: blur(1px);
    opacity: .45;
    pointer-events: none;
}

.ndpp-req-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
    z-index: 50;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(2px);
}

.ndpp-req-card {
    width: min(435px, 96%);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    padding: 20px;
    margin-top: 10px;
}

.ndpp-req-title {
    font-weight: 600;
    font-size: 17px;
    display: flex;
    gap: 8px;
    color: #000;
    align-items: center;
}

.ndpp-req-sub {
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
}

.ndpp-req-list {
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

    .ndpp-req-list li {
        display: flex;
        gap: 8px;
        align-items: center;
        font-size: 13px;
    }

    .ndpp-req-list i {
        color: #ef4444;
    }

.ndpp-req-footer {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: end;
}

.CB-sidebar {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #EDEEF0;
    padding: 20px 16px;
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);*/
}

.CB-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.CB-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    color: #64748b;
    background: transparent;
    transition: transform 0.3s ease, background 0.3s ease;
}

    .CB-menu-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 0;
        background: #08b3ad;
        border-radius: 4px;
        transition: height 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.3s ease;
    }

    .CB-menu-item:not(.is-active):hover {
        background: #f8fafc;
    }

    .CB-menu-item:hover .CB-menu-icon {
        transform: rotate(-5deg) scale(1.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .CB-menu-item.is-active {
        background: linear-gradient(90deg, rgba(8,179,173,0.08) 0%, transparent 100%);
        color: #08b3ad;
        font-weight: 600;
    }

        .CB-menu-item.is-active::before {
            height: 60%;
            box-shadow: 2px 0 12px rgba(8, 179, 173, 0.5);
        }

.CB-menu-icon {
    width: 42px;
    height: 42px;
    background: #f8fafc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .CB-menu-icon img {
        width: 32px;
        opacity: 1;
        transition: all 0.3s ease;
    }

.CB-menu-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: color 0.3s ease;
}

.menu-premium-lock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e2e8f0ad;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
    z-index: 10;
    cursor: not-allowed;
    color: #94a3b8 !important;
    font-size: 14px;
    z-index: 99;
    cursor: not-allowed;
    pointer-events: all !important;
    border-radius: 12px;
}

.nq-lock-tooltip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: #ffffff;
    color: #000000;
    padding: 11px 28px;
    border-radius: -8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 1000;
    width: 100%;
    left: 0px;
    text-align: center;
}

.menu-premium-lock:hover .nq-lock-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.CB-menu-text {
    flex: 1;
    font-size: 13px;
    color: #000;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.CB-menu-item:hover {
    background: #f5f7fb;
    color: #177EE6;
}

.CB-menu-item.is-active {
    background: #08b3ad1c;
}

    .CB-menu-item.is-active .CB-menu-text {
        color: #08b3ad;
        font-weight: 600;
    }

    .CB-menu-item.is-active img {
        opacity: 1;
    }

.up2025-segtabs-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
}

    .up2025-segtabs-wrap::-webkit-scrollbar {
        height: 6px;
    }

    .up2025-segtabs-wrap::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.12);
        border-radius: 999px;
    }

.up2025-segtabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 0 !important;
    border-radius: 10px;
    background: linear-gradient(to right, #efefef 0%, #ebebeb 100%);
    width: max-content;
    min-width: fit-content;
    max-width: 100%;
}

    .up2025-segtabs,
    .up2025-segtabs li {
        list-style: none;
    }

.up2025-segtabs__item {
    flex: 0 0 auto;
    min-width: 0;
}

    .up2025-segtabs__item::marker {
        content: "";
    }

.up2025-segtabs__link {
    display: block;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    border: 0 !important;
    outline: 0;
    background: transparent;
    color: rgba(0, 0, 0, 0.48);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    padding: 12px 20px;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .08s ease;
    cursor: pointer;
}

    .up2025-segtabs__link:hover {
        color: #5f5f5f;
        text-decoration: none;
    }

    .up2025-segtabs__link:active {
        transform: scale(.98);
    }

    .up2025-segtabs__link.is-active {
        background: #ffffff;
        color: #08b3ad;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 10px rgba(0,0,0,0.05);
    }

@media (max-width: 767px) {
    .up2025-segtabs {
        min-width: max-content;
    }

    .up2025-segtabs__link {
        padding: 11px 16px;
        font-size: 13px;
    }
}

.CB-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0px 25px 0px;
}

    .CB-section-header img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    .CB-section-header p {
        font-size: 13px;
        font-weight: 600;
        color: #08b3ad;
        margin: 0;
    }

.CB-page {
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 32px;
    margin-bottom: 90px;
}

.netka-banner-setup__input-group {
    margin-bottom: 10px;
}

.netka-banner-setup__action {
    display: flex;
    justify-content: center;
    margin: 20px 0px 0px 0px;
}

.netka-banner-setup__button {
    background: var(--danger-btn-button);
    border: 1px solid var(--danger-btn-button);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 34px;
    min-width: 150px;
    border-radius: 10px;
    cursor: pointer;
    transition: all .18s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

    .netka-banner-setup__button:hover:not(:disabled) {
        filter: brightness(.93);
        box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
    }

    .netka-banner-setup__button:active:not(:disabled) {
        transform: translateY(1px);
    }

    .netka-banner-setup__button:disabled {
        background: #eceff3;
        color: #aab2bd;
        border: 1px dashed #c3cad4;
        cursor: not-allowed;
        box-shadow: none;
        font-size: 13px;
        padding: 12px 34px;
        min-width: 150px;
        transform: none;
        filter: none;
    }

        .netka-banner-setup__button:disabled:hover {
            background: #eceff3;
            box-shadow: none;
            filter: none;
        }

.script-deployment-section .CB-section-header {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.script-deployment-section .header-text-group {
    margin-left: 15px;
}

.script-deployment-section .main-title {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 600;
}

.script-deployment-section .sub-title {
    color: #6c757d;
    font-size: 14px;
    font-weight: normal;
}

.nav-tabs-custom.script-tabs {
    box-shadow: none;
    border-bottom: 1px solid #eee;
    margin-bottom: 25px;
}

    .nav-tabs-custom.script-tabs .nav-tabs {
        border-bottom: none;
    }

    .nav-tabs-custom.script-tabs .nav-link {
        cursor: pointer;
        font-weight: 600;
        padding: 12px 25px;
        border: none;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
        color: #495057;
    }

        .nav-tabs-custom.script-tabs .nav-link.active.text-success {
            border-color: #28a745 !important;
            color: #28a745 !important;
        }

.script-info-alert {
    border-left: 5px solid;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.script-code-container {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

    .script-code-container .instruction-text {
        font-weight: 600;
        margin-bottom: 15px;
    }

    .script-code-container code.dark-theme {
        display: block;
        background: #2d3436;
        color: #dfe6e9;
        border-radius: 6px;
        padding: 20px;
        max-height: 350px;
        overflow-y: auto;
        font-size: 13px;
    }

.script-download-area {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
}

    .script-download-area .download-icon {
        font-size: 50px;
        color: #28a745;
        margin-bottom: 15px;
    }

.script-deployment-section {
    --sd-primary: #2563eb;
    --sd-primary-soft: #eff6ff;
    --sd-success: #16a34a;
    --sd-success-soft: #f0fdf4;
    --sd-text: #0f172a;
    --sd-subtext: #64748b;
    --sd-border: #e2e8f0;
    --sd-bg: #f8fafc;
    --sd-card: #ffffff;
    --sd-dark: #0f172a;
    --sd-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
    --sd-shadow-md: 0 14px 40px rgba(15, 23, 42, 0.10);
    --sd-radius: 18px;
    --sd-radius-sm: 12px;
    color: var(--sd-text);
}

    .script-deployment-section .box {
        border-radius: 22px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: var(--sd-shadow-sm);
        overflow: hidden;
    }

    .script-deployment-section .box-body-UP {
        padding: 0px 24px 24px 24px;
    }

    .script-deployment-section .CB-section-header {
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .script-deployment-section .header-text-group {
        margin-left: 0;
    }

.header-text-group-gtm {
    display: flex;
}

.script-deployment-section .main-title {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--sd-text);
}

.script-deployment-section .sub-title {
    color: var(--sd-subtext);
    font-size: 14px;
    margin: 0;
    font-weight: 400;
}

.script-info-alert {
    position: relative;
    border-radius: 20px;
    padding: 22px 22px 20px;
    margin-bottom: 22px;
    border: 1px solid transparent;
    overflow: hidden;
    box-shadow: var(--sd-shadow-sm);
}

    .script-info-alert::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        border-radius: 999px;
    }

    .script-info-alert.dynamic {
        background: #fff;
        border-color: #dbeafe;
        margin-top: 24px;
    }

    .script-info-alert.static {
        background: #fff;
        border-color: #dcfce7;
        margin-top: 24px;
    }

    .script-info-alert ul {
        margin-bottom: 0;
        padding-left: 20px;
        font-size: 13px;
        line-height: 1.6;
    }

.method-badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.badge-realtime {
    background: #e0efff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.badge-nonrealtime {
    background: #eafaf0;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.method-description-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 0;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: #334155;
    line-height: 1.65;
    font-weight: 400;
}

    .feature-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .feature-item i {
        margin-top: 3px;
        font-size: 15px;
        width: 18px;
        text-align: center;
        flex: 0 0 18px;
    }

.text-highlight {
    font-weight: 600;
    text-decoration: none;
    position: relative;
    color: #000;
    font-size: 13px;
    margin-right: 5px;
}

    .text-highlight::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 6px;
        background: rgba(250, 204, 21, 0.28);
        z-index: -1;
        border-radius: 999px;
    }

.script-code-container {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid var(--sd-border);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--sd-shadow-sm);
}

    .script-code-container .instruction-text {
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 14px;
        color: #334155;
    }

        .script-code-container .instruction-text code {
            background: #eef2ff;
            color: #3730a3;
            border-radius: 8px;
            padding: 2px 8px;
            font-size: 12px;
            margin: 0px 5px;
        }

    .script-code-container code.dark-theme {
        display: block;
        background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
        color: #e5eefb;
        border-radius: 16px;
        padding: 18px 18px;
        min-height: 220px;
        max-height: 360px;
        overflow-y: auto;
        border: 1px solid rgba(148, 163, 184, 0.18);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        font-size: 13px;
        line-height: 1.75;
    }

        .script-code-container code.dark-theme::-webkit-scrollbar {
            width: 8px;
        }

        .script-code-container code.dark-theme::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.35);
            border-radius: 999px;
        }

        .script-code-container code.dark-theme::-webkit-scrollbar-track {
            background: transparent;
        }

.script-download-area {
    border: 1px solid #dbe7df;
    border-radius: 20px;
    padding: 42px 28px;
    text-align: center;
    box-shadow: var(--sd-shadow-sm);
}

    .script-download-area .download-icon {
        width: 88px;
        height: 88px;
        border-radius: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 38px;
        color: #16a34a;
        margin-bottom: 18px;
        background: linear-gradient(180deg, #ecfdf3 0%, #dcfce7 100%);
        border: 1px solid #bbf7d0;
        box-shadow: 0 12px 28px rgba(34, 197, 94, 0.14);
    }

.dowload-js {
    font-size: 13px;
    font-weight: 700;
    margin: 10px 0px;
    color: var(--sd-text);
}

.dowload-js-p {
    color: var(--sd-subtext);
    font-size: 13px;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 22px;
}

.script-deployment-section .btn.btn-lg {
    border-radius: 14px;
    font-weight: 600;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
    transition: all 0.25s ease;
    font-size: 13px;
}

    .script-deployment-section .btn.btn-lg:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    }

.animate-fade-in {
    animation: scriptFadeIn 0.28s ease;
}

@keyframes scriptFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {
    .script-deployment-section .box-body-UP {
        padding: 16px;
    }

    .nav-tabs-custom.script-tabs .nav-tabs {
        flex-direction: column;
    }

    .nav-tabs-custom.script-tabs .nav-link {
        width: 100%;
        justify-content: center;
    }

    .script-info-alert,
    .script-code-container,
    .script-download-area {
        border-radius: 16px;
    }

        .script-info-alert h4,
        .script-download-area h4 {
            font-size: 18px;
        }

    .script-download-area {
        padding: 28px 18px;
    }

    .script-deployment-section .btn.btn-lg {
        width: 100%;
        min-width: 0;
    }
}

.script-info-text {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 15px;
}

.script-info-text_t {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 15px;
}

.script-info-text_p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    font-weight: 400;
}

.script-code-header {
    width: 100%;
    display: flex;
}

.script-copy-btn {
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 8px;
    transition: all .2s ease;
    color: var(--danger-btn-button) !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--danger-btn-border) !important;
    font-weight: 700;
}

    .script-copy-btn i {
        font-size: 13px;
    }

.nk-reject-wrapper {
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.nk-reject-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
}

.nk-reject-input {
    background: #ffffff !important;
    transition: opacity 0.3s ease, background 0.3s ease;
}

    .nk-reject-input:disabled {
        background: #f9f9f9 !important;
        opacity: 0.6;
        cursor: not-allowed;
        border-color: #ddd !important;
    }

.nk-reject-status-badge {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.nk-reject-hint {
    display: block;
    margin-top: 10px;
    color: #888;
    font-size: 12px;
}

.nk-lang-tabs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}


.nk-lang-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #007bff;
    margin: 0;
}

.nk-lang-name {
    font-weight: 700;
    font-size: 14px;
    color: #334155;
    flex-grow: 1;
}

.is-active .nk-lang-name {
    color: #0056b3;
}

.nk-content-locked {
    position: relative;
    pointer-events: none;
    opacity: 0.35;
    filter: grayscale(0.8);
}

.nk-content-wrapper,
.dpa-content-wrapper {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e0e6ed;
    padding: 25px 25px 0px 25px;
    margin-bottom: 25px;
}

    .dpa-content-wrapper .text-muted {
        font-size: 12px;
    }

    .dpa-content-wrapper .bc-field textarea.bc-field__input,
    .dpa-content-wrapper .bc-field .dpa-textarea {
        min-height: 88px;
        line-height: 1.5;
        resize: vertical;
    }

    /* Contract duration — inline info display */
    .dpa-content-wrapper .dpa-duration {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        margin-top: 28px; /* align with input row (compensate for label space above the inputs beside it) */
        font-size: 14px;
    }

    .dpa-content-wrapper .dpa-duration-label {
        color: #6b7280;
        font-weight: 500;
    }

    .dpa-content-wrapper .dpa-duration-value {
        color: #1f2a37;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

        .dpa-content-wrapper .dpa-duration-value.is-zero {
            color: #FF9800;
        }

        .dpa-content-wrapper .dpa-duration-value.is-active {
            color: var(--danger-btn-button) !important;
        }

.dpa-detail-page .dpa-meta-duration {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

    .dpa-detail-page .dpa-meta-duration.is-zero {
        color: #FF9800;
    }

    .dpa-detail-page .dpa-meta-duration.is-active {
        color: var(--danger-btn-button);
    }

.dpa-content-wrapper .nk-header-main-title {
    position: relative;
}

.dpa-content-wrapper .bc-field--error .bc-field__input,
.dpa-content-wrapper .bc-field.has-error .bc-field__input,
.dpa-content-wrapper .bc-field--error .note-editor.note-frame,
.dpa-content-wrapper .bc-field.has-error .note-editor.note-frame,
.dpa-content-wrapper .bc-field--error .input-group.date,
.dpa-content-wrapper .bc-field.has-error .input-group.date,
.dpa-content-wrapper .bc-field--error .select2-container--default .select2-selection,
.dpa-content-wrapper .bc-field.has-error .select2-container--default .select2-selection,
.dpa-content-wrapper .bc-field--error .netka-banner-setup__input {
    border-color: #f0b6b9 !important;
}

/* sticky aside ต้องการให้ ancestor scroll container เป็น body ไม่ใช่ .wrapper */
body:has(.dpa-detail-page) .wrapper {
    overflow: visible;
}

.dpa-detail-page .dpa-layout {
    display: flex;
    gap: 50px;
    align-items: stretch;
}

.dpa-detail-page .dpa-main {
    flex: 1 1 auto;
    min-width: 0;
}

.dpa-detail-page .dpa-aside {
    width: 280px;
    flex-shrink: 0;
}

.dpa-detail-page .dpa-aside-sticky {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.dpa-detail-page .dpa-var-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: #009688;
    background: #00968821;
    border: 1px solid #00968800;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dpa-detail-page .note-current-color-button .note-recent-color {
    background-color: transparent !important;
    color: #6b7280 !important;
}

.dpa-detail-page .dpa-var-toggle:focus,
.dpa-detail-page .dpa-var-toggle:focus-visible,
.dpa-detail-page .dpa-var-toggle:active,
.dpa-detail-page .dpa-var-chip:focus,
.dpa-detail-page .dpa-var-chip:focus-visible,
.dpa-detail-page .dpa-var-chip:active {
    outline: none !important;
    box-shadow: none !important;
}

.dpa-detail-page .dpa-var-toggle.is-open {
    background: #009688;
    color: #fff;
    border: #009688;
}

.dpa-detail-page .dpa-var-toggle i {
    font-size: 10px;
}

/* DPA Authorization — selectable cards */
.dpa-detail-page .dpa-auth-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.dpa-detail-page .dpa-auth-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}

    .dpa-detail-page .dpa-auth-card:hover {
        border-color: #93c5fd;
        background: #f8fafc;
    }

    .dpa-detail-page .dpa-auth-card.is-active {
        border-color: #2563eb;
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        box-shadow: 0 4px 12px rgba(37, 99, 235, .12);
    }

.dpa-detail-page .dpa-auth-card__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dpa-detail-page .dpa-auth-card__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #6B7280;
    border-radius: 10px;
    font-size: 20px;
    transition: all 0.2s ease;
}

.dpa-detail-page .dpa-auth-card.is-active .dpa-auth-card__icon {
    background: #2563eb;
    color: #fff;
}

.dpa-detail-page .dpa-auth-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dpa-detail-page .dpa-auth-card__title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.dpa-detail-page .dpa-auth-card.is-active .dpa-auth-card__title {
    color: #1e40af;
}

.dpa-detail-page .dpa-auth-card__desc {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.5;
}

.dpa-detail-page .dpa-auth-card__check {
    flex-shrink: 0;
    color: #d1d5db;
    font-size: 22px;
    transition: all 0.2s ease;
}

.dpa-detail-page .dpa-auth-card.is-active .dpa-auth-card__check {
    color: #2563eb;
    transform: scale(1.1);
}

/* Stakeholder picker — slide-down เมื่อเลือก User Level */
.dpa-detail-page .dpa-auth-stakeholder {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.3s ease, padding 0.3s ease, border-color 0.25s ease;
    margin-top: 0;
    padding: 0 4px;
    border-top: 1px solid transparent;
}

    .dpa-detail-page .dpa-auth-stakeholder.is-visible {
        max-height: 600px;
        opacity: 1;
        margin-top: 18px;
        padding: 18px 4px 4px;
        border-top: 1px dashed var(--dpa-border, #E6EAF0);
    }

.dpa-detail-page .dpa-auth-stakeholder__head {
    margin-bottom: 12px;
}

.dpa-detail-page .dpa-auth-stakeholder__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: #000000;
}

    .dpa-detail-page .dpa-auth-stakeholder__title i {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        background: var(--dpa-accent-soft, #E6F6F6);
        color: var(--dpa-accent, #0EA5A5);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

.dpa-detail-page .dpa-auth-stakeholder__hint {
    font-size: 13px;
    color: var(--dpa-text-muted, #6B7280);
    line-height: 1.5;
    margin-top: 6px;
    font-weight: 500;
}

.dpa-detail-page .dpa-auth-stakeholder__select + .select2-container {
    width: 100% !important;
    display: block;
}

    .dpa-detail-page .dpa-auth-stakeholder__select + .select2-container .select2-selection--multiple,
    .dpa-detail-page .dpa-auth-stakeholder .select2-selection--multiple {
        min-height: 42px;
        border-radius: var(--dpa-radius-sm, 8px) !important;
        border: 1px solid #d1d5db !important;
        background: #FFFFFF !important;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .dpa-detail-page .dpa-auth-stakeholder .select2-container--focus .select2-selection--multiple,
        .dpa-detail-page .dpa-auth-stakeholder .select2-selection--multiple:focus-within {
            padding: 6px 6px;
        }

.dpa-detail-page .dpa-auth-stakeholder .select2-selection__choice {
    background: var(--dpa-accent-soft, #E6F6F6) !important;
    border: 1px solid rgba(14, 165, 165, 0.25) !important;
    color: var(--dpa-accent-hover, #0D8E8E) !important;
    border-radius: 999px !important;
    padding: 2px 10px 2px 8px !important;
    font-size: 12px !important;
    font-weight: 500;
    margin-top: 5px !important;
    margin-right: 5px !important;
}

.dpa-detail-page .dpa-auth-stakeholder .select2-selection__choice__remove {
    color: var(--dpa-accent-hover, #0D8E8E) !important;
    margin-right: 5px !important;
}

    .dpa-detail-page .dpa-auth-stakeholder .select2-selection__choice__remove:hover {
        color: var(--dpa-danger, #DC2626) !important;
    }

.dpa-detail-page .dpa-var-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.dpa-detail-page .dpa-var-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}

.dpa-detail-page .dpa-var-panel__title {
    font-weight: 600;
    font-size: 13px;
    color: #1f2937;
}

.dpa-detail-page .dpa-var-panel__hint {
    font-size: 11px;
    color: #6B7280;
}

.dpa-detail-page .dpa-var-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.dpa-detail-page .dpa-var-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    overflow: hidden;
    font-family: inherit;
}

    .dpa-detail-page .dpa-var-chip:hover {
        border-color: #3b82f6;
        background: #eff6ff;
        box-shadow: 0 2px 6px rgba(59, 130, 246, .15);
        transform: translateY(-1px);
    }

    .dpa-detail-page .dpa-var-chip:active {
        transform: translateY(0);
    }

.dpa-detail-page .dpa-var-chip__code {
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

.dpa-detail-page .dpa-var-chip:hover .dpa-var-chip__code {
    background: #dbeafe;
}

.dpa-detail-page .dpa-var-chip__desc {
    flex: 1;
    font-size: 12px;
    color: #4b5563;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dpa-detail-page .dpa-var-chip__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: #9ca3af;
    transition: fill 0.15s ease;
}

.dpa-detail-page .dpa-var-chip:hover .dpa-var-chip__icon {
    fill: #3b82f6;
}

.dpa-detail-page .dpa-org-select {
    width: 100%;
    position: relative;
}


    .dpa-detail-page .dpa-org-select::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 14px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        border-color: #6B7280 transparent transparent transparent;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .dpa-detail-page .dpa-org-select > .select2-container,
    .dpa-detail-page .dpa-org-select > select {
        width: 100% !important;
    }

        .dpa-detail-page .dpa-org-select > select.bc-field__input,
        .dpa-detail-page .dpa-org-select .select2-container--default .select2-selection--single {
            display: block !important;
            box-sizing: border-box !important;
            width: 100% !important;
            height: 40px !important;
            border: 1px solid #d1d5db !important;
            border-radius: 6px !important;
            background-color: #fff !important;
            font-size: 13px !important;
            color: #1f2937 !important;
            line-height: 1.4 !important;
            margin: 0 !important;
        }

        .dpa-detail-page .dpa-org-select > select.bc-field__input {
            padding: 8px 32px 8px 12px !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            cursor: pointer !important;
            font-weight: 400 !important;
            outline: none !important;
        }

            .dpa-detail-page .dpa-org-select > select.bc-field__input:focus {
                border-color: #80bdff !important;
                box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, .15) !important;
            }

    .dpa-detail-page .dpa-org-select .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 27px !important;
        padding-right: 32px !important;
        color: #1f2937 !important;
        font-size: 13px !important;
        font-weight: 400;
    }

    .dpa-detail-page .dpa-org-select .select2-container--default .select2-selection--single .select2-selection__arrow {
        display: none !important;
    }

.dpa-detail-page .dpa-meta-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    padding: 16px 16px 14px;
}

.dpa-detail-page .dpa-meta-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.dpa-detail-page .dpa-meta-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f2a37;
    letter-spacing: -0.01em;
}

.dpa-detail-page .dpa-meta-status {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1;
}

    .dpa-detail-page .dpa-meta-status.is-draft {
        background: #f3f4f6;
        color: #6b7280;
    }

    .dpa-detail-page .dpa-meta-status.is-active {
        background: #effaf9;
        color: #08b3ad;
    }

.dpa-detail-page .dpa-meta-list {
    margin: 0 0 12px;
}

.dpa-detail-page .dpa-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 12.5px;
}

    .dpa-detail-page .dpa-meta-row dt {
        color: #6b7280;
        font-weight: 500;
        margin: 0;
    }

    .dpa-detail-page .dpa-meta-row dd {
        color: #1f2a37;
        font-weight: 500;
        margin: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
        word-break: break-word;
        max-width: 60%;
    }

.dpa-detail-page .dpa-meta-people {
    border-top: 1px solid #f0f2f5;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dpa-detail-page .dpa-meta-person {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dpa-detail-page .dpa-meta-person-label {
    font-size: 11px;
    color: #98a2b3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.dpa-detail-page .dpa-meta-person-name {
    font-size: 13px;
    color: #1f2a37;
    font-weight: 600;
}

.dpa-detail-page .dpa-meta-person-date {
    font-size: 11.5px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.dpa-detail-page .dpa-meta-empty {
    margin: 0;
    padding: 8px 10px;
    font-size: 11.5px;
    color: #FF9800;
    background: #f9fafb;
    border-radius: 8px;
    line-height: 1.45;
}

.dpa-detail-page .dpa-progress-card {
    position: relative;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    padding: 16px 16px 14px;
    transition: border-color .25s ease;
}

.dpa-detail-page .dpa-progress-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.dpa-detail-page .dpa-progress-head-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #08b3ad;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.dpa-detail-page .dpa-progress-head-title {
    flex: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f2a37;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dpa-detail-page .dpa-progress-head-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #c1c8d2;
    font-size: 13px;
    cursor: pointer;
    transition: color .15s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

    .dpa-detail-page .dpa-progress-head-tip:hover,
    .dpa-detail-page .dpa-progress-head-tip:focus {
        color: var(--dpa-accent, #0EA5A5);
    }

.dpa-detail-page .dpa-tip-pop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 244px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px 11px;
    background: #ffffff;
    color: var(--dpa-text, #1F2A37);
    border: 1px solid var(--dpa-border, #E6EAF0);
    border-radius: var(--dpa-radius, 12px);
    box-shadow: 0 8px 20px -6px rgb(31 42 55 / 68%), 0 2px 4px -1px rgb(31 42 55 / 30%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    cursor: default;
}

    .dpa-detail-page .dpa-tip-pop::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: var(--tip-arrow-left, 18px);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid var(--dpa-border, #E6EAF0);
    }

    .dpa-detail-page .dpa-tip-pop::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: var(--tip-arrow-left, 18px);
        margin-bottom: -1px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
    }

.dpa-detail-page .dpa-progress-head-tip:hover .dpa-tip-pop,
.dpa-detail-page .dpa-progress-head-tip:focus .dpa-tip-pop,
.dpa-detail-page .dpa-progress-head-tip:focus-within .dpa-tip-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dpa-detail-page .dpa-tip-pop__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--dpa-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.dpa-detail-page .dpa-tip-pop__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dpa-detail-page .dpa-tip-pop__sample {
    flex-shrink: 0;
    width: 16px;
    height: 5px;
    border-radius: 3px;
    background: #E6EAF0;
}

    .dpa-detail-page .dpa-tip-pop__sample.is-required {
        background: #FF9800;
    }

    .dpa-detail-page .dpa-tip-pop__sample.is-done {
        background: var(--danger-btn-button, #10b981);
    }

.dpa-detail-page .dpa-tip-pop__text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--dpa-text, #1F2A37);
    font-weight: 500;
}

.dpa-detail-page .dpa-tip-pop__hint {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--dpa-border, #E6EAF0);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--dpa-text-muted, #6B7280);
    display: flex;
    align-items: center;
    gap: 7px;
}

    .dpa-detail-page .dpa-tip-pop__hint i {
        color: var(--dpa-accent, #0EA5A5);
        font-size: 12px;
    }

.dpa-detail-page .dpa-progress-head-info {
    color: #c1c8d2;
    font-size: 14px;
    cursor: help;
    flex-shrink: 0;
    transition: color .15s;
}

    .dpa-detail-page .dpa-progress-head-info:hover {
        color: #08b3ad;
    }

.dpa-detail-page .dpa-progress-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 2px;
}

.dpa-detail-page .dpa-progress-summary-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.dpa-detail-page .dpa-progress-summary-value {
    font-size: 13px;
    font-weight: 700;
    color: #1f2a37;
    font-variant-numeric: tabular-nums;
}

.dpa-detail-page .dpa-progress-steps {
    display: flex;
    gap: 4px;
    margin: 8px 0 8px;
    padding: 0 2px;
}

    .dpa-detail-page .dpa-progress-steps .dpa-step {
        flex: 1 1 0;
        height: 6px;
        background: #eef0f3;
        border-radius: 4px;
        transition: background .3s ease;
        cursor: pointer;
    }

        .dpa-detail-page .dpa-progress-steps .dpa-step.is-required {
            background: #FF9800;
            cursor: pointer;
        }

        .dpa-detail-page .dpa-progress-steps .dpa-step.is-done {
            background: var(--danger-btn-button) !important;
            cursor: default;
        }

.dpa-step-flash {
    animation: dpaStepFlash 1.5s ease;
}

@@keyframes dpaStepFlash {
    0%, 100% {
        box-shadow: none;
    }

    20%, 60% {
        box-shadow: 0 0 0 3px #FF9800, 0 0 14px 4px rgba(255,152,0,0.45);
    }
}

.dpa-detail-page .dpa-progress-sub {
    font-size: 12px;
    color: #FF9800;
    margin: 0 0 14px;
    line-height: 1.45;
    padding: 0 2px;
    cursor: pointer;
    transition: opacity .15s ease;
}

.dpa-detail-page .dpa-progress-sub--savable {
    font-size: 12px;
    color: #000;
    margin: 0 0 14px;
    line-height: 1.45;
    padding: 0 2px;
}

.dpa-detail-page .dpa-progress-sub--done {
    color: #08b3ad;
    font-weight: 500;
}

.dpa-detail-page .dpa-progress-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.dpa-detail-page .dpa-stat {
    background: #f8fafa;
    border: 1px solid #eef1f4;
    border-radius: 12px;
    padding: 12px 6px 10px;
    text-align: center;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dpa-detail-page .dpa-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: #1f2a37;
    line-height: 1.1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.dpa-detail-page .dpa-stat-label {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
    font-weight: 500;
}

.dpa-detail-page .dpa-stat--status {
    background: #fff;
    border-color: #e6e9ef;
}

    .dpa-detail-page .dpa-stat--status .dpa-stat-icon {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #fff5e6;
        color: #f59e0b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        margin-bottom: 4px;
    }

    .dpa-detail-page .dpa-stat--status.is-savable .dpa-stat-icon {
        background: #01a99814;
        color: #009688;
    }

    .dpa-detail-page .dpa-stat--status.is-savable .dpa-stat-label {
        color: #009688;
        font-weight: 600;
    }

    .dpa-detail-page .dpa-stat--status.is-done .dpa-stat-icon {
        background: #08b3ad2b;
        color: #009688;
    }

    .dpa-detail-page .dpa-stat--status.is-done .dpa-stat-label {
        color: #08b3ad;
        font-weight: 600;
    }

.dpa-detail-page .dpa-actions {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .dpa-detail-page .dpa-actions .dpa-btn-save {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 13px 12px;
        border: 0;
        border-radius: 10px;
        background-color: var(--danger-btn-button);
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        transition: filter .15s, box-shadow .2s, transform .08s;
    }

        .dpa-detail-page .dpa-actions .dpa-btn-save:focus,
        .dpa-detail-page .dpa-actions .dpa-btn-save:focus-visible {
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(229, 62, 62, 0.18);
        }

        .dpa-detail-page .dpa-actions .dpa-btn-save:hover:not(:disabled) {
            filter: brightness(0.94);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        .dpa-detail-page .dpa-actions .dpa-btn-save:active:not(:disabled) {
            transform: translateY(1px);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .dpa-detail-page .dpa-actions .dpa-btn-save:disabled {
            background: #e6e9ef;
            color: #98a2b3;
            box-shadow: none;
            cursor: not-allowed;
        }

.dpa-detail-page .dpa-actions-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .dpa-detail-page .dpa-actions-secondary .dpa-btn-secondary {
        width: 100%;
        height: 36px;
        margin: 0;
        padding: 0 12px;
        background: #f8fafa;
        border: 1px solid #e6e9ef;
        border-radius: 8px;
        color: #4a5466;
        font-weight: 500;
        font-size: 13px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        outline: none;
        transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    }

        .dpa-detail-page .dpa-actions-secondary .dpa-btn-secondary:focus,
        .dpa-detail-page .dpa-actions-secondary .dpa-btn-secondary:focus-visible {
            outline: none;
            border-color: #08b3ad;
            box-shadow: 0 0 0 3px rgba(8, 179, 173, 0.15);
        }

        .dpa-detail-page .dpa-actions-secondary .dpa-btn-secondary i {
            font-size: 12px;
            color: #98a2b3;
            transition: color .15s;
        }

        .dpa-detail-page .dpa-actions-secondary .dpa-btn-secondary:hover:not(:disabled) {
            background: #fff;
            border-color: #08b3ad;
            color: #08b3ad;
        }

            .dpa-detail-page .dpa-actions-secondary .dpa-btn-secondary:hover:not(:disabled) i {
                color: #08b3ad;
            }

        .dpa-detail-page .dpa-actions-secondary .dpa-btn-secondary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

/* ============ DPA Preview Section ============ */
.dpa-detail-page .dpa-preview-section .nk-header-main-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dpa-detail-page .dpa-preview-title-icon {
    font-size: 18px;
    color: #08b3ad;
}

.dpa-detail-page .dpa-lang-switch {
    display: inline-flex;
    padding: 4px;
    background: #f1f4f7;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    gap: 2px;
}

.dpa-detail-page .dpa-lang-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, color .15s, box-shadow .15s;
}

    .dpa-detail-page .dpa-lang-switch__btn:focus,
    .dpa-detail-page .dpa-lang-switch__btn:focus-visible,
    .dpa-detail-page .dpa-lang-switch__btn:active {
        outline: none;
    }

    .dpa-detail-page .dpa-lang-switch__btn:hover:not(.is-active) {
        color: #08b3ad;
        background: rgba(8, 179, 173, 0.06);
    }

    .dpa-detail-page .dpa-lang-switch__btn.is-active {
        background: #fff;
        color: #08b3ad;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
    }

.dpa-detail-page .dpa-lang-switch__code {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(8, 179, 173, 0.1);
    color: #08b3ad;
}

.dpa-detail-page .dpa-lang-switch__btn:not(.is-active) .dpa-lang-switch__code {
    background: #e6e9ef;
    color: #98a2b3;
}

.dpa-detail-page .dpa-preview-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dpa-detail-page .dpa-preview-stage {
    background: linear-gradient(135deg, #eef2f6 0%, #f6f8fa 100%);
    background-image: radial-gradient(rgba(16, 24, 40, 0.06) 1px, transparent 1px), linear-gradient(135deg, #eef2f6 0%, #f6f8fa 100%);
    background-size: 18px 18px, 100% 100%;
    background-position: 0 0, 0 0;
    border-radius: 12px;
    padding: 28px 24px !important;
    display: flex;
    justify-content: center;
}

.dpa-detail-page .dpa-preview-paper {
    position: relative;
    width: 100%;
    max-width: 820px;
    background: transparent;
}


    .dpa-detail-page .dpa-preview-paper.is-active .dpa-preview-paper__ribbon {
        background: linear-gradient(135deg, #08b3ad 0%, #0ea5a0 100%);
    }

        .dpa-detail-page .dpa-preview-paper.is-active .dpa-preview-paper__ribbon::after {
            border-top-color: #056d69;
        }

    .dpa-detail-page .dpa-preview-paper.is-draft .dpa-preview-paper__ribbon {
        background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    }

        .dpa-detail-page .dpa-preview-paper.is-draft .dpa-preview-paper__ribbon::after {
            border-top-color: #b45309;
        }

.dpa-detail-page .dpa-preview-paper__sheet {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 44px 56px 56px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08), 0 24px 48px rgba(16, 24, 40, 0.06);
    min-height: 480px;
}

    .dpa-detail-page .dpa-preview-paper__sheet::before,
    .dpa-detail-page .dpa-preview-paper__sheet::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        height: 8px;
        border-radius: 4px;
        z-index: -1;
    }

    .dpa-detail-page .dpa-preview-paper__sheet::before {
        bottom: -6px;
        background: #fff;
        box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
    }

    .dpa-detail-page .dpa-preview-paper__sheet::after {
        left: 16px;
        right: 16px;
        bottom: -12px;
        background: #fff;
        box-shadow: 0 8px 18px rgba(16, 24, 40, 0.06);
    }

.dpa-detail-page .dpa-preview-paper__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dpa-detail-page .dpa-preview-paper__brand {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #08b3ad;
    text-transform: uppercase;
}

.dpa-detail-page .dpa-preview-paper__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #98a2b3;
    max-width: 60%;
}

.dpa-detail-page .dpa-preview-paper__meta-sep {
    color: #d0d5dd;
}

.dpa-detail-page .dpa-preview-paper__meta-name {
    color: #475467;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.dpa-detail-page .dpa-preview-paper__divider {
    margin: 16px 0 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e6e9ef 20%, #e6e9ef 80%, transparent 100%);
}

.dpa-detail-page .dpa-preview-paper__content {
    color: #1d2939;
    font-size: 14px;
    line-height: 1.75;
}

    .dpa-detail-page .dpa-preview-paper__content > *:first-child {
        margin-top: 0;
    }

    .dpa-detail-page .dpa-preview-paper__content > *:last-child {
        margin-bottom: 0;
    }

    .dpa-detail-page .dpa-preview-paper__content table {
        width: 100%;
        border-collapse: collapse;
        margin: 14px 0;
    }

        .dpa-detail-page .dpa-preview-paper__content table td,
        .dpa-detail-page .dpa-preview-paper__content table th {
            border: 1px solid #e6e9ef;
            padding: 8px 10px;
        }

    .dpa-detail-page .dpa-preview-paper__content img {
        max-width: 100%;
        height: auto;
    }

@@media (max-width: 768px) {
    .dpa-detail-page .dpa-preview-stage {
        padding: 16px 8px !important;
    }

    .dpa-detail-page .dpa-preview-paper__sheet {
        padding: 28px 22px 32px;
    }

    .dpa-detail-page .dpa-lang-switch__label {
        display: none;
    }
}

[dir="rtl"] .dpa-detail-page .dpa-preview-paper__ribbon {
    right: auto;
    left: -6px;
    border-radius: 0 3px 3px 0;
}

    [dir="rtl"] .dpa-detail-page .dpa-preview-paper__ribbon::after {
        right: auto;
        left: 0;
        border-width: 6px 0 0 6px;
        border-color: #475467 transparent transparent transparent;
    }

.dpa-required-section {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.dpa-required-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: 999px;
    background: #fdecec;
    color: #c62828;
    border: 1px solid #f5a3a3;
    vertical-align: middle;
    animation: dpa-required-pulse 2s ease-in-out infinite;
}

    .dpa-required-badge i {
        font-size: 12px;
    }

    .dpa-required-badge.dpa-required-badge--ok {
        background: #e8f5ec;
        color: #2e7d32;
        border-color: #b6e2c5;
        animation: none;
        text-transform: none;
    }

@keyframes dpa-required-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.25);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(229, 57, 53, 0);
    }
}

.dpa-vendor-empty {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border: 2px dashed #f5a3a3;
    border-radius: 10px;
    background: #fffafa;
}

.dpa-vendor-empty__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecec;
    color: #c62828;
    font-size: 24px;
}

.dpa-vendor-empty__body {
    flex: 1 1 auto;
}

.dpa-vendor-empty__title {
    margin: 0 0 4px 0;
    font-weight: 600;
    color: #c62828;
    font-size: 14px;
}

.dpa-vendor-empty__desc {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #6b7280;
}

.nsdx-modal-2025-dialog--sm {
    max-width: 90% !important;
    width: 480px !important;
}

.nsdx-modal-2025-dialog--md {
    max-width: 90% !important;
    width: 720px !important;
}

.nsdx-modal-2025-dialog--lg {
    max-width: 90% !important;
    width: 65rem !important;
}

.nsdx-modal-2025 {
    border-radius: 14px;
    overflow: hidden;
    border: none;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
    background: #FFFFFF;
}

    .nsdx-modal-2025 .header2025-pwd-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px 18px 18px;
        border-bottom: 1px solid #E5E7EB;
        background: radial-gradient(120% 180% at 0% 0%, rgba(59,130,246,0.14), rgba(15,23,42,0.02));
    }

    .nsdx-modal-2025 .header2025-pwd-titlewrap {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .nsdx-modal-2025 .header2025-pwd-header .modal-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #0F172A;
    }

    .nsdx-modal-2025 .header2025-home-close {
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        color: #6B7280;
        font-size: 20px;
        line-height: 1;
        opacity: 0.8;
    }

        .nsdx-modal-2025 .header2025-home-close:hover {
            opacity: 1;
        }

    .nsdx-modal-2025 .header2025-pwd-body {
        padding: 18px 20px 16px;
        background: #F9FAFB;
        overflow-x: hidden;
    }

    .nsdx-modal-2025 .header2025-pwd-group {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .nsdx-modal-2025 .header2025-pwd-label {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        margin: 0;
        line-height: 1.4;
    }

    .nsdx-modal-2025 .header2025-pwd-require {
        border-radius: 10px;
        padding: 10px 12px;
        background: #ffeeee;
        border: 1px solid #ffe0e0;
    }

    .nsdx-modal-2025 .header2025-pwd-require-title {
        font-size: 11px;
        font-weight: 600;
        color: #d25055;
        margin-bottom: 2px;
    }

    .nsdx-modal-2025 .header2025-pwd-require-body {
        font-size: 11px;
        color: #4B5563;
    }

    .nsdx-modal-2025 .header2025-pwd-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 0;
    }

        .nsdx-modal-2025 .header2025-pwd-field .form-control {
            width: 100%;
            height: 42px;
            padding: 0 12px;
            border: 1px solid #d8dce3;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.4;
            color: #111827;
            background: #FFFFFF;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

    .nsdx-modal-2025 .header2025-pwd-field {
        position: relative;
    }

        .nsdx-modal-2025 .header2025-pwd-field select.form-control {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-right: 32px;
        }

        .nsdx-modal-2025 .header2025-pwd-field:has(> select.form-control)::after,
        .nsdx-modal-2025 .header2025-pwd-field:has(> .select2-container)::after {
            content: "";
            position: absolute;
            bottom: 18px;
            right: 14px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 4px 0 4px;
            border-color: #6B7280 transparent transparent transparent;
            pointer-events: none;
        }

        .nsdx-modal-2025 .header2025-pwd-field .form-control:focus {
            border-color: var(--danger-btn-button, #e53935);
            box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.12);
            outline: none;
        }

        .nsdx-modal-2025 .header2025-pwd-field textarea.form-control {
            height: auto;
            min-height: 96px;
            padding: 10px 12px;
            resize: vertical;
        }

        .nsdx-modal-2025 .header2025-pwd-field .select2-container {
            width: 100% !important;
        }

        .nsdx-modal-2025 .header2025-pwd-field .select2-container--default .select2-selection--single {
            height: 42px;
            border: 1px solid #d8dce3;
            border-radius: 8px;
            padding: 0 32px 0 12px;
            background: #FFFFFF;
            display: flex;
            align-items: center;
        }

        .nsdx-modal-2025 .header2025-pwd-field .select2-container--default.select2-container--focus .select2-selection--single,
        .nsdx-modal-2025 .header2025-pwd-field .select2-container--default.select2-container--open .select2-selection--single {
            border-color: var(--danger-btn-button, #e53935);
            box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.12);
            outline: none;
        }

        .nsdx-modal-2025 .header2025-pwd-field .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 1.4;
            padding: 0;
            color: #111827;
            font-size: 14px;
            width: 100%;
        }

        .nsdx-modal-2025 .header2025-pwd-field .select2-container--default .select2-selection--single .select2-selection__arrow {
            display: none;
        }

        .nsdx-modal-2025 .header2025-pwd-field.has-error .form-control,
        .nsdx-modal-2025 .header2025-pwd-field.has-error .select2-container--default .select2-selection--single {
            border-color: #e53935;
            background: #fff7f7;
        }

    .nsdx-modal-2025 .header2025-pwd-footer {
        padding: 10px 14px 14px;
        border-top: 1px solid #E5E7EB;
        background: #FFFFFF;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .nsdx-modal-2025 .header2025-pwd-save {
        background-color: var(--danger-btn-button) !important;
        border-color: var(--danger-btn-border) !important;
        color: #fff;
        font-size: 13px !important;
        width: auto;
        min-width: 120px;
        padding: 6px 20px !important;
        font-weight: 500;
        border-radius: 6px;
        display: inline-block;
    }

        .nsdx-modal-2025 .header2025-pwd-save:hover {
            transform: translateY(-1px);
        }

.header2025-cp-modal {
}

#dpa-section-information .bc-field .select2-container {
    width: 100% !important;
}

.auth-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    margin-bottom: 4px;
}

.auth-tile {
    position: relative;
    display: block;
    background: #FFFFFF;
    border: 1px solid var(--dpa-border, #E6EAF0);
    border-radius: var(--dpa-radius, 12px);
    padding: 22px 37px 22px 49px;
    cursor: pointer;
    margin: 0;
    opacity: 0.62;
    transition: opacity .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

    .auth-tile::before {
        content: "";
        position: absolute;
        top: 26px;
        left: 22px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #D5DBE3;
        background: #FFFFFF;
        transition: border-color .18s ease, box-shadow .18s ease;
    }

    .auth-tile::after {
        content: "";
        position: absolute;
        top: 27px;
        left: 23px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dpa-accent, #0EA5A5);
        opacity: 0;
        transform: scale(0.4);
        transition: opacity .18s ease, transform .18s ease;
    }

    .auth-tile:hover {
        opacity: 0.85;
        border-color: var(--dpa-border-strong, #D5DBE3);
    }

    .auth-tile.is-active {
        opacity: 1;
        border-color: var(--dpa-accent, #0EA5A5);
        background: #ffffff;
    }

        .auth-tile.is-active::before {
            border-color: var(--dpa-accent, #0EA5A5);
        }

        .auth-tile.is-active::after {
            opacity: 1;
            transform: scale(1);
        }

.auth-tile__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.auth-tile__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.auth-tile__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--danger-btn-button);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.auth-tile__tag {
    position: absolute;
    top: 20px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--dpa-accent-hover, #0D8E8E);
    background: var(--dpa-accent-soft, #E6F6F6);
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}

    .auth-tile__tag i {
        font-size: 11px;
    }

.auth-tile.is-active .auth-tile__tag {
    color: var(--dpa-accent-hover, #0D8E8E);
    background: var(--dpa-accent-soft, #E6F6F6);
}

.auth-tile__desc {
    margin: 0;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
}

.dpa-vendor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 14px 0;
}

.dpa-vendor-count {
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .dpa-vendor-count i {
        color: var(--danger-btn-button, #DC2626);
    }

.dpa-view-switch {
    display: inline-flex;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    background: #ebeded;
    padding: 4px 4px;
    gap: 2px;
}

.dpa-view-switch__btn {
    background: transparent;
    border: 0;
    padding: 7px 13px;
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    align-items: center;
    text-align: center;
    align-items: center;
    gap: 9px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

    .dpa-view-switch__btn:focus,
    .dpa-view-switch__btn:active,
    .dpa-view-switch__btn:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    .dpa-view-switch__btn.is-active:focus,
    .dpa-view-switch__btn.is-active:active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    }

    .dpa-view-switch__btn::-moz-focus-inner {
        border: 0;
    }

    .dpa-view-switch__btn:hover {
        color: #111827;
    }

    .dpa-view-switch__btn.is-active {
        background: #FFFFFF;
        color: var(--danger-btn-button, #DC2626);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }

.dpa-vendor-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.dpa-vendor-card {
    position: relative;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #FFFFFF;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.dpa-vendor-card__body {
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
}

.dpa-vendor-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dpa-vendor-card__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--danger-btn-button, #DC2626);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid #e1dfdf;
}

.dpa-vendor-card__heading {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dpa-vendor-card__name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpa-vendor-card__role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: #EEF2FF;
    color: #4338CA;
    letter-spacing: 0.3px;
    width: fit-content;
    text-transform: uppercase;
}

    .dpa-vendor-card__role i {
        font-size: 10px;
    }

.dpa-vendor-card__desc-wrap {
    margin: 0;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
}

.dpa-vendor-card__desc-label {
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dpa-vendor-card__desc {
    margin: 0;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dpa-vendor-card__desc--muted {
    color: #9CA3AF;
    font-style: italic;
}

.dpa-vendor-card__footer {
    display: flex;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid #F3F4F6;
}

.dpa-vendor-card__btn {
    flex: 1 1 0;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

    .dpa-vendor-card__btn:focus,
    .dpa-vendor-card__btn:active,
    .dpa-vendor-card__btn:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    .dpa-vendor-card__btn::-moz-focus-inner {
        border: 0;
    }

.dpa-vendor-card__btn--edit {
    background: #eff6ff;
    border-color: #DBEAFE;
    color: #1D4ED8;
    color: var(--danger-btn-button) !important;
    background-color: #eff6ff;
    background-image: none !important;
}

}

.dpa-vendor-card__btn--edit:hover {
    background: #DBEAFE;
    border-color: #BFDBFE;
}

.dpa-vendor-card__btn--delete {
    background: #FEF2F2;
    border-color: #FEE2E2;
    color: #B91C1C;
}

    .dpa-vendor-card__btn--delete:hover {
        background: #FEE2E2;
        border-color: #FECACA;
    }

.nsdx-modal-2025 .dpa-modal-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid #E5E7EB;
    background: #FFFFFF;
    display: flex;
    justify-content: end;
}

.nsdx-modal-2025 .dpa-modal-btn {
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 23px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nsdx-modal-2025 .dpa-modal-btn--cancel {
    background-color: #F3F4F6;
    border-color: #D1D5DB;
    color: #374151;
}

    .nsdx-modal-2025 .dpa-modal-btn--cancel:hover {
        background-color: #E5E7EB;
        border-color: #9CA3AF;
    }

.nsdx-modal-2025 .dpa-modal-btn--save {
    background-color: var(--danger-btn-button);
    border-color: var(--danger-btn-border);
    color: #fff;
}

    .nsdx-modal-2025 .dpa-modal-btn--save:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    .nsdx-modal-2025 .dpa-modal-btn--save:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

@media (max-width: 1024px) {
    .dpa-detail-page .dpa-layout {
        flex-direction: column;
    }

    .dpa-detail-page .dpa-aside {
        width: 100%;
    }

    .dpa-detail-page .dpa-aside-sticky {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.nk-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

.nk-header-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

.nk-lang-tabs-container {
    display: flex;
    background: transparent;
    border: none;
    padding: 0;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    margin-bottom: 25px;
}

.nk-lang-tab-card {
    min-width: 100px;
    border-bottom: 2px solid transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

    .nk-lang-tab-card:hover {
        background: rgba(0, 123, 255, 0.05);
    }

    .nk-lang-tab-card.is-active {
        border-color: #08b3ad;
        background: #08b3ad1c;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
        border-radius: 5px 5px 0px 0px;
    }

    .nk-lang-tab-card.is-off {
        opacity: 0.6;
        background: #f1f5f9;
        border-style: dashed;
    }

    .nk-lang-tab-card.is-active .nk-lang-name {
        color: #08b3ad;
        text-align: center;
    }

.nk-lang-name {
    font-weight: 600;
    color: #64748b;
}

.nk-content-locked {
    position: relative;
    pointer-events: none;
    opacity: 0.35;
    filter: grayscale(0.8);
}

.btn-manage-lang {
    border-radius: 8px;
    font-weight: 600;
}

.alert-rounded {
    border-radius: 8px;
}

.nk-pref-tabs-container {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 25px;
    gap: 12px;
}

.nk-pref-tab-item {
    min-width: 100px;
    border-bottom: 2px solid transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

    .nk-pref-tab-item:hover {
        background: rgba(0, 123, 255, 0.05);
    }

    .nk-pref-tab-item.is-active {
        border-color: #08b3ad;
        background: #08b3ad1c;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1);
        border-radius: 5px 5px 0px 0px;
    }

        .nk-pref-tab-item.is-active .nk-lang-name {
            color: #08b3ad;
            font-weight: 600;
        }

.nk-lang-name {
    font-weight: 600;
    color: #64748b;
    font-size: 14px;
}

.nk-pref-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.nk-pref-accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

    .nk-pref-accordion-item.is-active {
        border-color: #007bff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

.nk-pref-section {
    width: 100%;
}

.nk-pref-section__title {
    display: block;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.nk-pref-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nk-pref-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .nk-pref-item:hover {
        border-color: #d8dee8;
        box-shadow: 0 8px 24px rgba(16,24,40,.06);
    }

    .nk-pref-item.is-open {
        border-color: #cfd8e3;
    }

.nk-pref-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: #fbfcfe;
    cursor: pointer;
}

.nk-pref-item.is-open .nk-pref-item__header {
    background: #e6eaed;
    border-bottom: 1px solid #eef2f7;
}

.nk-pref-item__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.nk-pref-item__arrow {
    width: 18px;
    min-width: 18px;
    margin-top: 2px;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}

.nk-pref-item.is-open .nk-pref-item__arrow {
    color: #000;
}

.nk-pref-item__summary {
    min-width: 0;
    flex: 1;
}

.nk-pref-item__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.nk-pref-item__title {
    font-size: 13px;
    font-weight: 600;
    color: #000;
    line-height: 1.4;
    word-break: break-word;
}

.nk-pref-item__meta {
    margin-top: 4px;
}

.nk-pref-item__meta-text {
    font-size: 12px;
    color: #6b7280;
}

.nk-pref-item__header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nk-pref-item__toggle-wrap {
    display: flex;
    align-items: center;
}

.nk-pref-item__toggle {
    margin-bottom: 0 !important;
}

.nk-pref-item__badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.nk-pref-item__badge--fixed {
    background: #ecfdf3;
    color: #027a48;
    border: 1px solid #d1fadf;
}

.nk-pref-item__badge--optional {
    background: #f2f4f7;
    color: #475467;
    border: 1px solid #eaecf0;
}

.nk-pref-item__body {
    padding: 30px;
    background: #ffffff;
}

.nk-pref-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.nk-pref-field {
    min-width: 0;
}

.nk-pref-field--full {
    grid-column: 1 / -1;
}

.nk-pref-label {
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.nk-pref-service-panel__title {
    font-size: 13px;
    font-weight: 600;
    color: #000;
}

.nk-pref-input,
.nk-pref-textarea {
    display: block;
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fff;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #111827;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .nk-pref-input:focus,
    .nk-pref-textarea:focus {
        outline: none;
        border-color: #84a9ff;
        box-shadow: 0 0 0 4px rgba(59,130,246,.12);
    }

.nk-pref-textarea {
    resize: vertical;
    min-height: 88px;
}

.nk-pref-textarea--sm {
    min-height: 72px;
}

.nk-pref-service-panel {
    margin-top: 4px;
    border: 1px solid #eef2f7;
    border-radius: 6px;
    background: #fcfdff;
    overflow: hidden;
}

.nk-pref-service-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    background: #f9fbff;
}

.nk-pref-service-panel__count {
    font-size: 12px;
    color: #6b7280;
}

.nk-pref-empty {
    margin: 16px;
    padding: 18px;
    border: 1px dashed #d0d5dd;
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    color: #667085;
    background: #ffffff;
}

.nk-pref-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.nk-pref-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .nk-pref-table thead th {
        padding: 12px 14px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: #475467;
        background: #f9fafb;
        border-bottom: 1px solid #eaecf0;
    }

    .nk-pref-table tbody td {
        padding: 14px;
        vertical-align: top;
        font-size: 13px;
        color: #111827;
        border-bottom: 1px solid #f2f4f7;
        background: #ffffff;
    }

    .nk-pref-table tbody tr:last-child td {
        border-bottom: none;
    }

.nk-pref-service-name {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.nk-pref-service-name__text {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    line-height: 1.5;
    word-break: break-word;
}

.nk-pref-service-name__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0;
}

    .nk-pref-service-name__action:hover {
        color: #2563eb;
        border-color: #bfd3ff;
        background: #eff6ff;
    }

.nk-pref-duration {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: #344054;
    background: #f2f4f7;
    border: 1px solid #eaecf0;
}

@media (max-width: 991px) {
    .nk-pref-form-grid {
        grid-template-columns: 1fr;
    }

    .nk-pref-field--full {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .nk-pref-item__header {
        padding: 14px;
        align-items: flex-start;
    }

    .nk-pref-item__header-right {
        padding-top: 2px;
    }

    .nk-pref-item__body {
        padding: 14px;
    }

    .nk-pref-service-panel__head {
        padding: 12px 14px;
    }

    .nk-pref-table thead {
        display: none;
    }

    .nk-pref-table,
    .nk-pref-table tbody,
    .nk-pref-table tr,
    .nk-pref-table td {
        display: block;
        width: 100%;
    }

        .nk-pref-table tbody tr {
            border-bottom: 1px solid #eef2f7;
            padding: 8px 0;
        }

            .nk-pref-table tbody tr:last-child {
                border-bottom: none;
            }

        .nk-pref-table tbody td {
            border-bottom: none;
            padding: 10px 0;
            background: transparent;
        }

            .nk-pref-table tbody td::before {
                content: attr(data-label);
                display: block;
                margin-bottom: 6px;
                font-size: 11px;
                font-weight: 600;
                color: #667085;
                text-transform: none;
            }
}

.nk-pref-item__meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nk-pref-item__meta-text {
    font-size: 12px;
    color: #6b7280;
}

.nk-pref-item__meta-state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #166534;
    background: #ecfdf3;
    border: 1px solid #d1fadf;
}

    .nk-pref-item__meta-state.is-off {
        color: #667085;
        background: #f2f4f7;
        border-color: #eaecf0;
    }

    .nk-pref-item__meta-state.is-fixed {
        color: #344054;
        background: #f2f4f7;
        border-color: #eaecf0;
    }

.nk-pref-default-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #08b3ad5e;
    border-radius: 6px;
    background: #e1e9e91c;
}

.nk-pref-default-card--fixed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #08b3ad5e;
    border-radius: 6px;
    background: #e1e9e91c;
}

.nk-pref-default-card__left {
    min-width: 0;
    flex: 1;
}

.nk-pref-default-card__title {
    font-size: 13px;
    font-weight: 700;
    color: #1d2939;
    margin-bottom: 4px;
}

.nk-pref-default-card__desc {
    font-size: 12px;
    line-height: 1.6;
    color: #000000;
}

.nk-pref-default-card__right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nk-pref-default-card__toggle {
    margin-bottom: 0 !important;
}

.nk-pref-lock-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #475467;
    background: #f2f4f7;
    border: 1px solid #eaecf0;
}

@media (max-width: 767px) {
    .nk-pref-default-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .nk-pref-default-card__right {
        width: 100%;
        justify-content: flex-start;
    }
}

.nk-policy-config-v2,
.nk-policy-config-v2 * {
    font-size: 13px;
}

.nk-policy-config-v2 {
    --nk-primary: #08b3ad;
    --nk-primary-rgb: 8, 179, 173;
    --nk-primary-soft: rgba(8, 179, 173, 0.08);
    --nk-primary-soft-2: rgba(8, 179, 173, 0.14);
    --nk-border: #e8eef2;
    --nk-text: #24343f;
    --nk-text-soft: #6c7a86;
    --nk-bg: #f7fbfb;
    --nk-white: #ffffff;
    --nk-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
    --nk-shadow-hover: 0 16px 40px rgba(8, 179, 173, 0.12);
    --nk-radius-xl: 18px;
    --nk-radius-lg: 14px;
    --nk-radius-md: 12px;
    --nk-radius-sm: 10px;
    color: var(--nk-text);
}

    .nk-policy-config-v2 .nk-content-wrapper {
        background: linear-gradient(180deg, #ffffff 0%, #fbfefe 100%);
        border: 1px solid rgba(8, 179, 173, 0.08);
        border-radius: 22px;
        box-shadow: var(--nk-shadow);
        padding: 22px;
        transition: all 0.25s ease;
    }

        .nk-policy-config-v2 .nk-content-wrapper:hover {
            box-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
        }

    .nk-policy-config-v2 .nk-content-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eef5f6;
        margin-bottom: 18px;
        padding-bottom: 16px;
    }

    .nk-policy-config-v2 .CB-section-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .nk-policy-config-v2 .CB-section-header img {
            width: 36px;
            height: 36px;
            padding: 8px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(8, 179, 173, 0.12), rgba(8, 179, 173, 0.04));
            border: 1px solid rgba(8, 179, 173, 0.12);
        }

    .nk-policy-config-v2 .nk-header-main-title {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #000;
        letter-spacing: -0.2px;
    }

    .nk-policy-config-v2 .nk-policy-glass-card {
        background: linear-gradient(180deg, #fcffff 0%, #f8fcfc 100%);
        border: 1px solid rgba(8, 179, 173, 0.10);
        border-radius: var(--nk-radius-xl);
        padding: 18px;
        position: relative;
        overflow: hidden;
    }

        .nk-policy-config-v2 .nk-policy-glass-card:before {
            content: "";
            position: absolute;
            top: -40px;
            right: -40px;
            width: 140px;
            height: 140px;
            background: radial-gradient(circle, rgba(8, 179, 173, 0.10) 0%, rgba(8, 179, 173, 0.00) 70%);
            pointer-events: none;
        }

    .nk-policy-config-v2 .nk-policy-header-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }

    .nk-policy-config-v2 .nk-current-label-box {
        min-width: 280px;
        flex: 1;
    }

        .nk-policy-config-v2 .nk-current-label-box small {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            color: var(--nk-text-soft);
            letter-spacing: 0.8px;
            margin-bottom: 8px;
        }

    .nk-policy-config-v2 .nk-current-label-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 10px 14px;
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(8, 179, 173, 0.12), rgba(8, 179, 173, 0.06));
        border: 1px solid rgba(8, 179, 173, 0.18);
        color: #0d5f5c;
        font-weight: 600;
        line-height: 1.4;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    }

    .nk-policy-config-v2 .btn-outline-theme {
        border: 1px solid rgba(8, 179, 173, 0.24);
        background: #fff;
        color: var(--nk-primary);
        border-radius: 12px;
        padding: 8px 14px;
        font-size: 12px;
        font-weight: 700;
        transition: all 0.2s ease;
    }

        .nk-policy-config-v2 .btn-outline-theme:hover,
        .nk-policy-config-v2 .btn-outline-theme:focus {
            background: var(--nk-primary);
            color: #fff;
            border-color: var(--nk-primary);
            box-shadow: 0 8px 20px rgba(8, 179, 173, 0.20);
        }

    .nk-policy-config-v2 .nk-option-vertical-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .nk-policy-config-v2 .nk-modern-option-row {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
        border: 1px solid var(--nk-border);
        border-radius: 16px;
        background: #fff;
        cursor: pointer;
        transition: all 0.22s ease;
    }

        .nk-policy-config-v2 .nk-modern-option-row:hover {
            transform: translateY(-1px);
            border-color: rgba(8, 179, 173, 0.22);
            box-shadow: 0 12px 24px rgba(16, 24, 40, 0.06);
        }

        .nk-policy-config-v2 .nk-modern-option-row.active {
            border-color: rgba(8, 179, 173, 0.35);
            background: linear-gradient(180deg, rgba(8, 179, 173, 0.08), rgba(8, 179, 173, 0.03));
            box-shadow: var(--nk-shadow-hover);
        }

            .nk-policy-config-v2 .nk-modern-option-row.active:after {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 16px;
                pointer-events: none;
                box-shadow: inset 0 0 0 1px rgba(8, 179, 173, 0.08);
            }

    .nk-policy-config-v2 .nk-check-indicator {
        position: relative;
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-top: 2px;
        border-radius: 50%;
        border: 2px solid #c6d3d8;
        background: #fff;
        transition: all 0.2s ease;
    }

    .nk-policy-config-v2 .nk-modern-option-row.active .nk-check-indicator {
        border-color: var(--nk-primary);
        background: var(--nk-primary);
        box-shadow: 0 0 0 4px rgba(8, 179, 173, 0.12);
    }

        .nk-policy-config-v2 .nk-modern-option-row.active .nk-check-indicator:after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
        }

    .nk-policy-config-v2 .nk-option-info {
        flex: 1;
        min-width: 0;
    }

    .nk-policy-config-v2 .nk-opt-desc {
        display: block;
        color: var(--nk-text-soft);
        line-height: 1.65;
        font-size: 13px;
    }

    .nk-policy-config-v2 .nk-badge-v2 {
        display: inline-flex;
        align-items: center;
        height: 22px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(8, 179, 173, 0.12);
        color: var(--nk-primary);
        font-size: 11px;
        font-weight: 700;
        border: 1px solid rgba(8, 179, 173, 0.16);
    }

    .nk-policy-config-v2 .nk-preview-text {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--nk-primary);
        font-weight: 600;
        text-decoration: none;
        padding: 8px 0 2px;
        transition: all 0.2s ease;
    }

        .nk-policy-config-v2 .nk-preview-text:hover {
            color: #068883;
            text-decoration: none;
        }

    .nk-policy-config-v2 .url-input-container {
        position: relative;
        margin-top: 12px;
    }

    .nk-policy-config-v2 .url-input-icon {
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        color: var(--nk-primary);
        opacity: 0.9;
        z-index: 2;
    }

    .nk-policy-config-v2 .url-input-field {
        width: 100%;
        height: 42px;
        border-radius: 12px;
        border: 1px solid #dbe7ea;
        background: #fff;
        padding: 0 14px 0 40px;
        color: #1c2e36;
        outline: none;
        transition: all 0.2s ease;
        box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.02);
    }

        .nk-policy-config-v2 .url-input-field::placeholder {
            color: #9aacb3;
        }

        .nk-policy-config-v2 .url-input-field:focus {
            border-color: rgba(8, 179, 173, 0.45);
            box-shadow: 0 0 0 4px rgba(8, 179, 173, 0.10);
        }

        .nk-policy-config-v2 .url-input-field[disabled] {
            background: #f7fafb;
            color: #90a0a8;
            cursor: not-allowed;
        }

@media (max-width: 767px) {
    .nk-policy-config-v2 .nk-content-wrapper {
        padding: 16px;
        border-radius: 18px;
    }

    .nk-policy-config-v2 .nk-policy-glass-card {
        padding: 14px;
        border-radius: 16px;
    }

    .nk-policy-config-v2 .nk-policy-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .nk-policy-config-v2 .btn-outline-theme {
        width: 100%;
        justify-content: center;
    }
}

.nk-header-main-title {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin: 5px 0px 0px 0px;
}

.nk-policy-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #cbd5e1;
}

.nk-current-label-tag {
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    color: #334155;
    margin: 5px 10px 0px 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.nk-option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.nk-modern-option {
    position: relative;
    padding: 20px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

    .nk-modern-option:hover {
        border-color: #3b82f6;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .nk-modern-option.active {
        border-color: #3b82f6;
        background-color: #eff6ff;
    }

/* --- Check Indicator (The Dot) --- */
.nk-check-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
}

.nk-modern-option.active .nk-check-indicator {
    border-color: #3b82f6;
    background: #3b82f6;
    box-shadow: inset 0 0 0 4px #eff6ff;
}

.nk-opt-desc {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.4;
}

.nk-badge-v2 {
    background: #e6f4ea;
    color: #1e7f43;
    border: 1px solid #b7e1c1;
}

.url-input-container {
    position: relative;
    display: flex;
    align-items: center;
    transition: opacity 0.3s;
}

    .url-input-container.is-disabled {
        opacity: 0.5;
        pointer-events: none;
    }

.url-input-icon {
    position: absolute;
    left: 12px;
    color: #94a3b8;
}

.url-input-field {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}

    .url-input-field:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

@media (max-width: 768px) {
    .nk-option-grid {
        grid-template-columns: 1fr;
    }
}

.cb-theme-editor {
    background: #fff;
}

.cb-theme-section {
    transition: all 0.3s ease;
}

    .cb-theme-section.is-hidden {
        display: none;
    }

.cb-theme-section__title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cb-theme-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    align-items: center;
    padding: 20px;
}

.cb-theme-swatch {
    cursor: pointer;
    position: relative;
    transition: transform 0.2s;
}

    .cb-theme-swatch:hover {
        transform: translateY(-3px);
    }

.cb-theme-swatch__visual {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #eee;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.cb-theme-swatch__sub {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    bottom: -2px;
    right: -2px;
    border: 2px solid #fff;
}

.cb-theme-swatch.is-selected .cb-theme-swatch__visual {
    border-color: #00c292;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00c292;
}

.cb-theme-custom-btn {
    height: 42px;
    padding: 0 20px;
    border: 1px dashed #ccc;
    background: #f9f9f9;
    border-radius: 21px;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.cb-theme-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.cb-theme-back-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.cb-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.cb-color-card {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.cb-color-card__header {
    background: #f8f9fa;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #eee;
}

.cb-color-card__body {
    padding: 25px 25px 15px 25px;
}

.cb-color-field {
    margin-bottom: 20px;
}

.cb-color-field__label {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: #333;
}

.cb-color-field__control {
    display: flex;
    height: 34px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.cb-color-field__preview {
    width: 34px;
    height: 34px;
    cursor: pointer;
    border-right: 1px solid #ddd;
}

.cb-color-field__input {
    flex: 1;
    border: none;
    padding: 0 10px;
    font-size: 12px;
    outline: none;
}

.cb-color-field__copy {
    width: 34px;
    background: #fff;
    border: none;
    border-left: 1px solid #ddd;
    color: #999;
    cursor: pointer;
}

.input-hidden {
    display: none;
}

.cb-color-field__copy:focus,
.cb-color-field__copy:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.cb-color-field__copy:active {
    background-color: #f0f0f0;
    transform: translateY(1px);
}

.cb-theme-back-btn:focus,
.cb-theme-custom-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.bc-config-container {
    padding: 1.5rem;
    background-color: #fff;
}

.bc-card {
    background: #fff;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.bc-card__header {
    background: #fcfcfc;
    padding: 12px 20px;
    border-bottom: 1px solid #eaeaea;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.bc-field {
    margin-bottom: 1.25rem;
}

.bc-field__label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    margin-bottom: 1rem;
}

.plugin-field__label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #000;
    font-size: 13px;
    margin-block: 7px;
}

.bc-field__control {
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .bc-field__control:focus-within {
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.bc-field--error .netka-banner-setup__input {
    border-color: #f0b6b9 !important;
}

.bc-field__input {
    width: 100%;
    border: none;
    padding: 0 0px;
    font-size: 13px;
    color: #000000;
    background: transparent;
    outline: none;
    font-weight: 400;
}

.bc-field--error .bc-field__control {
    border-color: #f0b6b9 !important;
}

.bc-field__error-msg {
    color: #f64e60;
    font-size: 11px;
    margin-top: 4px;
    display: block;
}

/* ── Discovery Panel ─────────────────────────────── */
.bc-discovery-panel {
    background: #fff;
    border: 1px solid #e8ecf0;
    border-radius: 10px;
    margin-top: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    overflow: hidden;
}

.bc-discovery-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e8ecf0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.bc-discovery-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bc-discovery-header__title {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.bc-discovery-header__date {
    font-size: 11px;
    color: #9ca3af;
}

/* Stats row */
.bc-discovery-stats {
    display: flex;
    border-bottom: 1px solid #f0f4f8;
}

.bc-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 2px;
}

    .bc-stat + .bc-stat {
        border-left: 1px solid #f0f4f8;
    }

.bc-stat__value {
    font-size: 20px;
    font-weight: 700;
    color: #1e40af;
    line-height: 1;
}

.bc-stat__label {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* List */
.bc-discovery-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 6px 0;
}

    .bc-discovery-list::-webkit-scrollbar {
        width: 4px;
    }

    .bc-discovery-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .bc-discovery-list::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 2px;
    }

.bc-discovery-empty {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: #c4c4c4;
}

.bc-discovery-item {
    font-size: 12px;
    padding: 7px 16px;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .12s;
}

    .bc-discovery-item:hover {
        background: #f8fafc;
    }

.bc-discovery-item__icon {
    color: #cbd5e1;
    flex-shrink: 0;
    font-size: 11px;
}

.bc-discovery-item__url {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-discovery-item__count {
    flex-shrink: 0;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 28px;
    text-align: center;
}

.bc-discovery-item__count--zero {
    background: #f3f4f6;
    color: #9ca3af;
}

/* Status Badges */
.bc-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.bc-status--scanning {
    background: #fff8e6;
    color: #d97706;
}

.bc-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    animation: bc-pulse 1.2s ease-in-out infinite;
    display: inline-block;
}

@keyframes bc-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.7);
    }
}

.bc-status--scanned {
    background: #ecfdf5;
    color: #059669;
}

.bc-status--quota-exceeded {
    background: #fef2f2;
    color: #dc2626;
}

.bc-input {
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.position-relative {
    position: relative;
}

.bc-card-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(1px);
    border-radius: 0 0 8px 8px;
}

.bc-content-locked {
    opacity: 0.4;
    filter: grayscale(1);
    pointer-events: none;
}

.btn-xs {
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 3px;
}

.btn-xs {
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 3px;
}

@keyframes global-pulse-highlight {
    0% {
        background-color: transparent;
        border-color: transparent;
        box-shadow: 0 0 0 0 rgba(8, 179, 173, 0);
    }

    50% {
        background-color: #08b3ad1c;
        border-color: #08b3ad;
        box-shadow: 0 0 0 10px rgba(8, 179, 173, 0.1);
    }

    100% {
        background-color: transparent;
        border-color: transparent;
        box-shadow: 0 0 0 0 rgba(8, 179, 173, 0);
    }
}

.focus-highlight-active {
    animation: global-pulse-highlight 1.2s ease-in-out 2;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.lang-selection-list {
    column-gap: 20px;
    display: flex;
    gap: 20px;
}

.lang-name-text {
    font-weight: 600;
    color: #000;
    font-size: 13px;
}

.themed-toggle-switch-main {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.lang-select-item .flag-icon {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.d-flex.align-items-center {
    display: flex;
    align-items: center;
}

.layout-option-card-new {
    flex: 1;
    border: 2px solid #f1f5f9;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

    .layout-option-card-new img {
        height: 40px;
        margin-bottom: 8px;
        opacity: 0.6;
    }

    .layout-option-card-new span {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
    }

    .layout-option-card-new.is-active {
        border-color: #08b3ad;
        background: #f0fdfa;
    }

        .layout-option-card-new.is-active img {
            opacity: 1;
        }

        .layout-option-card-new.is-active span {
            color: #08b3ad;
        }

.position-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.hidden-radio {
    display: none;
}

.layout-option-card-new {
    flex: 1;
    border: 2px solid #f1f5f9;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

    .layout-option-card-new img {
        height: 40px;
        margin-bottom: 8px;
        opacity: 0.6;
    }

    .layout-option-card-new span {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
    }

    .layout-option-card-new.is-active {
        border-color: #08b3ad;
        background: #f0fdfa;
    }

        .layout-option-card-new.is-active img {
            opacity: 1;
        }

        .layout-option-card-new.is-active span {
            color: #08b3ad;
        }

.position-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.pos-btn {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}

    .pos-btn img {
        height: 30px;
        margin-bottom: 5px;
        filter: grayscale(1);
        opacity: 0.5;
    }

    .pos-btn small {
        display: block;
        font-size: 10px;
        font-weight: 700;
        color: #94a3b8;
    }

    .pos-btn.is-active {
        background: #08b3ad;
        border-color: #08b3ad;
    }

        .pos-btn.is-active img {
            filter: brightness(0) invert(1);
            opacity: 1;
        }

        .pos-btn.is-active small {
            color: #fff;
        }


.pos-group-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    margin-bottom: 1rem;
}

.lang-selection-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.lang-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

    .lang-select-item:hover {
        background: #f8fafc;
        border-color: #08b3ad;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .lang-select-item.is-active {
        border-color: #08b3ad;
        background: rgba(8, 179, 173, 0.04);
    }

        .lang-select-item.is-active .lang-name-text {
            color: #08b3ad;
        }

.nq2025-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    /*pointer-events: none;*/
}

.nq2025-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 20px;
}

    .nq2025-toggle-slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

.active-manual .nq2025-toggle-slider {
    background-color: #08b3ad;
}

    .active-manual .nq2025-toggle-slider:before {
        transform: translateX(18px);
    }

.pos-selection-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(303px, 2fr));
    gap: 12px;
}

.pos-label-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 86%;
    justify-content: space-between;
}

.pos-badge-recommended {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e6f4ea;
    color: #1e7f43;
    border: 1px solid #b7e1c1;
}
/* กล่อง Preview แบบ Dash */
.image-upload-modern {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    background: #fbfcfd;
    padding: 10px;
    transition: 0.2s;
}

.preview-container-simple {
    position: relative;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.img-preview-main-simple {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.upload-overlay-simple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 179, 173, 0.85); /* สี Teal */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    transition: 0.3s;
    cursor: pointer;
    border-radius: 8px;
}

.preview-container-simple:hover .upload-overlay-simple {
    opacity: 1;
}

.hidden-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* รักษาสไตล์ Input เดิมของคุณ */
.radius-input-container {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.radius-value-input {
    border: none;
    padding: 10px 12px;
    width: 100%;
    outline: none;
}

.radius-unit {
    background: #f1f5f9;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    border-left: 1px solid #cbd5e1;
}

.opacity-5 {
    opacity: 0.4;
    filter: grayscale(1);
    pointer-events: none;
}

.opacity-5 {
    opacity: 0.4;
    filter: grayscale(1);
    pointer-events: none;
}

.radius-input-container {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: 0.2s;
}

    .radius-input-container:focus-within {
        border-color: #08b3ad;
        box-shadow: 0 0 0 3px rgba(8, 179, 173, 0.1);
    }

.radius-value-input {
    border: none !important;
    padding: 10px 12px !important;
    width: 100%;
    outline: none !important;
}

.radius-unit {
    background: #f1f5f9;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    border-left: 1px solid #cbd5e1;
}

.show-img {
    align-items: end;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.show-img-title {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}
/* --- Image Settings Column Layout --- */
.media-upload-column {
    flex: 0 0 40%;
}

.dimension-controls-column {
    flex: 1;
}

/* --- Media Dropzone (Left) --- */
.media-dropzone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    background: #f8fafc;
    transition: all 0.3s ease;
    text-align: center;
}

    .media-dropzone:hover:not(.dropzone-disabled) {
        border-color: #08b3ad;
        background: #f0fdfa;
    }

.media-object-preview {
    max-height: 90px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
}

.media-action-area {
    position: relative;
    overflow: hidden;
}

.media-input-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.modern-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s;
}

    .modern-stepper:focus-within {
        border-color: #08b3ad;
        box-shadow: 0 0 0 3px rgba(8, 179, 173, 0.1);
    }

.stepper-input {
    border: none !important;
    padding: 10px 12px;
    width: 100%;
    font-weight: 600;
    color: #1e293b;
    outline: none;
}

.stepper-unit {
    background: #f1f5f9;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    border-left: 1px solid #e2e8f0;
    text-transform: uppercase;
}

.control-small-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-locked {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(1);
}

.text-teal {
    color: #08b3ad;
}

.btn-outline-teal {
    color: #08b3ad;
    border-color: #08b3ad;
}

    .btn-outline-teal:hover {
        background: #08b3ad;
        color: #fff;
    }

.media-selector-card {
    position: relative;
    padding: 20px;
    background: #ffffff;
    border: 2px dashed #e2e8f0;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .media-selector-card:hover:not(.is-locked) {
        border-color: #08b3ad;
        background: #f0fdfa;
    }

    .media-selector-card.is-locked {
        opacity: 0.5;
        filter: grayscale(1);
        background: #f8fafc;
        cursor: not-allowed;
    }

.media-preview-zone {
    position: relative;
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.media-preview-object {
    max-height: 100px;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.media-selector-card:hover:not(.is-locked) .media-preview-object {
    transform: scale(1.05);
}

.media-selector-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 179, 173, 0.17);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.media-preview-zone:hover .media-selector-overlay {
    opacity: 1;
}

.overlay-content {
    text-align: center;
    pointer-events: none;
}

    .overlay-content i {
        font-size: 24px;
        display: block;
    }

    .overlay-content span {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

.media-selector-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.media-status-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.media-reset-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 15;
}

.btn-reset-image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    cursor: pointer;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

    .btn-reset-image:hover {
        background: #fff;
        color: #ef4444;
        border-color: #ef4444;
        transform: rotate(-90deg);
        box-shadow: 0 4px 10px rgba(239, 68, 68, 0.15);
    }

    .btn-reset-image:focus,
    .btn-reset-image:active {
        outline: none !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transform: scale(0.9) rotate(-90deg);
    }

.media-selector-card {
    position: relative;
}

.premium-control-card {
    background: #ffffff;
    padding: 10px 0;
}

.premium-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    margin-bottom: 15px;
}

.premium-stepper-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-circle-stepper {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    font-size: 10px;
}

    .btn-circle-stepper:hover {
        border-color: #08b3ad;
        color: #08b3ad;
        box-shadow: 0 4px 8px rgba(8, 179, 173, 0.15);
    }

    .btn-circle-stepper:active {
        transform: scale(0.92);
    }

.premium-input-box {
    flex: 1;
    position: relative;
    border-bottom: 2px solid #f1f5f9;
    transition: 0.3s;
}

    .premium-input-box:focus-within {
        border-color: #08b3ad;
    }

.premium-input-field {
    width: 100%;
    border: none !important;
    background: transparent;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
    padding: 5px 0;
    outline: none !important;
}

    .premium-input-field::-webkit-inner-spin-button,
    .premium-input-field::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.premium-unit {
    position: absolute;
    right: 0;
    bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
}


.preset-button-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.btn-preset {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 25px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
    outline: none !important;
}

    .btn-preset .p-title {
        font-size: 14px;
        font-weight: 800;
        color: #000;
    }

    .btn-preset small {
        font-size: 9px;
        color: #94a3b8;
        font-weight: 600;
    }

    .btn-preset:hover {
        border-color: #cbd5e1;
        background: #fff;
    }

    .btn-preset.active {
        background: #f0fdfa;
        border-color: #08b3ad;
    }

        .btn-preset.active .p-title {
            color: #08b3ad;
        }

.settings-locked {
    opacity: 0.4;
    filter: grayscale(1);
    pointer-events: none;
}

.cb-radius {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

    .cb-radius:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

.radius-slider-container {
    padding: 10px 0;
}

.nq-range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 5px;
    background: #e9ecef;
    outline: none;
    margin: 15px 0;
}

    .nq-range-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #007bff;
        cursor: pointer;
        border: 3px solid #fff;
        box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);
        transition: 0.2s ease-in-out;
    }

        .nq-range-slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            background: #0056b3;
        }

.nq-gtm-welcome-card .welcome-icon {
    width: 64px;
    height: 64px;
    background: #fffaf0;
    border: 1px solid #ffedd5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 12px rgba(230, 86, 58, 0.1);
}

.nq-gtm-welcome-card .welcome-text-logo {
    display: flex;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.gtm-integration-wrapper {
    max-width: 850px;
    margin: 0 auto;
    color: #334155;
}

.gtm-content-section {
    padding: 40px 30px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e0e6ed;
}

.gtm-step-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.gtm-step-info {
    display: flex;
    gap: 16px;
}


.netka-content-card__button-group {
    display: flex;
    flex-direction: column;
}

.netka-content-card__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    background-color: #f8fafc;
    transition: all 0.2s;
}

    .netka-content-card__input:focus {
        outline: none;
        border-color: #3b82f6;
        background-color: #ffffff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.input-with-action {
    position: relative;
    display: flex;
    align-items: center;
}

.btn-copy-minimal {
    position: absolute;
    right: 6px;
    background: transparent;
    border: none;
    padding: 6px;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 4px;
}

    .btn-copy-minimal:hover {
        color: #3b82f6;
        background: #eff6ff;
    }

.gtm-visual-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 32px 0;
}

.gtm-status-notice {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.notice-icon-circle {
    width: 50px;
    height: 50px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 16px;
}

.btn-guide-outline {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 6px;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

    .btn-guide-outline:hover {
        background: #f8fafc;
        border-color: #94a3b8;
    }

.nq-gtm-placeholder {
    padding: 60px 20px;
    text-align: center;
    background: #ffffff;
    border: 2px dashed #e2e8f0;
    border-radius: 20px;
}

.nq-gtm-placeholder__icon {
    width: 64px;
    height: 64px;
    background: #f8fafc;
    color: #4285f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px;
}

.nq-gtm-placeholder__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.nq-gtm-placeholder__text {
    color: #64748b;
    margin-bottom: 24px;
}

.nq-gtm-placeholder__hint {
    font-size: 13px;
    color: #94a3b8;
}

.nq-gtm-journey-card {
    background: #ffffff;
    border-radius: 20px;
    /*border: 1px solid #e2e8f0;*/
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    overflow: hidden;
}

.nq-gtm-section {
    padding: 32px;
}

.nq-gtm-section__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.nq-gtm-badge {
    background: #4285f41a;
    color: #4285f4;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 24px;
    border: 1px solid #4285f4;
}

    .nq-gtm-badge.is-alt {
        background: #34a8531f;
        border: 1px solid #34a853;
        color: #34a853;
    }

.nq-gtm-timeline {
    position: relative;
    padding-left: 20px;
}

.nq-gtm-step {
    position: relative;
    padding-left: 40px;
    padding-bottom: 35px;
    border-left: 2px solid #f1f5f9;
}

    .nq-gtm-step.is-last {
        border-left-color: transparent;
        padding-bottom: 0;
    }

.nq-gtm-step__marker {
    position: absolute;
    left: -14px;
    top: 0;
    width: 26px;
    height: 26px;
    background: #fff;
    border: 2px solid #4285f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #4285f4;
    z-index: 2;
}

.nq-gtm-step__marker_2 {
    position: absolute;
    left: -14px;
    top: 0;
    width: 26px;
    height: 26px;
    background: #fff;
    border: 2px solid #34a853;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #34a853;
    z-index: 2;
}

.nq-gtm-step__content h5 {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.nq-gtm-step__content p {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}


.script-info-text-plugin {
    font-weight: 700;
    font-size: 13px;
    color: #4285f4;
}

.nq-gtm-card {
    background: #ffffff;
    border: 1px solid #01a99894;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.04);
    max-width: 500px;
}

.nq-gtm-card__label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 12px;
}

.nq-gtm-card__field-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.nq-gtm-card__icon {
    padding: 0 15px;
    color: #94a3b8;
    font-size: 16px;
    transition: color 0.3s;
}

.nq-gtm-card__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 15px 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    outline: none;
}

    .nq-gtm-card__input::placeholder {
        color: #cbd5e1;
    }


.nq-gtm-card__field-group:focus-within {
    border-color: #0066ff;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
    transform: translateY(-1px);
}

    .nq-gtm-card__field-group:focus-within .nq-gtm-card__icon {
        color: #0066ff;
    }

    .nq-gtm-card__field-group:focus-within .nq-gtm-card__accent-line {
        width: 100%;
    }

.nq-gtm-card__field-group:hover:not(:focus-within) {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.nq-copy-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 550px;
}

.nq-copy-card {
    background: #ffffff;
    border: 1px solid #01a99894;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.04);
}

.nq-copy-card__label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 10px;
}

.nq-copy-card__field-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.nq-copy-card__icon {
    padding: 0 12px;
    color: #94a3b8;
    font-size: 14px;
}

.nq-copy-card__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 12px 10px 0;
    font-size: 13px;
    font-weight: 500;
    color: #000;
    outline: none;
}

.nq-copy-card__btn {
    padding: 0 16px;
    height: 42px;
    background: #0066ff;
    color: #ffffff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .nq-copy-card__btn:hover {
        background: #0052cc;
        box-shadow: -4px 0 10px rgba(0, 102, 255, 0.1);
    }

    .nq-copy-card__btn i {
        font-size: 9px;
    }

.nq-copy-card__field-group:focus-within {
    border-color: #0066ff;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1);
}

    .nq-copy-card__field-group:focus-within .nq-copy-card__icon {
        color: #0066ff;
    }

.nq-copy-card__btn:active {
    transform: scale(0.96);
    background: #0045ad;
}

.nq-copy-card__btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.3);
}

.nq-copy-card__field-group:focus-within {
    border-color: #0066ff;
    background: #ffffff;
    outline: none;
}

.nq-gtm-empty-state__content {
    display: flex;
    justify-content: center;
    padding: 20px 20px;
}

.nq-gtm-welcome-card {
    background: #ffffff;
    border: 1px dashed #e0e6ed;
    border-radius: 16px;
    padding: 40px;
    max-width: 560px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    transition: all 0.3s ease;
}

    .nq-gtm-welcome-card:hover {
        box-shadow: 0 15px 35px rgba(15, 23, 42, 0.05);
    }

    .nq-gtm-welcome-card .welcome-icon {
        width: 64px;
        height: 64px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        margin: 0 auto 20px auto;
    }

    .nq-gtm-welcome-card .welcome-title {
        font-size: 16px;
        font-weight: 700;
        color: #000000;
        margin: 0 0 10px 0;
    }

    .nq-gtm-welcome-card .welcome-subtitle {
        font-size: 13px;
        color: #64748b;
        line-height: 1.6;
        margin: 30px 0 30px 0;
        font-weight: 400;
    }

        .nq-gtm-welcome-card .welcome-subtitle b {
            color: #0f172a;
            font-weight: 600;
        }

.welcome-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .welcome-feature-list li {
        display: flex;
        align-items: flex-start;
        gap: 30px;
    }

    .welcome-feature-list .feature-icon {
        width: 45px;
        height: 45px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

        .welcome-feature-list .feature-icon.icon-red {
            color: #EA4335;
            background: rgba(234, 67, 53, 0.1);
        }

        .welcome-feature-list .feature-icon.icon-blue {
            color: #4285F4;
            background: rgba(66, 133, 244, 0.1);
        }

        .welcome-feature-list .feature-icon.icon-yellow {
            color: #FBBC05;
            background: rgba(251, 188, 5, 0.15);
        }

    .welcome-feature-list .feature-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        .welcome-feature-list .feature-text b {
            font-size: 13px;
            color: #000000;
            font-weight: 500;
        }

        .welcome-feature-list .feature-text span {
            font-size: 13px;
            color: #64748b;
            line-height: 1.5;
            font-weight: 400;
        }

.welcome-action-group {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.nq-gtm-start-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 8px 32px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .nq-gtm-start-btn:hover {
        background: #1d4ed8;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
    }

.welcome-action-group .action-note {
    font-size: 10px;
    color: #94a3b8;
}

.is-locked {
    opacity: 0.5;
    cursor: not-allowed !important;
    filter: grayscale(1);
}

.setup-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    border-radius: 12px;
}

.nq-premium-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(3px);
    border-radius: 12px;
    animation: fadeIn 0.3s ease-out;
}

.nq-lock-card {
    background: #ffffff;
    padding: 45px 35px;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    max-width: 400px;
    width: 90%;
    position: relative;
}


.nq-lock-icon-circle {
    width: 72px;
    height: 72px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 25px;
    position: relative;
}

.nq-pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid #e2e8f0;
    border-radius: 50%;
    animation: nq-pulse 2s infinite;
}

.nq-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 8px;
}

    .nq-check-item:last-child {
        margin-bottom: 0;
    }

    .nq-check-item.is-done {
        color: #08b3ad;
        font-weight: 500;
    }


.nq-btn-primary-glow {
    background: #08b3ad;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 600;
    width: 100%;
    box-shadow: 0 10px 20px -5px rgba(8, 179, 173, 0.4);
    transition: all 0.3s ease;
}

    .nq-btn-primary-glow:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 25px -5px rgba(8, 179, 173, 0.5);
        background: #079a95;
    }

@keyframes nq-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.nq-lock-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.nq-lock-subtitle {
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 20px;
}

.nq-sidebar-control {
    padding-top: 20px;
}

.nq-control-card {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #EDEEF0;
    padding: 20px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.nq-preview-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px 10px;
}

.nq-preview-info {
    display: flex;
    flex-direction: column;
}

.nq-label {
    font-size: 13px;
    font-weight: 600;
    color: #000;
}

.nq-status-text {
    font-size: 11px;
    color: #94a3b8;
    transition: color 0.3s;
}

    .nq-status-text.text-active {
        color: #08b3ad;
        font-weight: 600;
    }

.nq-switch-modern {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

    .nq-switch-modern input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.nq-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e2e8f0;
    transition: .4s;
    border-radius: 24px;
}

    .nq-switch-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

input:checked + .nq-switch-slider {
    background-color: #08b3ad;
}

    input:checked + .nq-switch-slider:before {
        transform: translateX(20px);
    }

.nq-btn-save-banner {
    width: 100%;
    background: var(--danger-btn-button) !important;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(8, 179, 173, 0.2);
}

    .nq-btn-save-banner:hover:not(:disabled) {
        background: #079a95;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(8, 179, 173, 0.3);
    }

    .nq-btn-save-banner:disabled {
        background: #eceff3 !important;
        color: #aab2bd;
        border: 1px dashed #c3cad4;
        padding: 11px;
        cursor: not-allowed;
        box-shadow: none;
        opacity: .9;
        transform: none;
    }

    .nq-btn-save-banner:focus {
        outline: none !important;
    }

    .nq-btn-save-banner:active {
        outline: none !important;
    }

.nq-validation-hint {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-size: 10.5px;
    color: #f43f5e;
}

.nq-modal-custom .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.nq-modal-custom .modal-body {
    padding: 32px 24px 10px;
    text-align: center;
}

.nq-modal-custom .warning-icon-wrapper {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff8e1;
    color: #ffc107;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px;
}

.nq-modal-custom .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.nq-modal-custom .modal-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    font-weight: 400;
}

.nq-modal-custom .modal-footer {
    border-top: none;
    padding: 0px 24px 32px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.nq-btn-outline {
    background: transparent;
    border: 1px solid #dcdfe6;
    color: var(--danger-btn-button);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .nq-btn-outline:hover {
        background: #f8f9fa;
        color: #202124;
        border-color: #c0c4cc;
    }

.nq-btn-primary {
    background: var(--danger-btn-button);
    border: none;
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(66, 133, 244, 0.25);
}

    .nq-btn-primary:hover {
        box-shadow: 0 6px 15px rgba(66, 133, 244, 0.35);
        transform: translateY(-1px);
    }

    .nq-btn-outline:focus,
    .nq-btn-primary:focus {
        outline: none !important;
    }

    .nq-btn-outline:active,
    .nq-btn-primary:active {
        outline: none !important;
    }

.nq-preview-highlight {
    animation: highlight-pulse-9s 9s ease-out 1 forwards !important;
    position: relative;
    z-index: 10000 !important;
}

@keyframes highlight-pulse-9s {
    0%, 20% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.8);
        outline: 2px solid rgba(66, 133, 244, 0.6);
    }

    10% {
        box-shadow: 0 0 0 20px rgba(66, 133, 244, 0);
        outline: 2px solid rgba(66, 133, 244, 0);
    }

    40% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.8);
        outline: 2px solid rgba(66, 133, 244, 0.6);
    }

    50% {
        box-shadow: 0 0 0 20px rgba(66, 133, 244, 0);
        outline: 2px solid rgba(66, 133, 244, 0);
    }

    70% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.8);
        outline: 2px solid rgba(66, 133, 244, 0.6);
    }

    80% {
        box-shadow: 0 0 0 20px rgba(66, 133, 244, 0);
        outline: 2px solid rgba(66, 133, 244, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
        outline: 2px solid rgba(66, 133, 244, 0);
    }
}

.header2025-item .icon-btn {
    position: relative;
}

.header2025-item .icon-btn > .noti-badge,
.header2025-item .icon-btn .noti-header[data-count]::after {
    position: absolute;
    top: -5px;
    right: -5px;
    left: auto;
    box-sizing: border-box;
    display: block;
    min-width: 18px;
    width: auto;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}

/* Header popover — Notifications / Announcements */
.ndpp-npop {
    --npop-brand: var(--danger-btn-button, #00a898);
    --npop-tint: color-mix(in srgb, var(--npop-brand) 10%, #fff);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 400px;
    max-width: calc(100vw - 24px);
    max-height: min(520px, calc(100vh - 90px));
    background: #fff;
    border: 1px solid #e8ebf0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .10);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    transform-origin: top right;
    animation: ndNpopIn .16s ease-out;
}

@keyframes ndNpopIn {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
}

.ndpp-npop__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 10px;
}

.ndpp-npop__title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.ndpp-npop__count {
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: #f1f3f6;
    color: #374151;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ndpp-npop__body {
    flex: 1;
    overflow-y: auto;
    padding: 7px 3px;
    overscroll-behavior: contain;
}

.ndpp-npop__label {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding-block: 12px 2px;
    padding-inline: 18px 30px;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
}

.ndpp-npop__label-count {
    font-weight: 500;
    color: #c0c6d0;
}

.ndpp-npop__item {
    position: relative;
    display: block;
    margin: 6px 12px;
    border-radius: 8px;
    padding: 10px 18px 10px 40px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease;
}

.ndpp-npop__item::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 17px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--npop-brand);
}

.ndpp-npop__item.is-alt::before {
    background: #f59e0b;
}

.ndpp-npop__item:hover,
.ndpp-npop__item:focus-visible {
    background: #f8f9fb;
    color: inherit;
    text-decoration: none;
    outline: none;
}

.ndpp-npop__main {
    display: block;
    min-width: 0;
}

.ndpp-npop__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.ndpp-npop__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndpp-npop__time {
    flex: none;
    font-size: 11.5px;
    color: #a3aab5;
    white-space: nowrap;
}

.ndpp-npop__desc {
    display: -webkit-box;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #000000;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.ndpp-npop.ndpp-npop--drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    max-height: none;
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: -12px 0 32px rgba(16, 24, 40, .12);
    z-index: 1060;
    animation: ndNpopDrawerIn .26s cubic-bezier(.22, .61, .36, 1);
}

@keyframes ndNpopDrawerIn {
    from { transform: translateX(100%); }
}

.ndpp-npop--drawer .ndpp-npop__head {
    padding: 18px 14px 14px 20px;
    border-bottom: 1px solid #f1f3f6;
}

.ndpp-npop--drawer .ndpp-npop__title {
    font-size: 16px;
}

.ndpp-npop--drawer .ndpp-npop__desc {
    -webkit-line-clamp: 2;
}

.ndpp-npop--drawer .ndpp-npop__body {
    display: flex;
    flex-direction: column;
}

.ndpp-npop--drawer .ndpp-npop__empty {
    flex: 1;
    justify-content: center;
    gap: 16px;
    padding-bottom: 72px;
    font-size: 16px;
}

.ndpp-npop--drawer .ndpp-npop__art {
    width: 250px;
    height: 204px;
}

.ndpp-npop__close {
    margin-inline-start: auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ndpp-npop__close:hover,
.ndpp-npop__close:focus-visible {
    background: #f3f4f6;
    color: #111827;
    outline: none;
}

.ndpp-npop__close > .ndpp-ico {
    width: 16px;
    height: 16px;
}

.ndpp-npop-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .25);
    z-index: 1055;
    animation: ndNpopFade .2s ease-out;
}

@keyframes ndNpopFade {
    from { opacity: 0; }
}

.ndpp-npop__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 16px 30px;
    font-size: 14px;
    font-weight: 600;
    color: #475467;
}

.ndpp-npop__art {
    display: block;
    width: 170px;
    height: 138px;
    overflow: visible;
}

.ndpp-npop__art * {
    transform-box: fill-box;
}

.npa-blob { fill: var(--npop-tint); }

.npa-card > rect:first-child {
    fill: #fff;
    stroke: #e4e9f0;
    stroke-width: 1;
}

.npa-card--1 {
    filter: drop-shadow(0 6px 10px rgba(16, 24, 40, .10));
    animation: npa-float 4s ease-in-out infinite;
}

.npa-card--2 {
    opacity: .85;
    animation: npa-float 4s ease-in-out .4s infinite;
}

.npa-card--3 {
    opacity: .6;
    animation: npa-float 4s ease-in-out .8s infinite;
}

.npa-sk { fill: #e6ebf2; }
.npa-sk--l { fill: #eff3f7; }
.npa-av { fill: color-mix(in srgb, var(--npop-brand) 18%, #fff); }

.npa-badge {
    animation: npa-float 3.2s ease-in-out infinite;
}

.npa-pill {
    fill: var(--npop-brand);
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--npop-brand) 40%, transparent));
}

.npa-halo {
    fill: none;
    stroke: var(--npop-brand);
    stroke-width: 1.5;
    opacity: 0;
    transform-origin: center;
    animation: npa-halo 3.2s ease-out infinite;
}

.npa-glyph {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.npa-glyph--bell {
    transform-origin: 50% 8%;
    animation: npa-ring-bell 3.2s ease-in-out infinite;
}

.npa-sheet {
    transform-origin: 50% 0;
    animation: npa-sway 5s ease-in-out infinite;
}

.npa-paper {
    fill: #fff;
    stroke: #e4e9f0;
    stroke-width: 1;
    filter: drop-shadow(0 8px 12px rgba(16, 24, 40, .12));
}

.npa-head { fill: color-mix(in srgb, var(--npop-brand) 30%, #fff); }
.npa-pin { fill: var(--npop-brand); }
.npa-pin-hi { fill: #fff; opacity: .6; }
.npa-pin-shadow { fill: #0f172a; opacity: .12; }

.npa-wave {
    fill: none;
    stroke: var(--npop-brand);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
    animation: npa-wave 2.4s ease-out infinite;
}

.npa-wave--b { animation-delay: .35s; }

.npa-spark {
    fill: #fbbf24;
    transform-origin: center;
    animation: npa-twinkle 4.8s ease-in-out infinite;
}

.npa-spark--b { animation-delay: 1.4s; }
.npa-spark--c { animation-delay: 2.8s; }

@keyframes npa-sway {
    50% { transform: rotate(2deg); }
}

@keyframes npa-wave {
    0% { opacity: 0; transform: translateX(-3px); }
    30% { opacity: .7; }
    100% { opacity: 0; transform: translateX(4px); }
}

@keyframes npa-float {
    50% { transform: translateY(-4px); }
}

@keyframes npa-halo {
    0% { opacity: .45; transform: scale(1); }
    60%, 100% { opacity: 0; transform: scale(1.7); }
}

@keyframes npa-ring-bell {
    0%, 55%, 100% { transform: rotate(0); }
    62% { transform: rotate(14deg); }
    70% { transform: rotate(-11deg); }
    78% { transform: rotate(7deg); }
    86% { transform: rotate(-3deg); }
}

@keyframes npa-twinkle {
    0%, 20%, 100% { transform: scale(0) rotate(-20deg); opacity: 0; }
    35%, 55% { transform: scale(1) rotate(0); opacity: 1; }
    70% { transform: scale(.4) rotate(15deg); opacity: .5; }
}

.ndpp-npop__more {
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--npop-brand);
    text-decoration: none;
    transition: opacity .15s ease;
}

.ndpp-npop__more:hover,
.ndpp-npop__more:focus-visible {
    color: var(--npop-brand);
    text-decoration: none;
    opacity: .75;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .ndpp-npop-backdrop,
    .ndpp-npop,
    .ndpp-npop__art * { animation: none !important; }
}

/* Account modals — Set home page / Change password (body only, chrome = ndpp-wmodal) */
.ndpp-acm {
    --acm-brand: var(--danger-btn-button, #00a898);
}

.ndpp-acm__sub {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    color: #6b7280;
}

.ndpp-acm__options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ndpp-acm__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    outline: none;
    transition: background .15s ease, box-shadow .15s ease;
}

.ndpp-acm__option:hover {
    background: rgba(255, 255, 255, .7);
}

.ndpp-acm__option:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acm-brand) 35%, transparent);
}

.ndpp-acm__option.is-selected {
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .07);
}

.ndpp-acm__opticon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e8ebef;
    display: grid;
    place-items: center;
    color: #64748b;
    font-size: 15px;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.ndpp-acm__option.is-selected .ndpp-acm__opticon {
    background: color-mix(in srgb, var(--acm-brand) 12%, #fff);
    box-shadow: none;
    color: var(--acm-brand);
}

.ndpp-acm__opticon > .ndpp-ico {
    width: 18px;
    height: 18px;
}

.ndpp-acm__opttext {
    flex: 1;
    min-width: 0;
}

.ndpp-acm__optname {
    font-size: 13.5px;
    font-weight: 500;
    color: #1f2937;
}

.ndpp-acm__option.is-selected .ndpp-acm__optname {
    font-weight: 600;
    color: #111827;
}

.ndpp-acm__optdesc {
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.45;
    color: #94a3b8;
}

.ndpp-acm__radio {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    opacity: 0;
    transition: opacity .15s ease;
}

.ndpp-acm__option.is-selected .ndpp-acm__radio {
    opacity: 1;
}

.ndpp-acm__radio::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--acm-brand);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ndpp-acm__field + .ndpp-acm__field {
    margin-top: 16px;
}

.ndpp-acm__pwd {
    position: relative;
}

.ndpp-acm__pwd > .ndpp-input {
    height: 42px;
    padding: 0 44px 0 14px;
    font-size: 14px;
}

.ndpp-acm__pwd > .ndpp-input:focus {
    border-color: #b9bdc4;
}

.ndpp-acm__eye {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8a929c;
    display: grid;
    place-items: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .15s ease, color .15s ease;
}

.ndpp-acm__eye:hover,
.ndpp-acm__eye:focus-visible {
    background: #f3f4f6;
    color: #374151;
    outline: none;
}

.ndpp-acm__eye > .ndpp-ico {
    width: 17px;
    height: 17px;
}

.ndpp-acm__field.has-error .ndpp-input {
    border-color: #ef4444;
}

.ndpp-acm__error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: #dc2626;
}

.ndpp-acm__rules {
    margin-top: 10px;
    padding: 12px 14px 13px;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ndpp-acm__ruleshead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.ndpp-acm__rulestitle {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.ndpp-acm__rulescount {
    margin-inline-start: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f3f6;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    transition: background .2s ease, color .2s ease;
}

.ndpp-acm__rules.is-done .ndpp-acm__rulescount {
    background: color-mix(in srgb, var(--acm-brand) 12%, #fff);
    color: var(--acm-brand);
}

.ndpp-acm__rule {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: #6b7280;
    transition: color .2s ease;
}

.ndpp-acm__rulemark {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f1f3f6;
    transition: background .2s ease;
}

.ndpp-acm__rulemark::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c3cad4;
}

.ndpp-acm__rule.is-ok {
    color: #1f2937;
}

.ndpp-acm__rule.is-ok .ndpp-acm__rulemark {
    background: var(--acm-brand);
    animation: ndAcmPop .3s cubic-bezier(.34, 1.56, .64, 1);
}

.ndpp-acm__rule.is-ok .ndpp-acm__rulemark::after {
    left: 6.5px;
    top: 3.5px;
    width: 4.5px;
    height: 8px;
    border-radius: 0;
    background: none;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@keyframes ndAcmPop {
    from { transform: scale(.6); }
}

.ndpp-hpm__dialog {
    width: calc(100% - 32px);
    max-width: 940px;
}

.ndpp-hpm {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.ndpp-hpm__list {
    min-width: 0;
    max-height: 470px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 16px;
    background: #f6f7f9;
}

.ndpp-hpm .ndpp-acm__optdesc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndpp-hpm__preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 470px;
    padding: 28px 26px;
    border-radius: 16px;
    overflow: hidden;
    background: color-mix(in srgb, var(--acm-brand) 7%, #f6f8fb);
}

.ndpp-hpm__preview::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px);
    background-size: 14px 14px;
    -webkit-mask: linear-gradient(180deg, #000 0%, transparent 70%);
    mask: linear-gradient(180deg, #000 0%, transparent 70%);
}

.ndpp-hpm__window {
    position: relative;
    width: 100%;
    max-width: 520px;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 60px -18px rgba(15, 23, 42, .35), 0 10px 22px -10px color-mix(in srgb, var(--acm-brand) 45%, transparent);
    animation: ndHpmFloat 6s ease-in-out infinite;
}

.ndpp-hpm__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    background: #f3f5f8;
    border-bottom: 1px solid #e8ebf0;
}

.ndpp-hpm__bar > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff5f57;
}

.ndpp-hpm__bar > span:nth-child(2) { background: #febc2e; }
.ndpp-hpm__bar > span:nth-child(3) { background: #28c840; }

.ndpp-hpm__bar > i {
    flex: 1;
    height: 14px;
    margin: 0 30px 0 18px;
    border-radius: 7px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e5e8ee;
}

.ndpp-hpm__app {
    display: flex;
    height: 330px;
}

.ndpp-hpm__side {
    flex: none;
    width: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-inline-end: 1px solid #eef0f3;
    background: var(--danger-sidebar-background, #fff);
}

.ndpp-hpm__logo {
    width: 26px;
    height: 26px;
    margin-bottom: 6px;
    display: block;
}

.ndpp-hpm__logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ndpp-hpm__nav {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #94a3b8;
    font-size: 14px;
    transition: background .25s ease, color .25s ease;
}

.ndpp-hpm__nav > .ndpp-ico {
    width: 18px;
    height: 18px;
}

.ndpp-hpm__nav.is-on {
    background: color-mix(in srgb, var(--acm-brand) 14%, #fff);
    color: var(--acm-brand);
}

.ndpp-hpm__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    background: var(--danger-body-background, #f6f8fb);
}

.ndpp-hpm__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -12px -14px 0;
    padding: 9px 14px;
    background: var(--danger-header-background, #fff);
    border-bottom: 1px solid #eef0f3;
}

.ndpp-hpm__crumb {
    width: 34%;
    height: 7px;
    border-radius: 4px;
    background: #dfe4ec;
}

.ndpp-hpm__pill {
    width: 46px;
    height: 14px;
    margin-inline-start: auto;
    border-radius: 7px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e5e8ee;
}

.ndpp-hpm__avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #cbd5e1;
}

.ndpp-hpm__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    animation: ndHpmRise .5s cubic-bezier(.22, .61, .36, 1) both;
}

.ndpp-hpm__hicon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--acm-brand) 12%, #fff);
    color: var(--acm-brand);
    font-size: 15px;
}

.ndpp-hpm__hicon > .ndpp-ico {
    width: 19px;
    height: 19px;
}

.ndpp-hpm__htext {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ndpp-hpm__name {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndpp-hpm__desc {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndpp-hpm__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ndpp-hpm__kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    animation: ndHpmRise .5s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: calc(.08s + var(--i, 0) * .07s);
}

.ndpp-hpm__kpi > i {
    width: 14px;
    height: 14px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--acm-brand) 18%, #fff);
}

.ndpp-hpm__kpi > b {
    width: 60%;
    height: 9px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--acm-brand) 70%, #0f172a);
}

.ndpp-hpm__kpi > s {
    width: 85%;
    height: 5px;
    border-radius: 3px;
    background: #e5e9f0;
}

.ndpp-hpm__grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 8px;
}

.ndpp-hpm__chart,
.ndpp-hpm__rows {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    animation: ndHpmRise .5s cubic-bezier(.22, .61, .36, 1) .3s both;
}

.ndpp-hpm__chart {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 14px 12px 12px;
}

.ndpp-hpm__chart > span {
    flex: 1;
    border-radius: 4px 4px 2px 2px;
    background: var(--acm-brand);
    transform-origin: 50% 100%;
    animation: ndHpmGrow .7s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: calc(.4s + var(--i, 0) * .06s);
}

.ndpp-hpm__rows {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 12px;
}

.ndpp-hpm__rows > span {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: ndHpmRise .45s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: calc(.45s + var(--i, 0) * .07s);
}

.ndpp-hpm__rows > span > i {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acm-brand);
}

.ndpp-hpm__rows > span > b {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #e5e9f0;
}

.ndpp-hpm__rows > span:nth-child(2n) > b {
    flex: 0 0 62%;
}

.ndpp-hpm__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ndpp-hpm__body > div {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ndpp-hpm__card {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    animation: ndHpmRise .5s cubic-bezier(.22, .61, .36, 1) .1s both;
}

.ndpp-hpm__card > *,
.ndpp-hpm__docs > span {
    animation: ndHpmRise .45s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: calc(.2s + var(--i, 0) * .07s);
}

.ndpp-hpm__body > .ndpp-hpm__inbox,
.ndpp-hpm__body > .ndpp-hpm__toggles,
.ndpp-hpm__table {
    justify-content: space-around;
    gap: 0;
    padding: 4px 12px;
}

.ndpp-hpm__inbox > span,
.ndpp-hpm__toggles > span,
.ndpp-hpm__table > span {
    padding: 7px 0;
    border-bottom: 1px solid #f1f3f6;
}

.ndpp-hpm__inbox > span:last-child,
.ndpp-hpm__toggles > span:last-child,
.ndpp-hpm__table > span:last-child {
    border-bottom: 0;
}

.ndpp-hpm__inbox > span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ndpp-hpm__inbox > span > i {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
}

.ndpp-hpm__inbox > span.is-new > i {
    background: var(--acm-brand);
}

.ndpp-hpm__inbox > span > span {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ndpp-hpm__inbox b,
.ndpp-hpm__toggles b,
.ndpp-hpm__docs b {
    width: 55%;
    height: 6px;
    border-radius: 3px;
    background: #d5dbe4;
}

.ndpp-hpm__inbox s,
.ndpp-hpm__toggles s,
.ndpp-hpm__docs s {
    width: 82%;
    height: 5px;
    border-radius: 3px;
    background: #e9edf2;
}

.ndpp-hpm__inbox > span.is-new b {
    background: color-mix(in srgb, var(--acm-brand) 60%, #0f172a);
}

.ndpp-hpm__inbox > span > em {
    flex: none;
    width: 30px;
    height: 12px;
    border-radius: 6px;
    background: #eef1f5;
}

.ndpp-hpm__inbox > span.is-new > em {
    background: color-mix(in srgb, var(--acm-brand) 16%, #fff);
}

.ndpp-hpm__toggles > span {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 5px;
}

.ndpp-hpm__toggles > span > s {
    grid-row: 2;
}

.ndpp-hpm__toggles > span > i {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 3;
    width: 28px;
    height: 16px;
    border-radius: 8px;
    background: #e2e6ec;
}

.ndpp-hpm__toggles > span > i::after {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .2);
}

.ndpp-hpm__toggles > span.is-on > i {
    background: var(--acm-brand);
}

.ndpp-hpm__toggles > span.is-on > i::after {
    inset-inline-start: 14px;
}

.ndpp-hpm__body > .ndpp-hpm__docs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
}

.ndpp-hpm__docs > span {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.ndpp-hpm__docs > span > i {
    width: 20px;
    height: 25px;
    margin-bottom: 4px;
    border-radius: 3px 8px 3px 3px;
    background: color-mix(in srgb, var(--acm-brand) 12%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acm-brand) 30%, #fff);
}

.ndpp-hpm__docs s + s {
    width: 64%;
}

.ndpp-hpm__docs > span > em {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 30px;
    height: 11px;
    border-radius: 6px;
    background: #dcfce7;
}

.ndpp-hpm__docs > span.is-warn > em {
    background: #fef3c7;
}

.ndpp-hpm__body > .ndpp-hpm__flow {
    display: grid;
    grid-template-columns: 1fr 16px 1fr 16px 1fr;
    align-items: center;
    align-content: space-evenly;
    gap: 0;
    padding: 10px 14px;
}

.ndpp-hpm__flow > .nd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    height: 46px;
    padding: 0 9px;
    border-radius: 9px;
    background: #f6f8fb;
    box-shadow: inset 0 0 0 1px #e6eaf0;
}

.ndpp-hpm__flow > .nd::before,
.ndpp-hpm__flow > .nd::after {
    content: "";
    height: 5px;
    border-radius: 3px;
    background: #d5dbe4;
}

.ndpp-hpm__flow > .nd::before { width: 62%; }
.ndpp-hpm__flow > .nd::after { width: 88%; height: 4px; background: #e6eaf0; }

.ndpp-hpm__flow > .nd.is-on {
    background: color-mix(in srgb, var(--acm-brand) 9%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acm-brand) 40%, #fff);
}

.ndpp-hpm__flow > .nd.is-on::before {
    background: var(--acm-brand);
}

.ndpp-hpm__flow > .ln {
    position: relative;
    height: 2px;
    background: color-mix(in srgb, var(--acm-brand) 40%, #fff);
}

.ndpp-hpm__flow > .ln::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -1px;
    border: 4px solid transparent;
    border-right: 0;
    border-left-color: color-mix(in srgb, var(--acm-brand) 40%, #fff);
}

.ndpp-hpm__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    animation: ndHpmRise .5s cubic-bezier(.22, .61, .36, 1) both;
}

.ndpp-hpm__tools > i {
    width: 55%;
    height: 22px;
    border-radius: 7px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e5e8ee;
}

.ndpp-hpm__tools > b {
    width: 58px;
    height: 22px;
    margin-inline-start: auto;
    border-radius: 7px;
    background: var(--acm-brand);
}

.ndpp-hpm__table {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ndpp-hpm__table > span {
    display: grid;
    grid-template-columns: 1.4fr 1fr 40px;
    align-items: center;
    gap: 12px;
}

.ndpp-hpm__table b {
    height: 6px;
    border-radius: 3px;
    background: #e9edf2;
}

.ndpp-hpm__table b:first-child {
    background: #d5dbe4;
}

.ndpp-hpm__table > .is-head b {
    height: 5px;
    background: #f0f2f5;
}

.ndpp-hpm__table em {
    height: 12px;
    border-radius: 6px;
    background: #dcfce7;
}

.ndpp-hpm__table > .is-warn > em { background: #fef3c7; }
.ndpp-hpm__table > .is-new > em { background: color-mix(in srgb, var(--acm-brand) 18%, #fff); }

.ndpp-side-dark .ndpp-hpm__side {
    border-inline-end-color: transparent;
}

.ndpp-side-dark .ndpp-hpm__nav {
    color: rgba(255, 255, 255, .6);
}

.ndpp-side-dark .ndpp-hpm__nav.is-on {
    background: color-mix(in srgb, var(--acm-brand) 22%, transparent);
    color: #fff;
}

.ndpp-side-accent-low .ndpp-hpm__nav.is-on {
    color: #1f2937;
}

.ndpp-side-dark.ndpp-side-accent-low .ndpp-hpm__nav.is-on {
    color: #fff;
}

.ndpp-hdr-dark .ndpp-hpm__top {
    border-bottom-color: transparent;
}

.ndpp-hdr-dark .ndpp-hpm__crumb {
    background: rgba(255, 255, 255, .25);
}

.ndpp-hdr-dark .ndpp-hpm__pill {
    background: rgba(255, 255, 255, .12);
    box-shadow: none;
}

.ndpp-hpm__main--empty {
    gap: 10px;
}

.ndpp-hpm__main--empty > span {
    height: 54px;
    border-radius: 10px;
    background: #fff;
    opacity: .7;
}

.ndpp-hpm__main--empty > span:last-child {
    flex: 1;
}

@keyframes ndHpmFloat {
    50% { transform: translateY(-6px); }
}

@keyframes ndHpmRise {
    from { opacity: 0; transform: translateY(8px); }
}

@keyframes ndHpmGrow {
    from { transform: scaleY(0); }
}

@media (max-width: 860px) {
    .ndpp-hpm { grid-template-columns: minmax(0, 1fr); }
    .ndpp-hpm__preview { display: none; }
    .ndpp-hpm__list { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ndpp-hpm__window,
    .ndpp-hpm__head,
    .ndpp-hpm__kpi,
    .ndpp-hpm__chart,
    .ndpp-hpm__chart > span,
    .ndpp-hpm__rows,
    .ndpp-hpm__rows > span,
    .ndpp-hpm__card,
    .ndpp-hpm__card > *,
    .ndpp-hpm__docs > span,
    .ndpp-hpm__tools { animation: none; }
}

.ndpp-cpm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: stretch;
}

.ndpp-cpm__form {
    min-width: 0;
}

.ndpp-cpm__art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    border-radius: 16px;
    overflow: hidden;
    background: color-mix(in srgb, var(--acm-brand) 7%, #f6f8fb);
}

.ndpp-cpm__art::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px);
    background-size: 14px 14px;
    -webkit-mask: linear-gradient(180deg, #000 0%, transparent 70%);
    mask: linear-gradient(180deg, #000 0%, transparent 70%);
}

.cpa {
    position: relative;
    width: 100%;
    max-width: 190px;
    height: auto;
    overflow: visible;
}

.cpa-glow {
    fill: color-mix(in srgb, var(--acm-brand) 10%, transparent);
}

.cpa-spark {
    fill: none;
    stroke: color-mix(in srgb, var(--acm-brand) 55%, #fff);
    stroke-width: 2.5;
    stroke-linecap: round;
    animation: cpa-twinkle 2.8s ease-in-out infinite;
}

.cpa-float {
    animation: cpa-float 5s ease-in-out infinite;
}

.cpa-shield {
    fill: #fff;
    filter: drop-shadow(0 14px 20px rgba(16, 24, 40, .12));
}

.cpa-shield-in {
    fill: color-mix(in srgb, var(--acm-brand) 9%, #fff);
    transition: fill .35s ease;
}

.cpa-shackle {
    fill: none;
    stroke: #94a3b8;
    stroke-width: 8;
    stroke-linecap: round;
    transform: translateY(-9px);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), stroke .3s ease;
}

.cpa-lock {
    fill: #94a3b8;
    transition: fill .3s ease;
}

.cpa-hole {
    fill: #fff;
}

.cpa-input {
    fill: #fff;
    stroke: #e4e9f0;
    filter: drop-shadow(0 6px 10px rgba(16, 24, 40, .08));
}

.cpa-dot {
    fill: #e2e6ec;
    transition: fill .25s ease, transform .25s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.cpa-ok {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.cpa-ok > circle {
    fill: var(--acm-brand);
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--acm-brand) 40%, transparent));
}

.cpa-ok > path {
    fill: none;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ndpp-cpm.is-s1 .cpa-dot--1,
.ndpp-cpm.is-s2 .cpa-dot--1, .ndpp-cpm.is-s2 .cpa-dot--2,
.ndpp-cpm.is-s3 .cpa-dot--1, .ndpp-cpm.is-s3 .cpa-dot--2, .ndpp-cpm.is-s3 .cpa-dot--3,
.ndpp-cpm.is-s4 .cpa-dot {
    fill: var(--acm-brand);
}

.ndpp-cpm.is-s4 .cpa-shackle {
    transform: none;
    stroke: var(--acm-brand);
}

.ndpp-cpm.is-s4 .cpa-lock {
    fill: var(--acm-brand);
}

.ndpp-cpm.is-s4 .cpa-shield-in {
    fill: color-mix(in srgb, var(--acm-brand) 16%, #fff);
}

.ndpp-cpm.is-s4 .cpa-ok {
    transform: scale(1);
}

.ndpp-cpm__meter {
    position: relative;
    display: flex;
    gap: 6px;
    width: 120px;
}

.ndpp-cpm__meter > span {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: #e2e6ec;
    transition: background .25s ease;
}

.ndpp-cpm.is-s1 .ndpp-cpm__meter > span:nth-child(-n+1),
.ndpp-cpm.is-s2 .ndpp-cpm__meter > span:nth-child(-n+2),
.ndpp-cpm.is-s3 .ndpp-cpm__meter > span:nth-child(-n+3),
.ndpp-cpm.is-s4 .ndpp-cpm__meter > span {
    background: var(--acm-brand);
}

@keyframes cpa-float {
    50% { transform: translateY(-5px); }
}

@keyframes cpa-twinkle {
    50% { opacity: .35; }
}

@media (max-width: 760px) {
    .ndpp-cpm { grid-template-columns: minmax(0, 1fr); }
    .ndpp-cpm__art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cpa-float,
    .cpa-spark { animation: none; }
}

/* Lock screen */
.ndpp-lock {
    --lock-brand: var(--danger-btn-button, #00a898);
    padding-right: 0 !important;
    padding-left: 0 !important;
    background: rgba(15, 23, 42, .38);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

body:has(#nsdx-lock-screen-modal.show) > .modal-backdrop,
body:has(#nsdx-lock-screen-modal.in) > .modal-backdrop {
    opacity: 0;
}

.ndpp-lock .ndpp-lock__dialog {
    width: auto;
    max-width: none;
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    transform: none;
}

.ndpp-lock__clock {
    margin-bottom: auto;
    padding-bottom: 40px;
    text-align: center;
    color: #111827;
}

.ndpp-lock__zzz {
    position: relative;
    height: 34px;
    margin-bottom: 6px;
}

.ndpp-lock__zzz > i {
    position: absolute;
    left: 50%;
    bottom: 0;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    color: var(--lock-brand);
    opacity: 0;
    animation: ndLockZzz 3s ease-in infinite;
}

.ndpp-lock__zzz > i:nth-child(1) { font-size: 12px; animation-delay: 0s; }
.ndpp-lock__zzz > i:nth-child(2) { font-size: 16px; animation-delay: 1s; }
.ndpp-lock__zzz > i:nth-child(3) { font-size: 21px; animation-delay: 2s; }

@keyframes ndLockZzz {
    0% { opacity: 0; transform: translate(-6px, 6px) rotate(-8deg); }
    20% { opacity: .9; }
    100% { opacity: 0; transform: translate(26px, -30px) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ndpp-lock .ndpp-lock__card { animation: none; }
    .ndpp-lock__zzz > i { animation: none; opacity: .6; }
    .ndpp-lock__zzz > i:nth-child(2) { margin-left: 12px; margin-top: -10px; }
    .ndpp-lock__zzz > i:nth-child(3) { margin-left: 26px; margin-top: -22px; }
}

.ndpp-lock__time {
    font-size: 44px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
}

.ndpp-lock__date {
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
}

.ndpp-lock .ndpp-lock__card {
    width: 480px;
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 56px 40px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: -20px 0 60px -20px rgba(15, 23, 42, .35);
    animation: ndLockIn .4s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes ndLockIn {
    from { transform: translateX(calc(var(--lock-dir, 1) * 100%)); }
}

.ndpp-lock__avatar {
    position: relative;
    width: 84px;
    height: 84px;
}

.ndpp-lock__avatar > img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
}

.ndpp-lock__name {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    text-align: center;
}

.ndpp-lock .ndpp-lock__title {
    margin: 6px 0 32px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.ndpp-lock__field {
    position: relative;
    width: 100%;
}

.ndpp-lock .ndpp-lock__fieldicon {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 18px;
    height: 18px;
    color: #9aa3af;
    transform: translateY(-50%);
    pointer-events: none;
}

.ndpp-lock .ndpp-lock__input {
    width: 100%;
    height: 50px;
    padding: 0 92px 0 44px;
    border: 1px solid #e2e6ec;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    color: #111827;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ndpp-lock .ndpp-lock__input:focus {
    border-color: color-mix(in srgb, var(--lock-brand) 55%, #fff);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lock-brand) 14%, transparent);
}

.ndpp-lock__eye,
.ndpp-lock__go {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.ndpp-lock__eye {
    right: 50px;
    width: 32px;
    height: 32px;
    background: none;
    color: #9aa3af;
}

.ndpp-lock__eye:hover {
    color: #4b5563;
}

.ndpp-lock__go {
    right: 7px;
    width: 36px;
    height: 36px;
    background: var(--lock-brand);
    color: #fff;
    transition: opacity .15s ease, transform .15s ease;
}

.ndpp-lock__go:hover:not(:disabled) {
    transform: translateY(-50%) translateX(2px);
}

.ndpp-lock__go:disabled {
    opacity: .4;
    cursor: default;
}

.ndpp-lock__eye > .ndpp-ico,
.ndpp-lock__go > .ndpp-ico {
    width: 18px;
    height: 18px;
}

.ndpp-lock__hint {
    margin-top: 16px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #9ca3af;
    text-align: center;
    text-wrap: balance;
    margin-bottom: 40px;
}

.ndpp-lock__signout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: #dc2626;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ndpp-lock__signout:focus,
.ndpp-lock__signout:active {
    outline: none;
    box-shadow: none;
}

.ndpp-lock__signout:hover {
    background: #fef2f2;
    color: #dc2626;
}

.ndpp-lock__signout > .ndpp-ico {
    width: 16px;
    height: 16px;
}

/* System Config - Category & TOC */
.tableofcontent-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

.system-config-page {
    max-width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    position: relative;
    scroll-padding-top: 80px;
    scroll-behavior: smooth;
    margin-top: 5.3em;
}

    .system-config-page .UP-main .form-group {
        padding: 0px 20px;
        margin-bottom: 20px;
    }

.category-divider {
    height: 1px;
    margin: 25px 0px 30px 0px;
    background: linear-gradient(to right, rgba(41,50,60,0) 0%, rgba(41,50,60,0.3) 8%, rgb(72 85 99 / 37%) 50%, rgba(41,50,60,0.3) 92%, rgba(41,50,60,0) 100%);
    border-radius: 1px;
}

.toc-card {
    background: #fff;
    border: 1px solid #EDEEF0;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}

    .toc-card.is-collapsed .toc-collapse {
        max-height: 0;
        opacity: 0;
        padding: 0;
        overflow: hidden;
    }

.toc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

    .toc-header:hover {
        background: #f8f8f8;
    }

.toc-title {
    font-weight: 500;
    font-size: 16px;
}

.toc-divider {
    height: 1px;
    background: #EDEEF0;
}

.toc-actions {
    padding: 20px;
    border-top: 1px solid #EDEEF0;
}

.UP-section-title {
    scroll-margin-top: 72px;
}

.toc-link {
    cursor: pointer;
    display: block;
    width: 100%;
    padding: 19px 10px 19px 45px;
    text-align: start;
    -webkit-tap-highlight-color: transparent;
}

    .toc-link:hover {
        color: var(--danger-btn-button);
        background: #f7f7f7;
    }

    .toc-link.is-active {
        font-weight: 600;
        color: var(--danger-btn-button);
        position: relative;
    }

    .toc-link:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }

    .toc-link:focus-visible {
        outline: 2px solid var(--danger-btn-button);
        outline-offset: 2px;
        box-shadow: none;
    }

    .toc-link::-moz-focus-inner {
        border: 0;
    }

.cc-scroll {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cfcfcf #f8f8f8;
}

    .cc-scroll::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .cc-scroll::-webkit-scrollbar-track {
        background: #f7f7f7;
        border-radius: 8px;
    }

    .cc-scroll::-webkit-scrollbar-thumb {
        background: #cfcfcf;
        border-radius: 8px;
        border: 2px solid #f7f7f7;
    }

    .cc-scroll:hover::-webkit-scrollbar-thumb {
        background: #bdbdbd;
    }

    .cc-scroll::-webkit-scrollbar-thumb:active {
        background: #a8a8a8;
    }

    .cc-scroll::-webkit-scrollbar-corner {
        background: #f7f7f7;
    }

.toc-list {
    margin: 0 0 12px;
    padding: 10px 0;
    overflow-y: auto;
    max-height: 50vh;
}

    .toc-list.cc-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .toc-list.cc-scroll::-webkit-scrollbar-thumb {
        background: #d0d0d0;
    }

    .toc-list.cc-scroll:hover::-webkit-scrollbar-thumb {
        background: #bdbdbd;
    }

.category-block {
    background: #fff;
    border-radius: 8px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.tableofcontent {
    transition: all 0.4s ease;
    transform: translateX(0);
    opacity: 1;
}

    .tableofcontent.is-collapsed {
        transform: translateX(100%);
        opacity: 0;
        pointer-events: none;
    }

.toc-toggle-inline {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
    border: none;
    outline: none !important;
}

    .toc-toggle-inline .fa {
        margin: 0px;
        font-size: 8px;
        padding: 0px;
        font-weight: 300;
        color: rgba(0,0,0,0.72);
    }

.toc-collapse {
    transition: max-height .35s ease, opacity .25s ease, padding .25s ease;
    max-height: 600px;
    opacity: 1;
}

.toc-btn {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.toc-btn-primary {
    background-color: var(--danger-btn-button);
    color: #fff;
    border: none;
}

    .toc-btn-primary:hover {
        background-color: var(--danger-btn-button-hover);
    }

.toc-btn-outline {
    background: transparent;
    border: 1.5px solid var(--danger-btn-button);
    color: var(--danger-btn-button);
    margin-bottom: 10px;
}

    .toc-btn-outline:hover {
        background: var(--danger-btn-button) !important;
        color: #fff;
        border-color: var(--danger-btn-button);
    }

.toc-btn:focus, .toc-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 1000px) {
    .tableofcontent {
        display: none !important;
    }

    .UP-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

.sc-field-row {
    display: flex;
    align-items: center;
    gap: 0px;
    transition: all 0.3s ease;
}

.sc-col {
    flex: 1 1 0;
    min-width: 0;
}

.sc-col-form {
    transition: flex-basis 0.3s ease, width 0.3s ease;
    flex: 1 1 100%;
}

    .sc-col-form.has-hint {
        flex: 0 0 50%;
    }

.sc-col-hint {
    flex: 0 0 50%;
    transition: all 0.3s ease;
}

.sc-hint-card {
    padding: 14px 18px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border: 1px dashed rgb(0 0 0 / 28%);
    border-radius: 10px;
    color: #1f2937;
    margin-bottom: 10px;
}

.sc-hint-title {
    font-weight: 600;
    color: var(--danger-btn-button);
    margin-bottom: 6px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sc-hint-text {
    color: #333;
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.sc-hint-toggle {
    margin-left: 6px;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.2s ease, transform 0.2s ease;
}

    .sc-hint-toggle:hover {
        color: var(--danger-btn-button);
        transform: scale(1.1);
    }

    .sc-hint-toggle.is-active {
        color: var(--danger-btn-button);
        transform: rotate(20deg);
    }

@media (max-width: 1000px) {
    .sc-field-row {
        display: flow;
    }

    .sc-col-form, .sc-col-form.has-hint, .sc-col-hint {
        flex: 1 1 100%;
    }
}

.sc-col, .sc-col-form, .sc-col-hint {
    min-width: 0;
}

.sc-boolean-toggle {
    display: flex;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e0e4eb;
    border-radius: 10px;
    padding: 15px 14px;
    margin-bottom: 10px;
    transition: all .2s ease;
}

.sc-boolean-box {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    margin-right: 14px;
    margin-bottom: 0px !important;
}

    .sc-boolean-box input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.sc-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 34px;
    transition: .3s;
}

    .sc-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: .3s;
    }

.sc-boolean-box input:checked + .sc-slider {
    background-color: #0CC262;
}

    .sc-boolean-box input:checked + .sc-slider:before {
        transform: translateX(22px);
    }

.sc-boolean-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sc-boolean-name {
    font-weight: 400;
    color: #000000;
}

.sc-boolean-value {
    margin-left: 6px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 13px;
    margin-right: 14px;
}

    .sc-boolean-value.is-true {
        background-color: #e8fce8;
        color: #0cc262;
    }

    .sc-boolean-value.is-false {
        background-color: #ffe9e9;
        color: #d93025;
    }

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

    .input-with-icon .UP-info-icon {
        position: absolute;
        left: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .input-with-icon input.form-control {
        padding-left: 40px;
    }

.modern-number-hours {
    display: flex;
    flex-direction: column;
    max-width: 383px;
}

.hours-field {
    display: flex;
    align-items: stretch;
    border: 1px solid #dcdfe4;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.hours-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 400;
    width: 100%;
    color: #000;
    min-width: 60px;
}

    .hours-input[type=number] {
        -moz-appearance: textfield;
    }

.hours-label {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: #f9fafb;
    border-left: 1px solid #ced4da;
    font-size: 13px;
    color: #495057;
    white-space: nowrap;
}

/* RTL Toggle */
.rtl-toggle-item {
    padding: 12px 14px;
    gap: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rtl-toggle-label {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rtl-toggle-switch {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 10px;
}

.rtl-toggle-track {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    background: #E5E7EB;
    border-radius: 8px;
}

.rtl-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #9CA3AF;
    border-radius: 50%;
    transition: left 0.2s, background 0.2s;
}

.rtl-toggle-item.rtl-active .rtl-toggle-track {
    background: linear-gradient(135deg, #22C55E, #16A9E0);
}

.rtl-toggle-item.rtl-active .rtl-toggle-knob {
    left: 14px;
    background: #fff;
}

.tab-content {
    padding: 10px 20px;
}

.dpa-modern {
    --dpa-bg: #F5F7FA;
    --dpa-surface: #FFFFFF;
    --dpa-border: #E6EAF0;
    --dpa-border-strong: #D5DBE3;
    --dpa-text: #1F2A37;
    --dpa-text-muted: #6B7280;
    --dpa-text-subtle: #9CA3AF;
    --dpa-accent: #0EA5A5;
    --dpa-accent-hover: #0D8E8E;
    --dpa-accent-soft: #E6F6F6;
    --dpa-danger: #DC2626;
    --dpa-radius: 12px;
    --dpa-radius-sm: 8px;
    --dpa-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --dpa-shadow-md: 0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.04);
    background: var(--dpa-bg) !important;
    color: var(--dpa-text);
    font-size: 14px;
    line-height: 1.55;
    min-height: 100%;
    max-width: 1230px;
    margin: 0 auto;
}

    .dpa-modern .dpa-header {
        display: none !important;
    }

    .dpa-modern .dpa-content {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .dpa-modern .dpa-card {
        background: var(--dpa-surface) !important;
        border: 1px solid var(--dpa-border) !important;
        border-radius: var(--dpa-radius) !important;
        box-shadow: var(--dpa-shadow) !important;
        margin-bottom: 20px !important;
        overflow: hidden;
        display: block;
    }

    .dpa-modern .dpa-card-header {
        padding: 16px 24px !important;
        border-bottom: 1px solid var(--dpa-border) !important;
        background: var(--dpa-surface);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 56px;
    }

    .dpa-modern .dpa-card-title {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--dpa-text) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        line-height: 1.4;
        letter-spacing: 0;
    }

        .dpa-modern .dpa-card-title::before {
            content: "";
            display: inline-block;
            width: 3px;
            height: 16px;
            background: var(--dpa-accent);
            border-radius: 2px;
        }

    .dpa-modern .dpa-card-body {
        padding: 24px !important;
        background: var(--dpa-surface);
    }

    .dpa-modern .form-group {
        margin-bottom: 18px;
    }

    .dpa-modern label,
    .dpa-modern .control-label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--dpa-text);
        margin-bottom: 6px;
    }

        .dpa-modern label .req {
            color: var(--dpa-danger);
            margin-left: 2px;
        }

    .dpa-modern .form-control,
    .dpa-modern .select2-container--default .select2-selection--single,
    .dpa-modern .select2-container--default .select2-selection--multiple {
        border: 1px solid var(--dpa-border-strong);
        border-radius: var(--dpa-radius-sm);
        background: var(--dpa-surface);
        color: var(--dpa-text);
        font-size: 14px;
        min-height: 40px;
        padding: 8px 12px;
        box-shadow: none;
        transition: border-color .15s, box-shadow .15s;
    }

        .dpa-modern .form-control:focus {
            border-color: var(--dpa-accent);
            box-shadow: 0 0 0 3px rgba(14,165,165,.15);
            outline: none;
        }

        .dpa-modern .form-control::placeholder {
            color: var(--dpa-text-subtle);
        }

    .dpa-modern .has-error .form-control,
    .dpa-modern .has-error .select2-container--default .select2-selection {
        border-color: var(--dpa-danger);
    }

        .dpa-modern .has-error .form-control:focus {
            box-shadow: 0 0 0 3px rgba(220,38,38,.12);
        }

    .dpa-modern .help-block {
        font-size: 12px;
        color: var(--dpa-danger);
        margin-top: 4px;
    }

    .dpa-modern .input-group .input-group-text {
        background: var(--dpa-surface);
        border: 1px solid var(--dpa-border-strong);
        border-left: none;
        border-radius: 0 var(--dpa-radius-sm) var(--dpa-radius-sm) 0;
        color: var(--dpa-text-muted);
    }

    .dpa-modern .input-group .form-control {
        border-right: none;
        border-radius: var(--dpa-radius-sm) 0 0 var(--dpa-radius-sm);
    }

    .dpa-modern .form-check {
        padding: 10px 14px;
        border: 1px solid var(--dpa-border);
        border-radius: var(--dpa-radius-sm);
        margin-bottom: 10px;
        transition: background .15s, border-color .15s;
    }

        .dpa-modern .form-check:hover {
            background: var(--dpa-bg);
        }

    .dpa-modern .form-check-input {
        margin-top: 4px;
    }

    .dpa-modern .form-check-label {
        font-weight: 500;
        cursor: pointer;
        margin-bottom: 0;
    }

    .dpa-modern .btn {
        font-size: 14px;
        font-weight: 500;
        padding: 9px 18px;
        border-radius: var(--dpa-radius-sm);
        border: 1px solid transparent;
        transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .dpa-modern .btn-primary,
        .dpa-modern .btn.btn-bold.btn-pure.btn-primary {
            background: var(--dpa-accent);
            border-color: var(--dpa-accent);
            color: #fff;
        }

            .dpa-modern .btn-primary:hover:not(:disabled) {
                background: var(--dpa-accent-hover);
                border-color: var(--dpa-accent-hover);
                box-shadow: 0 4px 10px -2px rgba(14,165,165,.35);
            }

            .dpa-modern .btn-primary:disabled {
                background: #B7DCDC;
                border-color: #B7DCDC;
                cursor: not-allowed;
            }

        .dpa-modern .btn-secondary,
        .dpa-modern .btn.btn-bold.btn-pure.btn-secondary {
            background: var(--dpa-surface);
            border-color: var(--dpa-border-strong);
            color: var(--dpa-text);
        }

            .dpa-modern .btn-secondary:hover {
                background: var(--dpa-bg);
                border-color: var(--dpa-text-subtle);
            }

        .dpa-modern .btn-outline-danger,
        .dpa-modern .btn.btn-bold.btn-pure.btn-outline-danger {
            background: var(--dpa-surface);
            border-color: var(--dpa-border-strong);
            color: var(--dpa-text);
        }

            .dpa-modern .btn-outline-danger:hover {
                background: var(--dpa-bg);
                border-color: var(--dpa-accent);
                color: var(--dpa-accent);
            }

    .dpa-modern .btn-link-accent {
        background: transparent;
        color: var(--dpa-accent);
        padding: 6px 10px;
        font-weight: 500;
    }

        .dpa-modern .btn-link-accent:hover {
            background: var(--dpa-accent-soft);
        }

    .dpa-modern .dpa-action-bar {
        position: sticky;
        bottom: 0;
        background: rgba(255,255,255,.95);
        backdrop-filter: saturate(180%) blur(8px);
        border: 1px solid var(--dpa-border);
        border-radius: var(--dpa-radius);
        box-shadow: var(--dpa-shadow-md);
        padding: 12px 20px;
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        z-index: 10;
    }

    .dpa-modern .dpa-variable-panel {
        background: var(--dpa-bg);
        border: 1px solid var(--dpa-border);
        border-radius: var(--dpa-radius-sm);
        padding: 14px 18px;
        max-height: 220px;
        overflow-y: auto;
        margin-bottom: 12px;
    }

        .dpa-modern .dpa-variable-panel h6 {
            font-size: 13px;
            font-weight: 600;
            color: var(--dpa-text-muted);
            margin: 0 0 10px;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .dpa-modern .dpa-variable-panel table {
            width: 100%;
            font-size: 13px;
        }

        .dpa-modern .dpa-variable-panel thead td {
            font-weight: 600;
            color: var(--dpa-text-muted);
            border-bottom: 1px solid var(--dpa-border);
            padding: 6px 8px;
        }

        .dpa-modern .dpa-variable-panel tbody td {
            padding: 8px;
            border-bottom: 1px solid var(--dpa-border);
        }

        .dpa-modern .dpa-variable-panel tbody tr:last-child td {
            border-bottom: none;
        }

        .dpa-modern .dpa-variable-panel .fa-clipboard {
            color: var(--dpa-accent);
            cursor: pointer;
        }

    .dpa-modern .dpa-hint-icon {
        color: var(--dpa-text-subtle);
        cursor: pointer;
        margin-left: 6px;
        transition: color .15s;
    }

        .dpa-modern .dpa-hint-icon:hover {
            color: var(--dpa-accent);
        }

    .dpa-modern .table-responsive {
        border: 1px solid var(--dpa-border);
        border-radius: var(--dpa-radius-sm);
        overflow: hidden;
    }

    .dpa-modern .table {
        margin-bottom: 0;
    }

    .dpa-modern .dpa-preview {
        background: var(--dpa-bg);
        border: 1px solid var(--dpa-border);
        border-radius: var(--dpa-radius);
        padding: 24px;
    }

    .dpa-modern .dpa-preview-toolbar {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 14px;
    }

        .dpa-modern .dpa-preview-toolbar select {
            max-width: 180px;
        }

    .dpa-modern + .modal .modal-content,
    .modal .dpa-modern .modal-content {
        border-radius: var(--dpa-radius);
        border: none;
        box-shadow: var(--dpa-shadow-md);
    }

    .dpa-modern .row.tight {
        margin-left: -10px;
        margin-right: -10px;
    }

        .dpa-modern .row.tight > [class*="col-"] {
            padding-left: 10px;
            padding-right: 10px;
        }

    .dpa-modern .note-editor.note-frame {
        border-radius: var(--dpa-radius-sm);
        border-color: var(--dpa-border-strong);
    }

.note-editor.note-frame {
    border: 1px solid #dddddd !important;
}

.dpa-modern .note-toolbar {
    background: var(--dpa-bg);
    border-bottom: 1px solid var(--dpa-border);
}

[dir="rtl"] .dpa-modern .dpa-card-header .dpa-card-title::before {
    margin-left: 10px;
}

[dir="rtl"] .dpa-modern .dpa-action-bar {
    justify-content: flex-start;
}

.dpa-detail-page {
    max-width: 1268px;
    margin: 20px auto 0px;
}

.form-control {
    border: 1px solid #d1d5db !important;
}

/* === Shared Inbox layout (ported from GithubNSDX, brand color = NDPP #D25055) === */
:root {
    --nk-line: #e5e7eb;
    --nk-brand: #D25055;
}

.modal.fade.modal-right.show .modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal.fade.modal-right .modal-dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 100%;
    margin: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-transition: .5s;
    transition: .5s;
}

.modal-right .modal-content {
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    border-radius: 0;
}

.table-shared-inbox .ellipsis {
    display: inline-block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-profile__wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 3px;
}

.inbox-profile__avatar {
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 50px;
}

.inbox-profile__meta {
    display: grid;
    gap: 2px;
}

.inbox-profile__name {
    font-weight: 700;
    line-height: 1.2;
    max-width: 115px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-profile__status {
    font-size: 13px;
    color: #6c757d;
}

.nk-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.item-icon-inbox {
    width: 20px;
    height: 20px;
    object-fit: cover;
    flex-shrink: 0;
    transition: transform 0.4s ease;
    margin-right: 10px;
}

.inbox-sidebar {
    border: 1px solid var(--nk-line);
    padding: 8px;
    border-radius: 3px;
    background-color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    overflow: auto;
    border-right: none;
}

    .inbox-sidebar .inbox-section.u-divide-b {
        position: static;
    }

.inbox-main {
    padding: 0px;
    border: 1px solid var(--nk-line);
    background-color: #fff;
    position: relative;
    overflow: visible;
}

.inbox-section {
    padding: 10px 10px 10px 10px;
}

    .inbox-section + .inbox-section {
        border-top: 1px solid var(--nk-line);
    }

.inbox-section__title {
    font-size: 12px;
    color: #6b7280;
    margin: 6px 0 6px 6px;
}

.inbox-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.inbox-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 10px 20px 10px;
    cursor: pointer;
}

    .inbox-menu__item:hover {
        background: #f6f7f9;
    }

    .inbox-menu__item.is-active {
        background: #fff;
        border-left: 3px solid var(--danger-btn-button) !important;
    }

        .inbox-menu__item.is-active .inbox-menu__count {
            color: var(--danger-btn-button) !important;
        }

.inbox-menu__icon {
    width: 18px;
    text-align: center;
    opacity: .85;
}

.inbox-menu__text {
    flex: 1;
    color: #000;
}

.inbox-menu__count {
    min-width: 28px;
    text-align: right;
    font-weight: 700;
    color: var(--danger-btn-button) !important;
}

.btn-filter {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.btn-filter--active {
    border-bottom: 3px solid #D25055;
}

.nsdx-filter-modal {
    padding: 30px 10px 276px 10px;
    --c-line: #DBDCE1;
    --c-text: #111827;
    --c-brand: #D25055;
    --prio-low: #18c5a2;
    --prio-med: #1f6fff;
    --prio-high: #f2b21a;
    --prio-crit: #D25055;
}

#filter .btn.btn-secondary.is-filter-active {
    border-bottom: 2px solid #D25055;
}

.nsdx-filter-modal .nsdx-choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 10px 25px 10px;
}

.nsdx-filter-modal .nsdx-choice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border: 1px solid var(--c-line);
    border-radius: 6px;
    color: var(--c-text);
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.nsdx-filter-modal .nsdx-choice__title i {
    margin-right: 8px;
}

.nsdx-filter-modal .nsdx-choice.is-checked {
    border-color: var(--c-brand);
    color: var(--c-brand);
}

.nsdx-filter-modal .nsdx-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nsdx-choice.priority {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 5px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #000 !important;
}

.priority-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.priority-low .priority-dot {
    border: 2px solid #1ac6a2;
}

.priority-medium .priority-dot {
    border: 2px solid #3c8dff;
}

.priority-high .priority-dot {
    border: 2px solid #f1b100;
}

.priority-crit .priority-dot {
    border: 2px solid #D25055;
}

.priority-critical .priority-dot {
    border: 2px solid #D25055;
}

.priority-low.is-checked .priority-dot {
    background: #1ac6a2;
}

.priority-medium.is-checked .priority-dot {
    background: #3c8dff;
}

.priority-high.is-checked .priority-dot {
    background: #f1b100;
}

.priority-crit.is-checked .priority-dot {
    background: #D25055;
}

.priority-critical.is-checked .priority-dot {
    background: #D25055;
}

.inbox-main__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 6px;
    border-bottom: 1px solid var(--nk-line);
}

.inbox-title {
    font-size: 18px;
}

.inbox-tools .input-group {
    min-width: 280px;
}

.inbox-tabs {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 10px 20px;
}

    .inbox-tabs li {
        position: relative;
        cursor: pointer;
        padding: 8px 10px;
        color: #000;
    }

        .inbox-tabs li.active::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 3px;
            background: var(--danger-header-background) !important;
            border-radius: 2px;
        }

.inbox-table-wrap {
    padding: 10px;
    scroll-margin-top: 56px;
}

.table-shared-inbox tbody tr:hover {
    background: #f9fafb;
}

/* --- Inbox header --- */
.inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px 12px;
    flex-wrap: wrap;
}

.inbox-header__title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.inbox-page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #111827;
}

    .inbox-page-title i {
        color: var(--danger-btn-button);
        margin-right: 8px;
    }

.breadcrumb--compact {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 12px;
}

.inbox-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inbox-content {
    padding-top: 12px;
}

/* --- Tabs: scrollable + compact --- */
.inbox-tools {
    flex: 1 1 auto;
    min-width: 0;
}

.inbox-tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

    .inbox-tabs-scroll .inbox-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

.inbox-tabs li {
    white-space: nowrap;
}

.inbox-filter {
    flex: 0 0 auto;
    padding-right: 12px;
}

/* --- Closed icon parity with svg siblings --- */
.item-icon-inbox--fa {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 18px;
    color: #6b7280;
    flex-shrink: 0;
}

    .item-icon-inbox--fa i {
        line-height: 1;
    }

.inbox-menu__item.is-active .item-icon-inbox--fa {
    color: var(--danger-btn-button);
}

/* --- Filter modal footer with Reset --- */
.modal-footer.modal-footer-uniform {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inbox-filter-actions {
    display: flex;
    gap: 8px;
}

.btn-reset {
    color: #6b7280;
    padding: 6px 10px;
    text-decoration: none;
}

    .btn-reset:hover {
        color: var(--danger-btn-button);
        text-decoration: none;
    }

/* Inbox (#/shared/inbox) — ใช้ .page-toolbar / .ndpp-tabs / .ndpp-datatable ร่วมกับหน้าอื่น
   เหลือไว้เฉพาะของหน้านี้: กัน svg กินอีเวนต์คลิก และกล่อง "ไม่มีข้อมูล" ของตาราง */

/* svg ทุกตัวในหน้าเป็นของประดับ ถ้าเป็นเป้าคลิกเอง target.className จะเป็น SVGAnimatedString
   แล้ว handler กลางที่เรียก .indexOf() จะพัง — ปิด pointer-events ให้ปุ่มรอบนอกเป็น target */
.nk-inbox svg {
    pointer-events: none;
}

/* แท็บอยู่ในการ์ดเดียวกับตาราง — margin ลบดึงให้เส้นคาดกินขอบการ์ด (padding .ndpp-datatable = 1.6rem) */
.nk-inbox-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -1.6rem -1.6rem 1.35rem;
    padding: 0 1.6rem;
    border-bottom: 1px solid var(--ndpp-line, #edeff2);
    list-style: none;
}

    .nk-inbox-tabs .nav-item {
        margin: 0;
    }

    .nk-inbox-tabs a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 16px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: none;
        color: var(--ndpp-muted, #6c7a86);
        font-size: .86rem;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }

        .nk-inbox-tabs a:hover {
            color: var(--ndpp-ink, #1f2329);
        }

        .nk-inbox-tabs a.active {
            color: var(--danger-btn-button);
            border-bottom-color: var(--danger-btn-button);
        }

.nk-inbox-tabs__count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    background: #eef1f5;
    color: #6b7280;
    font-size: .72rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.nk-inbox-tabs a.active .nk-inbox-tabs__count {
    background: #00968817;
    color: var(--danger-btn-button);
}

.nk-inbox .ndpp-datatable table.table tbody td,
.nk-inbox .ndpp-datatable table.table tbody td a {
    font-size: 13px;
}

/* ความกว้างคอลัมน์ของตาราง Inbox กำหนดที่นี่จุดเดียว คู่กับ table-layout:fixed */
/* ใช้ % ทั้งหมดรวมเป็น 100 ไม่ปล่อยคอลัมน์ไหนไม่กำหนด เพราะที่ว่างจะไปกองที่คอลัมน์นั้นคอลัมน์เดียว */
/* เกินกรอบตัดเป็น ... ทุกคอลัมน์ hover เห็นข้อความเต็มผ่าน title */
#inboxTable {
    table-layout: fixed;
    width: 100%;
}

    #inboxTable > thead > tr > th,
    #inboxTable > tbody > tr > td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        /* กว้างขึ้นจากเดิม 11% เพราะบรรทัดล่างเป็น "เวลา • อายุงาน" ในบรรทัดเดียวกันแล้ว */
        #inboxTable > thead > tr > th:nth-child(1),
        #inboxTable > tbody > tr > td:nth-child(1) {
            width: 13%;
        }

        #inboxTable > thead > tr > th:nth-child(2),
        #inboxTable > tbody > tr > td:nth-child(2) {
            width: 32%;
        }

        #inboxTable > thead > tr > th:nth-child(3),
        #inboxTable > tbody > tr > td:nth-child(3) {
            width: 20%;
        }

        #inboxTable > thead > tr > th:nth-child(4),
        #inboxTable > tbody > tr > td:nth-child(4) {
            width: 15%;
        }

        /* คอลัมน์ผู้ยื่นซ่อนทั้งคอลัมน์เมื่อผู้ใช้เป็น customer แถวอื่นจึงกินพื้นที่ส่วนนี้แทน */
        #inboxTable > thead > tr > th:nth-child(5),
        #inboxTable > tbody > tr > td:nth-child(5) {
            width: 20%;
        }

/* เนื้อหาในเซลล์ตัด ... ที่ตัวมันเอง เพื่อให้ title ครอบข้อความเต็มไว้ให้ hover ดูได้ */
.nk-inbox-subject,
.nk-inbox-status,
.nk-inbox-module {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* หัวข้อบรรทัดเดียว ต้องเป็นชุดสีเดียวกับแบบ 2 บรรทัด (.ndpp-idcell__name) ไม่งั้นตกไปใช้สีลิงก์ default */
.nk-inbox-subject {
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

a.nk-inbox-subject:hover {
    color: var(--danger-btn-button);
}

#inboxTable .ndpp-idcell__body {
    display: block;
    min-width: 0;
    white-space: normal;
}

.nk-inbox-module {
    font-weight: 500;
}

.nk-inbox-modcell {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    max-width: 100%;
    min-width: 0;
    padding: 5px 9px;
    border: 1px solid #e3e9f2;
    border-radius: 6px;
    background: #f6f8fb;
    color: #334155;
    font-size: 12px;
    line-height: 18px;
    vertical-align: middle;
}

    .nk-inbox-modcell > .ndpp-ico {
        width: 13px;
        height: 13px;
        color: #7991b4;
    }

    .nk-inbox-modcell > .nk-inbox-module {
        min-width: 0;
    }

/* .ndpp-idcell เป็น flex ลูกต้อง min-width:0 ถึงจะยอมหด ไม่งั้นดันคอลัมน์จนล้น */
#inboxTable .ndpp-idcell {
    min-width: 0;
}


@keyframes nk-empty-fade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#inboxTable td.dataTables_empty {
    padding: 48px 24px !important;
    background: transparent;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    color: #8a94a6;
}

.nk-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #8a94a6;
    animation: nk-empty-fade .35s ease-out both;
}

.nk-table-empty__illu {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #1f9254;
    border: 1px solid color-mix(in srgb, #1f9254 26%, #fff);
}

    .nk-table-empty__illu > .ndpp-ico {
        width: 17px;
        height: 17px;
    }

    .nk-table-empty__illu.is-filtered {
        color: #7b8496;
        border-color: #e4e8ee;
    }

.nk-table-empty__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
    letter-spacing: 0.1px;
}

.nk-table-empty__sub {
    font-size: 13px;
    line-height: 1.55;
    color: #8a94a6;
    max-width: 380px;
}

.nk-table-empty__act {
    margin-top: 12px;
    padding: .42rem 1.05rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--danger-btn-button);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--danger-btn-button) 38%, #fff);
    border-radius: 9px;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .nk-table-empty__act:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35);
    }

:root {
    --ndpp-accent: var(--danger-btn-button);
    --ndpp-ink: #1f2329;
    --ndpp-muted: #6b7280;
    --ndpp-line: #edeff2;
}

.page-toolbar {
    gap: .75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.1rem;
    background: #fff;
    border: 1px solid var(--ndpp-line);
    border-radius: 12px;
}

.page-toolbar-heading {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.page-toolbar-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ndpp-accent);
    background: #f1f3f5;
    background: color-mix(in srgb, var(--ndpp-accent) 12%, #fff);
}

    .page-toolbar-icon > i,
    .page-toolbar-icon > i::before {
        margin: 0;
    }

.page-toolbar-headtext {
    min-width: 0;
}

.page-toolbar-title {
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -.01em;
    color: var(--ndpp-ink);
    line-height: 1.25;
}

.page-toolbar-sub {
    display: block;
    margin-top: .12rem;
    font-size: .82rem;
    color: var(--ndpp-muted);
    line-height: 1.3;
}

.page-toolbar-actions {
    gap: 1rem;
    margin-left: auto;
}

/* ปุ่มยกเลิก/ทิ้งการแก้ไข = outline สีแดงแบรนด์ (คู่กับ .btn-danger ที่เป็นปุ่มยืนยัน) */
/* ตั้ง !important เพราะ bootstrap .btn-outline-danger:hover/:active เด้งเติมสีแดงทึบเอง */
.page-toolbar .btn-outline-danger,
.ndpp-btnbar .btn-outline-danger {
    background: #fff !important;
    border-color: var(--danger-btn-button) !important;
    color: var(--danger-btn-button) !important;
    font-weight: 500;
}

    .page-toolbar .btn-outline-danger > i,
    .ndpp-btnbar .btn-outline-danger > i {
        color: var(--danger-btn-button) !important;
    }

    .page-toolbar .btn-outline-danger:hover,
    .page-toolbar .btn-outline-danger:focus,
    .page-toolbar .btn-outline-danger:active,
    .page-toolbar .btn-outline-danger:not(:disabled):not(.disabled):active,
    .ndpp-btnbar .btn-outline-danger:hover,
    .ndpp-btnbar .btn-outline-danger:focus,
    .ndpp-btnbar .btn-outline-danger:active,
    .ndpp-btnbar .btn-outline-danger:not(:disabled):not(.disabled):active {
        background: rgba(var(--danger-btn-button-rgb), .08) !important;
        border-color: var(--danger-btn-button) !important;
        color: var(--danger-btn-button) !important;
        box-shadow: none !important;
    }

/* .ndpp-btnbar = hook ให้แถบปุ่ม "นอก page-toolbar" ได้สไตล์ปุ่มมาตรฐานชุดเดียวกัน */
.page-toolbar .btn,
.ndpp-btnbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.35rem;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    padding: 0 .95rem;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    gap: 8px;
}

    .page-toolbar .btn > i,
    .ndpp-btnbar .btn > i {
        margin: 0px 7px 0px 7px;
        font-size: .92rem;
        line-height: 1;
        color: #4f4e4e;
    }

[dir="rtl"] .page-toolbar .btn > i,
[dir="rtl"] .ndpp-btnbar .btn > i {
    margin: 0 0 0 8px;
}

.page-toolbar .btn-danger,
.ndpp-btnbar .btn-danger {
    background: var(--danger-btn-button);
    border-color: var(--danger-btn-button);
}

    .page-toolbar .btn-danger:hover,
    .page-toolbar .btn-danger:focus,
    .ndpp-btnbar .btn-danger:hover,
    .ndpp-btnbar .btn-danger:focus {
        background: #bf474c;
        border-color: #bf474c;
        box-shadow: 0 2px 8px rgba(var(--danger-btn-button-rgb), .28);
    }

.page-toolbar .btn-outline-secondary,
.page-toolbar .ndpp-btn-export,
.ndpp-btnbar .btn-outline-secondary {
    background: #fff;
    border-color: var(--ndpp-line);
    color: var(--ndpp-muted);
    font-weight: 500;
}

    .page-toolbar .btn-outline-secondary > i,
    .ndpp-btnbar .btn-outline-secondary > i,
    .page-toolbar .ndpp-btn-export > i,
    .page-toolbar .ndpp-btn-export > .ndpp-btn-export__icon {
        color: #8a909b;
    }

/* inline download SVG — follows the button's icon color via currentColor */
.ndpp-btn-export__icon {
    vertical-align: -2px;
    margin-right: .35rem;
}

[dir="rtl"] .ndpp-btn-export__icon {
    margin-right: 0;
    margin-left: .35rem;
}

.page-toolbar .btn-outline-secondary:hover,
.page-toolbar .btn-outline-secondary:focus,
.page-toolbar .btn-outline-secondary:active,
.page-toolbar .btn-outline-secondary:not(:disabled):not(.disabled):active,
.ndpp-btnbar .btn-outline-secondary:hover,
.ndpp-btnbar .btn-outline-secondary:focus,
.ndpp-btnbar .btn-outline-secondary:active,
.ndpp-btnbar .btn-outline-secondary:not(:disabled):not(.disabled):active,
.page-toolbar .ndpp-btn-export:hover,
.page-toolbar .ndpp-btn-export:focus,
.page-toolbar .ndpp-btn-export:active,
.page-toolbar .ndpp-btn-export:not(:disabled):not(.disabled):active,
.page-toolbar .ndpp-btn-export[aria-expanded="true"],
.page-toolbar .show > .ndpp-btn-export.dropdown-toggle {
    background: #f1f3f5 !important;
    border-color: #d3d8de !important;
    color: var(--ndpp-ink) !important;
    box-shadow: none !important;
}

    .page-toolbar .btn-outline-secondary:hover > i,
    .page-toolbar .ndpp-btn-export:hover > i,
    .page-toolbar .ndpp-btn-export[aria-expanded="true"] > i,
    .page-toolbar .show > .ndpp-btn-export.dropdown-toggle > i,
    .page-toolbar .ndpp-btn-export:hover > .ndpp-btn-export__icon,
    .page-toolbar .ndpp-btn-export[aria-expanded="true"] > .ndpp-btn-export__icon,
    .page-toolbar .show > .ndpp-btn-export.dropdown-toggle > .ndpp-btn-export__icon {
        color: #5a616c;
    }

.page-toolbar .ndpp-btn-export.dropdown-toggle::after {
    margin-left: .5rem;
    opacity: .55;
}

.ndpp-export-menu {
    border: 1px solid var(--ndpp-line);
    border-radius: 10px;
    padding: .3rem;
    min-width: 9.5rem;
    margin-top: .35rem;
    box-shadow: 0 6px 20px rgba(20,23,28,.08);
}

    .ndpp-export-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: .55rem;
        border-radius: 7px;
        padding: .5rem .65rem;
        font-weight: 500;
        color: #4a505b;
        transition: background-color .13s ease, color .13s ease;
    }

        .ndpp-export-menu .dropdown-item i {
            width: 1.05rem;
            text-align: center;
            color: #adb3bd;
        }

        .ndpp-export-menu .dropdown-item:hover,
        .ndpp-export-menu .dropdown-item:focus {
            background: #f5f6f8;
            color: var(--ndpp-ink);
        }

.ndpp-row-actions {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}


.ndpp-splitlink {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    line-height: 0;
    background: #fff;
}

.ndpp-splitlink__seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

    .ndpp-splitlink__seg > svg {
        display: block;
        width: 15px;
        height: 15px;
        stroke-width: 1.9;
    }

    .ndpp-splitlink__seg:focus {
        outline: none;
    }

.ndpp-splitlink__open {
    color: var(--danger-btn-button);
}

    .ndpp-splitlink__open:hover,
    .ndpp-splitlink__open:focus-visible {
        background: rgba(var(--danger-btn-button-rgb), .10);
        color: var(--danger-btn-button);
        text-decoration: none;
    }

.ndpp-splitlink__copy,
.ndpp-splitlink__qr {
    color: #5b6470;
    border-inline-start: 1px solid var(--ndpp-line, #e2e5e9);
}

    .ndpp-splitlink__copy:hover,
    .ndpp-splitlink__copy:focus-visible,
    .ndpp-splitlink__qr:hover,
    .ndpp-splitlink__qr:focus-visible {
        background: #f1f3f5;
        color: #3f4753;
    }

.ndpp-datatable table.table td.ndpp-col-trunc {
    max-width: 180px;
}

.ndpp-datatable table.table td.ndpp-col-trunc--wide {
    max-width: 280px;
}

.ndpp-cell-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}


.table-admin-PrivacyPolicy .ndpp-row-actions {
    gap: .35rem;
}

.ndpp-row-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 8px !important;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    background: transparent;
    color: #5b6470;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}

    .ndpp-row-actions .btn:hover,
    .ndpp-row-actions .btn:focus-visible {
        transform: translateY(-1px);
    }

.ndpp-row-actions .viewButton:hover,
.ndpp-row-actions .viewButton:focus-visible,
.ndpp-row-actions .editButton:hover,
.ndpp-row-actions .editButton:focus-visible {
    color: var(--danger-btn-button);
}

.ndpp-row-actions .deleteButton,
.ndpp-row-actions .deleteButton i,
.ndpp-row-actions .deleteButton svg {
    color: #d9534f;
}

    .ndpp-row-actions .deleteButton:hover i,
    .ndpp-row-actions .deleteButton:focus-visible i,
    .ndpp-row-actions .deleteButton:hover svg,
    .ndpp-row-actions .deleteButton:focus-visible svg,
    .ndpp-row-actions .deleteButton:hover,
    .ndpp-row-actions .deleteButton:focus-visible {
        color: #c9302c !important;
    }

.ndpp-row-actions .btn > svg {
    display: block;
    width: 15px;
    height: 15px;
    stroke-width: 1.9;
}


.ndpp-col-fit .ndpp-row-actions,
.ndpp-col-action .ndpp-row-actions {
    display: flex;
    justify-content: center;
    white-space: nowrap;
}

.ndpp-rev {
    display: inline-block;
    padding: .55rem .85rem;
    border-radius: 6px;
    color: var(--ndpp-accent);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1.4;
}

/* สถานะทั้งระบบเป็นชิปพื้นอ่อนชุดเดียวกัน (เดิมเป็นข้อความสี) */
/* .srr-pill เป็นชื่อเรียกอีกชื่อของสิ่งเดียวกัน หน้า SRR จึงได้สีตรงกับที่อื่นโดยไม่ต้องแก้ JS */
.ndpp-status,
.srr-pill {
    display: inline-block;
    max-width: 100%;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.ndpp-status--draft,
.srr-pill--mute {
    background: #f1f3f6;
    color: #6b7280;
}

.ndpp-status--published,
.srr-pill--ok {
    background: #e9f7f0;
    color: #14714a;
}

.ndpp-status--waiting,
.srr-pill--warn {
    background: color-mix(in srgb, #ff9800 14%, #fff);
    color: #b26500;
}

.ndpp-status--danger,
.srr-pill--danger {
    background: #fdecec;
    color: #b3403f;
}

/* โทนที่ห้า เพิ่มใหม่ให้ครบชุดของ SRR (Opened / Registered) */
.ndpp-status--info,
.srr-pill--info {
    background: #e8f0fb;
    color: #1f6bb8;
}

/* กล่องข้อมูลตอน hover (NdppInfoTip ใน nsdx-directives.js) — portal ไป body
   พื้นขาวใบเดียว ไม่มีแถบสี สีของโทนอยู่ที่ตัวเลขกับแถบสัดส่วนเท่านั้น */
.ndpp-tip {
    position: fixed;
    z-index: 2000;
    min-width: 288px;
    max-width: 380px;
    padding: 1.3rem 1.45rem 1.35rem;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(17, 24, 39, .13);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.95);
    transform-origin: top left;
    transition: opacity .14s ease, transform .14s cubic-bezier(.2, .8, .3, 1), visibility 0s .14s;
    pointer-events: none;
}

    .ndpp-tip.is-above {
        transform: translateY(8px) scale(.95);
        transform-origin: bottom left;
    }

[dir="rtl"] .ndpp-tip {
    transform-origin: top right;
}

    [dir="rtl"] .ndpp-tip.is-above {
        transform-origin: bottom right;
    }

.ndpp-tip.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity .18s ease, transform .28s cubic-bezier(.34, 1.4, .64, 1);
}

/* เนื้อในทยอยขึ้นตามกล่อง — render ใหม่ทุกครั้งที่เปิด keyframe จึงยิงทุกรอบ ใช้ both ได้เพราะกล่องเป็น fixed z-index สูงอยู่แล้ว */
@keyframes ndpp-tip-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ndpp-tip-grow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes ndpp-tip-pop {
    0% {
        opacity: 0;
        transform: scale(.7);
    }

    70% {
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.ndpp-tip.is-open .ndpp-tip__head,
.ndpp-tip.is-open .ndpp-tip__big,
.ndpp-tip.is-open .ndpp-tip__meta,
.ndpp-tip.is-open .ndpp-tip__track,
.ndpp-tip.is-open .ndpp-tip__row,
.ndpp-tip.is-open .ndpp-tip__person,
.ndpp-tip.is-open .ndpp-tip__over,
.ndpp-tip.is-open .ndpp-tip__note {
    animation: ndpp-tip-in .3s cubic-bezier(.22, .61, .36, 1) both;
}

.ndpp-tip.is-open .ndpp-tip__head {
    animation-delay: .06s;
}

.ndpp-tip.is-open .ndpp-tip__big {
    animation-delay: .1s;
}

.ndpp-tip.is-open .ndpp-tip__meta {
    animation-delay: .14s;
}

.ndpp-tip.is-open .ndpp-tip__track {
    animation-delay: .16s;
}

.ndpp-tip.is-open .ndpp-tip__fill {
    transform-origin: left center;
    animation: ndpp-tip-grow .5s cubic-bezier(.22, .61, .36, 1) .22s both;
}

[dir="rtl"] .ndpp-tip.is-open .ndpp-tip__fill {
    transform-origin: right center;
}

.ndpp-tip.is-open .ndpp-tip__row:nth-child(1),
.ndpp-tip.is-open .ndpp-tip__person:nth-child(1) {
    animation-delay: .16s;
}

.ndpp-tip.is-open .ndpp-tip__row:nth-child(2),
.ndpp-tip.is-open .ndpp-tip__person:nth-child(2) {
    animation-delay: .21s;
}

.ndpp-tip.is-open .ndpp-tip__row:nth-child(3),
.ndpp-tip.is-open .ndpp-tip__person:nth-child(3) {
    animation-delay: .26s;
}

.ndpp-tip.is-open .ndpp-tip__row:nth-child(4),
.ndpp-tip.is-open .ndpp-tip__person:nth-child(4) {
    animation-delay: .31s;
}

.ndpp-tip.is-open .ndpp-tip__row:nth-child(n+5),
.ndpp-tip.is-open .ndpp-tip__person:nth-child(n+5) {
    animation-delay: .36s;
}

.ndpp-tip.is-open .ndpp-tip__li {
    animation: ndpp-tip-in .3s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: .36s;
}

    .ndpp-tip.is-open .ndpp-tip__li:nth-child(1) {
        animation-delay: .16s;
    }

    .ndpp-tip.is-open .ndpp-tip__li:nth-child(2) {
        animation-delay: .21s;
    }

    .ndpp-tip.is-open .ndpp-tip__li:nth-child(3) {
        animation-delay: .26s;
    }

    .ndpp-tip.is-open .ndpp-tip__li:nth-child(4) {
        animation-delay: .31s;
    }

.ndpp-tip.is-open .ndpp-tip__pav {
    animation: ndpp-tip-pop .34s cubic-bezier(.34, 1.4, .64, 1) both;
    animation-delay: inherit;
}

.ndpp-tip.is-open .ndpp-tip__over,
.ndpp-tip.is-open .ndpp-tip__note {
    animation-delay: .3s;
}

@media (prefers-reduced-motion: reduce) {
    .ndpp-tip, .ndpp-tip.is-open {
        transition: opacity .12s ease;
        transform: none;
    }

        .ndpp-tip.is-open * {
            animation: none !important;
        }
}

.ndpp-tip__head {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ndpp-tip__title {
    color: #4b5563;
    font-size: .79rem;
    font-weight: 600;
    letter-spacing: .3px;
}

.ndpp-tip__big {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
}

.ndpp-tip__big--ok {
    color: #14714a;
}

.ndpp-tip__big--warn {
    color: #b26500;
}

.ndpp-tip__big--danger {
    color: #b3403f;
}

.ndpp-tip__big--mute {
    color: #6b7280;
}

.ndpp-tip__big--sm {
    font-size: 1.05rem;
}

/* แถบสัดส่วน: เวลาที่ใช้ไปเทียบกรอบของเคสนั้น ส่วนที่เกินกรอบต่อท้ายด้วยสีเข้มกว่า */
.ndpp-tip__track {
    display: flex;
    height: 6px;
    margin-top: 1.05rem;
    border-radius: 999px;
    background: #eef0f4;
    overflow: hidden;
}

.ndpp-tip__fill {
    height: 100%;
}

.ndpp-tip__fill--ok {
    background: #2aa87b;
}

.ndpp-tip__fill--warn {
    background: #eda03a;
}

.ndpp-tip__fill--danger {
    background: #dd9a9a;
}

.ndpp-tip__fill--mute {
    background: #cfd5dd;
}

.ndpp-tip__over {
    height: 100%;
    background: #b3403f;
}

.ndpp-tip__meta {
    margin-top: .5rem;
    color: #525b68;
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}

/* แถวที่เป็นคน — รูปจริง ชื่อ อีเมล แล้วจำนวนชิดขวา */
.ndpp-tip__people {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ndpp-line, #eef0f4);
}

/* กล่องที่มีรายชื่อคนกว้างกว่าปกติ — อีเมลยาวกว่าค่าตัวเลขในกล่องอื่น */
.ndpp-tip.is-people {
    min-width: 340px;
    max-width: 460px;
}

.ndpp-tip__person {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ndpp-tip__pav {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef1f5;
    flex: 0 0 auto;
}

.ndpp-tip__pav--txt {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--danger-btn-button) 14%, #fff);
    color: var(--danger-btn-button);
    font-size: .68rem;
    font-weight: 700;
}

.ndpp-tip__pbody {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.ndpp-tip__pname {
    font-size: .82rem;
    font-weight: 500;
    color: #1f242e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndpp-tip__psub {
    font-size: .72rem;
    color: #5a6a85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndpp-tip__pv {
    flex: 0 0 auto;
    font-size: .88rem;
    font-weight: 700;
    color: #1f242e;
    font-variant-numeric: tabular-nums;
}

/* แถว label/value เรียบ ๆ ค่าชิดขวาแล้วหลักวันที่ตรงกันทุกแถว */
.ndpp-tip__rows {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ndpp-line, #eef0f4);
}

.ndpp-tip__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.4rem;
    padding: .52rem 0;
}

    .ndpp-tip__row:first-child {
        padding-top: 0;
    }

    .ndpp-tip__row:last-child {
        padding-bottom: 0;
    }

.ndpp-tip__label {
    color: #5a6a85;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .2px;
    white-space: nowrap;
}

.ndpp-tip__value {
    color: #1f242e;
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ndpp-tip__row.is-active .ndpp-tip__label {
    color: #1f242e;
}

.ndpp-tip__row.is-active .ndpp-tip__value {
    font-weight: 700;
}

/* แถวที่ชี้ขาดของเคส รับสีโทนเดียวกับตัวเลขใหญ่ด้านบน */
.ndpp-tip.is-tone-ok .ndpp-tip__row.is-active .ndpp-tip__value {
    color: #14714a;
}

.ndpp-tip.is-tone-warn .ndpp-tip__row.is-active .ndpp-tip__value {
    color: #b26500;
}

.ndpp-tip.is-tone-danger .ndpp-tip__row.is-active .ndpp-tip__value {
    color: #b3403f;
}

/* โทน mute = กล่องที่ไม่มีถูก/ผิด (เช่นจำนวนคำขอเข้าใหม่) แถวที่เน้นใช้สีระบบแทนสีสถานะ */
.ndpp-tip.is-tone-mute .ndpp-tip__row.is-active .ndpp-tip__label,
.ndpp-tip.is-tone-mute .ndpp-tip__row.is-active .ndpp-tip__value {
    color: var(--danger-btn-button);
}

/* รายการชื่อยาว (มาตรการ/กิจกรรม) ตัดบรรทัดได้ รหัสนำหน้าเป็นชิปเล็ก ไม่มีรหัสใช้จุดแทน */
.ndpp-tip__list {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ndpp-line, #eef0f4);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ndpp-tip__li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.ndpp-tip__lk {
    flex: 0 0 auto;
    padding: .1rem .45rem;
    border-radius: 6px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ndpp-tip__ldot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--danger-btn-button);
    transform: translateY(-2px);
}

.ndpp-tip__lt {
    color: #1f242e;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ndpp-tip__note {
    margin-top: 1rem;
    color: #4b5563;
    font-size: .8rem;
    line-height: 1.55;
    font-weight: 600;
}

/* ป้ายที่มีกล่องผูกอยู่ — บอกว่ากดดูรายละเอียดได้ ทรงเดียวกับอายุงานใน Inbox */
.srr-pill[data-tip],
.ndpp-pstat[data-tip] {
    cursor: help;
}

.ndpp-col-status {
    white-space: nowrap;
}

.ndpp-col-action {
    white-space: nowrap;
    text-align: center;
}

.ndpp-col-fit {
    width: 1px !important;
}

/* cells stay on one line… */
td.ndpp-col-fit {
    white-space: nowrap;
}

th.ndpp-col-fit {
    white-space: normal;
}

.table-admin-PrivacyPolicyOu th:last-child,
.table-admin-PrivacyPolicyOu td:last-child {
    width: 1px !important;
    white-space: nowrap;
    text-align: center;
}

.table-admin-configcookiebanner td.ndpp-col-status,
.table-admin-configcookiebanner th.ndpp-col-status {
    min-width: 180px;
}

.ndpp-scope {
    display: block;
    max-width: 340px;
    cursor: help;
}

.ndpp-scope__top {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ndpp-muted, #8a929c);
}

.ndpp-scope__sep {
    color: #b6bcc4;
}

.ndpp-scope__act {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
    line-height: 1.35;
    margin-top: 2px;
}

.ndpp-scope-tip {
    position: fixed;
    z-index: 20050;
    pointer-events: none;
    min-width: 190px;
    max-width: 340px;
    background: #fff;
    color: var(--ndpp-ink, #1f2329);
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 11px;
    box-shadow: 0 8px 24px -10px rgba(16, 32, 48, .2);
    padding: 9px 13px 10px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .15s ease, transform .15s ease;
}

    .ndpp-scope-tip.is-visible {
        opacity: 1;
        transform: none;
    }

    .ndpp-scope-tip.is-above {
        transform: translateY(-5px);
    }

        .ndpp-scope-tip.is-above.is-visible {
            transform: none;
        }

.ndpp-scope-tip--rail {
    padding: 15px 17px 16px 15px;
}

.ndpp-scope-tip__step {
    position: relative;
    padding: 0 0 15px 32px;
    min-height: 22px;
}

    .ndpp-scope-tip__step:last-child {
        padding-bottom: 0;
    }

    .ndpp-scope-tip__step::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 23px;
        bottom: 0;
        width: 1px;
        background: var(--ndpp-line, #e6e9ef);
    }

    .ndpp-scope-tip__step:last-child::before {
        display: none;
    }

.ndpp-scope-tip__ico {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2f4f7;
    color: var(--ndpp-muted, #98a1ac);
}

    .ndpp-scope-tip__ico .fa {
        font-size: 10.5px;
        line-height: 1;
    }

.ndpp-scope-tip__step.is-leaf .ndpp-scope-tip__ico {
    background: var(--danger-btn-button, #0d9488);
    color: #fff;
}

.ndpp-scope-tip__cell {
    display: block;
    padding-top: 1px;
}

.ndpp-scope-tip__cap {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ndpp-muted, #98a1ac);
    margin-bottom: 1px;
}

.ndpp-scope-tip__val {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
    line-height: 1.4;
    word-break: break-word;
}

.ndpp-scope-tip__step.is-leaf .ndpp-scope-tip__val {
    color: var(--danger-btn-button, #0d9488);
    font-weight: 600;
}

.ndpp-domain-cell {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
}

    .ndpp-domain-cell .ndpp-icon-btn {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        width: auto;
        height: auto;
        padding: .3rem .4rem;
    }

        .ndpp-domain-cell .ndpp-icon-btn:hover,
        .ndpp-domain-cell .ndpp-icon-btn:focus,
        .ndpp-domain-cell .ndpp-icon-btn:active {
            background: transparent;
            box-shadow: none;
        }

a.ndpp-domain-text,
.ndpp-domain-text {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    max-width: 100%;
    padding: .3rem .65rem;
    border: 1px solid var(--ndpp-line, #edeff2);
    border-radius: 8px;
    background: #f6f8fa;
    color: #3a4250;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

    a.ndpp-domain-text:hover,
    a.ndpp-domain-text:focus {
        color: var(--ndpp-accent, #D25055);
        text-decoration: none;
        text-decoration: underline;
    }

    .ndpp-domain-text > i {
        flex: 0 0 auto;
        font-size: .9em;
        color: var(--ndpp-accent, #D25055);
    }

.ndpp-domain-text__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-domain-actions {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

tr:hover .ndpp-domain-actions,
.ndpp-domain-cell:focus-within .ndpp-domain-actions {
    opacity: 1;
    pointer-events: auto;
}

.ndpp-col-action .ndpp-row-actions {
    justify-content: center;
}

.ndpp-row-actions .btn {
    margin: 0;
    padding: .35rem .9rem;
}

.ndpp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--danger-btn-button) 22%, #e2e5e9);
    border-radius: 8px;
    color: var(--danger-btn-button);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}

    .ndpp-icon-btn:hover,
    .ndpp-icon-btn:focus {
        color: var(--danger-btn-button);
        text-decoration: none;
        transform: translateY(-1px);
    }

    .ndpp-icon-btn:focus,
    .ndpp-icon-btn:active,
    .ndpp-icon-btn:focus-visible {
        outline: none !important;
        box-shadow: none;
    }

.ndpp-icon-btn--danger,
.ndpp-icon-btn--danger:hover,
.ndpp-icon-btn--danger:focus {
    color: var(--b64-clear-color, #ef4444);
    border-color: color-mix(in srgb, var(--b64-clear-color, #ef4444) 35%, #e2e5e9);
}

    .ndpp-icon-btn--danger:hover {
        background-color: rgba(239, 68, 68, .08);
    }

.ndpp-icon-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(var(--danger-btn-button-rgb), .25);
}

.ndpp-datatable {
    border: 1px solid var(--ndpp-line);
    border-radius: 12px;
    padding: 1.6rem;
    background: #fff;
}

/* Row overflow (kebab) menu — portaled to <body> as position:fixed so it escapes table overflow clipping */
.ndpp-row-menu {
    position: fixed;
    z-index: 2000;
    min-width: 176px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(31, 35, 41, .12);
}

    .ndpp-row-menu a.ndpp-row-menu__item,
    .ndpp-row-menu__item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 7px;
        color: #2b3038;
        font-size: .85rem;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
    }

        .ndpp-row-menu a.ndpp-row-menu__item:hover,
        .ndpp-row-menu a.ndpp-row-menu__item:focus,
        .ndpp-row-menu__item:hover {
            background: #f1f3f5;
            color: #1f2329;
            text-decoration: none;
            outline: none;
        }

        .ndpp-row-menu__item .ndpp-ico {
            width: 15px;
            height: 15px;
            color: #6b7280;
        }

        .ndpp-row-menu__item:hover .ndpp-ico {
            color: #3f4753;
        }

.ndpp-row-menu__item--danger {
    color: #d9534f;
}

    .ndpp-row-menu__item--danger:hover {
        background: #fdecea;
        color: #c9302c;
    }

    .ndpp-row-menu__item--danger .ndpp-ico {
        color: #d9534f;
    }

.ndpp-datatable .ndpp-dt-xscroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.ndpp-datatable table.table.ndpp-sticky-ends thead th:first-child,
.ndpp-datatable table.table.ndpp-sticky-ends tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff; /* opaque only — no divider border (per design) */
}

/* last (Action) column (ends + last) */
.ndpp-datatable table.table.ndpp-sticky-ends thead th:last-child,
.ndpp-datatable table.table.ndpp-sticky-ends tbody td:last-child,
.ndpp-datatable table.table.ndpp-sticky-last thead th:last-child,
.ndpp-datatable table.table.ndpp-sticky-last tbody td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff; /* opaque only — no divider border (per design) */
}

.ndpp-datatable table.table.ndpp-sticky-ends thead th:first-child,
.ndpp-datatable table.table.ndpp-sticky-ends thead th:last-child,
.ndpp-datatable table.table.ndpp-sticky-last thead th:last-child {
    z-index: 3;
    background: #f8f9fb;
}


.ndpp-datatable table.table-admin-vendorassessment tbody td.ndpp-col-trunc {
    min-width: 160px;
    max-width: 300px;
}

.ndpp-datatable table.table-admin-vendorassessment tbody td.ndpp-col-trunc--wide {
    min-width: 240px;
    max-width: 420px;
}

/* DPIA Dashboard — หัวคอลัมน์ภาษาไทยยาวมาก ("การประเมินผลกระทบด้านการคุ้มครองข้อมูลส่วนบุคคล",
   "เจ้าหน้าที่คุ้มครองข้อมูลส่วนบุคคล") และ nowrap จึงกินความกว้างไปหมด คอลัมน์ข้อความ
   (สายงาน/หน่วยงาน/โครงการ/เจ้าของ) ถูกบีบเหลือ ~80px ตัดคำเพี้ยน
   → ล็อกความกว้างขั้นต่ำให้คอลัมน์ข้อความ + ให้หัวตารางตัดบรรทัดได้ ตารางกว้างเกินก็เลื่อนใน .ndpp-dt-xscroll */
.ndpp-datatable table.table-admin-dpiadashboard tbody td.ndpp-col-trunc {
    min-width: 150px;
    max-width: 240px;
}

.ndpp-datatable table.table-admin-dpiadashboard tbody td.ndpp-col-trunc--wide {
    min-width: 200px;
    max-width: 320px;
}

.ndpp-datatable table.table-admin-dpiadashboard.nowrap thead th {
    white-space: normal;
    vertical-align: middle;
}

    .ndpp-datatable table.table-admin-dpiadashboard.nowrap thead th.ndpp-col-fit {
        min-width: 130px;
    }

[dir="rtl"] .ndpp-datatable table.table.ndpp-sticky-ends thead th:first-child,
[dir="rtl"] .ndpp-datatable table.table.ndpp-sticky-ends tbody td:first-child {
    left: auto;
    right: 0;
}

[dir="rtl"] .ndpp-datatable table.table.ndpp-sticky-ends thead th:last-child,
[dir="rtl"] .ndpp-datatable table.table.ndpp-sticky-ends tbody td:last-child,
[dir="rtl"] .ndpp-datatable table.table.ndpp-sticky-last thead th:last-child,
[dir="rtl"] .ndpp-datatable table.table.ndpp-sticky-last tbody td:last-child {
    right: auto;
    left: 0;
}

.ndpp-datatable.table-responsive,
.ndpp-datatable .dataTables_scrollBody,
.ndpp-datatable .ndpp-dt-xscroll,
.ndpp-datatable .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #cdd4df transparent;
    overscroll-behavior-x: contain;
}

    .ndpp-datatable.table-responsive::-webkit-scrollbar,
    .ndpp-datatable .dataTables_scrollBody::-webkit-scrollbar,
    .ndpp-datatable .ndpp-dt-xscroll::-webkit-scrollbar,
    .ndpp-datatable .table-responsive::-webkit-scrollbar {
        height: 10px;
        width: 10px;
    }

    .ndpp-datatable.table-responsive::-webkit-scrollbar-track,
    .ndpp-datatable .dataTables_scrollBody::-webkit-scrollbar-track,
    .ndpp-datatable .ndpp-dt-xscroll::-webkit-scrollbar-track,
    .ndpp-datatable .table-responsive::-webkit-scrollbar-track {
        background: transparent;
    }

    .ndpp-datatable.table-responsive::-webkit-scrollbar-thumb,
    .ndpp-datatable .dataTables_scrollBody::-webkit-scrollbar-thumb,
    .ndpp-datatable .ndpp-dt-xscroll::-webkit-scrollbar-thumb,
    .ndpp-datatable .table-responsive::-webkit-scrollbar-thumb {
        background: #cdd4df;
        border-radius: 999px;
        border: 3px solid transparent;
        background-clip: padding-box;
        transition: background-color .2s ease;
    }

        .ndpp-datatable.table-responsive::-webkit-scrollbar-thumb:hover,
        .ndpp-datatable .dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
        .ndpp-datatable .ndpp-dt-xscroll::-webkit-scrollbar-thumb:hover,
        .ndpp-datatable .table-responsive::-webkit-scrollbar-thumb:hover {
            background: #aab3c2;
            background-clip: padding-box;
        }

    .ndpp-datatable.table-responsive::-webkit-scrollbar-corner,
    .ndpp-datatable .dataTables_scrollBody::-webkit-scrollbar-corner,
    .ndpp-datatable .ndpp-dt-xscroll::-webkit-scrollbar-corner,
    .ndpp-datatable .table-responsive::-webkit-scrollbar-corner {
        background: transparent;
    }

.ndpp-dt-xbar {
    position: fixed;
    bottom: 0;
    z-index: 30;
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 -1px 6px rgba(16, 24, 40, .08);
    scrollbar-width: thin;
    scrollbar-color: #aab3c2 transparent;
}

.ndpp-dt-xbar__inner {
    height: 1px;
}

.ndpp-dt-xbar::-webkit-scrollbar {
    height: 12px;
}

.ndpp-dt-xbar::-webkit-scrollbar-track {
    background: transparent;
}

.ndpp-dt-xbar::-webkit-scrollbar-thumb {
    background: #aab3c2;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

    .ndpp-dt-xbar::-webkit-scrollbar-thumb:hover {
        background: #8e99ab;
        background-clip: padding-box;
    }

.ndpp-datatable table.table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    .ndpp-datatable table.table thead th {
        background: #f8f9fb;
        border-top: 1px solid var(--ndpp-line);
        border-bottom: 1px solid var(--ndpp-line);
        padding: .8rem .85rem;
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: #4a5160;
        white-space: nowrap;
    }

        .ndpp-datatable table.table thead th:first-child {
            border-left: 1px solid var(--ndpp-line);
            border-top-left-radius: 9px;
            border-bottom-left-radius: 9px;
        }

        .ndpp-datatable table.table thead th:last-child {
            border-right: 1px solid var(--ndpp-line);
            border-top-right-radius: 9px;
            border-bottom-right-radius: 9px;
        }

    .ndpp-datatable table.table tbody td {
        padding: 1.5rem .85rem;
        vertical-align: middle;
        border-bottom: 1px solid #f1f3f5;
        color: #2b2f38;
    }

.ndpp-datatable table.table-admin-datasubjectsummarylistsummarylist tbody td {
    vertical-align: top;
}

.ndpp-cell-link {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    color: var(--danger-btn-button, #00a898);
    font-weight: 500;
    cursor: pointer;
}

    .ndpp-cell-link:hover {
        text-decoration: underline;
    }

.ndpp-datatable table.table tbody tr:last-child td {
    border-bottom: 0;
}

.ndpp-datatable table.table tbody tr {
    transition: background-color .12s ease;
}

/*.ndpp-datatable table.table tbody tr:hover {
            background: #fafbfc;
        }*/

.ndpp-datatable .dataTables_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* หน้า redesign ใช้ skeleton loading (nsdx-skeleton) แล้ว — ซ่อน indicator "Processing..." default ของ DataTables ที่ซ้ำซ้อน
   (DataTables ตั้ง display:block แบบ inline ตอนโหลด จึงต้อง !important ทับ) */
.ndpp-datatable .dataTables_processing {
    display: none !important;
}

.ndpp-datatable .dataTables_wrapper .dataTables_filter {
    order: 1 !important;
    float: none;
    margin: 0 auto 1rem 0;
    text-align: left;
}

.ndpp-datatable .dataTables_wrapper .dataTables_length {
    order: 2 !important;
    float: none;
    margin: 0 0 1rem 0;
}

.ndpp-datatable .dataTables_wrapper > table.dataTable,
.ndpp-datatable .dataTables_wrapper > .ndpp-dt-xscroll {
    order: 3;
    flex: 0 0 100%;
    width: 100% !important;
}

.ndpp-datatable .ndpp-dt-xscroll > table.dataTable {
    width: 100% !important;
}

.ndpp-datatable .dataTables_wrapper .dataTables_info {
    order: 4;
    float: none;
}

.ndpp-datatable .dataTables_wrapper .dataTables_paginate {
    order: 5;
    float: none;
    margin-left: auto;
}

.ndpp-datatable .dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 500;
    font-size: .85rem;
    color: var(--ndpp-muted);
    position: relative;
}

    .ndpp-datatable .dataTables_wrapper .dataTables_filter label > i.fa-search {
        color: #adb3bd;
        font-size: .85rem;
    }

.ndpp-datatable .dataTables_wrapper .dataTables_filter input {
    box-sizing: border-box;
    height: 2.25rem;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    padding: .4rem 2.1rem .4rem 2.25rem;
    margin: 0;
    outline: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23adb3bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat .75rem center;
    background-size: 1rem 1rem;
    width: 220px;
    min-width: 130px;
    max-width: 100%;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--ndpp-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ndpp-datatable .dataTables_wrapper .dataTables_filter input:focus {
        border-color: var(--ndpp-accent);
        box-shadow: 0 0 0 3px rgba(120, 120, 120, .12);
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .12);
    }

    .ndpp-datatable .dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-cancel-button,
    .ndpp-datatable .dataTables_wrapper .dataTables_filter input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

.ndpp-datatable .dataTables_wrapper .dataTables_filter .ndpp-dt-search__clear {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    width: 1.35rem;
    height: 1.35rem;
    display: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border-radius: 50%;
    transition: background-color .15s ease;
}

    .ndpp-datatable .dataTables_wrapper .dataTables_filter .ndpp-dt-search__clear::before {
        content: "";
        position: absolute;
        inset: 0;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center;
        -webkit-mask-size: .72rem .72rem;
        mask-size: .72rem .72rem;
        background-color: var(--b64-clear-color, #ef4444);
        transition: background-color .15s ease;
    }

.ndpp-datatable .dataTables_wrapper .dataTables_filter.has-value .ndpp-dt-search__clear {
    display: block;
}

.ndpp-datatable .dataTables_wrapper .dataTables_filter .ndpp-dt-search__clear:hover {
    background-color: rgba(100, 107, 117, .12);
}

    .ndpp-datatable .dataTables_wrapper .dataTables_filter .ndpp-dt-search__clear:hover::before {
        background-color: var(--b64-clear-color, #ef4444);
    }

[dir="rtl"] .ndpp-datatable .dataTables_wrapper .dataTables_filter input {
    padding: .4rem 2.25rem .4rem 2.1rem;
    background-position: right .75rem center;
}

[dir="rtl"] .ndpp-datatable .dataTables_wrapper .dataTables_filter .ndpp-dt-search__clear {
    right: auto;
    left: .5rem;
}

.ndpp-datatable .dataTables_wrapper .dataTables_length label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 500;
    font-size: .85rem;
    color: var(--ndpp-muted);
}

.ndpp-datatable .dataTables_wrapper .dataTables_length select {
    box-sizing: border-box;
    height: 2.25rem;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    padding: .4rem 1.9rem .4rem .7rem;
    margin: 0;
    outline: none;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--ndpp-ink);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .65rem center;
    background-size: .7rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ndpp-datatable .dataTables_wrapper .dataTables_length select:focus {
        border-color: var(--ndpp-accent);
        box-shadow: 0 0 0 3px rgba(120, 120, 120, .12);
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .12);
    }

.ndpp-datatable .dataTables_wrapper .dataTables_info {
    margin-top: 1rem;
    padding-top: 0;
    color: var(--ndpp-muted);
    font-size: .82rem;
}

.ndpp-datatable .dataTables_wrapper .dataTables_paginate {
    margin-top: 1rem;
    padding-top: 0;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

    .ndpp-datatable .dataTables_wrapper .dataTables_paginate > span {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
    }

    .ndpp-datatable .dataTables_wrapper .dataTables_paginate .paginate_button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-width: 2.1rem;
        height: 2.1rem;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        padding: 0 .6rem !important;
        margin: 0 !important;
        font-size: .82rem;
        font-weight: 500;
        color: var(--ndpp-muted) !important;
        background: transparent !important;
        transition: background-color .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease;
    }

        .ndpp-datatable .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #f1f3f5 !important;
            border-color: #e2e5e9 !important;
            color: var(--ndpp-ink) !important;
            box-shadow: none;
        }

        .ndpp-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .ndpp-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            background: var(--ndpp-accent) !important;
            border-color: var(--ndpp-accent) !important;
            color: #fff !important;
            box-shadow: 0 2px 7px rgba(var(--danger-btn-button-rgb), .3);
        }

        .ndpp-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
        .ndpp-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.next {
            font-weight: 500;
            color: var(--ndpp-ink) !important;
        }

        .ndpp-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .ndpp-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            background: transparent !important;
            border-color: transparent !important;
            color: #c4c9d0 !important;
            box-shadow: none;
            cursor: default;
        }

[dir="rtl"] .ndpp-export-menu .dropdown-item {
    flex-direction: row-reverse;
    text-align: right;
}

@media (max-width: 575.98px) {
    .page-toolbar {
        align-items: flex-start;
    }

    .page-toolbar-actions {
        width: 100%;
        margin-top: .75rem;
    }

        .page-toolbar-actions .btn {
            flex: 1 1 auto;
        }
}

.page-toolbar__row {
    gap: .75rem 1.5rem;
}

.ndpp-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
}

.ndpp-filter {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

    .ndpp-filter > .select2-container {
        min-width: 200px;
    }

    .ndpp-filter > .ndpp-dash-daterange,
    .ndpp-filter > .ndpp-dash-daterange.btn {
        width: auto;
        min-width: 14rem;
        height: 2.25rem;
        gap: .4rem;
        padding: 0 2.4rem 0 .8rem;
        border-color: #e2e5e9;
        border-radius: 9px;
        font-size: .85rem;
    }

.ndpp-report-filters {
    width: 100%;
}

.ndpp-rf__head {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 12px;
    margin-bottom: .65rem;
}

.ndpp-rf__title {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ndpp-ink, #2b2f38);
}

    .ndpp-rf__title > i {
        color: var(--ndpp-muted, #6b7280);
    }

.ndpp-rf__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.4rem;
}

.ndpp-rf__field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.ndpp-rf__label {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ndpp-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndpp-rf__grid .ndpp-dd,
.ndpp-rf__grid .ndpp-dd__toggle {
    width: 100%;
}

/* ชื่อที่เลือกยาว (เช่น banner + URL) ต้องตัด … ในกรอบ ไม่ล้นออกนอกปุ่ม */
.ndpp-rf__grid .ndpp-dd__toggle {
    min-width: 0;
    overflow: hidden;
}

.ndpp-rf__grid .ndpp-dd__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndpp-rf__daterange,
.ndpp-rf__daterange.btn,
.ndpp-rf__daterange.btn-secondary {
    width: 100%;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .8rem;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    background: #fff;
    color: var(--ndpp-ink, #1f2329);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    justify-content: flex-start;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ndpp-rf__daterange > i.fa-clock-o {
        flex: 0 0 auto;
        font-size: .9rem;
        color: var(--ndpp-accent, #D25055);
    }

    .ndpp-rf__daterange > span {
        display: inline-flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        gap: .4rem;
    }

    .ndpp-rf__daterange tspan {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ndpp-rf__daterange .ndpp-dd__caret {
        flex: 0 0 auto;
        margin-left: auto;
        color: #6b7280;
    }

    .ndpp-rf__daterange:hover {
        border-color: #d7dbe0;
        background: #fff;
        color: var(--ndpp-ink, #1f2329);
    }

    .ndpp-rf__daterange:focus,
    .ndpp-rf__daterange:focus-visible,
    .ndpp-rf__daterange:active,
    .ndpp-rf__daterange.active,
    .ndpp-rf__daterange[aria-expanded="true"] {
        border-color: var(--ndpp-accent, #D25055);
        background: #fff;
        color: var(--ndpp-ink, #1f2329);
        outline: none;
    }

        .ndpp-rf__daterange.active .ndpp-dd__caret,
        .ndpp-rf__daterange[aria-expanded="true"] .ndpp-dd__caret {
            transform: rotate(180deg);
        }

.ndpp-dash-daterange,
.ndpp-dash-daterange.btn,
.ndpp-dash-daterange.btn-secondary {
    width: 100%;
    /* height: 2.35rem; */
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 9px 1.9rem 9px 13px;
    border: 1px solid var(--ndpp-line);
    border-radius: 11px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    color: var(--ndpp-ink, #1f2329);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    justify-content: flex-start;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .ndpp-dash-daterange > i.fa-clock-o {
        flex: 0 0 auto;
        width: 1.7rem;
        height: 1.7rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .92rem;
        color: var(--ndpp-accent, #D25055);
        /*background: rgba(var(--danger-btn-button-rgb), .1);*/
        margin-right: 0px !important;
        border-radius: 8px;
    }

    .ndpp-dash-daterange > tspan {
        display: none;
    }

    .ndpp-dash-daterange > span {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1 1 auto;
        min-width: 0;
        gap: .4rem;
    }

    .ndpp-dash-daterange span > tspan {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ndpp-dash-daterange .ndpp-dd__caret {
        display: none;
    }

    .ndpp-dash-daterange:hover {
        border-color: #cfd4da;
        background-color: #fff;
        box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
        color: var(--ndpp-ink, #1f2329);
    }

    .ndpp-dash-daterange:focus,
    .ndpp-dash-daterange:focus-visible,
    .ndpp-dash-daterange:active,
    .ndpp-dash-daterange.active,
    .ndpp-dash-daterange[aria-expanded="true"] {
        border-color: var(--ndpp-accent, #D25055);
        /*  box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .12);*/
        background-color: #fff;
        color: var(--ndpp-ink, #1f2329);
        outline: none;
    }

[dir="rtl"] .ndpp-dash-daterange {
    padding: 9px 13px 9px 1.9rem;
    background-position: left .7rem center;
}

.table-admin-adhocreporttabular th:first-child,
.table-admin-adhocreporttabular td:first-child {
    text-align: left !important;
}

.ndpp-dash-panel {
    background: #fff;
    border: 1px solid var(--ndpp-line);
    border-radius: 12px;
    padding: 1.25rem;
}

.ndpp-dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4.5rem 1rem 4rem;
    color: var(--ndpp-muted, #6b7280);
}

.ndpp-dash-empty__art {
    position: relative;
    width: 132px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
}

.ndpp-dash-empty__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--danger-btn-button) 32%, transparent);
    transform: translate(-50%, -50%);
    animation: ndppEmptyPulse 3.2s ease-out infinite;
}

.ndpp-dash-empty__ring--2 {
    animation-delay: 1.6s;
}

.ndpp-dash-empty__art > i {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 24px;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--danger-btn-button);
    background: linear-gradient(145deg, color-mix(in srgb, var(--danger-btn-button) 15%, #fff) 0%, color-mix(in srgb, var(--danger-btn-button) 6%, #fff) 100%);
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--danger-btn-button) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--danger-btn-button) 18%, transparent);
    animation: ndppEmptyFloat 4s ease-in-out infinite;
}

@keyframes ndppEmptyPulse {
    0% {
        width: 84px;
        height: 84px;
        opacity: .55;
    }

    100% {
        width: 132px;
        height: 132px;
        opacity: 0;
    }
}

@keyframes ndppEmptyFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ndpp-dash-empty__ring {
        animation: none;
        opacity: .35;
        width: 108px;
        height: 108px;
    }

    .ndpp-dash-empty__art > i {
        animation: none;
    }
}

.ndpp-dash-empty > h4 {
    margin: 0 0 .45rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ndpp-ink, #2b2f38);
}

.ndpp-dash-empty > p {
    margin: 0 0 1.6rem;
    max-width: 340px;
    font-size: .9rem;
    line-height: 1.55;
}

.ndpp-dash-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: var(--danger-btn-button);
    border: 0;
    border-radius: 999px;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

    .ndpp-dash-empty__cta > i {
        margin: 0;
    }

    .ndpp-dash-empty__cta:hover,
    .ndpp-dash-empty__cta:focus {
        color: #fff;
        transform: translateY(-2px);
        filter: brightness(1.04);
    }

    .ndpp-dash-empty__cta:active {
        transform: translateY(0) scale(.98);
    }


.ndpp-wmodal__crumb {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
}

.ndpp-wmodal__crumbsep {
    font-size: .8em;
    color: var(--ndpp-muted, #adb3bd);
}

.ndpp-wmodal__crumb > span:first-child {
    color: var(--ndpp-muted, #8a919c);
    font-weight: 500;
}

.ndpp-fbuild__nav {
    margin-bottom: 1.1rem;
}

.ndpp-fbuild__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 10px;
    margin-bottom: .55rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--danger-btn-button);
    background: color-mix(in srgb, var(--danger-btn-button) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--danger-btn-button) 20%, transparent);
    border-radius: 999px;
    transition: background .15s ease, transform .15s ease;
}

    .ndpp-fbuild__back:hover {
        background: color-mix(in srgb, var(--danger-btn-button) 15%, #fff);
        transform: translateX(-2px);
    }

.ndpp-fbuild__hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    font-size: .85rem;
    line-height: 1.45;
    margin: 10px 10px 0px 10px;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329) !important;
}

.ndpp-fbuild__hinticon {
    flex: 0 0 auto;
    font-size: .95rem;
    color: var(--ndpp-muted, #8a919c);
}

[dir="rtl"] .ndpp-fbuild__back:hover {
    transform: translateX(2px);
}

[dir="rtl"] .ndpp-fbuild__back .fa-arrow-left {
    transform: scaleX(-1);
}

.ndpp-fbuild {
    padding-top: .25rem;
}

.ndpp-fbuild__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
    padding: 1.1rem 1.2rem;
    background: #f8f9fb;
    border: 1px solid var(--ndpp-line, #edeff2);
    border-radius: 12px;
    margin-bottom: 1.75rem;
}

.ndpp-fbuild__field {
    flex: 1 1 220px;
    min-width: 0;
}

.ndpp-fbuild__op {
    flex: 0 1 150px;
    min-width: 0;
}

.ndpp-fbuild__val {
    flex: 2 1 240px;
    min-width: 0;
}

.ndpp-fbuild__add {
    flex: 0 0 auto;
}

.ndpp-fbuild__row .control-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-fbuild__addbtn {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
}

.ndpp-fbuild__listhead {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ndpp-muted, #8a919c);
    margin-bottom: .6rem;
}

.ndpp-fbuild__list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ndpp-fchip {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .85rem;
    background: #fff;
    border: 1px solid var(--ndpp-line, #edeff2);
    border-radius: 10px;
    font-size: .86rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ndpp-fchip:hover {
        border-color: #dfe3e8;
        box-shadow: 0 3px 10px -6px rgba(20, 23, 28, .18);
    }

.ndpp-fchip__field {
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-fchip__op {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--danger-btn-button);
    background: color-mix(in srgb, var(--danger-btn-button) 12%, #fff);
    padding: .18rem .5rem;
    border-radius: 6px;
}

.ndpp-fchip__val {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ndpp-muted, #6b7280);
    word-break: break-word;
}

.ndpp-fchip__x {
    flex: 0 0 auto;
    margin-left: auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #aab0ba;
    font-size: .8rem;
    transition: background .15s ease, color .15s ease;
}

    .ndpp-fchip__x:hover {
        background: color-mix(in srgb, var(--danger-btn-button) 12%, #fff);
        color: var(--danger-btn-button);
    }

.ndpp-fbuild__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 1rem;
    border: 1px dashed #dfe3e8;
    border-radius: 10px;
    color: var(--ndpp-muted, #9aa1a9);
    font-size: .86rem;
}

    .ndpp-fbuild__empty > i {
        font-size: 1.5rem;
        color: #cbd0d8;
    }

[dir="rtl"] .ndpp-fchip__x {
    margin-left: 0;
    margin-right: auto;
}

.ndpp-dash-toolbar {
    position: sticky;
    top: 64px;
    z-index: 30;
    margin: -1.25rem -1.25rem 2.4rem;
    padding: 1rem 1.25rem 1rem;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #eef0f3;
    box-shadow: 0 8px 18px -14px rgb(16 24 40 / 16%);
}

body:has(.ndpp-dash-panel) .wrapper {
    overflow: visible;
}

.ndpp-dash-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.4rem;
    width: 100%;
    padding: 9px 0px;
    /* border: 1px solid var(--ndpp-line); */
    border-radius: 12px;
}

.ndpp-dash-bar__select {
    flex: 1 1 260px;
    max-width: 360px;
}

.page-toolbar-actions .ndpp-dash-bar__select {
    flex: 0 0 260px;
    width: 260px;
    max-width: 260px;
}

.ndpp-dash-bar__date {
    flex: 0 1 250px;
    min-width: auto;
    flex-direction: row;
    align-items: center;
}

    .ndpp-dash-bar__date > .ndpp-dash-daterange {
        flex: 1 1 auto;
        min-width: 0;
    }

.ndpp-dash-bar__row {
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .ndpp-dash-bar__row .ndpp-dash-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ndpp-dash-bar__row .ndpp-icon-btn {
        flex: 0 0 auto;
        width: 2.25rem;
        height: 2.25rem;
    }

    .ndpp-dash-bar__row > select2-custom {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ndpp-dash-bar__row .ndpp-dd,
    .ndpp-dash-bar__row .ndpp-dd__toggle {
        width: 100%;
    }

    .ndpp-dash-bar__row .ndpp-dd__toggle {
        height: 2.25rem;
        padding-right: 1.9rem;
        background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .65rem center;
    }

        .ndpp-dash-bar__row .ndpp-dd__toggle .ndpp-dd__caret {
            display: none;
        }

[dir="rtl"] .ndpp-dash-bar__row .ndpp-dd__toggle {
    padding-right: .8rem;
    padding-left: 1.9rem;
    background-position: left .65rem center;
}

.ndpp-dash-bar__row > .ndpp-dash-rename {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.25rem;
}

.ndpp-dash-fav,
.ndpp-dash-fav:hover,
.ndpp-dash-fav:focus {
    color: #b6bcc6;
}

    .ndpp-dash-fav.is-on,
    .ndpp-dash-fav.is-on:hover,
    .ndpp-dash-fav.is-on:focus {
        color: #f5b301;
        border-color: color-mix(in srgb, #f5b301 45%, #e2e5e9);
    }

.ndpp-dash-bar__actions {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-left: auto;
}

[dir="rtl"] .ndpp-dash-bar__actions {
    margin-left: 0;
    margin-right: auto;
}

.ndpp-dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 2.35rem;
    padding: 0 .95rem;
    border: 1px solid var(--ndpp-accent);
    border-radius: 9px;
    background: #fff;
    color: var(--ndpp-accent);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: transform .12s ease, border-color .15s ease, color .15s ease;
}

    .ndpp-dash-btn > i {
        margin: 0;
        font-size: .92rem;
        line-height: 1;
    }

    .ndpp-dash-btn:hover {
        transform: translateY(-1px);
    }

/* variant เล็ก — ใช้กับปุ่มในรายการ/แถว (เช่น View Content ในประวัติ version) */
.ndpp-dash-btn--sm {
    height: 1.95rem;
    padding: 0 .7rem;
    font-size: .82rem;
    border-radius: 8px;
}

    .ndpp-dash-btn--sm > i {
        font-size: .82rem;
    }

.ndpp-dash-btn:focus,
.ndpp-dash-btn:active,
.ndpp-dash-btn[aria-expanded="true"] {
    background: #fff;
    border-color: var(--ndpp-accent);
    color: var(--ndpp-accent);
    outline: none;
    box-shadow: none;
}

.ndpp-dash-btn--primary,
.ndpp-dash-btn--primary:focus,
.ndpp-dash-btn--primary:active,
.ndpp-dash-btn--primary[aria-expanded="true"] {
    background: var(--danger-btn-button);
    border-color: var(--danger-btn-button);
    color: #fff;
}

    .ndpp-dash-btn--primary:hover {
        background: var(--danger-btn-button);
        border-color: var(--danger-btn-button);
        color: #fff;
        box-shadow: 0 2px 10px rgba(var(--danger-btn-button-rgb), .38);
    }

/* variant ghost = ปุ่มรอง สีเทาเงียบๆ — ใช้ลดความอึกทึกเมื่อหน้าหนึ่งมีปุ่ม action ย่อยหลายตัว
   (ปุ่มหลักของบริบทนั้นค่อยใช้ base หรือ --primary ให้เด่นตัวเดียว) */
.ndpp-dash-btn--ghost,
.ndpp-dash-btn--ghost:focus,
.ndpp-dash-btn--ghost:active {
    border-color: #d7dbe1;
    color: #5b626b;
    background: #fff;
}

    .ndpp-dash-btn--ghost:hover {
        border-color: #b9bdc4;
        color: var(--ndpp-ink, #1f2329);
    }

.ndpp-dash-btn:disabled,
.ndpp-dash-btn[disabled] {
    background: #f1f3f5;
    border-color: #e3e7ec;
    color: #adb5bd;
    cursor: not-allowed;
    box-shadow: none;
}

    .ndpp-dash-btn:disabled:hover,
    .ndpp-dash-btn[disabled]:hover {
        transform: none;
        box-shadow: none;
    }

/* ปุ่ม Delete = outline แดง (ไม่เด่นเท่า Save/primary) */
.ndpp-dash-btn--danger {
    border-color: #e6a8ab;
    color: var(--danger-btn-button);
}

    .ndpp-dash-btn--danger:hover,
    .ndpp-dash-btn--danger:focus,
    .ndpp-dash-btn--danger:active {
        border-color: var(--danger-btn-button);
        color: var(--danger-btn-button);
        background: #fff;
    }

.ndpp-palette__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #c7ccd3 transparent;
}

    /* scrollbar (WebKit/Chromium/Edge/Safari) */
    .ndpp-palette__grid::-webkit-scrollbar {
        width: 8px;
    }

    .ndpp-palette__grid::-webkit-scrollbar-track {
        background: transparent;
    }

    .ndpp-palette__grid::-webkit-scrollbar-thumb {
        background: #c7ccd3;
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

        .ndpp-palette__grid::-webkit-scrollbar-thumb:hover {
            background: #aab0b8;
            background-clip: content-box;
        }

.ndpp-palette__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: background-color .12s ease, border-color .12s ease;
}

    .ndpp-palette__item:hover {
        background: #f4f5f7;
    }

    /* เอา focus outline ดำ default ของ button ออก — ใช้กรอบ is-active บอกสถานะแทน */
    .ndpp-palette__item:focus,
    .ndpp-palette__item:active,
    .ndpp-palette__item:focus-visible {
        outline: none;
        box-shadow: none;
    }

    .ndpp-palette__item.is-active {
        border-color: var(--ndpp-accent);
        background: rgba(var(--danger-btn-button-rgb), .06);
    }

.ndpp-palette__sw {
    display: flex;
    width: 100%;
    height: 1.5rem;
    border-radius: 6px;
    overflow: hidden;
}

    .ndpp-palette__sw > i {
        flex: 1 1 0;
        display: block;
    }

.ndpp-palette__name {
    max-width: 100%;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ndpp-ink, #2b2f38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[dir="rtl"] .ndpp-palette__item {
    align-items: flex-end;
}

/* ══ New Dashboard modal — start-from / palette / initial date range ═══════════ */
.ndpp-newdash .form-group {
    margin-bottom: 1.15rem;
}

    .ndpp-newdash .form-group:last-child {
        margin-bottom: 0;
    }

.ndpp-newdash .control-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-newdash__hint {
    margin: .45rem 0 0;
    font-size: .8rem;
    color: var(--ndpp-muted, #8a919c);
}

/* palette swatch chooser */
.ndpp-newdash__pals {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ndpp-newdash__pal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    width: 5.6rem;
    padding: .5rem .5rem .45rem;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .ndpp-newdash__pal:hover {
        border-color: #c7ccd3;
        transform: translateY(-1px);
    }

    /* กันขอบดำ (default focus outline ของ button) ตอนกด — ใช้ border neutral แทน */
    .ndpp-newdash__pal:focus,
    .ndpp-newdash__pal:focus-visible {
        outline: none;
        border-color: #c7ccd3;
    }

    .ndpp-newdash__pal.is-active {
        border-color: var(--danger-btn-button);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-btn-button) 15%, transparent);
    }

.ndpp-newdash__palname {
    max-width: 100%;
    font-size: .72rem;
    color: var(--ndpp-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* toggle โชว์ palette เพิ่ม/ย่อ — ตัวหนังสือ accent เรียบๆ */
.ndpp-newdash__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: .6rem;
    padding: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--danger-btn-button);
    background: transparent;
    border: 0;
    transition: opacity .15s ease;
}

    .ndpp-newdash__more:hover {
        opacity: .75;
    }

    .ndpp-newdash__more:focus,
    .ndpp-newdash__more:active {
        outline: none;
        box-shadow: none;
    }

/* initial date range button — full width in the modal */
.ndpp-newdash__date {
    width: 100%;
    justify-content: flex-start;
}

[dir="rtl"] .ndpp-newdash__date {
    justify-content: flex-end;
}

.ndpp-palette__foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ndpp-line, #eef0f3);
}

.ndpp-palette__hint {
    font-size: .76rem;
    color: var(--ndpp-accent, #D25055);
}

.ndpp-dash-bar__actions .dropdown-menu,
.ndpp-dash-more__menu {
    min-width: 172px;
    margin-top: .4rem;
    padding: 6px;
    border: 1px solid var(--ndpp-line, #eceef1);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 23, 28, .14);
}

    .ndpp-dash-bar__actions .dropdown-item,
    .ndpp-dash-more__menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .5rem .6rem;
        border-radius: 8px;
        font-size: .88rem;
        color: #2b2f38;
        cursor: pointer;
    }

        .ndpp-dash-bar__actions .dropdown-item > .fa,
        .ndpp-dash-more__menu .dropdown-item > .fa {
            width: 16px;
            margin: 0;
            font-size: 14px;
            text-align: center;
            color: #6b7280;
        }

        .ndpp-dash-bar__actions .dropdown-item:hover,
        .ndpp-dash-bar__actions .dropdown-item:focus,
        .ndpp-dash-more__menu .dropdown-item:hover,
        .ndpp-dash-more__menu .dropdown-item:focus {
            background-color: #f4f5f7;
            color: #2b2f38;
        }

    .ndpp-dash-bar__actions .ndpp-menu-danger,
    .ndpp-dash-bar__actions .ndpp-menu-danger > .fa,
    .ndpp-dash-more__menu .ndpp-menu-danger,
    .ndpp-dash-more__menu .ndpp-menu-danger > .fa {
        color: var(--b64-clear-color, #ef4444);
    }

        .ndpp-dash-bar__actions .ndpp-menu-danger:hover,
        .ndpp-dash-bar__actions .ndpp-menu-danger:focus,
        .ndpp-dash-more__menu .ndpp-menu-danger:hover,
        .ndpp-dash-more__menu .ndpp-menu-danger:focus {
            background-color: rgba(239, 68, 68, .08);
            color: var(--b64-clear-color, #ef4444);
        }

.ndpp-dash-more__menu {
    min-width: 194px;
    padding: 7px;
    transform-origin: top right;
    animation: ndppMoreIn .16s ease-out;
}

.ndpp-dash-more__menu--wide {
    width: 252px;
    max-width: 92vw;
}

.ndpp-dash-more__sect {
    padding-top: 2px;
}

.ndpp-dash-more__secthd {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 .5rem 7px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #8b919b;
}

.ndpp-dash-more__sectcur {
    flex: 0 1 auto;
    margin-inline-start: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ndpp-ink, #2b2f38);
}

.ndpp-dash-more__itemsw {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
    height: 20px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .07);
}

    .ndpp-dash-more__itemsw > i {
        flex: 1 1 0;
        display: block;
        margin: 0;
        border-radius: 0;
    }

.ndpp-dash-more__val {
    margin-inline-start: auto;
    font-size: .8rem;
    font-weight: 400;
    color: #8b919b;
}

.ndpp-dash-more__chev {
    flex: 0 0 auto;
    margin-inline-start: .35rem;
    font-size: 14px;
    color: #9aa1ab;
}

[dir="rtl"] .ndpp-dash-more__chev {
    transform: scaleX(-1);
}

.ndpp-dash-more__back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-size: 15px;
    cursor: pointer;
    outline: none;
}

    .ndpp-dash-more__back:hover {
        background: #f1f3f5;
    }

[dir="rtl"] .ndpp-dash-more__back > .fa {
    transform: scaleX(-1);
}

.ndpp-dash-more__pallist {
    max-height: 208px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .ndpp-dash-more__pallist::-webkit-scrollbar {
        width: 6px;
    }

    .ndpp-dash-more__pallist::-webkit-scrollbar-track {
        background: transparent;
    }

    .ndpp-dash-more__pallist::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #cbd5e1;
    }

        .ndpp-dash-more__pallist::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.ndpp-dash-more__pal {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .35rem .55rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    color: #2b2f38;
    text-align: left;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: background-color .13s;
}

    .ndpp-dash-more__pal:hover,
    .ndpp-dash-more__pal:focus {
        background-color: #f4f5f7;
        outline: none;
    }

    .ndpp-dash-more__pal.is-active {
        background-color: rgba(var(--danger-btn-button-rgb), .06);
    }

.ndpp-dash-more__palsw {
    flex: 0 0 28px;
    display: flex;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
}

    .ndpp-dash-more__palsw > i {
        flex: 1 1 0;
        display: block;
    }

.ndpp-dash-more__palname {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ndpp-dash-more__palok {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--ndpp-accent, #D25055);
}

.ndpp-dash-more__sect .ndpp-palette__foot {
    padding-top: 6px;
}

@keyframes ndppMoreIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ndpp-dash-more__menu .dropdown-item {
    font-weight: 500;
    padding: .5rem .55rem;
    transition: background-color .13s, color .13s;
}

    .ndpp-dash-more__menu .dropdown-item > .fa {
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        font-size: 15px;
        color: #6b7280;
        transition: color .13s;
    }

    .ndpp-dash-more__menu .dropdown-item:hover > .fa {
        color: var(--danger-btn-button);
    }

.ndpp-dash-more__menu .ndpp-menu-danger {
    margin-top: 5px;
    padding-top: .6rem;
    border-top: 1px solid #f0f2f5;
}

    .ndpp-dash-more__menu .ndpp-menu-danger > .fa,
    .ndpp-dash-more__menu .ndpp-menu-danger:hover > .fa {
        color: var(--b64-clear-color, #ef4444);
    }

.ndpp-dash-more > .ndpp-icon-btn[aria-expanded="true"] {
    background: #f1f3f5;
    color: var(--danger-btn-button);
}

.ndpp-dash-dirty {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 2px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid #ef44445c;
    color: var(--b64-clear-color, #ef4444);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(var(--danger-btn-button-rgb), .12);
}

    .ndpp-dash-dirty > .fa {
        font-size: 8px;
        animation: ndppDirtyPulse 1.4s ease-in-out infinite;
    }

@keyframes ndppDirtyPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}

.ndpp-dash-select.form-control {
    height: 2.25rem;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    background-color: #fff;
    color: var(--ndpp-ink, #1f2329);
    font-size: .85rem;
    font-weight: 500;
}

    .ndpp-dash-select.form-control:focus {
        border-color: var(--ndpp-accent, #D25055);
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .12);
    }

.ndpp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

.ndpp-tag {
    display: inline-block;
    max-width: 100%;
    padding: .68rem;
    border-radius: 10px;
    border: 1px solid #e7e9ee;
    background-color: #fff;
    color: #000;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .1px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

    .ndpp-tag:hover {
        border-color: #d4d8e0;
        color: #1f2733;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    }

.ndpp-detail-panel {
    background: #fff;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    padding: 1.5rem 1.6rem;
}

    .ndpp-detail-panel .ndpp-datatable {
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    .ndpp-detail-panel + .ndpp-detail-panel { /* margin-top: 18px*/
        ;
    }

.ndpp-detail-panel__title {
    margin: 0 0 4px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-detail-panel__descblock {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--ndpp-line, #eef0f3);
}

    .ndpp-detail-panel__descblock .ndpp-ds-meta__label {
        margin-bottom: 11px;
    }

.ndpp-detail-panel__desc {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ndpp-ink, #1f2329);
    font-size: .95rem;
    line-height: 1.6;
}

.ndpp-detail-panel__desc--empty {
    color: #b6bcc4;
}

.ndpp-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: .88rem;
}

    .ndpp-note > i {
        margin-top: 2px;
    }

.ndpp-note--warning {
    background: #fff8ec;
    border: 1px solid #f5d9a8;
    color: #8a5a11;
}

body:has(.dataaccess-detail) {
    height: auto;
    overflow: visible;
}

.ndpp-ds-card {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    padding: 1.75rem 1.9rem;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 14px;
}

/* squircle ไม่ใช่วงกลม — วงกลมสงวนไว้ให้ avatar ผู้ใช้ที่ล็อกอิน (มุมขวาบน) */
/* คนละรูปทรง = แยกออกทันทีว่านี่คือ "ข้อมูลในระบบ" ไม่ใช่ตัวเราเอง */
.ndpp-ds-card__avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: .5px;
    box-sizing: border-box;
    color: var(--danger-btn-button, #00a898);
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--danger-btn-button, #00a898) 28%, #fff);
    box-shadow: none;
}

    /* ผู้เยาว์ (ม.20) — พื้นอำพันชุดเดียวกับ chip/pill ผู้เยาว์ เห็นจากหัวการ์ดได้เลย
   ว่า record นี้ต้องมีความยินยอมของผู้ปกครอง ไม่ต้องไล่อ่านฟิลด์ */
    /* ไอคอนแทนอักษรย่อ — ~48% ของกล่อง ให้มีอากาศรอบตัวเหมือน avatar รูปคน */
    .ndpp-ds-card__avatar .ndpp-ico {
        width: 30px;
        height: 30px;
    }

    .ndpp-ds-card__avatar.is-minor {
        color: #ff9800;
        background: color-mix(in srgb, #ff9800 14%, #fff);
        border-color: color-mix(in srgb, #ff9800 35%, #fff);
    }

.ndpp-ds-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ndpp-ds-card__name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}

.ndpp-ds-card__email {
    font-size: .92rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    margin-bottom: 1rem;
    padding: .5rem .85rem;
    text-align: left;
    background: #f7f8fa;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 9px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .ndpp-ds-card__email:hover {
        background: #eef1f5;
        border-color: #d3d8e0;
    }

    .ndpp-ds-card__email:focus,
    .ndpp-ds-card__email:focus-visible,
    .ndpp-ds-card__email:active {
        outline: none;
        box-shadow: none;
    }

    .ndpp-ds-card__email i {
        flex: 0 0 auto;
        color: var(--danger-btn-button, #00a898);
    }

.ndpp-ds-card__email-addr {
    min-width: 0;
    word-break: break-all;
}

.ndpp-ds-card__email--masked,
.ndpp-ds-card__email--masked:hover {
    cursor: default;
    background: #f7f8fa;
    border-color: var(--ndpp-line, #e6e9ef);
}

.ndpp-ds-card__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(292px, 6fr));
    gap: 0 3rem;
    border-top: 1px solid var(--ndpp-line, #eef0f3);
    margin-top: .25rem;
    padding-top: 1.4rem;
}

    .ndpp-ds-card__meta > div {
        padding: 0px 0px 15px;
    }

.ndpp-ds-meta__label {
    display: block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .05em;
    color: #94a3b8;
    margin-bottom: 11px;
}

.ndpp-ds-meta__value {
    font-size: .95rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
    line-height: 1.45;
    word-break: break-word;
}

    .ndpp-ds-meta__value a {
        color: var(--danger-btn-button, #00a898);
    }

.ndpp-ds-meta__value--empty {
    color: #b6bcc4;
}

.ndpp-fileinput {
    padding: .4rem .6rem;
    cursor: pointer;
    line-height: 1.6;
}

    .ndpp-fileinput::file-selector-button {
        margin-right: .8rem;
        padding: .35rem .95rem;
        border: 0;
        border-radius: 7px;
        background: color-mix(in srgb, var(--danger-btn-button, #00a898) 12%, #fff);
        color: var(--danger-btn-button, #00a898);
        font-weight: 600;
        font-size: .82rem;
        cursor: pointer;
        transition: background .15s ease;
    }

        .ndpp-fileinput::file-selector-button:hover {
            background: color-mix(in srgb, var(--danger-btn-button, #00a898) 20%, #fff);
        }

.ndpp-field-hint {
    margin: .35rem 0 0;
    font-size: .78rem;
    color: var(--ndpp-muted, #9aa1a9);
}

.ndpp-modal-subtitle {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ndpp-muted, #6b7280);
    margin-top: 2px;
    word-break: break-word;
}

.ndpp-modal-formname {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ndpp-ink, #1f2329);
    padding: .8rem 0rem 1.6rem 0rem;
    word-break: break-word;
}

.ndpp-modal-subhead {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ndpp-ink, #1f2329);
    margin: 0 0 .9rem;
}

    .ndpp-modal-subhead::before {
        content: "";
        flex: 0 0 auto;
        width: 3px;
        height: 15px;
        border-radius: 2px;
        background: var(--danger-btn-button, #00a898);
    }

.ndpp-modal-subhead--mt {
    margin-top: 1.6rem;
}

.ndpp-modal-card {
    background: #fff;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    padding: 1.15rem 1.3rem;
    margin-bottom: 1rem;
}

    .ndpp-modal-card:last-child {
        margin-bottom: 0;
    }

    .ndpp-modal-card > :first-child {
        margin-top: 0;
    }

    .ndpp-modal-card > :last-child {
        margin-bottom: 0;
    }

    .ndpp-modal-card .ndpp-modal-deflist > div:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

.ndpp-modal-cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .8rem;
}

    .ndpp-modal-cardhead .ndpp-modal-subhead {
        margin: 0;
    }

.ndpp-modal-verbadge {
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--danger-btn-button, #00a898);
    background: rgba(0, 168, 152, .10);
    padding: .14rem .55rem;
    border-radius: 999px;
}

.ndpp-modal-countchip {
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ndpp-muted, #6b7280);
    background: #eef1f5;
    padding: .14rem .6rem;
    border-radius: 999px;
}

.ndpp-caret-col {
    width: 46px;
    text-align: center;
    padding-left: .5rem !important;
    padding-right: .75rem !important;
}

.ndpp-rowclick__caret {
    color: #c3c9d2;
    font-size: 1rem;
    transition: color .15s ease, transform .15s ease;
}

.ndpp-rowclick:hover .ndpp-rowclick__caret {
    color: var(--danger-btn-button, #00a898);
    transform: translateX(3px);
}

.ndpp-rowclick.is-active .ndpp-rowclick__caret {
    color: var(--danger-btn-button, #00a898);
}

.ndpp-wmodal .modal-body > .row {
    margin: 0;
}

    .ndpp-wmodal .modal-body > .row > [class*="col-"] {
        padding: 0 0rem;
    }

        .ndpp-wmodal .modal-body > .row > [class*="col-"]:first-child {
            padding-left: 0;
        }

        .ndpp-wmodal .modal-body > .row > [class*="col-"]:last-child {
            padding-right: .5rem;
        }

@media (max-width: 767.98px) {
    .ndpp-wmodal .modal-body > .row > [class*="col-"]:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--ndpp-line, #eef0f3);
        padding: 0 0 1.1rem;
        margin-bottom: 1.1rem;
    }

    .ndpp-wmodal .modal-body > .row > [class*="col-"]:last-child {
        padding: 0;
    }
}

.ndpp-modal-deflist > div {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding: .5rem 0;
    border-bottom: 1px solid #f3f5f8;
}

.ndpp-modal-deflist .ndpp-ds-meta__label {
    flex: 0 0 42%;
    margin: 0;
}

.ndpp-modal-deflist .ndpp-ds-meta__value {
    flex: 1 1 auto;
}

.ndpp-modal-grouplbl {
    margin: 1.35rem 0 .6rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ndpp-muted, #8a929c);
}

.ndpp-modal-cardhead + .ndpp-modal-grouplbl {
    margin-top: .35rem;
}

.ndpp-consent-opt {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: .7rem .9rem;
    margin-bottom: 8px;
    background: #f8f9fb;
    border: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 10px;
    font-size: .875rem;
    line-height: 1.55;
    color: #3d444f;
    transition: border-color .15s ease, background .15s ease;
}

    .ndpp-consent-opt:hover {
        border-color: #d9dee6;
        background: #f4f6f9;
    }

    .ndpp-consent-opt > i {
        flex: 0 0 auto;
        font-size: 1.05rem;
        line-height: 1.55;
    }

    /* ชิปสถานะห้ามหดตาม label ยาว ๆ ไม่งั้นโดน ellipsis ของ .ndpp-status ตัดเป็น "With..." */
    .ndpp-consent-opt > .ndpp-status {
        flex: 0 0 auto;
    }

.ndpp-consent-opt__yes {
    color: var(--danger-btn-button, #00a898);
}

.ndpp-consent-opt__no {
    color: #cbd2da;
}

.ndpp-consent-opt__label {
    color: var(--ndpp-ink, #1f2329);
    font-weight: 600;
}

.ndpp-rev--ok {
    background: #e6f7f4;
    color: var(--danger-btn-button, #00a898);
}

.ndpp-datatable table.nsdx-rowclick-table tbody tr {
    cursor: pointer;
}

    .ndpp-datatable table.nsdx-rowclick-table tbody tr:hover td {
        background: #f1faf8;
    }

.ndpp-rowclick {
    cursor: pointer;
}

.ndpp-datatable table.table tbody tr.ndpp-rowclick td {
    transition: background-color .12s ease;
}

.ndpp-datatable table.table tbody tr.ndpp-rowclick:hover td {
    background: #f1faf8;
}

.ndpp-datatable table.table tbody tr.ndpp-rowclick.is-active td {
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 9%, #fff);
}

    .ndpp-datatable table.table tbody tr.ndpp-rowclick.is-active td:first-child {
        box-shadow: inset 3px 0 0 var(--danger-btn-button, #00a898);
    }

.ndpp-wmodal .ndpp-datatable table.table {
    width: 100%;
}

    .ndpp-wmodal .ndpp-datatable table.table thead th,
    .ndpp-wmodal .ndpp-datatable table.table tbody td {
        white-space: normal;
        word-break: break-word;
    }

.ndpp-ds-pill {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 9999px;
    font-size: 13px;
    align-items: center;
    font-weight: 600;
    background: #eef1f5;
    color: #475467;
    text-align: center;
}

.ndpp-ds-pill--yes {
    background: color-mix(in srgb, #ff9800 14%, #fff);
    color: #ff9800;
}

.ndpp-ds-card__namerow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}

    .ndpp-ds-card__namerow .ndpp-ds-card__name {
        margin: 0;
    }

.ndpp-ds-status {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    ;
}

.ndpp-ds-status--active {
    background: #e6f7f4;
    color: var(--danger-btn-button, #00a898);
}

.ndpp-ds-status--inactive {
    background: #fdecec;
    color: #d25055;
}

.ndpp-ds-status--waiting {
    background: #fff4e5;
    color: #b45309;
}

.ndpp-ds-copy {
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ndpp-muted, #9aa1a9);
    cursor: pointer;
    font-size: .82rem;
    line-height: 1;
    transition: color .15s ease;
}

    .ndpp-ds-copy:hover {
        color: var(--danger-btn-button, #00a898);
    }

.ndpp-ds-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: .25rem;
}

.ndpp-ds-stat {
    flex: 1 1 130px;
    min-width: 110px;
    padding: .7rem .95rem;
    background: #f7f8fa;
    border: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 12px;
}

.ndpp-ds-stat__num {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
    line-height: 1.1;
}

.ndpp-ds-stat__label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ndpp-muted, #9aa1a9);
    margin-top: 3px;
}

[dir="rtl"] .ndpp-ds-card {
    flex-direction: row-reverse;
}

[dir="rtl"] .ndpp-ds-copy {
    margin-left: 0;
    margin-right: 8px;
}

/* ===== detail-page tabs (clean underline) ===== */
.ndpp-tabs {
    margin-top: 0;
}

    .ndpp-tabs > .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        border-bottom: 1px solid var(--ndpp-line, #e6e9ef);
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .ndpp-tabs > .nav-tabs > li {
            margin: 0;
        }

            .ndpp-tabs > .nav-tabs > li > a {
                display: block;
                padding: .7rem 1.05rem;
                font-size: .9rem;
                font-weight: 600;
                color: var(--ndpp-muted, #6b7280);
                border: 0;
                border-bottom: 2px solid transparent;
                border-radius: 0;
                background: transparent;
                cursor: pointer;
                white-space: nowrap;
                transition: color .15s ease, border-color .15s ease;
            }

                .ndpp-tabs > .nav-tabs > li > a:hover {
                    color: var(--ndpp-ink, #1f2329);
                    background: transparent;
                }

                .ndpp-tabs > .nav-tabs > li > a.active,
                .ndpp-tabs > .nav-tabs > li.active > a {
                    color: var(--danger-btn-button, #00a898);
                    border-bottom-color: var(--danger-btn-button, #00a898);
                    background: transparent;
                }

                .ndpp-tabs > .nav-tabs > li > a .ndpp-tab__count {
                    display: inline-block;
                    margin-left: 6px;
                    min-width: 18px;
                    padding: 0 5px;
                    font-size: .72rem;
                    font-weight: 700;
                    line-height: 17px;
                    text-align: center;
                    background: #eef1f5;
                    color: #6b7280;
                    border-radius: 9999px;
                }

                .ndpp-tabs > .nav-tabs > li > a.active .ndpp-tab__count {
                    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 14%, transparent);
                    color: var(--danger-btn-button, #00a898);
                }

[dir="rtl"] .ndpp-tabs > .nav-tabs > li > a .ndpp-tab__count {
    margin-left: 0;
    margin-right: 6px;
}

.ndpp-tabs > .tab-content {
    padding-top: 1.3rem;
}

.ndpp-filter__label {
    font-size: .85rem;
    display: flex;
    font-weight: 500;
    color: var(--ndpp-muted, #6b7280);
    white-space: nowrap;
    gap: 7px;
}

.ndpp-filter-clear {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 .4rem;
    border: 0;
    background: transparent;
    color: var(--b64-clear-color, #ef4444);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
}

    .ndpp-filter-clear:hover,
    .ndpp-filter-clear:focus {
        color: var(--b64-clear-color, #ef4444);
        text-decoration: underline;
        outline: none;
    }

.ndpp-dd {
    position: relative;
    display: inline-block;
}

.ndpp-dd__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.95rem;
    height: 2.25rem;
    /*  min-width: 6.5rem;*/
    padding: 0 .8rem;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    background: #fff;
    color: var(--ndpp-ink, #1f2329) !important;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ndpp-dd__toggle:hover {
        border-color: #d7dbe0;
    }

    .ndpp-dd__toggle:disabled,
    .ndpp-dd__toggle.is-disabled {
        background-color: #f4f5f7;
        color: #aab0b8 !important;
        cursor: not-allowed;
        opacity: .75;
    }

        .ndpp-dd__toggle:disabled:hover,
        .ndpp-dd__toggle.is-disabled:hover {
            border-color: #e2e5e9;
        }

    .ndpp-dd__toggle:focus,
    .ndpp-dd__toggle:focus-visible {
        outline: none !important;
    }

    .ndpp-dd__toggle[aria-expanded="true"] {
        border-color: #b9bdc4;
    }

.ndpp-dd__value {
    white-space: nowrap;
}

.ndpp-dd__caret {
    margin-left: auto;
    font-size: .68rem;
    color: #9aa0aa;
    transition: transform .15s ease;
}

.ndpp-dd__toggle[aria-expanded="true"] .ndpp-dd__caret {
    transform: rotate(180deg);
}

/* ── chips mode: real tag-input UI (multiple + tags) ── */
.ndpp-dd--chips {
    display: block;
    width: 100%;
}

    .ndpp-dd--chips .ndpp-dd__toggle {
        position: relative;
        display: flex;
        width: 100%;
        height: auto;
        min-height: 40px;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 2.2rem 6px .6rem;
        white-space: normal;
        text-align: left;
    }

    .ndpp-dd--chips .ndpp-dd__value {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
    }

    .ndpp-dd--chips .ndpp-dd__ph {
        color: #9aa1a9;
        font-weight: 400;
    }

    .ndpp-dd--chips .ndpp-dd__caret {
        position: absolute;
        right: .8rem;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }

    .ndpp-dd--chips .ndpp-dd__toggle[aria-expanded="true"] .ndpp-dd__caret {
        transform: translateY(-50%) rotate(180deg);
    }

.ndpp-dd__chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 10px 15px;
    border-radius: 8px;
    background: rgba(0, 168, 152, .12);
    color: var(--danger-btn-button, #00a898);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.45;
}

.ndpp-dd__chip-lbl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-dd__chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-style: normal;
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
    transition: opacity .12s ease, background .12s ease;
}

    .ndpp-dd__chip-x:hover {
        opacity: 1;
        background: rgba(0, 0, 0, .1);
    }

[dir="rtl"] .ndpp-dd--chips .ndpp-dd__toggle {
    padding: 6px .6rem 6px 2.2rem;
}

[dir="rtl"] .ndpp-dd--chips .ndpp-dd__caret {
    right: auto;
    left: .8rem;
}

.ndpp-filter .ndpp-dd__toggle,
.ndpp-rf__grid .ndpp-dd__toggle,
.ndpp-faq-search .ndpp-dd__toggle {
    padding-right: 1.9rem;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .65rem center;
}

    .ndpp-filter .ndpp-dd__toggle[aria-expanded="true"],
    .ndpp-rf__grid .ndpp-dd__toggle[aria-expanded="true"],
    .ndpp-faq-search .ndpp-dd__toggle[aria-expanded="true"] {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
    }

    .ndpp-filter .ndpp-dd__caret,
    .ndpp-rf__grid .ndpp-dd__toggle .ndpp-dd__caret,
    .ndpp-faq-search .ndpp-dd__toggle .ndpp-dd__caret {
        display: none;
    }

[dir="rtl"] .ndpp-filter .ndpp-dd__toggle,
[dir="rtl"] .ndpp-rf__grid .ndpp-dd__toggle,
[dir="rtl"] .ndpp-faq-search .ndpp-dd__toggle {
    padding-right: .8rem;
    padding-left: 1.9rem;
    background-position: left .65rem center;
}

.ndpp-dd__menu {
    margin-top: .4rem;
    padding: .9rem;
    min-width: 20rem;
    max-width: min(30rem, calc(100vw - 24px));
    border: 1px solid var(--ndpp-line, #edeff2);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20, 23, 28, .12);
}

.ndpp-dd__menu--scroll {
    max-height: 18rem;
    overflow-y: auto;
}

.ndpp-dd__search {
    position: relative;
    margin-bottom: 10px;
}

.ndpp-dd__search-icon {
    position: absolute;
    top: 50%;
    left: .65rem;
    transform: translateY(-50%);
    font-size: .8rem;
    color: #adb3bd;
    pointer-events: none;
}

[dir="rtl"] .ndpp-dd__search-icon {
    left: auto;
    right: .65rem;
}

.ndpp-dd__search-input {
    box-sizing: border-box;
    width: 100%;
    height: 2.1rem;
    padding: .35rem .6rem .35rem 1.9rem;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    font-size: .85rem;
    color: var(--ndpp-ink, #1f2329);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

[dir="rtl"] .ndpp-dd__search-input {
    padding: .35rem 1.9rem .35rem .6rem;
}

.ndpp-dd__search-input:focus {
    border-color: var(--ndpp-accent, #D25055);
}

.ndpp-dd__hint {
    padding: .5rem .6rem;
    font-size: .82rem;
    color: var(--ndpp-muted, #6b7280);
    text-align: center;
}

.ndpp-dd__count,
.ndpp-dd__selname {
    font-weight: 600;
}

.ndpp-dd__seltext {
    margin-left: .3rem;
}

.ndpp-dd__group {
    display: grid;
    gap: 3px;
    margin-top: .35rem;
    padding: .6rem;
    border: 1px solid var(--ndpp-line, #edeff2);
    border-radius: 10px;
}

.ndpp-dd__group--scroll {
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d6dae0 transparent;
}

    .ndpp-dd__group--scroll::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .ndpp-dd__group--scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .ndpp-dd__group--scroll::-webkit-scrollbar-thumb {
        background: #d6dae0;
        border-radius: 6px;
    }

        .ndpp-dd__group--scroll::-webkit-scrollbar-thumb:hover {
            background: #aeb4bd;
        }

.ndpp-dd__item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-size: .88rem;
    color: var(--ndpp-ink, #1f2329) !important;
    white-space: nowrap;
    cursor: pointer;
}

    .ndpp-dd__item:hover,
    .ndpp-dd__item:focus {
        background: #f5f6f8;
        color: var(--ndpp-ink, #1f2329) !important;
        text-decoration: none;
    }

.ndpp-dd__check {
    flex: 0 0 auto;
    position: relative;
    width: 1.15rem;
    height: 1.15rem;
    border: 1.5px solid #cfd4da;
    border-radius: 5px;
    transition: background-color .12s ease, border-color .12s ease;
}

.ndpp-dd__item.is-selected .ndpp-dd__check {
    background: var(--ndpp-accent);
    border-color: var(--ndpp-accent);
}

    .ndpp-dd__item.is-selected .ndpp-dd__check::after {
        content: "";
        position: absolute;
        left: .36rem;
        top: .15rem;
        width: .26rem;
        height: .55rem;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

.ndpp-dd__text {
    font-weight: 500;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ndpp-dd__item.is-selected .ndpp-dd__text {
    font-weight: 600;
}

[dir="rtl"] .ndpp-dd__caret {
    margin-left: 0;
    margin-right: auto;
}

.ndpp-dd__tick {
    flex: 0 0 auto;
    display: none;
    color: var(--ndpp-accent);
    font-size: .8rem;
}

.ndpp-dd--form {
    display: block;
}

    .ndpp-dd--form .ndpp-dd__toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: .5rem;
        height: auto;
        padding: 14px 18px;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.4;
        background-color: #fff;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 18px center;
    }

        .ndpp-dd--form .ndpp-dd__toggle:focus,
        .ndpp-dd--form .ndpp-dd__toggle:focus-visible,
        .ndpp-dd--form.show .ndpp-dd__toggle,
        .ndpp-dd--form .ndpp-dd__toggle[aria-expanded="true"] {
            border-color: #b9bdc4;
            box-shadow: none;
        }

/* ใน modal: select2-custom (form) ไม่ต้องสูงเท่า form ปกติ — กระชับลง
       (specificity .modal ... = 0,3,0 ชนะ .ndpp-dd--form .ndpp-dd__toggle = 0,2,0 เฉพาะใน modal) */
.modal .ndpp-dd--form .ndpp-dd__toggle {
    padding: 8px 14px;
    background-position: right 14px center;
}

/* modal ที่ redesign (.ndpp-wmodal): ให้ dropdown สูงเท่า .ndpp-input (ไม่ใช้เวอร์ชันกระชับของ modal ทั่วไป)
       — .modal.ndpp-wmodal ... (0,4,0) ชนะ .modal ... (0,3,0); ครอบทุกหน้า redesign (OU, Entity, ฯลฯ) */
.modal.ndpp-wmodal .ndpp-dd--form .ndpp-dd__toggle {
    padding: 14px 18px;
    line-height: 1.4;
    background-position: right 18px center;
}

.ndpp-dd--form .ndpp-dd__toggle:disabled,
.ndpp-dd--form .ndpp-dd__toggle.is-disabled {
    background-color: #f9fafb;
    border-color: #edf0f3 !important;
    color: #aab0b8 !important;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

.has-error .ndpp-dd--form .ndpp-dd__toggle {
    border-color: #e2e5e9;
}

.ndpp-dd--form .ndpp-dd__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-weight: 400;
    color: #9aa1a9;
}


.ndpp-dd--form .ndpp-dd__selname {
    color: var(--ndpp-ink, #1f2329);
    font-weight: 500;
}

.ndpp-dd--form .ndpp-dd__caret {
    display: none;
}

.ndpp-dd--form.show .ndpp-dd__toggle,
.ndpp-dd--form .ndpp-dd__toggle[aria-expanded="true"] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
}


.ndpp-dd__menu--form {
    width: 100%;
    min-width: 100%;
    margin-top: .25rem;
    padding: 13px;
    z-index: 20000;
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* #4078: เมนูเปิดขึ้นด้านบน (portal/form) — ช่อง Search อยู่ล่างติดปุ่ม รายการอยู่ด้านบน
   ตำแหน่งยึด bottom (nsdx-directives.js select2Custom _place) ค้นหาแล้วเมนูหดจากด้านบน */
.ndpp-dd__menu--up.show {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 0;
}

.ndpp-dd__menu--up .ndpp-dd__search {
    margin-top: 10px;
    margin-bottom: 0;
}

.ndpp-dd__menu--up .ndpp-dd__add {
    padding-top: 0;
    padding-bottom: 14px;
}

.ndpp-dd__menu--form .ndpp-dd__check {
    display: none;
}

.ndpp-dd__menu--form .ndpp-dd__group,
.ndpp-dd__menu--form .ndpp-dd__group--scroll {
    overflow-x: hidden;
}

.ndpp-dd__menu--form .ndpp-dd__item {
    justify-content: space-between;
    white-space: normal;
}

    .ndpp-dd__menu--form .ndpp-dd__item .ndpp-dd__text {
        white-space: normal;
        word-break: break-word;
        min-width: 0;
        font-family: 'Noto Sans Thai';
    }

    .ndpp-dd__menu--form .ndpp-dd__item.is-selected {
        background: color-mix(in srgb, var(--ndpp-accent) 8%, #fff);
        font-weight: 600;
        color: #000 !important;
    }

        .ndpp-dd__menu--form .ndpp-dd__item.is-selected .ndpp-dd__tick {
            display: inline-block;
        }

[dir="rtl"] .ndpp-dd--form .ndpp-dd__toggle {
    padding: .5rem .75rem .5rem 2rem;
    background-position: left .65rem center;
}

.ndpp-input {
    display: block;
    width: 100%;
    padding: 14px 19px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ndpp-ink, #1f2329);
    background-color: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ndpp-input::-webkit-input-placeholder {
        color: #9aa1a9;
        opacity: 1;
    }

    .ndpp-input::-moz-placeholder {
        color: #9aa1a9;
        opacity: 1;
    }

    .ndpp-input:-ms-input-placeholder {
        color: #9aa1a9;
        opacity: 1;
    }

    .ndpp-input::placeholder {
        color: #9aa1a9;
        opacity: 1;
    }

    .ndpp-input:focus,
    .ndpp-input:focus-visible {
        border-color: #b9bdc4;
        box-shadow: none;
        outline: none;
    }

    .ndpp-input:disabled,
    .ndpp-input.is-disabled {
        background-color: #f9fafb;
        border-color: #edf0f3;
        color: #000;
        cursor: not-allowed;
    }

/* ช่องวันที่ — ใส่โดย directive date-picker / nsdx-date-picker เอง ไม่ต้องประกาศใน view */
/* ขนาดเท่า .ndpp-input ทุกอย่าง ต่างแค่เว้นที่ท้ายช่องให้ไอคอนปฏิทิน */
/* specificity ระดับ input.x เพื่อชนะ height/padding ของ .form-control.input-sm ที่ยังติดมากับ markup เดิม */
input.ndpp-datefield {
    display: block;
    width: 100%;
    height: auto;
    padding: 14px 19px;
    padding-inline-end: 42px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ndpp-ink, #1f2329);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    background-size: 15px 15px;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .15s ease;
}

    input.ndpp-datefield::placeholder {
        color: #9aa1a9;
        opacity: 1;
    }

    input.ndpp-datefield:focus,
    input.ndpp-datefield:focus-visible,
    input.ndpp-datefield:hover {
        border-color: #b9bdc4;
        box-shadow: none;
        outline: none;
    }

    input.ndpp-datefield:disabled,
    input.ndpp-datefield[disabled] {
        background-color: #f9fafb;
        border-color: #edf0f3;
        cursor: not-allowed;
    }

/* กล่อง input-group เดิมของ date-time-picker: ซ่อนปุ่มไอคอนต่อท้าย ให้ไอคอนมาจากตัวช่องเอง */
/* :not(:last-child) เพื่อชนะ .input-group > .form-control:not(:last-child) ของ bootstrap ที่ตัดมุมขวาทิ้ง */
.ndpp-datefield-group {
    display: block;
    width: 100%;
}

    .ndpp-datefield-group > .input-group-append,
    .ndpp-datefield-group > .input-group-prepend {
        display: none;
    }

    .ndpp-datefield-group > input.ndpp-datefield,
    .ndpp-datefield-group > input.ndpp-datefield:not(:last-child),
    .ndpp-datefield-group > input.ndpp-datefield:not(:first-child) {
        width: 100%;
        border-radius: 9px;
    }

/* ช่องที่มีเวลาด้วย ใช้ไอคอนนาฬิกาแทนปฏิทิน ให้อ่านออกตั้งแต่ยังไม่กด */
input.ndpp-datefield--time {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

textarea.ndpp-input {
    min-height: 5rem;
    resize: vertical;
}

.input-group.ndpp-ig {
    display: flex;
    align-items: stretch;
    width: 100%;
}

    .input-group.ndpp-ig .form-control {
        flex: 1 1 auto;
        height: auto;
        padding: 14px 19px;
        font-size: 13px;
        line-height: 1.4;
        color: var(--ndpp-ink, #1f2329);
        background-color: #f9fafb;
        border: 1px solid #e2e5e9;
        border-right: 0;
        border-radius: 9px 0 0 9px;
        box-shadow: none;
    }

    .input-group.ndpp-ig .input-group-addon {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        height: auto;
        min-width: 48px;
        padding: 0 14px;
        line-height: 1.4;
        color: var(--ndpp-muted, #6b7280);
        background: #f4f6f8;
        border: 1px solid #e2e5e9;
        border-left: 0;
        border-radius: 0 9px 9px 0;
        cursor: pointer;
        transition: color .15s ease, background .15s ease;
    }

        .input-group.ndpp-ig .input-group-addon:hover {
            color: #fff;
            background: var(--danger-btn-button);
            border-color: var(--danger-btn-button);
        }

.has-error .ndpp-input {
    border-color: #e2e5e9;
}

    .has-error .ndpp-input:focus,
    .has-error .ndpp-input:focus-visible {
        border-color: #b9bdc4;
    }

.ndpp-fsec {
    margin-bottom: 0.35rem;
    padding: 4px 22px;
}

    .ndpp-fsec:last-child {
        margin-bottom: 0;
    }

.ndpp-fsec__head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .95rem;
    padding-bottom: 15px;
    border-bottom: 1px solid #eceef1;
}

.ndpp-fsec__num {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger-btn-button) !important;
    font-size: 0;
    line-height: 0;
    color: transparent;
    overflow: hidden;
}

.ndpp-fsec__title {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ndpp-muted, #8a919c);
}

.ndpp-fsec__divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: .15rem 0 1.05rem;
    padding-top: 1rem;
    border-top: 1px solid #eceef1;
}

.ndpp-fsec__divider-title {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ndpp-muted, #8a919c);
}

    .ndpp-fsec__divider-title::before {
        content: "";
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--danger-btn-button) !important;
    }

.ndpp-fsec__divider .ndpp-check {
    margin: 0;
    font-weight: 500;
    font-size: .85rem;
}

.ndpp-fsec__head .ndpp-check.ndpp-fsec__headcheck {
    margin-left: auto;
    font-weight: 500;
    font-size: .85rem;
    text-transform: none;
    letter-spacing: normal;
}

.ndpp-subpanel {
    margin: 1.15rem 0 .35rem;
    padding: 1.15rem 1.2rem .3rem;
    background: linear-gradient(180deg, #fbfcfd 0%, #f5f7fa 100%);
    border: 1px solid #e7ecf2;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(16,24,40,.03);
}

.ndpp-subpanel__head {
    margin-bottom: 1.05rem;
    padding-bottom: 12px;
    border-bottom-color: #e4e9ef;
}

.ndpp-fsec__var {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--danger-btn-button);
    cursor: pointer;
}

    .ndpp-fsec__var:hover {
        text-decoration: underline;
    }

    .ndpp-fsec__var:focus,
    .ndpp-fsec__var:focus-visible,
    .ndpp-fsec__var:active {
        outline: none;
        box-shadow: none;
    }

[dir="rtl"] .ndpp-fsec__var {
    margin-left: 0;
    margin-right: auto;
}

.ndpp-varbox {
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    scrollbar-width: thin;
    scrollbar-color: #cdd2da transparent;
}

    .ndpp-varbox::-webkit-scrollbar {
        width: 10px;
    }

    .ndpp-varbox::-webkit-scrollbar-track {
        background: transparent;
    }

    .ndpp-varbox::-webkit-scrollbar-thumb {
        background: #d5d9df;
        border-radius: 999px;
        border: 3px solid #fff;
        background-clip: padding-box;
    }

        .ndpp-varbox::-webkit-scrollbar-thumb:hover {
            background: #b4bbc4;
            background-clip: padding-box;
        }

.ndpp-varbox__title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ndpp-ink, #3a3f47);
}

    .ndpp-varbox__title::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--danger-btn-button);
        flex-shrink: 0;
    }

.ndpp-varbox__table {
    width: 100%;
    font-size: .82rem;
    padding: 4px 14px 10px;
}

    .ndpp-varbox__table td {
        padding: 6px 8px;
        border-bottom: 1px solid #f1f3f5;
        color: var(--ndpp-ink, #1f2329);
    }

    .ndpp-varbox__table thead td {
        font-weight: 600;
        color: var(--ndpp-muted, #6b7280);
    }

.ndpp-varname {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    background: #f4f6f8;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    font-size: .8rem;
    color: var(--ndpp-ink, #1f2329);
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

    .ndpp-varname:hover {
        background: #fff;
        border-color: var(--danger-btn-button);
        color: var(--danger-btn-button);
    }

    .ndpp-varname:active {
        transform: scale(.96);
    }

    .ndpp-varname:focus,
    .ndpp-varname:focus-visible {
        outline: none;
        box-shadow: none;
    }

.ndpp-varbox__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
    border-bottom: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 10px 10px 0 0;
}

.ndpp-varbox__hint {
    font-size: .72rem;
    color: var(--ndpp-muted, #9aa1a9);
    margin-left: auto;
}

/* ปุ่ม copy ตัวแปร */
.ndpp-varbox__copycell {
    width: 84px;
    text-align: center;
    white-space: nowrap;
}

.ndpp-varcopy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 7px;
    background: #fff;
    color: var(--ndpp-muted, #6b7280);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
}

    .ndpp-varcopy-btn > .ndpp-ico {
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
    }

    .ndpp-varcopy-btn:hover {
        color: #fff;
        background: var(--danger-btn-button);
        border-color: var(--danger-btn-button);
        transform: translateY(-1px);
    }

    .ndpp-varcopy-btn:active {
        transform: scale(.92);
    }

    .ndpp-varcopy-btn:focus,
    .ndpp-varcopy-btn:focus-visible,
    .ndpp-varcopy-btn:active {
        outline: none;
        box-shadow: none;
    }

.ndpp-editgrid {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.ndpp-editgrid__main {
    flex: 1 1 auto;
    min-width: 0;
}

    .ndpp-editgrid__main > .ndpp-formcard + .ndpp-formcard {
        margin-top: 1rem;
    }

.ndpp-editgrid__aside {
    width: 300px;
    flex-shrink: 0;
}

.ndpp-editgrid__sticky {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.ndpp-actionpanel {
    background: #fff;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ndpp-actionpanel__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ndpp-actionpanel .ndpp-dash-dirty {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    white-space: normal;
    text-align: left;
    line-height: 1.4;
    border-radius: 10px;
}

    .ndpp-actionpanel .ndpp-dash-dirty > .fa {
        margin-top: 3px;
    }

.ndpp-actionpanel__save {
    width: 100%;
    padding: 13px 12px;
    border: 0;
    border-radius: 10px;
    background-color: var(--danger-btn-button);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transition: filter .15s, box-shadow .2s, transform .08s;
}

    .ndpp-actionpanel__save:hover:not(:disabled) {
        filter: brightness(.94);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    }

    .ndpp-actionpanel__save:active:not(:disabled) {
        transform: translateY(1px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    }

    .ndpp-actionpanel__save:disabled {
        background: #e6e9ef;
        color: #98a2b3;
        box-shadow: none;
        cursor: not-allowed;
    }

.ndpp-actionpanel__btn {
    width: 100%;
    padding: 10px 12px;
    background: #f8fafa;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 8px;
    color: #4a5466;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    outline: none;
    transition: background .15s, border-color .15s, color .15s;
}

    .ndpp-actionpanel__btn:hover:not(:disabled) {
        background: #fff;
        border-color: #b9bdc4;
    }

    /* กดไม่ได้ (เช่น Preview ก่อนเลือก Activity/กรอกไม่ครบ) — dashed + เทา + not-allowed ให้เห็นชัดว่ายังกดไม่ได้ */
    .ndpp-actionpanel__btn:disabled {
        background: #eceff3;
        color: #aab2bd;
        border: 1px dashed #c3cad4;
        cursor: not-allowed;
        opacity: .9;
    }

        .ndpp-actionpanel__btn:disabled i {
            color: #aab2bd;
        }

    .ndpp-actionpanel__btn i {
        font-size: 12px;
    }

/* กันขอบดำ (focus outline/ring) ตอนกดปุ่มใน panel */
.ndpp-actionpanel__save:focus,
.ndpp-actionpanel__save:focus-visible {
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.ndpp-actionpanel__btn:focus,
.ndpp-actionpanel__btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.ndpp-actionpanel__hint {
    color: var(--ndpp-muted, #8a919c);
    font-size: .8rem;
    line-height: 1.4;
    text-align: center;
}

.ndpp-metacard {
    background: #fff;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    padding: 16px 16px 14px;
}

.ndpp-metacard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.ndpp-metacard__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2a37);
    letter-spacing: -.01em;
}

.ndpp-metacard__badge {
    display: inline-block;
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

    .ndpp-metacard__badge.is-new {
        background: #f3f4f6;
        color: #6b7280;
    }

    .ndpp-metacard__badge.is-version {
        background: #effaf9;
        color: #08b3ad;
    }

.ndpp-metacard__list {
    margin: 0;
}

.ndpp-metacard__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 12.5px;
}

.ndpp-metacard__label {
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

.ndpp-metacard__value {
    color: var(--ndpp-ink, #1f2a37);
    font-weight: 500;
    margin: 0;
    text-align: right;
    word-break: break-word;
    max-width: 60%;
}

body:has(.ndpp-editgrid) .wrapper,
body:has(.ndpp-editgrid) .box,
body:has(.ndpp-editgrid) .box-body {
    overflow: visible;
}

@media (max-width: 1024px) {
    .ndpp-editgrid {
        flex-direction: column;
    }

    .ndpp-editgrid__aside {
        width: 100%;
    }

    .ndpp-editgrid__sticky {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.ndpp-formcard {
    background: #fff;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

    .ndpp-formcard .ndpp-datatable {
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }

        .ndpp-formcard .ndpp-datatable th {
            white-space: nowrap;
        }

.ndpp-req-star {
    margin-left: 4px;
    color: #ff0000;
    font-weight: 700;
}

.ndpp-emptyrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 22px 12px;
    color: var(--ndpp-muted, #9aa1a9);
    font-size: .85rem;
}

    .ndpp-emptyrow > .fa {
        font-size: 1.1rem;
        opacity: .7;
    }

.ndpp-upload {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px dashed #d5d9df;
    border-radius: 10px;
    padding: 10px 14px;
    background: #fafbfc;
}

    .ndpp-upload label.ndpp-upload__pick {
        margin: 0;
        cursor: pointer;
        flex: 0 0 auto;
        font-weight: 500;
    }

    .ndpp-upload .ndpp-upload__pick input[type="file"] {
        display: none;
    }

.ndpp-upload__row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ndpp-upload__ico {
    color: #98a1ad;
}

.ndpp-upload__file {
    min-width: 0;
    max-width: 340px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.ndpp-upload__file--link {
    color: #2563eb;
    cursor: pointer;
    text-decoration: none;
}

    a.ndpp-upload__file--link:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }

.ndpp-upload__x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid #e2e5e9;
    border-radius: 7px;
    background: #fff;
    color: #98a1ad;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

    .ndpp-upload__x:hover {
        color: #d9534f;
        border-color: #f0c4c6;
        background: #fff6f6;
    }

.ndpp-upload__err {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    color: #d9534f;
}

.ndpp-upload__note {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    color: var(--ndpp-muted, #8b93a1);
}

#nsdx-admin-measurement-add-modal .ndpp-datatable th {
    white-space: nowrap;
}

#nsdx-admin-measurement-add-modal .ndpp-datatable td:nth-child(1),
#nsdx-admin-measurement-add-modal .ndpp-datatable td:nth-child(5),
#nsdx-admin-measurement-add-modal .ndpp-datatable td:nth-child(6),
#nsdx-admin-measurement-add-modal .ndpp-datatable td:nth-child(7) {
    white-space: nowrap;
}

.ndpp-formcard + .ndpp-formcard {
    margin-top: 1rem;
}

.ndpp-formcard .ndpp-fsec {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

    .ndpp-formcard .ndpp-fsec + .ndpp-fsec {
        margin-top: 1.5rem;
    }

.ndpp-formcard .control-label {
    display: inline-block;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ndpp-ink, #1f2329);
    margin-bottom: 9px;
}

.ndpp-formcard .form-group {
    margin-bottom: 1.25rem;
}

.ndpp-formcard .ndpp-fsec:last-child .row > [class^="col-"]:last-child .form-group,
.ndpp-formcard .ndpp-fsec:last-child > .row > [class^="col-"]:last-child .form-group {
    margin-bottom: 0;
}

.ndpp-formcard .ndpp-fsec__head {
    margin-bottom: 1.15rem;
}

.ndpp-form-actions {
    margin-top: 16px;
    padding: 16px 0 0;
    border-top: 1px solid var(--ndpp-line, #e2e5e9);
}

.ndpp-stickybar {
    position: sticky;
    bottom: 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 1rem;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
    box-shadow: 0 8px 28px -12px rgba(0, 0, 0, .35);
}

.ndpp-tpldetail-hitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid var(--ndpp-line, #e2e5e9);
}

    .ndpp-tpldetail-hitem:first-child {
        border-top: 0;
    }

.ndpp-tpldetail-hrev {
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-tpldetail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    text-align: center;
    color: var(--ndpp-muted, #9aa1a9);
}

    .ndpp-tpldetail-empty i {
        font-size: 26px;
        opacity: .6;
    }

.ndpp-ico {
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: none;
    background-color: currentColor;
    vertical-align: middle;
    -webkit-mask: var(--ndpp-ico) center / contain no-repeat;
    mask: var(--ndpp-ico) center / contain no-repeat;
}

.ndpp-ico--plus {
    --ndpp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='m467 211h-166v-166c0-24.853-20.147-45-45-45s-45 20.147-45 45v166h-166c-24.853 0-45 20.147-45 45s20.147 45 45 45h166v166c0 24.853 20.147 45 45 45s45-20.147 45-45v-166h166c24.853 0 45-20.147 45-45s-20.147-45-45-45z'/%3E%3C/svg%3E");
}


.ndpp-wizard-nav {
    position: sticky;
    bottom: 12px;
    z-index: 6;
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 20px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e8eaed);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(31, 35, 41, .06);
}

.ndpp-wizard-nav__next {
    margin-left: auto; /* ดัน Next ชิดขวาเสมอ (แม้ Back ซ่อน) */
}

/* ปุ่มใช้ .ndpp-dash-btn (มาตรฐาน redesign) — ขยายให้รองรับ label 2 บรรทัด (caption + ชื่อหน้า) */
.ndpp-wizard-nav .ndpp-dash-btn {
    height: auto;
    min-height: 2.6rem;
    padding: .4rem 1.05rem;
    gap: 10px;
}

.ndpp-wizard-nav__lbl {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.ndpp-wizard-nav__lbl--right {
    text-align: right;
}

.ndpp-wizard-nav__lbl small {
    font-size: .68rem;
    font-weight: 400;
    opacity: .7;
}

.ndpp-wizard-nav__lbl b {
    font-size: .9rem;
    font-weight: 600;
}

.ndpp-dd__add {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 7px 0px 5px;
    color: var(--danger-btn-button);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
}

    .ndpp-dd__add:hover,
    .ndpp-dd__add:focus {
        color: var(--danger-btn-button);
        text-decoration: none;
    }

    .ndpp-dd__add > .ndpp-ico {
        flex: none;
        font-size: .78rem;
        transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
    }

    .ndpp-dd__add:hover > .ndpp-ico {
        transform: rotate(90deg);
    }

.control-label.ndpp-lbl-add {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-group.has-error .control-label.ndpp-lbl-add:after {
    order: 0;
    margin-left: 0;
}

.ndpp-add-btn {
    flex: none;
    order: 1;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid var(--danger-btn-button);
    border-radius: 6px;
    color: var(--danger-btn-button);
    line-height: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}

    .ndpp-add-btn > .ndpp-ico {
        font-size: .62rem; /* sizes the icon (1em) */
        transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
    }

    .ndpp-add-btn:hover {
        background: var(--danger-btn-button);
        border-color: var(--danger-btn-button);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(var(--danger-btn-button-rgb), .28);
    }

        .ndpp-add-btn:hover > .ndpp-ico {
            transform: rotate(90deg);
        }

    .ndpp-add-btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .2);
    }

    .ndpp-add-btn:active {
        transform: scale(.9);
        box-shadow: none;
    }

.ndpp-add-ico {
    flex: none;
    order: 1;
    display: inline-flex;
    margin-inline: auto 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--danger-btn-button);
    line-height: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

    /*.ndpp-add-ico > .ndpp-ico {*/
    /* base .ndpp-ico = 9px เล็กจนมองยาก — ปุ่มข้าง label ขยายเป็น 13px ให้เห็นชัด */
    /*width: 13px;
        height: 13px;
        font-size: .9rem;
        transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
    }*/

    .ndpp-add-ico:hover > .ndpp-ico {
        transform: rotate(90deg);
    }

    .ndpp-add-ico:focus {
        outline: none;
    }

.bc-field__label.ndpp-lbl-add {
    position: relative;
    display: block;
    padding-right: 1.75rem;
}

[dir="rtl"] .bc-field__label.ndpp-lbl-add {
    padding-right: 0;
    padding-left: 1.75rem;
}

.cbd-domain {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cbd-domain__key {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ndpp-muted, #6b7280);
}

.cbd-domain__value {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger-btn-button) 8%, #fff);
    color: var(--danger-btn-button);
    font-weight: 600;
    font-size: .9rem;
    word-break: break-all;
}

.cbd-domain__empty {
    color: #9aa1a9;
    font-size: .85rem;
}

.cbd-domain__loading {
    color: #aaa;
}

.cbd-domain__select {
    min-width: 220px;
}

.cbd-subtoggle {
    margin-bottom: 4px;
}

.cbd-hint {
    margin: 0 0 12px 30px;
    font-size: .78rem;
    color: var(--ndpp-muted, #9aa1a9);
}

[dir="rtl"] .cbd-hint {
    margin-left: 0;
    margin-right: 30px;
}

/* เงื่อนไขปุ่ม Discovery ใต้ปุ่ม — โหมดสแกน (cookiediscovery_self_scan) + กติกา 24 ชม. */
.cbd-discovery-rule {
    max-width: 820px;
    margin: 12px auto 0;
    padding: 10px 14px;
    border-radius: 9px;
    background: #f8f9fb;
    font-size: .78rem;
    color: var(--ndpp-muted, #8a929c);
}

    .cbd-discovery-rule strong {
        color: var(--ndpp-ink, #1f2329);
        font-weight: 600;
    }

    .cbd-discovery-rule ul {
        margin: 4px 0 0;
        padding-inline-start: 18px;
    }

    .cbd-discovery-rule .is-missing {
        color: #d64545;
    }

/* ระยะห่างใช้ gap ไม่ใช้ช่องว่างใน HTML — netka-trans ตัด text node ระหว่าง element ทิ้ง */
.cbd-discovery-rule__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    color: var(--ndpp-ink, #1f2329);
}

    .cbd-discovery-rule__line + .cbd-discovery-rule__line {
        margin-top: 6px;
    }

.cbd-discovery-rule__hint {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding-inline-start: 8px;
    border-inline-start: 1px solid var(--ndpp-line, #e2e5e9);
    color: var(--ndpp-muted, #8a929c);
}

.cbd-sep::before {
    content: "·";
    margin-inline-end: 6px;
    color: var(--ndpp-muted, #8a929c);
}

.cbd-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
}

.cbd-pill--ok { background: #e7f6ef; color: #1f9d6b; }
.cbd-pill--wait { background: #fff4e0; color: #b7791f; }
.cbd-pill--bad { background: #fdecec; color: #d64545; }
.cbd-pill--none { background: #eef0f3; color: #6b7280; }

.cbd-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px dashed var(--ndpp-line, #e2e5e9);
    border-radius: 9px;
    background: #fafbfc;
}

.cbd-sub__input {
    width: 150px;
    height: 34px;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 8px;
    padding: 0 10px;
    font-size: .85rem;
    outline: none;
}

    .cbd-sub__input:focus {
        border-color: var(--danger-btn-button);
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb, 230, 57, 95), .12);
    }

.cbd-sub__dot {
    font-weight: 700;
    font-size: 16px;
    color: var(--ndpp-muted, #6b7280);
}

.cbd-sub__base {
    font-weight: 600;
    color: var(--ndpp-ink, #2b2f3a);
    word-break: break-all;
}

.cbd-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--danger-btn-button) 18%, #fff);
    background: color-mix(in srgb, var(--danger-btn-button) 6%, #fff);
    font-size: .82rem;
    color: var(--ndpp-muted, #6b7280);
}

    .cbd-preview i {
        color: var(--danger-btn-button);
    }

    .cbd-preview strong {
        color: var(--danger-btn-button);
        font-size: .92rem;
        word-break: break-all;
    }

.ndpp-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    padding: 18px 18px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--ndpp-line);
}

.ndpp-notice__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1.15rem;
    color: var(--danger-btn-button);
    background: color-mix(in srgb, var(--danger-btn-button) 12%, #fff);
}

.ndpp-notice__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ndpp-notice__title {
    margin: 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ndpp-ink, #2b2f38);
}

.ndpp-notice__desc {
    margin: 2px 0 0;
    font-size: .82rem;
    color: var(--ndpp-muted, #6b7280);
}

.ndpp-notice__cta {
    flex: 0 0 auto;
    white-space: nowrap;
}

[dir="rtl"] .ndpp-notice__cta .fa {
    margin-right: 0;
    margin-left: .25rem;
}

.ndpp-domain-modal .modal-dialog {
    max-width: 440px;
}

.ndpp-domain-modal .modal-content {
    position: relative;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px -18px rgba(20, 24, 33, .35);
}

.ndpp-domain-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ndpp-muted, #9aa1a9);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

    .ndpp-domain-modal__close:hover {
        background: color-mix(in srgb, var(--ndpp-ink, #2b2f38) 6%, #fff);
        color: var(--ndpp-ink, #4b5563);
    }

.ndpp-domain-modal .modal-body {
    padding: 34px 32px 22px;
    text-align: center;
}

.ndpp-domain-modal__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 20px;
    font-size: 1.7rem;
    color: var(--danger-btn-button);
    background: linear-gradient(145deg, color-mix(in srgb, var(--danger-btn-button) 16%, #fff) 0%, color-mix(in srgb, var(--danger-btn-button) 7%, #fff) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-btn-button) 18%, transparent);
}

.ndpp-domain-modal__title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ndpp-ink, #2b2f38);
}

.ndpp-domain-modal__desc {
    margin: 0 auto 20px;
    max-width: 340px;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--ndpp-muted, #6b7280);
}

.ndpp-domain-modal__field {
    text-align: left;
    margin-bottom: 0;
}

    .ndpp-domain-modal__field .ndpp-input {
        width: 100%;
    }

    .ndpp-domain-modal__field.has-error .ndpp-input {
        border-color: #f43f5e;
    }

.ndpp-domain-modal__examples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 15px 0px 0px 8px;
}

.ndpp-domain-modal__eg {
    font-size: .76rem;
    color: var(--ndpp-muted, #9aa1a9);
}

.ndpp-domain-modal__chip {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--danger-btn-button) 22%, #fff);
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger-btn-button) 7%, #fff);
    color: var(--danger-btn-button);
    font-size: .74rem;
    font-family: inherit;
    line-height: 1.3;
    white-space: nowrap;
}

.ndpp-domain-modal .header2025-home-footer {
    border-top: 0;
    padding: 14px 32px 26px;
}

[dir="rtl"] .ndpp-domain-modal__close {
    right: auto;
    left: 16px;
}

.ndpp-filter__select {
    box-sizing: border-box;
    height: 2.25rem;
    min-width: 8.5rem;
    max-width: 16rem;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    padding: .4rem 1.9rem .4rem .7rem;
    margin: 0;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--ndpp-ink, #1f2329);
    background-color: #fff;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: .7rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ndpp-filter__select:hover {
        border-color: #d7dbe0;
    }

    .ndpp-filter__select:focus {
        border-color: var(--ndpp-accent, #D25055);
        box-shadow: 0 0 0 3px rgba(120, 120, 120, .12);
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .12);
    }

.ndpp-filter__input {
    box-sizing: border-box;
    height: 2.25rem;
    width: 12rem;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    padding: .4rem .7rem .4rem 2rem;
    font-size: .85rem;
    color: var(--ndpp-ink, #1f2329);
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236b7280%27 stroke-width=%272.5%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%277%27/%3E%3Cpath d=%27M20 20l-3.5-3.5%27/%3E%3C/svg%3E") no-repeat left .7rem center;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ndpp-filter__input:hover { border-color: #d7dbe0; }

.ndpp-filter__input:focus {
    border-color: var(--ndpp-accent, #D25055);
    box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .12);
}

.ndpp-wal-ip {
    padding: 2px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    font-size: .8rem;
}

.page-toolbar {
    padding: 1.6rem;
}

.page-toolbar__head {
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ndpp-line, #edeff2);
}

    .page-toolbar__head:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .page-toolbar__head .header-text-group {
        min-width: 0;
    }

    .page-toolbar__head > .header-text-group,
    .page-toolbar__head > .page-toolbar__title {
        flex: 1 1 320px;
    }

    .page-toolbar__title > .header-text-group {
        flex: 1 1 auto;
    }

    .page-toolbar__title {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .page-toolbar__ico {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 56px;
        height: 56px;
        margin: -4px 0;
        color: var(--danger-btn-button, #00a898);
        pointer-events: none;
    }

        .page-toolbar__ico::before {
            content: "";
            position: absolute;
            inset: 0;
            background-color: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 -1.6;0 0' dur='5s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3Ccircle cx='49' cy='9' r='2.2' fill='%2300a898' fill-opacity='0.32'%3E%3Canimate attributeName='fill-opacity' values='0.32;.06;0.32' dur='3.2s' begin='0s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='42' cy='3.5' r='1' fill='%2300a898' fill-opacity='0.35'%3E%3Canimate attributeName='fill-opacity' values='0.35;.06;0.35' dur='3.2s' begin='1.6s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='54' cy='28' r='0.9' fill='%2300a898' fill-opacity='0.3'%3E%3Canimate attributeName='fill-opacity' values='0.3;.06;0.3' dur='3.2s' begin='2s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='50' cy='45' r='3.6' fill='none' stroke='%2300a898' stroke-opacity='0.24' stroke-width='1'%3E%3Canimate attributeName='r' values='3.6;4.7;3.6' dur='4s' begin='1.5s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3Canimate attributeName='stroke-opacity' values='0.24;.08;0.24' dur='4s' begin='1.5s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 1.6;0 0' dur='5s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3Ccircle cx='6' cy='41' r='1.6' fill='%2300a898' fill-opacity='0.3'%3E%3Canimate attributeName='fill-opacity' values='0.3;.06;0.3' dur='3.2s' begin='0.8s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='3' cy='26' r='1' fill='%2300a898' fill-opacity='0.3'%3E%3Canimate attributeName='fill-opacity' values='0.3;.06;0.3' dur='3.2s' begin='2.4s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='27' cy='53' r='1.1' fill='%2300a898' fill-opacity='0.3'%3E%3Canimate attributeName='fill-opacity' values='0.3;.06;0.3' dur='3.2s' begin='1.2s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='8' cy='11' r='3' fill='none' stroke='%2300a898' stroke-opacity='0.28' stroke-width='1'%3E%3Canimate attributeName='r' values='3;3.9;3' dur='4s' begin='0s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3Canimate attributeName='stroke-opacity' values='0.28;.08;0.28' dur='4s' begin='0s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
                    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 -1.6;0 0' dur='5s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3Ccircle cx='49' cy='9' r='2.2' fill='%2300a898' fill-opacity='0.32'%3E%3Canimate attributeName='fill-opacity' values='0.32;.06;0.32' dur='3.2s' begin='0s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='42' cy='3.5' r='1' fill='%2300a898' fill-opacity='0.35'%3E%3Canimate attributeName='fill-opacity' values='0.35;.06;0.35' dur='3.2s' begin='1.6s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='54' cy='28' r='0.9' fill='%2300a898' fill-opacity='0.3'%3E%3Canimate attributeName='fill-opacity' values='0.3;.06;0.3' dur='3.2s' begin='2s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='50' cy='45' r='3.6' fill='none' stroke='%2300a898' stroke-opacity='0.24' stroke-width='1'%3E%3Canimate attributeName='r' values='3.6;4.7;3.6' dur='4s' begin='1.5s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3Canimate attributeName='stroke-opacity' values='0.24;.08;0.24' dur='4s' begin='1.5s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 1.6;0 0' dur='5s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3Ccircle cx='6' cy='41' r='1.6' fill='%2300a898' fill-opacity='0.3'%3E%3Canimate attributeName='fill-opacity' values='0.3;.06;0.3' dur='3.2s' begin='0.8s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='3' cy='26' r='1' fill='%2300a898' fill-opacity='0.3'%3E%3Canimate attributeName='fill-opacity' values='0.3;.06;0.3' dur='3.2s' begin='2.4s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='27' cy='53' r='1.1' fill='%2300a898' fill-opacity='0.3'%3E%3Canimate attributeName='fill-opacity' values='0.3;.06;0.3' dur='3.2s' begin='1.2s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3Ccircle cx='8' cy='11' r='3' fill='none' stroke='%2300a898' stroke-opacity='0.28' stroke-width='1'%3E%3Canimate attributeName='r' values='3;3.9;3' dur='4s' begin='0s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3Canimate attributeName='stroke-opacity' values='0.28;.08;0.28' dur='4s' begin='0s' repeatCount='indefinite' calcMode='spline' keySplines='.4 0 .6 1;.4 0 .6 1'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
        }

        .page-toolbar__ico > .ndpp-ico {
            position: relative;
            width: 22px;
            height: 22px;
        }

    @media (prefers-reduced-motion: reduce) {
        .page-toolbar__ico::before {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cg%3E%3Ccircle cx='49' cy='9' r='2.2' fill='%2300a898' fill-opacity='0.32'%3E%3C/circle%3E%3Ccircle cx='42' cy='3.5' r='1' fill='%2300a898' fill-opacity='0.35'%3E%3C/circle%3E%3Ccircle cx='54' cy='28' r='0.9' fill='%2300a898' fill-opacity='0.3'%3E%3C/circle%3E%3Ccircle cx='50' cy='45' r='3.6' fill='none' stroke='%2300a898' stroke-opacity='0.24' stroke-width='1'%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle cx='6' cy='41' r='1.6' fill='%2300a898' fill-opacity='0.3'%3E%3C/circle%3E%3Ccircle cx='3' cy='26' r='1' fill='%2300a898' fill-opacity='0.3'%3E%3C/circle%3E%3Ccircle cx='27' cy='53' r='1.1' fill='%2300a898' fill-opacity='0.3'%3E%3C/circle%3E%3Ccircle cx='8' cy='11' r='3' fill='none' stroke='%2300a898' stroke-opacity='0.28' stroke-width='1'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cg%3E%3Ccircle cx='49' cy='9' r='2.2' fill='%2300a898' fill-opacity='0.32'%3E%3C/circle%3E%3Ccircle cx='42' cy='3.5' r='1' fill='%2300a898' fill-opacity='0.35'%3E%3C/circle%3E%3Ccircle cx='54' cy='28' r='0.9' fill='%2300a898' fill-opacity='0.3'%3E%3C/circle%3E%3Ccircle cx='50' cy='45' r='3.6' fill='none' stroke='%2300a898' stroke-opacity='0.24' stroke-width='1'%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle cx='6' cy='41' r='1.6' fill='%2300a898' fill-opacity='0.3'%3E%3C/circle%3E%3Ccircle cx='3' cy='26' r='1' fill='%2300a898' fill-opacity='0.3'%3E%3C/circle%3E%3Ccircle cx='27' cy='53' r='1.1' fill='%2300a898' fill-opacity='0.3'%3E%3C/circle%3E%3Ccircle cx='8' cy='11' r='3' fill='none' stroke='%2300a898' stroke-opacity='0.28' stroke-width='1'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
        }
    }

        .page-toolbar__head .header-text-group small {
            display: block;
            margin-top: 3px;
            font-size: 12px;
            line-height: 1.6;
            overflow: hidden;
            /*  white-space: nowrap;
            text-overflow: ellipsis;*/
        }

.ndpp-page-desc {
    color: #545454 !important;
}

.ndpp-page-desc--wrap {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 900px;
    line-height: 1.45;
}

.ndpp-new-badge {
    border: 1px solid var(--danger-btn-button);
    display: inline-block;
    margin-right: 8px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--danger-btn-button);
    background: #ffffff;
    border-radius: 999px;
    vertical-align: middle;
    animation: ndpp-new-badge-blink 1.4s ease-in-out infinite;
}

[dir="rtl"] .ndpp-new-badge {
    margin-right: 0;
    margin-left: 8px;
}

@keyframes ndpp-new-badge-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

#modal-cookie-preview .header2025-home-titlewrap {
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 12px;
    flex: 1 1 auto;
    width: 100%;
}

#modal-cookie-preview .modal-title {
    margin: 0 !important;
    order: 0;
}

#modal-cookie-preview .ndpp-preview-langtabs {
    margin: 0 !important;
    order: 1;
}

.ndpp-preview-langtabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background: #eef0f3;
}

.ndpp-preview-langtab {
    border: 0;
    background: transparent;
    padding: 4px 12px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ndpp-muted, #6b7280);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

    .ndpp-preview-langtab.is-active {
        background: #fff;
        color: var(--danger-btn-button);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    }

    .ndpp-preview-langtab:focus,
    .ndpp-preview-langtab:focus-visible {
        outline: none;
        box-shadow: none;
    }


.ndpp-font-noto,
.ndpp-font-noto :not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class^="mdi"]):not([class*=" mdi"]):not([class^="ti-"]):not([class*=" ti-"]):not([class^="note-icon"]):not([class*=" note-icon"]):not([class*="material-icons"]) {
    font-family: 'Noto Sans Thai', sans-serif !important;
}

.page-toolbar__head .page-toolbar-actions {
    flex: 0 0 auto;
}

.page-toolbar .page-toolbar__row {
    row-gap: .85rem;
}

.ndpp-skeleton {
    width: 100%;
    pointer-events: none;
    user-select: none;
}

.ndpp-sk {
    display: block;
    height: 14px;
    border-radius: 7px;
    background-color: #e7ebf1;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 72%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 150% 0;
    animation: ndpp-sk-shimmer 1.8s cubic-bezier(.4, 0, .2, 1) infinite, ndpp-sk-in .55s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: 0s, var(--d, 0s);
    will-change: background-position, opacity, transform;
}

@keyframes ndpp-sk-shimmer {
    0% {
        background-position: 150% 0;
    }

    100% {
        background-position: -50% 0;
    }
}

@keyframes ndpp-sk-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ndpp-sk-cth { display: flex; gap: 24px; align-items: flex-start; }
.ndpp-sk-cth__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.ndpp-sk-cth__rail { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.ndpp-sk-cth__card { background: #fff; border: 1px solid #e6e9ef; border-radius: 12px; padding: 1.25rem 1.5rem; animation: ndpp-sk-in .55s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0s); }
.ndpp-sk-cth__card--rail { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ndpp-sk-cth__ch { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; margin-bottom: 16px; border-bottom: 1px solid #eceef1; }
.ndpp-sk-cth__colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ndpp-sk-cth__color { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e6e9ef; border-radius: 12px; animation: ndpp-sk-in .55s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0s); }
.ndpp-sk-cth__swatch { flex: none; width: 40px; height: 40px; border-radius: 11px; }
.ndpp-sk-cth__cbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ndpp-sk-cth__assets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ndpp-sk-cth__asset { display: flex; flex-direction: column; gap: 10px; min-width: 0; animation: ndpp-sk-in .55s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0s); }
.ndpp-sk-cth__frame { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
.ndpp-sk-cth__pv { border: 1px solid #e6e9ef; border-radius: 12px; overflow: hidden; background: #f7f8fa; animation: ndpp-sk-in .55s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0s); }
.ndpp-sk-cth__pvhead { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 10px; background: #fff; border-bottom: 1px solid #eef0f3; }
.ndpp-sk-cth__pvmain { display: flex; height: 150px; }
.ndpp-sk-cth__pvside { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 46px; padding-top: 10px; background: #fff; border-inline-end: 1px solid #eef0f3; }
.ndpp-sk-cth__pvnav { display: block; width: 22px; height: 22px; border-radius: 7px; }
.ndpp-sk-cth__pvbody { flex: 1 1 auto; padding: 12px; }
.ndpp-sk-cth__pvcard { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.ndpp-sk-cth__pvbtns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.ndpp-sk-cth__btnrow { display: flex; gap: 8px; }
@media (max-width: 991.98px) { .ndpp-sk-cth__rail { display: none; } }
@media (max-width: 767.98px) { .ndpp-sk-cth__assets { grid-template-columns: 1fr; } }

.ndpp-sk-pagehead,
.ndpp-sk-kpi-card,
.ndpp-sk-widget,
.ndpp-sk-card,
.ndpp-sk-list-item,
.ndpp-sk-tr,
.ndpp-sk-barrow {
    animation: ndpp-sk-in .55s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: var(--d, 0s);
}

.ndpp-sk--text {
    height: 12px;
}

.ndpp-sk--title {
    height: 20px;
    width: 40%;
    max-width: 260px;
}

.ndpp-sk--num {
    height: 24px;
    width: 64px;
}

.ndpp-sk--label {
    height: 12px;
    width: 130px;
}

.ndpp-sk--field {
    height: 38px;
}

.ndpp-sk--btn {
    height: 34px;
    width: 96px;
    flex: 0 0 auto;
}

.ndpp-sk--avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ndpp-sk--filter {
    height: 34px;
    width: 180px;
    flex: 0 0 auto;
}

.ndpp-sk--dot {
    height: 26px;
    width: 26px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ndpp-sk-wiz {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.ndpp-sk-wiz__rail {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 16px 14px;
    animation: ndpp-sk-in .55s cubic-bezier(.22, .61, .36, 1) both;
}

.ndpp-sk-wiz__prog {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}

.ndpp-sk-wiz__step {
    display: flex;
    align-items: center;
    gap: 10px;
    animation: ndpp-sk-in .55s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: var(--d, 0s);
}

    .ndpp-sk-wiz__step .ndpp-sk--text {
        flex: 1 1 auto;
    }

.ndpp-sk-wiz__panel {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 62vh;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: ndpp-sk-in .55s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: .05s;
}

.ndpp-sk-wiz__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.ndpp-sk-wiz__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f0f2f5;
}

@media (max-width: 991px) {
    .ndpp-sk-wiz__rail {
        display: none;
    }
}

.ndpp-sk-toolbar {
    padding: 16px 20px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
    animation: ndpp-sk-in .55s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: var(--d, 0s);
}

    .ndpp-sk-toolbar .ndpp-sk-pagehead {
        margin-bottom: 14px;
    }

.ndpp-sk-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ndpp-sk--w40 {
    width: 40%;
}

.ndpp-sk--w60 {
    width: 60%;
}

.ndpp-sk--w70 {
    width: 70%;
}

.ndpp-skeleton > .ndpp-sk {
    margin-bottom: 12px;
}

    .ndpp-skeleton > .ndpp-sk:last-child {
        margin-bottom: 0;
    }

.ndpp-sk-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.ndpp-sk-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.ndpp-sk-kpi-card {
    flex: 1 1 160px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e9ecf3;
    border-radius: 8px;
    background: #fff;
}

.ndpp-sk-kpi-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ndpp-sk-table {
    border: 1px solid #e9ecf3;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.ndpp-sk-tr {
    display: flex;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f3f7;
}

    .ndpp-sk-tr:last-child {
        border-bottom: 0;
    }

.ndpp-sk-tr--head {
    background: #f8fafc;
}

.ndpp-sk-td {
    flex: 1 1 0;
}

.ndpp-sk-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.ndpp-sk-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e9ecf3;
    border-radius: 8px;
    background: #fff;
}

.ndpp-sk-list {
    border: 1px solid #e9ecf3;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.ndpp-sk-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f3f7;
}

    .ndpp-sk-list-item:last-child {
        border-bottom: 0;
    }

.ndpp-sk-list-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Form */
.ndpp-sk-form-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

    .ndpp-sk-form-row:last-child {
        margin-bottom: 0;
    }

.ndpp-sk-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.ndpp-sk-widget {
    flex: 1 1 320px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid #e9ecf3;
    border-radius: 8px;
    background: #fff;
}

/* การ์ดกว้าง (masonry) — กินพื้นที่ ~2 เท่า */
.ndpp-sk-widget--wide {
    flex: 2 1 520px;
}

.ndpp-sk-widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.ndpp-sk--dots {
    height: 16px;
    width: 24px;
    flex: 0 0 auto;
}

.ndpp-sk-chart {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    padding-top: 8px;
}

.ndpp-sk-barrow {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ndpp-sk--barlabel {
    flex: 0 0 90px;
    height: 10px;
}

.ndpp-sk-bartrack {
    flex: 1 1 auto;
}

.ndpp-sk-chart .ndpp-sk-bar {
    height: 12px;
    border-radius: 6px;
}

.ndpp-sk-chart--v {
    flex-direction: row;
    align-items: flex-end;
    justify-content: stretch;
    gap: 10px;
}

    .ndpp-sk-chart--v .ndpp-sk-vbar {
        flex: 1 1 0;
        border-radius: 6px 6px 0 0;
    }

/* skeleton: donut chart (ring) + legend */
.ndpp-sk-donutwrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 180px;
}

.ndpp-sk-donut {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle, transparent 40%, #000 42%);
    mask: radial-gradient(circle, transparent 40%, #000 42%);
}

.ndpp-sk-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 38%;
    max-width: 150px;
}

    .ndpp-sk-donut-legend .ndpp-sk {
        height: 11px;
    }

.ndpp-sk-stat {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 180px;
}

.ndpp-sk-stat__num {
    height: 46px;
    width: 56%;
    max-width: 160px;
    border-radius: 10px;
}

.ndpp-sk-kpi-card,
.ndpp-sk-widget,
.ndpp-sk-card,
.ndpp-sk-table,
.ndpp-sk-list {
    border-color: #eef1f5;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
}

@media (prefers-reduced-motion: reduce) {
    .ndpp-sk,
    .ndpp-sk-pagehead,
    .ndpp-sk-kpi-card,
    .ndpp-sk-widget,
    .ndpp-sk-card,
    .ndpp-sk-list-item,
    .ndpp-sk-tr,
    .ndpp-sk-barrow {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .ndpp-sk {
        background-position: -50% 0;
    }
}

.ndpp-skeleton.ndpp-skeleton--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: #fff;
    padding: 16px;
    overflow: hidden;
}

body:has(.ndpp-dash-panel) .ndpp-skeleton.ndpp-skeleton--overlay {
    z-index: 50;
}

/* overlay ที่วางในการ์ดหัวหน้า/ตาราง ต้องมนเท่าการ์ด ไม่งั้นมุมเหลี่ยมทับขอบมน */
.page-toolbar > .ndpp-skeleton.ndpp-skeleton--overlay {
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

/* ยกช่องค้นหา/จำนวนแถวขึ้นเหนือ overlay ให้ยังใช้ได้ระหว่างโหลด — 60 เพราะ body:has(.ndpp-dash-panel) ดัน overlay ไป 50 */
.nk-inbox-tablewrap > .ndpp-skeleton.ndpp-skeleton--overlay {
    padding: 54px 0 0;
}

.nk-inbox-tablewrap .dataTables_filter,
.nk-inbox-tablewrap .dataTables_length {
    position: relative;
    z-index: 60;
}

.ndpp-dash-toolbar > .ndpp-skeleton.ndpp-skeleton--overlay {
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #eef0f3;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
}

.cer-bulkbar {
    gap: 12px;
    margin: 4px 0 10px;
    padding: 8px 14px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-left: 3px solid var(--ndpp-accent, var(--danger-btn-button, #D25055));
    border-radius: 8px;
    background: #fbf3f3;
}

.cer-bulkbar__count {
    font-size: .9rem;
    color: var(--ndpp-ink, #1f2937);
}

    .cer-bulkbar__count i {
        margin-right: 4px;
        color: var(--ndpp-accent, var(--danger-btn-button, #D25055));
    }

.cer-bulkbar__actions {
    gap: 10px;
}

.cer-bulkbar__clear {
    border: 0;
    background: none;
    padding: 0;
    font-size: .85rem;
    color: var(--b64-clear-color, #ef4444);
    cursor: pointer;
}

    .cer-bulkbar__clear:hover {
        text-decoration: underline;
    }

[dir="rtl"] .cer-bulkbar {
    border-left: 1px solid var(--ndpp-line, #e6e9ef);
    border-right: 3px solid var(--ndpp-accent, var(--danger-btn-button, #D25055));
}

[dir="rtl"] .cer-bulkbar__count i {
    margin-right: 0;
    margin-left: 4px;
}

.dpia-tmpl-card {
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 8px;
    padding: 26px 16px;
    text-align: center;
    cursor: pointer;
    height: 100%;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .dpia-tmpl-card:hover {
        border-color: var(--ndpp-accent, var(--danger-btn-button, #D25055));
        box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
        transform: translateY(-2px);
    }

.dpia-tmpl-card__icon {
    display: block;
    font-size: 34px;
    margin-bottom: 10px;
    color: var(--ndpp-accent, var(--danger-btn-button, #D25055));
}

.dpia-tmpl-card__title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 6px;
    color: var(--ndpp-ink, #333);
}

.dpia-tmpl-card__desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--ndpp-muted, #777);
}

.swal-overlay {
    background-color: rgba(15, 23, 42, .5);
    -webkit-backdrop-filter: blur(5px) saturate(1.05);
    backdrop-filter: blur(5px) saturate(1.05);
}

.swal-modal {
    border-radius: 22px !important;
    box-shadow: 0 32px 70px -18px rgba(16, 24, 40, .45), 0 0 0 1px rgba(16, 24, 40, .04) !important;
    padding: 2.25rem 2.5rem 2rem !important;
    font-family: inherit;
}

.swal-overlay--show-modal .swal-modal {
    animation: ndppSwalPop .4s cubic-bezier(.34, 1.56, .64, 1) both !important;
}

@keyframes ndppSwalPop {
    0% {
        transform: scale(.8) translateY(12px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.swal-title {
    color: var(--ndpp-ink, #1f2329) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    padding: 1.35rem 1rem 1.35rem !important;
    margin: 0 !important;
}

.swal-text {
    color: var(--ndpp-muted, #5a616b) !important;
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
    max-width: 25rem;
    margin: 0 auto;
    padding: 0.35rem 0rem 0.35rem !important;
}

.swal-footer {
    text-align: center;
    padding: 1.75rem 1rem .25rem;
    margin-top: .5rem;
}

    .swal-footer:empty {
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

.swal-button-container {
    margin: 0 .55rem;
}

.swal-button {
    min-width: 7.5rem;
    border-radius: 10px !important;
    padding: .7rem 1.6rem !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    box-shadow: none;
    transition: background .18s ease, color .18s ease, transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease !important;
}

    .swal-button:not([disabled]):hover {
        transform: translateY(-1px);
    }

    .swal-button:active {
        transform: scale(.96);
    }

    .swal-button:focus {
        outline: none !important;
    }

.swal-button--confirm {
    background-color: var(--danger-btn-button) !important;
    color: #fff !important;
}

    .swal-button--confirm:not([disabled]):hover {
        box-shadow: 0 4px 12px rgba(var(--danger-btn-button-rgb), .35) !important;
    }

    .swal-button--confirm:focus {
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .3) !important;
    }

.swal-button--cancel {
    background-color: #f1f3f5 !important;
    color: var(--ndpp-ink, #40464e) !important;
    border: 1px solid #e2e5e9 !important;
}

    .swal-button--cancel:not([disabled]):hover {
        background-color: #e7eaee !important;
    }

    .swal-button--cancel:focus {
        box-shadow: none !important;
    }

.swal-button--danger,
.swal-footer .swal-button.btn-danger {
    background-color: #e7515a !important;
    color: #fff !important;
    border: none !important;
}

    .swal-button--danger:not([disabled]):hover,
    .swal-footer .swal-button.btn-danger:not([disabled]):hover {
        box-shadow: 0 4px 12px rgba(231, 81, 90, .35) !important;
    }

    .swal-button--danger:focus,
    .swal-button--danger:active,
    .swal-button--danger:hover:active,
    .swal-button--danger:focus-visible,
    .swal-button--confirm.swal-button--danger:focus,
    .swal-button--confirm.swal-button--danger:active,
    .swal-button--confirm.swal-button--danger:focus-visible,
    .swal-footer .swal-button.btn-danger:focus,
    .swal-footer .swal-button.btn-danger:active,
    .swal-footer .swal-button.btn-danger:hover:active,
    .swal-footer .swal-button.btn-danger:focus-visible {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

.swal-icon {
    margin: .5rem auto 1.5rem;
    position: relative;
    z-index: 0;
    animation: ndppSwalHalo 2.4s ease-out infinite;
}

.swal-icon--warning {
    --ndpp-halo: rgba(248, 187, 134, .55);
}

.swal-icon--error {
    --ndpp-halo: rgba(242, 116, 116, .5);
}

.swal-icon--success {
    --ndpp-halo: rgba(165, 220, 134, .55);
}

.swal-icon--info,
.swal-icon--custom {
    --ndpp-halo: rgba(108, 180, 238, .5);
}

@keyframes ndppSwalHalo {
    0% {
        box-shadow: 0 0 0 0 var(--ndpp-halo, rgba(0,0,0,.2));
    }

    70% {
        box-shadow: 0 0 0 20px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .swal-overlay--show-modal .swal-modal {
        animation: none !important;
    }

    .swal-icon {
        animation: none;
    }
}

.swal-content__input,
.swal-content__textarea {
    border-radius: 9px !important;
    border: 1px solid #e2e5e9 !important;
    font-size: .9rem !important;
}

    .swal-content__input:focus,
    .swal-content__textarea:focus {
        border-color: var(--danger-btn-button) !important;
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .15) !important;
    }

.swal-errbox {
    text-align: center;
}

.swal-errbox__msg {
    max-width: 24rem;
    margin: 0 auto .85rem;
    color: var(--ndpp-muted, #5a616b);
    font-size: .92rem;
    line-height: 1.6;
}

.swal-errbox__hl {
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.swal-errbox__details {
    margin-top: .5rem;
    text-align: center;
}

.swal-errbox__summary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    list-style: none;
    color: var(--danger-btn-button);
    font-size: .8rem;
    font-weight: 600;
    user-select: none;
}

    .swal-errbox__summary::-webkit-details-marker {
        display: none;
    }

    .swal-errbox__summary::before {
        content: '\25B8'; /* ▸ */
        font-size: .7rem;
        transition: transform .15s ease;
    }

.swal-errbox__details[open] .swal-errbox__summary::before {
    transform: rotate(90deg);
}

.swal-errbox__pre {
    margin: .65rem 0 0;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .78rem;
    line-height: 1.5;
    color: #5a616b;
    background: #f6f7f9;
    border: 1px solid #edf0f3;
    border-radius: 9px;
    padding: .65rem .8rem;
    max-height: 12rem;
    overflow: auto;
}

#nsdx-admin-add-modal .form-control,
#nsdx-admin-dashboard-setup-add-modal .form-control {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ndpp-ink, #1f2329);
    border: 1px solid #e2e7ee;
    border-radius: 9px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    #nsdx-admin-add-modal .form-control::-webkit-input-placeholder,
    #nsdx-admin-dashboard-setup-add-modal .form-control::-webkit-input-placeholder {
        color: #9aa1a9;
        opacity: 1;
        font-weight: 400;
    }

    #nsdx-admin-add-modal .form-control::-moz-placeholder,
    #nsdx-admin-dashboard-setup-add-modal .form-control::-moz-placeholder {
        color: #9aa1a9;
        opacity: 1;
        font-weight: 400;
    }

    #nsdx-admin-add-modal .form-control:-ms-input-placeholder,
    #nsdx-admin-dashboard-setup-add-modal .form-control:-ms-input-placeholder {
        color: #9aa1a9;
        opacity: 1;
        font-weight: 400;
    }

    #nsdx-admin-add-modal .form-control::placeholder,
    #nsdx-admin-dashboard-setup-add-modal .form-control::placeholder {
        color: #9aa1a9;
        opacity: 1;
        font-weight: 400;
    }

    #nsdx-admin-add-modal .form-control:focus,
    #nsdx-admin-dashboard-setup-add-modal .form-control:focus {
        border-color: #b9bdc4;
        box-shadow: none;
        outline: none;
    }

#nsdx-admin-add-modal .has-error .form-control,
#nsdx-admin-dashboard-setup-add-modal .has-error .form-control {
    border-color: #e2e7ee;
}

.form-icon-green {
    color: #00A898;
    margin-right: 8px;
}

.custom-form-40 .form-control {
    height: 40px !important;
    font-size: 13px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.custom-form-40 .input-group-addon {
    height: 40px !important;
    min-width: 40px !important;
    padding: 6px 12px;
    background-color: #f5f5f5;
    border: 1px solid #cccccc;
    border-radius: 4px 0 0 4px;
}

.custom-form-40 .input-group .form-control {
    border-left: none;
    border-radius: 0 4px 4px 0 !important;
}

.srrn-form-40 .form-control {
    height: 38px !important;
    line-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background-color: #fcfdfe !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.2s ease-in-out !important;
}

    .srrn-form-40 .form-control:focus,
    .srrn-form-40 textarea.form-control:focus {
        background-color: #ffffff !important;
        border-color: var(--tut-accent, #10b981) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
    }

.srrn-form-40 .select2-container--default .select2-selection--single {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background-color: #fcfdfe !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.2s ease-in-out !important;
}

.srrn-form-40 .select2-container--default.select2-container--focus .select2-selection--single,
.srrn-form-40 .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--tut-accent, #10b981) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

.srrn-form-40 .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding-left: 14px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    color: #334155 !important;
    display: block !important;
    width: 100% !important;
    font-size: 11px !important;
}

.srrn-form-40 .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    right: 8px !important;
}

.srrn-form-40 textarea.form-control {
    height: auto !important;
    min-height: 100px !important;
    font-size: 11px !important;
    padding: 10px 14px !important;
    line-height: 1.5 !important;
}

.srrn-form-40 .card {
    background: #ffffff;
    border: 1px solid #e3eaef;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    margin-bottom: 16px;
}

.srrn-form-40 .card-body {
    padding: 18px !important;
}

    .srrn-form-40 .card-title,
    .srrn-form-40 .card-body h5.card-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--tut-accent) !important;
        border-bottom: 2px solid #f1f5f9;
        padding-bottom: 8px !important;
        margin-bottom: 15px !important;
    }

.srrn-form-40 .form-group {
    margin-bottom: 12px !important;
}

    .srrn-form-40 .form-group label,
    .srrn-form-40 label.control-label {
        font-weight: 600 !important;
        color: #4a5568 !important;
        margin-bottom: 6px !important;
        font-size: 11.5px !important;
    }

.srrn-form-40 .btn-lg {
    height: 38px !important;
    padding: 0 25px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    line-height: 36px !important;
}

.srrn-step-indicator-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 650px !important;
    margin: 20px auto !important;
}

    .srrn-step-indicator-container .srrn-step-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .srrn-step-indicator-container .srrn-step-icon-wrap {
        font-size: 18px !important;
        color: #ccc !important;
        margin-bottom: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 24px !important;
    }

    .srrn-step-indicator-container .srrn-step-title {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--tut-muted, #999) !important;
        white-space: nowrap !important;
    }

    .srrn-step-indicator-container .srrn-step-item.active .srrn-step-icon-wrap,
    .srrn-step-indicator-container .srrn-step-item.completed .srrn-step-icon-wrap {
        color: var(--tut-accent) !important;
    }

    .srrn-step-indicator-container .srrn-step-item.active .srrn-step-title,
    .srrn-step-indicator-container .srrn-step-item.completed .srrn-step-title {
        color: var(--tut-accent) !important;
        font-weight: 700 !important;
    }

    .srrn-step-indicator-container .srrn-step-line {
        flex-grow: 1 !important;
        height: 2px !important;
        background-color: #e0e0e0 !important;
        margin: 0 15px !important;
        position: relative !important;
        top: -14px !important;
        z-index: 1 !important;
        transition: background-color 0.3s ease !important;
    }

        .srrn-step-indicator-container .srrn-step-line.active {
            background-color: var(--tut-accent) !important;
        }

        .srrn-step-indicator-container .srrn-step-line::after {
            display: none !important;
        }

.srrn-clean-activity-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.srrn-clean-activity-item {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #fcfdfe !important;
    / cursor: pointer !important;
    user-select: none !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

    .srrn-clean-activity-item:hover {
        background-color: #ffffff !important;
        border-color: #cbd5e1 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
    }


    .srrn-clean-activity-item.active {
        background-color: #ecfdf5 !important;
        border-color: #10b981 !important;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.06) !important;
    }


.srrn-clean-checkbox-box {
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 4px !important;
    margin-right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

    .srrn-clean-checkbox-box .fa-check {
        font-size: 9px !important;
        color: transparent !important;
        font-weight: 900 !important;
    }

.srrn-clean-activity-item.active .srrn-clean-checkbox-box {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
}

    .srrn-clean-activity-item.active .srrn-clean-checkbox-box .fa-check {
        color: #ffffff !important;
    }

.srrn-clean-activity-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 1.4 !important;
    transition: color 0.15s ease !important;
}

.srrn-clean-activity-item.active .srrn-clean-activity-label {
    color: #065f46 !important;
}


@media (max-width: 767px) {
    .srrn-clean-activity-list {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }
}

.srrn-form-40 select.form-control {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 38px !important;
}

.srrn-form-40 select.form-control, .srrn-form-40 select.w-100 {
    width: 100% !important;
    display: block !important;
}

.srrn-form-40 .select2-container, .srrn-form-40 span.select2[style*="width"], .srrn-form-40 .select2-container--default {
    width: 100% !important;
}

    .srrn-form-40 .select2-container .selection, .srrn-form-40 .select2-container--default .select2-selection--single {
        width: 100% !important;
    }

.srrn-transition-all {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.srrn-locked-section {
    opacity: 0.6;
    background-color: #f8fafc;
    pointer-events: none;
    filter: grayscale(20%);
}

.srrn-form-40 input[disabled] {
    background-color: #f1f5f9 !important;
    cursor: not-allowed;
    border-color: #e2e8f0 !important;
}

.srrn-locked-section label {
    color: #94a3b8;
}

.srrn-fa-spin {
    animation: srrn-fa-spin 2s infinite linear;
}

@keyframes srrn-fa-spin {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.srrn-clean-activity-list.has-error {
    border: 1px dashed #ef4444;
    padding: 10px;
    border-radius: 6px;
    background-color: #fef2f2;
}

.srrn-form-40 .btn i.fa:first-child {
    margin-right: 8px !important;
}

.srrn-form-40 .btn i.fa:last-child {
    margin-left: 8px !important;
}

.srrn-preview-upload-container {
    position: relative !important;
    width: 100% !important;
}

.srrn-clean-upload-trigger {
    position: relative !important;
    width: 100% !important;
    height: 42px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

    .srrn-clean-upload-trigger input[type="file"] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        cursor: pointer !important;
        z-index: 2 !important;
    }

    .srrn-clean-upload-trigger:hover {
        border-color: var(--tut-accent, #10b981) !important;
        background-color: #ffffff !important;
    }

.srrn-trigger-inner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

    .srrn-trigger-inner .srrn-upload-icon {
        font-size: 15px !important;
        color: var(--tut-accent, #10b981) !important;
    }

    .srrn-trigger-inner .srrn-upload-text {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: #475569 !important;
    }

.srrn-image-preview-wrapper {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 12px 0 !important;
}

.srrn-preview-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    max-width: 420px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.srrn-actual-preview-img {
    width: 76px !important;
    height: 52px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    order: 1 !important;
}

.srrn-preview-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin-top: 0 !important;
    padding: 0 !important;
    flex-grow: 1 !important;
    gap: 6px !important;
    order: 2 !important;
}

.srrn-file-title-text {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 220px !important;
}

.srrn-btn-remove-preview {
    background: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
    color: #ef4444 !important;
    cursor: pointer !important;
    padding: 3px 8px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

    .srrn-btn-remove-preview:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
        border-color: #ef4444 !important;
    }

.srrn-animate-fade-in {
    animation: srrnFadeIn 0.3s ease-in-out;
}

@keyframes srrnFadeIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.srrn-guide-tooltip {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .srrn-guide-tooltip .srrn-guide-icon {
        font-size: 16px;
    }

.srrn-form-40 .select2-container--default .select2-selection--multiple {
    min-height: 38px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    background-color: #fcfdfe !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.2s ease-in-out !important;
}

    .srrn-form-40 .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 4px 12px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        margin-right: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .srrn-form-40 .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        padding-left: 0 !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #334155 !important;
    }

    .srrn-form-40 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        background: transparent !important;
        border: none !important;
        color: #94a3b8 !important;
        font-size: 11px !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        order: 2 !important;
    }

        .srrn-form-40 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #ef4444 !important;
            background-color: transparent !important;
        }

.cf-card {
    --cf-brand: var(--danger-btn-button, #00a898);
    --cf-brand-rgb: var(--danger-btn-button-rgb, 0,168,152);
    --cf-brand-hover: var(--danger-btn-button-hover, #008d80);
    --cf-ink: #101828;
    --cf-text: #344054;
    --cf-muted: #667085;
    --cf-line: #eaecf0;
    --cf-border: #d0d5dd;
    --cf-panel: #f9fafb;
    --cf-canvas: #eef1f2;
    --cf-fill: #f3f6f6;
    max-width: 770px;
    width: 840px;
    margin: 50px auto;
    background: var(--cf-canvas);
    border: 1px solid var(--cf-line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 26px 60px -32px rgba(16, 24, 40, .3);
}

.cf-preview-body {
    background: #e9ebee;
    padding: 20px 18px;
}

.cf-preview-modal .modal-dialog {
    max-width: min(1440px, calc(100vw - 48px));
    width: min(1440px, calc(100vw - 48px));
}
/* two columns: explanation panel (left) + live card (right) */
.cf-preview-layout {
    display: flex;
    align-items: flex-start;
    gap: 0px;
}

.cf-preview-info {
    flex: 0 0 260px;
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 18px 16px;
    position: sticky;
    top: 0;
    margin: 10px 20px;
}

.cf-preview-info__title {
    font-size: .95rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.cf-preview-info__desc {
    font-size: .82rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 12px;
}

.cf-preview-info .cf-guide__list {
    margin: 0;
}

/* ── dedicated consent-form guidance callout (own classes; no longer reuses ndpp-callout-clean / ndpp-step-table) ── */
.cf-guide {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 20px;
}

.cf-guide__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 12px;
}

    .cf-guide__title i {
        color: #64748b;
        font-size: 1rem;
    }

.cf-guide__desc {
    font-size: .85rem;
    color: #64748b;
    line-height: 1.6;
    margin: 12px 0 0;
}
/* desc แบบกดได้ → เปิด preview (กดได้เฉพาะตอน CanPreview) */
.cf-guide__desc--action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: color .15s;
}

    .cf-guide__desc--action .cf-guide__desc-ico {
        font-size: .85rem;
    }

    .cf-guide__desc--action:hover {
        color: var(--danger-btn-button);
        text-decoration: underline;
    }

    .cf-guide__desc--action.is-disabled {
        cursor: not-allowed;
        opacity: .55;
    }

        .cf-guide__desc--action.is-disabled:hover {
            color: #64748b;
            text-decoration: none;
        }

.cf-guide__list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cf-guide__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cf-guide__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 7px;
    border-radius: 50%;
    background: #c5c4c3;
}

.cf-guide__text {
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
}

.cf-guide__item--edit .cf-guide__dot {
    background: var(--danger-btn-button);
}

.cf-guide__item--edit .cf-guide__text {
    color: #1e293b;
    font-weight: 600;
}

.cf-preview-info__tip {
    font-size: .78rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #eef1f4;
}

@media (max-width: 900px) {
    .cf-preview-layout {
        flex-direction: column;
    }

    .cf-preview-info {
        flex: 0 0 260px;
        align-self: flex-start;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 18px 18px 16px;
        position: sticky;
        top: 0;
        margin: 10px 20px;
    }
}

.cf-preview-modal .header2025-home-titlewrap {
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 12px;
    flex: 1 1 auto;
    width: 100%;
}

    .cf-preview-modal .header2025-home-titlewrap .modal-title {
        margin: 0 !important;
        order: 0;
    }

.cf-preview-modal .ndpp-preview-langtabs {
    margin: 0 !important;
    order: 1;
}

.cf-preview-stage {
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

    .cf-preview-stage .cf-card {
        margin: 8px auto;
        width: 100%;
    }

.cf-hero {
    position: relative;
    background: #fff;
    color: var(--cf-ink);
    text-align: center;
    padding: 34px 70px 30px;
}

.cf-hero__lang {
    position: absolute;
    top: 18px;
    right: 18px;
}

.cf-langselect {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    color: var(--cf-text);
    border: 1px solid var(--cf-border);
    border-radius: 999px;
    height: 38px;
    padding: 0 34px 0 34px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 38px;
    cursor: pointer;
    text-align: center;
    text-align-last: center;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: left 12px center, right 11px center;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}

    .cf-langselect:focus {
        outline: none;
    }

    .cf-langselect:focus-visible {
        box-shadow: 0 0 0 3px rgba(16,24,40,.06);
    }

    .cf-langselect option {
        color: var(--cf-ink);
        background: #fff;
        font-weight: 500;
    }

.cf-langdd {
    position: relative;
    display: inline-block;
}

.cf-langdd__toggle {
    display: block;
    width: 100%;
}

.cf-langdd.is-open .cf-langdd__toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
    border-color: #b9bdc4;
}

.cf-langdd__backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.cf-langdd__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    min-width: 100%;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--cf-border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16,24,40,.14);
    animation: cf-langdd-in .12s ease-out;
}

@keyframes cf-langdd-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cf-langdd__menu li {
    list-style: none;
}

.cf-langdd__item {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: var(--cf-ink);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
    padding: 9px 20px;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .12s, color .12s;
}

    .cf-langdd__item:hover {
        background: #f2f4f7;
    }

    .cf-langdd__item:focus, .cf-langdd__item:focus-visible {
        outline: none;
        box-shadow: none;
    }

    .cf-langdd__item.is-active {
        background: var(--danger-btn-button);
        color: #fff;
        font-weight: 600;
    }
/* ปุ่ม toggle: กันขอบดำ (focus ring) ตอนกด */
.cf-langdd__toggle:focus, .cf-langdd__toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

.cf-hero__logo {
    margin-bottom: 5px;
}

    .cf-hero__logo img {
        max-width: 258px;
        max-height: 105px;
        width: auto;
        height: auto;
        display: inline-block;
    }

.cf-hero__title {
    margin: 0 0 18px;
    letter-spacing: normal;
    color: var(--cf-ink);
}

.cf-hero__title-main {
    font-size: 1.675rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: normal;
}

.cf-hero__title-svc {
    display: inline-block;
    margin-top: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cf-brand);
    /* background: rgba(var(--cf-brand-rgb), .10); */
    /* border: 1px solid rgba(var(--cf-brand-rgb), .22); */
    border-radius: 999px;
}

.cf-hero__sub {
    font-size: .9375rem;
    line-height: 1.6;
    margin: 8px auto 0;
    max-width: 88ch;
    color: var(--cf-muted);
}

.cf-body {
    padding: 0px 30px 28px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    counter-reset: cf-step;
}

.cf-step {
    background: #fff;
    border: 1px solid var(--cf-line);
    border-radius: 18px;
    padding: 22px 24px 6px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    counter-increment: cf-step;
}

.cf-step__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin-bottom: 20px;
}

    .cf-step__head::before {
        content: counter(cf-step);
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border-radius: 10px;
        background: rgba(var(--cf-brand-rgb),.12);
        color: var(--cf-brand);
        font-weight: 700;
        font-size: .9rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.cf-step__title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    color: var(--cf-ink);
}

.cf-step--plain .cf-step__head::before {
    content: none;
}

.cf-card .step-icon {
    display: inline-flex;
    align-items: center;
    padding-left: 6px;
}

.cf-card .cf-help {
    display: block;
    width: 17px;
    height: 17px;
    color: #98a2b3;
    cursor: pointer;
    transition: color .15s;
}

.cf-card .tooltip-custom:hover .cf-help,
.cf-card .tooltip-custom:focus-within .cf-help {
    color: var(--cf-brand);
}

.cf-card .tooltip-custom {
    outline: none;
}

    .cf-card .tooltip-custom:focus-visible {
        outline: 2px solid rgba(var(--cf-brand-rgb),.5);
        outline-offset: 2px;
        border-radius: 6px;
    }

.cf-card .tooltiptext {
    width: max-content;
    max-width: 360px;
    max-height: none;
    overflow: visible;
    background: #fff;
    color: var(--cf-ink);
    text-align: left;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    padding: 14px 16px;
    border-radius: 12px;
    bottom: 165%;
    border: 1px solid var(--cf-line);
    box-shadow: 0 4px 6px -2px rgba(16, 24, 40, .08), 0 16px 34px -10px rgba(16, 24, 40, .28);
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .16s ease, transform .16s ease;
}

.cf-card .tooltip-custom:hover .tooltiptext,
.cf-card .tooltip-custom:focus-within .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cf-card .tooltiptext b,
.cf-card .tooltiptext strong {
    color: var(--cf-brand);
    font-weight: 600;
}

.cf-card .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -1px;
    border: 7px solid transparent;
    border-top-color: #fff;
    filter: drop-shadow(0 2px 1px rgba(16,24,40,.08));
}

@media (prefers-reduced-motion: reduce) {
    .cf-card .tooltiptext {
        transition: none;
        transform: translateX(-50%);
    }

    .cf-card .tooltip-custom:hover .tooltiptext,
    .cf-card .tooltip-custom:focus-within .tooltiptext {
        transform: translateX(-50%);
    }
}

.cf-fields .form-group {
    margin-bottom: 22px;
}

.cf-fields .control-label,
.cf-fields label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cf-text) !important;
    margin-bottom: 9px;
}

.cf-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cf-fields .ndpp-check {
    font-weight: 400;
    font-size: .9rem;
    margin-bottom: 0;
    color: var(--cf-ink) !important;
}

    .cf-fields .ndpp-check > input:checked + .ndpp-check__box {
        background: var(--cf-brand);
        border-color: var(--cf-brand);
    }

    .cf-fields .ndpp-check > input:focus-visible + .ndpp-check__box {
        box-shadow: 0 0 0 4px rgba(var(--cf-brand-rgb),.13);
    }

.cf-card .form-control {
    border-radius: 12px;
    border: 1.5px solid transparent;
    background: #fff;
    padding: 12px 15px;
    min-height: 48px;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--cf-ink);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    height: auto;
}

    .cf-card .form-control::placeholder {
        color: #a3abb8;
    }

    .cf-card .form-control:focus {
        background: #fff;
        border-color: var(--cf-brand);
        box-shadow: 0 0 0 4px rgba(var(--cf-brand-rgb),.13);
    }

.cf-fields .has-error .form-control {
    border-color: transparent;
}

    .cf-fields .has-error .form-control:focus {
        border-color: var(--cf-brand);
        box-shadow: 0 0 0 4px rgba(var(--cf-brand-rgb),.12);
    }

.cf-fields .help-block {
    font-size: .74rem;
    font-weight: 400;
    color: var(--cf-muted);
    margin-top: 5px;
    margin-bottom: 0;
}

.cf-onbehalf-toggle {
    padding-top: 4px;
}

.cf-note {
    font-size: .8rem;
    font-weight: 400;
    color: var(--cf-muted);
    margin-left: 10px;
}

.cf-fields .file-upload {
    margin: 0;
}

    .cf-fields .file-upload .form-group {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 9px;
    }

.cf-file__drop {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    cursor: pointer;
    background: #fff;
    border: 1.5px dashed var(--cf-border);
    border-radius: 12px;
    padding: 15px 18px;
    transition: border-color .15s, background-color .15s;
}

    .cf-file__drop:hover {
        border-color: var(--cf-brand);
    }

.cf-file__native {
    display: none;
}

.cf-file__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--cf-brand-rgb),.10);
    color: var(--cf-brand);
}

    .cf-file__icon svg {
        width: 20px;
        height: 20px;
    }

.cf-file__cta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.cf-file__btn {
    font-size: .9rem;
    font-weight: 600;
    color: var(--cf-brand);
}

.cf-file__hint {
    font-size: .8rem;
    color: var(--cf-muted);
}

.cf-file__selected {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--cf-line);
    border-radius: 12px;
    padding: 12px 14px;
}

.cf-file__doc {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--cf-line);
    color: var(--cf-brand);
}

    .cf-file__doc svg {
        width: 20px;
        height: 20px;
    }

.cf-file__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cf-file__name {
    font-size: .9rem;
    font-weight: 500;
    color: var(--cf-ink);
    word-break: break-all;
}

.cf-file__size {
    font-size: .78rem;
    color: var(--cf-muted);
}

.cf-file__remove {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--cf-muted);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

    .cf-file__remove svg {
        width: 17px;
        height: 17px;
    }

    .cf-file__remove:hover {
        background: rgba(239,83,80,.10);
        color: #ef5350;
        border-color: rgba(239,83,80,.25);
    }

.cf-file__error {
    color: #ef5350;
    font-size: .78rem;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cf-reader {
    background: #fff;
    /* border: 1px solid var(--cf-line); */
    border-radius: 14px;
    /* padding: 20px 22px; */
    margin-bottom: 18px;
    color: #000;
    font-size: .92rem;
    line-height: 1.75;
    word-break: break-word;
}

    .cf-reader img {
        max-width: 100%;
        height: auto;
    }

.cf-reader--policy {
    max-height: 400px;
    overflow-y: auto;
}

.cf-reader .purpose_checkbox {
    margin: 8px 0;
}

    .cf-reader .purpose_checkbox .purpose_item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 11px 14px;
        margin: 0 0 10px;
        background: #fff;
        border: 1px solid var(--cf-line, #eaecf0);
        border-radius: 10px;
        line-height: 1.7;
        transition: border-color .15s ease, background-color .15s ease;
    }

        .cf-reader .purpose_checkbox .purpose_item:hover {
            border-color: #c9cfd8;
        }

        .cf-reader .purpose_checkbox .purpose_item:has(input:checked) {
            border-color: rgba(var(--cf-brand-rgb, 0,168,152), .55);
            background: rgba(var(--cf-brand-rgb, 0,168,152), .05);
        }

        .cf-reader .purpose_checkbox .purpose_item label,
        .cf-reader .purpose_checkbox .purpose_item span {
            line-height: 1.7 !important;
            margin: 0;
            flex: 1 1 auto;
            min-width: 0;
            cursor: pointer;
        }

.cf-reader .cf-sen {
    border: 1px solid #f1d8d8;
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 14px 0px;
}

.cf-reader .cf-sen__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 6px;
}

.cf-reader .cf-sen__ico {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fbeeee;
    color: #b3261e;
}

    .cf-reader .cf-sen__ico svg {
        width: 16px;
        height: 16px;
    }

.cf-reader .cf-sen__title {
    font-size: .98rem;
    font-weight: 700;
    color: #9f1d17;
    line-height: 1.45;
}

.cf-reader .cf-sen__desc {
    font-size: .84rem;
    color: #8d6e6e;
    line-height: 1.65;
    margin: 0 0 14px;
}

.cf-reader .cf-sen .purpose_item input[type="checkbox"] {
    accent-color: #b3261e;
}

.cf-reader .cf-sen__ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--cf-line, #eaecf0);
    padding: 11px 14px;
    cursor: pointer;
}

    .cf-reader .cf-sen__ack input[type="checkbox"] {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 3px 0 0;
        accent-color: #b3261e;
        cursor: pointer;
    }

    .cf-reader .cf-sen__ack span {
        flex: 1 1 auto;
        min-width: 0;
        font-size: .88rem;
        font-weight: 600;
        color: #7a2018;
        line-height: 1.7;
    }

.cf-reader .cf-sen__divider {
    border: 0;
    border-top: 1px dashed #eedcdc;
    margin: 14px 0 10px;
}

.cf-reader .cf-sen__info-title {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cf-text);
    font-size: .92rem;
    margin: 0 0 6px;
}

.cf-reader .cf-sen__info {
    margin: 0;
    padding: 0 0 0 18px;
}

    .cf-reader .cf-sen__info li {
        color: var(--cf-text);
        font-size: .92rem;
        line-height: 1.7;
        margin: 0 0 4px;
    }

.cf-reader .purpose_item > tspan,
.cf-reader .cf-sen__ack > tspan {
    display: none;
}

.cf-reader .purpose_item label {
    position: static !important;
    padding-left: 0 !important;
}

    .cf-reader .purpose_item label::before,
    .cf-reader .purpose_item label::after {
        display: none !important;
        content: none !important;
    }

.cf-reader .purpose_item input[type="checkbox"],
.cf-reader .cf-sen__ack input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    pointer-events: auto !important;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 3px 0 0 !important;
    border: 1.5px solid #c6ccd4;
    border-radius: 6px;
    background: #fff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

    .cf-reader .purpose_item input[type="checkbox"]::after,
    .cf-reader .cf-sen__ack input[type="checkbox"]::after {
        content: "";
        width: 12px;
        height: 12px;
        transform: scale(0);
        transition: transform .12s ease-in-out;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5 6.4 12 13 4.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .cf-reader .purpose_item input[type="checkbox"]:checked,
    .cf-reader .cf-sen__ack input[type="checkbox"]:checked {
        background: rgb(var(--cf-brand-rgb, 0,168,152));
        border-color: rgb(var(--cf-brand-rgb, 0,168,152));
    }

        .cf-reader .purpose_item input[type="checkbox"]:checked::after,
        .cf-reader .cf-sen__ack input[type="checkbox"]:checked::after {
            transform: scale(1);
        }

    .cf-reader .purpose_item input[type="checkbox"]:focus-visible,
    .cf-reader .cf-sen__ack input[type="checkbox"]:focus-visible {
        outline: 2px solid rgba(var(--cf-brand-rgb, 0,168,152), .35);
        outline-offset: 2px;
    }

    .cf-reader .cf-sen .purpose_item input[type="checkbox"]:checked,
    .cf-reader .cf-sen__ack input[type="checkbox"]:checked {
        background: #b3261e;
        border-color: #b3261e;
    }

.cf-reader .cf-sen .purpose_item:has(input:checked) {
    border-color: #e5b6b1;
    background: #fdf5f4;
}

.cf-reader .cf-sen .purpose_item input[type="checkbox"]:focus-visible,
.cf-reader .cf-sen__ack input[type="checkbox"]:focus-visible {
    outline-color: rgba(179, 38, 30, .3);
}

.cf-reader .purpose_item--sub {
    margin-inline-start: 26px;
}

    .cf-reader .purpose_item--sub label,
    .cf-reader .purpose_item--sub span {
        font-size: .95em;
    }

.cf-reader .purpose_checkbox + br,
.cf-reader .purpose_checkbox + br + br,
.cf-reader .purpose_checkbox + br + br + br,
.cf-reader br:has(+ .purpose_checkbox),
.cf-reader br:has(+ br + .purpose_checkbox) {
    display: none;
}

.cf-reader p:empty {
    margin: 0;
}

.cf-pdf embed {
    border: 1px solid var(--cf-line);
    border-radius: 10px;
}

.cf-consent {
    background: #fff;
    border: 1px solid rgba(var(--cf-brand-rgb),.18);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 22px 0 10px;
}

    .cf-consent label {
        font-size: .9rem;
        line-height: 1.7;
        color: var(--cf-ink);
        margin: 0;
        padding-left: 36px;
    }

    .cf-consent [type=checkbox].filled-in + label:after,
    .cf-consent [type=checkbox].filled-in + label:before {
        top: 2px;
    }

.cf-footnote {
    font-size: .84rem;
    color: var(--cf-muted);
    line-height: 1.7;
    text-indent: 0em;
    margin: 6px 0 4px;
    text-align: center;
    margin-top: 17px;
}

.cf-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0;
}

.cf-btn {
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 14px 40px;
    min-width: 180px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, opacity .15s, background-color .15s;
}

    .cf-btn:focus {
        outline: none;
    }

    .cf-btn:focus-visible {
        box-shadow: 0 0 0 3px rgba(var(--cf-brand-rgb),.25);
    }

.cf-btn--agree {
    background: var(--cf-brand);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(var(--cf-brand-rgb),.55);
}

    .cf-btn--agree:hover:not(:disabled) {
        background: var(--cf-brand-hover);
        transform: translateY(-1px);
    }

.cf-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

.cf-btn--ghost {
    background: #fff;
    color: var(--cf-text);
    border: 1px solid var(--cf-border);
}

    .cf-btn--ghost:hover:not(:disabled) {
        background: var(--cf-panel);
    }

.cf-powered {
    text-align: center;
    font-size: .72rem;
    color: var(--cf-muted);
    margin: 2px 0 0;
}

[dir="rtl"] .cf-hero__lang {
    right: auto;
    left: 14px;
}

[dir="rtl"] .cf-langselect {
    padding: 8px 34px 8px 32px;
    background-position: right 12px center, left 11px center;
}

[dir="rtl"] .cf-langdd__menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .cf-actions {
    justify-content: stretch;
}

[dir="rtl"] .cf-footnote {
    text-indent: 0;
}

@media (max-width: 575.98px) {
    .cf-hero {
        padding: 28px 18px 24px;
    }

    .cf-body {
        padding: 14px;
        gap: 14px;
    }

    .cf-step {
        padding: 18px 18px 4px;
    }

    .cf-hero__title-main {
        font-size: 1.15rem;
    }

    .cf-fields .form-group {
        margin-bottom: 18px;
    }
}

.adhoc-shell {
    --ah-bg: #f7f8fb;
    --ah-card-bg: #ffffff;
    --ah-border: #e9ecf3;
    --ah-border-strong: #d9deea;
    --ah-text: #2b2f3a;
    --ah-muted: #7b8398;
    --ah-primary: var(--danger-btn-button, #e6395f);
    --ah-primary-soft: rgba(var(--danger-btn-button-rgb, 230, 57, 95), 0.08);
    --ah-radius: 12px;
    --ah-radius-sm: 8px;
    --ah-shadow: 0 1px 2px rgba(20, 24, 38, 0.04), 0 1px 4px rgba(20, 24, 38, 0.04);
    --ah-shadow-hover: 0 6px 18px rgba(20, 24, 38, 0.10);
}

    .adhoc-shell .ah-body {
        background: var(--ah-card-bg);
        border: 1px solid var(--ah-border);
        border-radius: var(--ah-radius);
        box-shadow: var(--ah-shadow);
        padding: 22px;
        margin: 6px 0 24px;
    }

    .adhoc-shell .ah-add-wrap {
        margin-left: auto;
    }

    .adhoc-shell .ah-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin: -22px -22px 22px;
        padding: 16px 22px;
        border-bottom: 1px solid var(--ah-border);
    }

    .adhoc-shell .ah-search {
        position: relative;
        flex: 1 1 240px;
        min-width: 200px;
    }

        .adhoc-shell .ah-search i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--ah-muted);
            font-size: 13px;
        }

        .adhoc-shell .ah-search input {
            width: 100%;
            height: 38px;
            border: 1px solid var(--ah-border-strong);
            border-radius: 999px;
            padding: 0 14px 0 34px;
            font-size: 13px;
            color: var(--ah-text);
            background: #fbfcfe;
            transition: border-color .15s ease, box-shadow .15s ease;
        }

            .adhoc-shell .ah-search input:focus {
                outline: none;
                border-color: var(--ah-primary);
                box-shadow: 0 0 0 3px var(--ah-primary-soft);
                background: #fff;
            }

    .adhoc-shell .ah-filter {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .adhoc-shell .ah-filter label {
            margin: 0;
            font-size: 12px;
            font-weight: 600;
            color: var(--ah-muted);
            white-space: nowrap;
        }

        .adhoc-shell .ah-filter select {
            height: 38px;
            border: 1px solid var(--ah-border-strong);
            border-radius: 999px;
            padding: 0 30px 0 14px;
            font-size: 13px;
            color: var(--ah-text);
            background: #fbfcfe;
            cursor: pointer;
            transition: border-color .15s ease, box-shadow .15s ease;
        }

            .adhoc-shell .ah-filter select:focus {
                outline: none;
                border-color: var(--ah-primary);
                box-shadow: 0 0 0 3px var(--ah-primary-soft);
                background: #fff;
            }

.ah-section {
    background: #fff;
    padding: 1.6rem;
    margin-bottom: 1.1rem;
    background: #fff;
    border: 1px solid var(--ndpp-line);
    border-radius: 12px;
}

.adhoc-shell .ah-section {
    margin-bottom: 26px;
}

    .adhoc-shell .ah-section:last-child {
        margin-bottom: 0;
    }

.adhoc-shell .ah-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

    .adhoc-shell .ah-section-head .ah-sec-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        flex: 0 0 auto;
    }

        .adhoc-shell .ah-section-head .ah-sec-icon.rpt {
            color: var(--ah-primary);
            background: #f4f4f4;
        }

    .adhoc-shell .ah-section-head h3 {
        font-size: 15px;
        font-weight: 700;
        color: var(--ah-text);
        margin: 0;
        line-height: 1.25;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.1px;
    }

.adhoc-shell .ah-count {
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 9px;
    min-width: 22px;
    text-align: center;
    line-height: 1.7;
}

    .adhoc-shell .ah-count.rpt {
        color: var(--ah-primary);
        background: var(--ah-primary-soft);
    }

.adhoc-shell .ah-section-head .ah-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--ah-border-strong), transparent);
}

.adhoc-shell .ah-search-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 22px;
}

.adhoc-shell .ah-search-input {
    box-sizing: border-box;
    height: 2.25rem;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    padding: .4rem 2.1rem .4rem 2.25rem;
    margin: 0;
    outline: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23adb3bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat .75rem center;
    background-size: 1rem 1rem;
    width: 240px;
    min-width: 150px;
    max-width: 100%;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--ndpp-ink, #2b2f3a);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .adhoc-shell .ah-search-input:focus {
        border-color: var(--danger-btn-button);
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb, 230, 57, 95), .12);
    }

    .adhoc-shell .ah-search-input[type="search"]::-webkit-search-cancel-button,
    .adhoc-shell .ah-search-input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

[dir="rtl"] .adhoc-shell .ah-search-input {
    padding: .4rem 2.25rem .4rem 2.1rem;
    background-position: right .75rem center;
}

/* ---- Show more / less ---- */
.adhoc-shell .ah-more {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

    .adhoc-shell .ah-more button {
        border: 1px solid var(--ah-border-strong);
        background: #fff;
        color: var(--ah-muted);
        font-size: 12.5px;
        font-weight: 600;
        border-radius: 999px;
        padding: 8px 22px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

        .adhoc-shell .ah-more button:hover {
            border-color: var(--ah-primary);
            color: var(--ah-primary);
            box-shadow: var(--ah-shadow-hover);
        }

        .adhoc-shell .ah-more button:focus,
        .adhoc-shell .ah-more button:active {
            outline: none;
            box-shadow: none;
        }

        .adhoc-shell .ah-more button i {
            font-size: 10px;
            margin-left: 7px;
        }

/* ---- Card grid ---- */
.adhoc-shell .ah-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.adhoc-shell .ah-card {
    position: relative;
    background: var(--ah-card-bg);
    border: 1px solid var(--ah-border);
    border-radius: var(--ah-radius);
    padding: 18px 16px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--ah-shadow);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .adhoc-shell .ah-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--ah-shadow-hover);
        border-color: var(--ah-primary);
    }

.adhoc-shell .ah-thumb {
    width: 100%;
    height: 130px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fbfcfe 0%, #f1f3f8 100%);
    border: 1px solid var(--ah-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 8px;
    overflow: hidden;
}

    .adhoc-shell .ah-thumb img {
        width: 37%;
        height: 37%;
        object-fit: contain;
        border-radius: 6px;
    }

        .adhoc-shell .ah-thumb img.ah-thumb-default {
            width: 51px;
            height: 51px;
            object-fit: contain;
            border-radius: 0;
            opacity: 0.7;
        }

.adhoc-shell .ah-card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ah-text);
    line-height: 1.35;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.adhoc-shell .ah-card-desc {
    font-size: 11.5px;
    color: var(--ah-muted);
    line-height: 1.4;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 16px;
}

.adhoc-shell .ah-card-meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.adhoc-shell .ah-chip {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

.adhoc-shell .ah-chip-module {
    color: var(--ah-primary);
    background: var(--ah-primary-soft);
}

/* ---- Empty state ---- */
.adhoc-shell .ah-empty {
    background: var(--ah-card-bg);
    border: 1px dashed var(--ah-border-strong);
    border-radius: var(--ah-radius);
    padding: 28px;
    text-align: center;
    color: var(--ah-muted);
    font-size: 13px;
}

    .adhoc-shell .ah-empty i {
        font-size: 26px;
        display: block;
        margin-bottom: 8px;
        opacity: 0.6;
    }

@media (max-width: 768px) {
    .adhoc-shell .ah-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .adhoc-shell .ah-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

.ms-setup-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 9999px;
    transition: all .15s ease;
}

    .ms-setup-badge:hover {
        border-color: #99f6e4;
    }

.ms-setup-badge__ring {
    --fill-a: var(--danger-btn-button, #00a898);
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: conic-gradient(var(--fill-a) 0%, #e5e7eb 0);
    -webkit-mask: radial-gradient(closest-side, #0000 78%, #000 79%);
    mask: radial-gradient(closest-side, #0000 78%, #000 79%);
    animation: ms-setup-ring-spin 15s ease-in-out infinite;
}

@keyframes ms-setup-ring-spin {
    0% {
        transform: rotate(0deg);
        filter: drop-shadow(0 0 0 transparent);
    }

    2% {
        filter: drop-shadow(0 0 6px var(--fill-a));
    }

    8%, 100% {
        transform: rotate(360deg);
        filter: drop-shadow(0 0 0 transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-setup-badge__ring {
        animation: none;
    }
}

.ms-setup-badge__ring.is-low {
    --fill-a: #ff635f;
}

.ms-setup-badge__ring.is-mid {
    --fill-a: #f59e0b;
}

.ms-setup-badge__ring.is-high {
    --fill-a: var(--danger-btn-button, #00a898);
}

.ms-setup-badge__count {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

[dir="rtl"] .ms-setup-badge {
    flex-direction: row-reverse;
}


.sccf-builder .fb-builder {
    display: block;
    min-height: 160px;
    border: 1px dashed #d6dae0;
    border-radius: 10px;
    padding: 8px;
    transition: border-color .15s ease, background-color .15s ease;
}

.sccf-builder.is-dragging {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

    .sccf-builder.is-dragging .fb-builder {
        border-color: var(--danger-btn-button, #00a898);
        background-color: rgba(0, 168, 152, .04);
    }

.sccf-builder .fb-form-object-editable.empty {
    position: relative;
    min-height: 42px;
    margin: 6px 0;
    border: 2px dashed var(--danger-btn-button, #00a898);
    border-radius: 8px;
    background-color: rgba(0, 168, 152, .06);
    transition: all .12s ease;
}

    .sccf-builder .fb-form-object-editable.empty::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        top: 50%;
        height: 2px;
        transform: translateY(-50%);
        background-color: var(--danger-btn-button, #00a898);
        opacity: .55;
    }

.sccf-builder .fb-form-object-editable.dragging {
    opacity: .9;
    box-shadow: 0 8px 24px rgba(31, 35, 41, .18);
    outline: 2px solid var(--danger-btn-button, #00a898);
    outline-offset: 2px;
    border-radius: 8px;
    z-index: 1080;
    cursor: grabbing;
    width: 220px !important;
}

.sccf-builder .fb-draggable.prepare-dragging {
    cursor: grabbing;
}

.sccf-builder .fb-form-object-editable:not(.empty):not(.dragging) {
    cursor: grab;
}

[dir="rtl"] .sccf-builder.is-dragging {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

body:has(.ndpp-faq) .wrapper {
    overflow: visible;
}

.ndpp-faq {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    margin-top: .5rem;
}

.ndpp-faq__side {
    flex: 0 0 400px;
    max-width: 400px;
    align-self: flex-start;
    position: sticky;
    top: 80px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    padding: 1.6rem;
}

.ndpp-faq__main {
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    padding: 1.6rem;
}

    .ndpp-faq__main > .tab-content {
        padding: 0;
    }

@media (max-width: 991.98px) {
    .ndpp-faq {
        flex-direction: column;
        gap: 1.25rem;
    }

    .ndpp-faq__side {
        flex-basis: auto;
        max-width: none;
        width: 100%;
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.ndpp-faq__mainhead {
    display: flex;
    align-items: center;
    gap: 17px;
    margin: -1.6rem -1.6rem 0.9rem;
    padding: 20px 23px;
    background: #fafbfc;
    border-bottom: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 12px 12px 0 0;
}

.ndpp-faq__mainhead-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--danger-btn-button, #08b3ad);
    font-size: 1.05rem;
}

.ndpp-faq__maintitle {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ndpp-ink, #1f2329);
    margin: 0;
}

.ndpp-faq__maincount {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--ndpp-muted, #9aa1a9);
    font-variant-numeric: tabular-nums;
}

[dir="rtl"] .ndpp-faq__maincount {
    margin-left: 0;
    margin-right: auto;
}

.ndpp-faqtabs {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: 16px !important;
}

.ndpp-faqtab {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem .65rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ndpp-ink, #1f2329) !important;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    width: 100%;
}

    .ndpp-faqtab::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 0;
        background: var(--danger-btn-button, #08b3ad);
        border-radius: 0 3px 3px 0;
        transition: height 0.35s ease;
    }

    .ndpp-faqtab:hover {
        background: #f4f6f9;
    }

    .ndpp-faqtab.active,
    .ndpp-faqtab.is-active {
        background: transparent;
        border-color: transparent;
        color: var(--danger-btn-button, #00a898);
    }

        .ndpp-faqtab.active::before,
        .ndpp-faqtab.is-active::before {
            height: 55%;
        }

.ndpp-faqtab__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f6;
    border-radius: 8px;
}

    .ndpp-faqtab__icon img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

.ndpp-faqtab__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-faqtab__count {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ndpp-muted, #9aa1a9);
    font-variant-numeric: tabular-nums;
}

.ndpp-faqtab.active .ndpp-faqtab__count,
.ndpp-faqtab.is-active .ndpp-faqtab__count {
    color: var(--danger-btn-button, #00a898);
}


.ndpp-faq-search {
    position: relative;
    max-width: 460px;
    width: 100%;
}

.ndpp-faq-search__clear {
    position: absolute;
    top: 50%;
    right: 34px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--ndpp-muted, #9aa1a9);
    cursor: pointer;
    padding: 2px 6px;
    z-index: 2;
}

    .ndpp-faq-search__clear:hover {
        color: var(--danger-btn-button, #00a898);
    }

.ndpp-faq-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.ndpp-faq-item {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 28, 38, .04);
    transition: box-shadow .2s ease;
}

    .ndpp-faq-item:hover {
        box-shadow: 0 1px 3px rgba(20, 28, 38, .05), 0 3px 8px rgba(20, 28, 38, .05);
    }

    .ndpp-faq-item:has(.ndpp-faq-q__toggle:not(.collapsed)) {
        box-shadow: 0px -2px 21px -6px rgba(20, 28, 38, .06), 0 5px 14px rgba(20, 28, 38, .06);
    }

.ndpp-faq-q {
    display: flex;
    align-items: center;
    padding: 0 .8rem 0 .95rem;
}

.ndpp-faq-q__toggle {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: .95rem .3rem .95rem 0;
    cursor: pointer;
    color: var(--ndpp-ink, #1f2329);
    font-size: .95rem;
    font-weight: 650;
}

    .ndpp-faq-q__toggle:hover, .ndpp-faq-q__toggle:not(.collapsed) {
        text-decoration: none;
        color: var(--ndpp-ink, #1f2329);
    }

.ndpp-faq-q__chip {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 168, 152, .10);
    color: var(--danger-btn-button, #00a898);
    font-size: .95rem;
}

.ndpp-faq-q__text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
}

.ndpp-faq-act,
.ndpp-faq-q__caretbtn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #a4abb4;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, color .15s ease, transform .25s ease;
}

    .ndpp-faq-act:focus, .ndpp-faq-act:focus-visible,
    .ndpp-faq-q__caretbtn:focus, .ndpp-faq-q__caretbtn:focus-visible {
        outline: none;
        box-shadow: none;
    }

.ndpp-faq-q__actions {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex: 0 0 auto;
    order: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

    .ndpp-faq-item:hover .ndpp-faq-q__actions,
    .ndpp-faq-q__actions:focus-within {
        opacity: 1;
        pointer-events: auto;
    }

.ndpp-faq-act:hover {
    background: rgba(17, 20, 24, .06);
    color: var(--danger-btn-button, #00a898);
}

.ndpp-faq-act--danger:hover {
    background: rgba(220, 53, 69, .10);
    color: #dc3545;
}

.ndpp-faq-q__caretbtn {
    order: 3;
    font-size: .95rem;
}

    .ndpp-faq-q__caretbtn:hover {
        background: rgba(17, 20, 24, .06);
        color: var(--danger-btn-button, #00a898);
        text-decoration: none;
    }

    .ndpp-faq-q__caretbtn:not(.collapsed) {
        color: var(--danger-btn-button, #00a898);
    }

        .ndpp-faq-q__caretbtn:not(.collapsed) .ndpp-faq-q__caret {
            transform: rotate(180deg);
        }

.ndpp-faq-q__caret {
    transition: transform .25s ease;
}

.ndpp-faq-a {
    margin: 0px 3rem 1rem 3rem;
    padding: 0rem 1.1rem .9rem 1.1rem;
    background: rgb(255 255 255 / 3%);
    border-radius: 10px;
    color: #3d444f;
    line-height: 1.7;
}

    .ndpp-faq-a img {
        max-width: 100%;
        height: auto;
    }

.ndpp-faq-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 2.5rem 1rem;
    color: var(--ndpp-muted, #9aa1a9);
}

    .ndpp-faq-empty > i {
        font-size: 1.8rem;
        opacity: .6;
    }

[dir="rtl"] .ndpp-faqtab {
    padding: .65rem 1rem .65rem .85rem;
}

    [dir="rtl"] .ndpp-faqtab::before {
        left: auto;
        right: 0;
    }

    [dir="rtl"] .ndpp-faqtab.active::before,
    [dir="rtl"] .ndpp-faqtab.is-active::before {
        box-shadow: -2px 0 12px rgba(8, 179, 173, 0.5);
    }

[dir="rtl"] .ndpp-faqtab__count {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .ndpp-faqtab__icon {
    margin-left: 0;
}

[dir="rtl"] .ndpp-faq-a {
    margin-left: 1rem;
    margin-right: 3.9rem;
}

body:has(.ppou-detail) {
    height: auto;
    overflow: visible;
}

    body:has(.ppou-detail) .wrapper {
        overflow: visible;
    }

html:has(.ppou-detail) {
    overflow-x: hidden;
}

.ppou-detail .ppou-detail__grid {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.ppou-detail .ppou-detail__nav {
    flex: 0 0 313px;
    align-self: flex-start;
    padding: 1.5rem;
}

.ppou-detail .ppou-detail__main {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

    .ppou-detail .ppou-detail__main > .nav-tabs-custom {
        flex: 1 1 auto;
    }

.ppou-detail .sidebar-nav {
    max-height: none;
    overflow: visible;
}

    .ppou-detail .sidebar-nav #tap-menu {
        gap: .35rem;
    }

    .ppou-detail .sidebar-nav .sidebar-nav-link {
        position: relative;
        font-size: .9rem;
        min-height: 46px;
        padding: .55rem .85rem .55rem 1rem;
        gap: .65rem;
        border: 1px solid transparent;
        border-radius: 10px !important;
        font-weight: 500;
        transition: background .2s ease, color .2s ease;
    }

    .ppou-detail .sidebar-nav .step-circle {
        width: 30px;
        min-width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 8px;
        /* background: #f1f3f6; */
        text-align: center;
        line-height: 1;
        font-size: .88rem;
        font-weight: 600;
        letter-spacing: 0.3px;
        color: #ababab;
        margin-right: 9px;
        flex-shrink: 0;
    }

    .ppou-detail .sidebar-nav .step-label {
        font-size: .88rem;
    }

.ppou-detail .ppou-progress {
    padding: 2px 2px 0;
    cursor: pointer;
}

    .ppou-detail .ppou-progress:hover .sidebar-progressbar-fill {
        filter: brightness(.9);
    }

    .ppou-detail .ppou-progress:hover .ppou-progress__title {
        color: #5b626b;
    }

.ppou-detail .ppou-progress__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 8px;
}

.ppou-detail .ppou-progress__title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ndpp-muted, #9aa1a9);
}

.ppou-detail .ppou-progress__count {
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ndpp-muted, #9aa1a9);
}

    .ppou-detail .ppou-progress__count b {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--danger-btn-button);
    }

        .ppou-detail .ppou-progress__count b.is-zero {
            color: #aeb4bd;
        }

.ppou-detail .ppou-progress__sep {
    margin: 0 3px;
}

.ppou-detail .sidebar-nav .sidebar-progressbar {
    height: 7px;
    margin-bottom: 16px;
    margin-inline: 0;
}

.ppou-detail .nav-tabs-custom {
    box-shadow: none;
    margin: 0;
    background: transparent;
    padding: 15px;
}

@media (max-width: 991px) {
    .ppou-detail .ppou-detail__grid {
        display: block;
    }

    .ppou-detail .ppou-detail__nav {
        margin-bottom: 16px;
    }
}

.ppou-detail .ppou-nav-head,
.ppou-detail .ppou-main-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 17px;
    margin: -1.5rem -1.5rem 1rem;
    padding: 18px 23px;
    background: #fafbfc;
    border-bottom: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 12px 12px 0 0;
}

.ppou-detail .ppou-main-head {
    padding-top: 14px;
    padding-bottom: 14px;
    margin-bottom: 1.5rem;
}

.ppou-detail .nav-tabs-custom > .tab-content {
    padding: 0;
    background: transparent;
}

.ppou-detail .ppou-tab-body > .row:last-child .form-group {
    margin-bottom: 0;
}

.ppou-detail .ppou-main-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 10px 16px;
    padding-right: 77px;
    background: #fafbfc;
    border-top: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 0 0 12px 12px;
    position: sticky;
    bottom: 0;
    z-index: 3;
}

    .ppou-detail .ppou-main-foot .ndpp-dash-dirty {
        margin-inline-end: auto;
    }

    .ppou-detail .ppou-main-foot .ppou-foot-lock {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-inline-end: auto;
        padding: 6px 13px;
        border-radius: 999px;
        background: #fff4e5;
        border: 1px solid #f3ddb8;
        color: #b45309;
        font-size: .8rem;
        font-weight: 600;
        line-height: 1.4;
    }

        .ppou-detail .ppou-main-foot .ppou-foot-lock > .fa {
            font-size: .75rem;
        }

    .ppou-detail .ppou-main-foot .ndpp-dash-btn,
    .ppou-detail .ppou-list-actions .ndpp-dash-btn {
        min-height: 2rem;
        height: 2rem;
        padding: 1.2rem .8rem;
        font-size: 13px;
        gap: 6px;
    }

.ppou-detail .tab-content .control-label {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
    margin-bottom: .45rem;
}

.ppou-detail .tab-content .form-group {
    margin-bottom: 1.4rem;
}

.ppou-detail .tab-content .ndpp-input {
    width: 100%;
}

.ppou-detail .ppou-tab-head {
    margin-bottom: 1.5rem;
}

.ppou-detail .ppou-tab-title {
    margin: 0 0 9px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.ppou-detail .ppou-tab-desc {
    margin: 0;
    font-size: .85rem;
    color: var(--ndpp-muted, #9aa1a9);
    font-weight: 400;
    display: flex;
    gap: 10px;
    align-items: center;
}

.ppou-detail .ppou-req {
    color: #dc3545;
    font-weight: 700;
    line-height: 1;
    margin-inline-start: 13px;
}

.ppou-src-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin: 0 0 .8rem;
    font-size: .8rem;
    color: var(--ndpp-muted, #9aa1a9);
}

.ppou-src-note__ico {
    font-size: .78rem;
    opacity: .85;
}

.ppou-src-note__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 500;
    color: var(--danger-btn-button);
    text-decoration: none;
    cursor: pointer;
}

    .ppou-src-note__link:hover,
    .ppou-src-note__link:focus {
        text-decoration: underline;
        color: var(--danger-btn-button);
    }

.ppou-detail .ppou-tab-head--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: nowrap;
}

.ppou-detail .ppou-tab-head__text {
    flex: 1 1 auto;
    min-width: 0;
}

.ppou-detail .ppou-search {
    position: relative;
    flex: 0 0 300px;
    max-width: 300px;
}

    .ppou-detail .ppou-search > .fa-search {
        position: absolute;
        inset-inline-start: 1.3rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ndpp-muted, #9aa1a9);
        font-size: .82rem;
        pointer-events: none;
    }

    .ppou-detail .ppou-search > .ndpp-input {
        padding: 0.65rem 0.95rem;
        padding-inline-start: 2.9rem;
        border-radius: 46px;
        background: #f6f7f9;
        border: 1px solid transparent;
        font-size: .85rem;
    }

        .ppou-detail .ppou-search > .ndpp-input:focus {
            background: #fff;
            border-color: #b9bdc4;
        }

.ppou-detail .ppou-list-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.ppou-detail .ppou-selcount {
    margin-inline-start: auto;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ndpp-muted, #9aa1a9);
    font-variant-numeric: tabular-nums;
}

.ppou-detail .ppou-checklist .ppou-list-toolbar {
    position: sticky;
    top: -6px;
    z-index: 2;
    background: #fff;
    margin: -.5rem -.5rem 15px;
    padding: .6rem 1.35rem .55rem;
    border-bottom: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 12px 12px 0 0;
}

.ppou-detail .ppou-checklist {
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    padding: .5rem;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #cdd4df transparent;
}

    .ppou-detail .ppou-checklist.scrollable-objective-content-25 {
        max-height: 38vh;
    }

    .ppou-detail .ppou-checklist::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .ppou-detail .ppou-checklist::-webkit-scrollbar-track {
        background: transparent;
    }

    .ppou-detail .ppou-checklist::-webkit-scrollbar-thumb {
        background: #cdd4df;
        border-radius: 999px;
        border: 3px solid transparent;
        background-clip: padding-box;
        transition: background-color .2s ease;
    }

        .ppou-detail .ppou-checklist::-webkit-scrollbar-thumb:hover {
            background: #aab3c2;
            background-clip: padding-box;
        }

.ppou-detail .ppou-chk {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 7px 7px;
    padding: .6rem .85rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}

    .ppou-detail .ppou-chk:hover {
        background: #f6f7f9;
    }

    .ppou-detail .ppou-chk:has(input:checked) {
    }

    .ppou-detail .ppou-chk > input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.ppou-detail .ppou-chk__box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border: 1.5px solid #d0d5dd;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.ppou-detail .ppou-chk:hover .ppou-chk__box {
    border-color: var(--danger-btn-button);
}

.ppou-detail .ppou-chk__box svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.ppou-detail .ppou-chk > input:checked + .ppou-chk__box {
    background: var(--danger-btn-button);
    border-color: var(--danger-btn-button);
}

.ppou-detail .ppou-chk:has(> input:disabled) {
    cursor: default;
}

    .ppou-detail .ppou-chk:has(> input:disabled):hover {
        background: transparent;
    }

        .ppou-detail .ppou-chk:has(> input:disabled):hover .ppou-chk__box {
            border-color: #d0d5dd;
        }

.ppou-detail .ppou-chk > input:disabled + .ppou-chk__box {
    opacity: .6;
}

.ppou-detail .ppou-chk > input:disabled:checked + .ppou-chk__box {
    opacity: .75;
}

.ppou-detail .ppou-chk > input:checked + .ppou-chk__box svg {
    opacity: 1;
}

.ppou-detail .ppou-chk__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .875rem;
    line-height: 2;
    color: #3a3f45;
    font-weight: 500;
}

.ppou-detail .ppou-preview-config {
    margin-bottom: .5rem;
}

    .ppou-detail .ppou-preview-config select.ndpp-input {
        height: auto;
    }

.ppou-detail .ppou-preview-stage {
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    background: #eef1f6;
    padding: 1.25rem 1.5rem;
    min-height: 62vh;
}

.ppou-detail .ppou-paper {
    background: #fff;
    max-width: 860px;
    min-height: 60vh;
    margin: 1.75rem auto;
    padding: 3rem 3.5rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 10px 28px rgba(16, 24, 40, .08);
}

@media (max-width: 767px) {
    .ppou-detail .ppou-paper {
        padding: 1.5rem 1.25rem;
        margin: 1rem auto;
    }
}

.ppou-detail .ppou-doc {
    border: 1px dashed #d5dae2;
    border-radius: 10px;
    background: #fbfcfe;
    padding: 10px 14px;
    margin-bottom: .75rem;
}

    .ppou-detail .ppou-doc.has-error {
        border-color: #e05561;
        background: #fff7f7;
    }

.ppou-detail .ppou-doc__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ppou-detail .ppou-doc__ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fdeeee;
    color: #c0392b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.ppou-detail .ppou-doc__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ppou-detail .ppou-doc__title {
    font-weight: 600;
    font-size: .85rem;
    color: var(--ndpp-ink, #1f2329);
    line-height: 1.25;
}

.ppou-detail .ppou-doc__hint {
    font-size: .72rem;
    color: var(--ndpp-muted, #8b93a1);
}

.ppou-detail label.ppou-doc__pick {
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto;
    font-weight: 500;
}

.ppou-detail .ppou-doc__pick input[type="file"] {
    display: none;
}

.ppou-detail .ppou-doc__pick.is-disabled {
    opacity: .5;
    pointer-events: none;
}

.ppou-detail .ppou-doc__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed #e3e7ee;
}

.ppou-detail .ppou-doc__file {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppou-detail a.ppou-doc__file--link {
    color: #2563eb;
    cursor: pointer;
    text-decoration: none;
}

    .ppou-detail a.ppou-doc__file--link:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }

.ppou-detail .ppou-doc__btn {
    padding: 3px 12px;
    font-size: .78rem;
    flex: 0 0 auto;
}

.ppou-detail .ppou-doc__x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid #e2e5e9;
    border-radius: 7px;
    background: #fff;
    color: #98a1ad;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

    .ppou-detail .ppou-doc__x:hover:not(:disabled) {
        color: #d9534f;
        border-color: #f0c4c6;
        background: #fff6f6;
    }

    .ppou-detail .ppou-doc__x:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

.ppou-detail .ppou-doc__err {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    color: #d9534f;
}

.ppou-detail .ppou-doc__note {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    color: var(--ndpp-muted, #8b93a1);
}

.ppou-detail fieldset.ppou-lockable {
    display: block;
    min-width: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

    .ppou-detail fieldset.ppou-lockable[disabled] {
        opacity: .55;
    }

        .ppou-detail fieldset.ppou-lockable[disabled] label, .ppou-detail fieldset.ppou-lockable[disabled] .ndpp-input, .ppou-detail fieldset.ppou-lockable[disabled] .ndpp-dd__toggle, .ppou-detail fieldset.ppou-lockable[disabled] .ndpp-dash-btn {
            cursor: not-allowed;
        }

.ppou-detail .ppou-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin: -1.25rem -1.5rem 1.25rem;
    padding: 10px 14px;
    background: #fafbfc;
    border-bottom: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 12px 12px 0 0;
}

.ppou-detail .ppou-seg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #eef1f4;
    border-radius: 10px;
}

.ppou-detail .ppou-seg__btn {
    border: 0;
    background: transparent;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    color: #5b626b;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

    .ppou-detail .ppou-seg__btn:hover {
        color: var(--ndpp-ink, #1f2329);
    }

    .ppou-detail .ppou-seg__btn:focus {
        outline: none;
        box-shadow: none;
    }

    .ppou-detail .ppou-seg__btn.is-active:focus {
        box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
    }

    .ppou-detail .ppou-seg__btn:focus-visible {
        outline: 2px solid #b9bdc4;
        outline-offset: 1px;
    }

    .ppou-detail .ppou-seg__btn.is-active {
        background: #fff;
        color: var(--danger-btn-button);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
    }

.ppou-detail .ppou-preview-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ppou-detail .ppou-preview-tools .ndpp-dash-btn {
        min-height: 2rem;
        height: 2rem;
        padding: .25rem .6rem;
        font-size: .8rem;
    }
/* PDF preview — ซ่อน toolbar ของ PDF viewer ในตัว browser ทำที่ JS ด้วย "#toolbar=0"
   (ดู withPdfViewerParams() ใน admin-privacypolicydetail-controller.js / admin-privacypolicyoudetail-controller.js)
   ถ้า Edge รุ่นที่ใช้ engine ของ Adobe ยังโชว์ toolbar อยู่ ให้เติม class is-cropped
   ที่ .ppou-preview-frame-wrap ใน PrivacyPolicyDetail.cshtml / PrivacyPolicyOuDetail.cshtml
   เพื่อครอบแถบนั้นทิ้งด้วย CSS แทน */
.ppou-detail .ppou-preview-frame-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    height: calc(100vh - 260px);
    min-height: 560px;
}

.ppou-detail .ppou-preview-frame {
    width: 100%;
    height: 100%;
    min-height: 560px;
    border: 0;
    display: block;
}

.ppou-detail .ppou-preview-frame-wrap.is-cropped .ppou-preview-frame {
    height: calc(100% + 56px);
    margin-top: -56px;
}

.ppou-detail .ppou-preview-empty {
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ndpp-muted, #9aa1a9);
    font-size: .9rem;
}

    .ppou-detail .ppou-preview-empty > .fa {
        font-size: 2.2rem;
        opacity: .45;
    }

.ppou-detail .ppou-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.25rem;
}

.ppou-detail .ppou-url-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 12px;
    background: #f2f7fc;
    border: 1px solid #dce8f4;
    border-radius: 8px;
}

    .ppou-detail .ppou-url-note > .fa {
        flex: 0 0 auto;
        margin-top: 2px;
        font-size: .85rem;
        color: #4a90c4;
    }

.ppou-detail .ppou-url-hint {
    font-size: .78rem;
    line-height: 1.55;
    color: #46647f;
}

.ppou-detail .ppou-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 16px;
    padding-inline-end: 2.4rem;
    cursor: pointer;
}

[dir="rtl"] .ppou-detail .ppou-select {
    background-position: left .9rem center;
    padding-inline-start: 2.4rem;
    padding-inline-end: .95rem;
}

.ppou-detail .ndpp-lbl-add .ndpp-add-ico + .ndpp-add-ico {
    margin-inline: 2px 0;
}

.ppou-detail .ndpp-lbl-add .ndpp-add-ico {
    margin-block: 0;
}

.ppou-detail .ppou-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ppou-detail .ppou-url-row > .ndpp-input {
        flex: 1 1 auto;
        background: #f6f7f9;
        color: #5b626b;
    }

.ppou-detail .ppou-urlbar {
    display: flex;
    align-items: stretch;
    background: #f6f8fa;
    border: 1px solid #dfe3e9;
    border-radius: 10px;
    overflow: hidden;
}

.ppou-detail .ppou-urlbar__ico {
    align-self: center;
    flex: 0 0 auto;
    margin: 0 4px 0 12px;
    font-size: 12px;
    color: #98a1ad;
}

.ppou-detail .ppou-urlbar__text {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    padding: 7px 10px 7px 6px;
    font-size: .78rem;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    color: var(--ndpp-ink, #1f2329);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    cursor: text;
    -webkit-user-select: all;
    user-select: all;
}

.ppou-detail .ppou-urlbar__act {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    border: 0;
    border-left: 1px solid #e3e7ee;
    background: transparent;
    color: #5b6472;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}

    .ppou-detail .ppou-urlbar__act:hover, .ppou-detail .ppou-urlbar__act:focus {
        background: #fff;
        color: var(--ndpp-ink, #1f2329);
        text-decoration: none;
    }

.ppou-detail .ppou-urlbar.is-disabled {
    pointer-events: none;
    opacity: .55;
}

[dir="rtl"] .ppou-detail .ppou-urlbar__ico {
    margin: 0 12px 0 4px;
}

[dir="rtl"] .ppou-detail .ppou-urlbar__act {
    border-left: 0;
    border-right: 1px solid #e3e7ee;
}

.ppou-detail .ppou-url-row > .ndpp-dash-btn {
    flex: 0 0 auto;
    min-height: 2rem;
    height: 2rem;
    padding: .25rem .8rem;
    font-size: .8rem;
    gap: 6px;
}

.ppou-detail .ppou-url-row > a.ndpp-dash-btn {
    color: #5b626b;
    text-decoration: none;
}

    .ppou-detail .ppou-url-row > a.ndpp-dash-btn:hover {
        color: var(--ndpp-ink, #1f2329);
        text-decoration: none;
    }

.ppou-detail a.ndpp-dash-btn--primary, .ppou-detail a.ndpp-dash-btn--primary:hover {
    color: #fff;
    text-decoration: none;
}

.ppou-detail a.ndpp-dash-btn, .ppou-detail a.ndpp-dash-btn:hover {
    text-decoration: none;
}

.ppou-detail .ppou-url-row > .ndpp-dash-btn.is-disabled {
    pointer-events: none;
    opacity: .55;
}

.ppou-detail .ppou-group-title {
    margin: 0.9rem 0 .9rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.ppou-detail .ppou-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

    .ppou-detail .ppou-sec-head .ppou-group-title {
        margin: 0;
    }

.ppou-detail .ppou-history {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.ppou-detail .ppou-rev-card {
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 12px 18px;
}

    .ppou-detail .ppou-rev-card + .ppou-rev-card {
        border-top: 1px solid var(--ndpp-line, #eef0f3);
    }

.ppou-detail .ppou-history .ppou-rev-empty {
    border: 0;
}

.ppou-detail .ppou-rev-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    cursor: pointer;
}

    .ppou-detail .ppou-rev-card__head:hover .ppou-rev-card__chev {
        color: var(--ndpp-ink, #1f2329);
    }

.ppou-detail .ppou-rev-card__chev {
    margin-inline-start: auto;
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--ndpp-muted, #9aa1a9);
    transition: transform .2s ease, color .15s ease;
}

.ppou-detail .ppou-rev-card__quick {
    margin-inline-start: auto;
    margin-bottom: 0;
    cursor: default;
}

    .ppou-detail .ppou-rev-card__quick + .ppou-rev-card__chev {
        margin-inline-start: 0;
    }

.ppou-detail .ppou-rev-card__chev.is-open {
    transform: rotate(180deg);
}

.ppou-detail .ppou-rev-card__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

    .ppou-detail .ppou-rev-card__tools > .ndpp-dash-btn {
        background: #fff;
        border: 1px solid #e2e5e9;
        border-radius: 8px;
        color: #5b6472;
        font-size: .76rem;
        font-weight: 500;
        padding: 4px 10px;
        min-height: 0;
        gap: 6px;
    }

        .ppou-detail .ppou-rev-card__tools > .ndpp-dash-btn i {
            font-size: 11px;
            color: #98a1ad;
        }

        .ppou-detail .ppou-rev-card__tools > .ndpp-dash-btn:hover {
            color: var(--ndpp-ink, #1f2329);
            border-color: #c9cfd8;
            box-shadow: 0 1px 4px rgba(16, 24, 40, .08);
            transform: none;
        }

            .ppou-detail .ppou-rev-card__tools > .ndpp-dash-btn:hover i {
                color: #5b6472;
            }

.ppou-detail .ppou-rev-card__bodylabel {
    display: block;
    margin-bottom: 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ndpp-muted, #9aa1a9);
}

.ppou-detail .ppou-rev-card__bodyhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

    .ppou-detail .ppou-rev-card__bodyhead .ppou-rev-card__bodylabel {
        margin-bottom: 0;
    }

    .ppou-detail .ppou-rev-card__bodyhead .ppou-rev-card__tools {
        margin-bottom: 0;
    }

.ppou-detail .ppou-rev-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ppou-detail .ppou-rev-card__title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ppou-detail .ppou-rev-card__meta {
    font-size: .8rem;
    color: var(--ndpp-muted, #9aa1a9);
}

.ppou-detail .ppou-rev-card__actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ppou-detail .ppou-rev-card__body {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px dashed var(--ndpp-line, #e6e9ef);
}

.ppou-detail .ndpp-dash-btn.is-on {
    background: var(--danger-btn-button);
    color: #fff;
}

.ppou-detail .ppou-rev-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    color: var(--ndpp-muted, #9aa1a9);
    font-size: .85rem;
}

    .ppou-detail .ppou-rev-empty > .fa {
        font-size: 1.6rem;
        opacity: .45;
    }

.ppou-detail .ppou-rev-card.is-public {
    background: #f4fbf7;
}

.ppou-detail .ppou-rev-card__link {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px dashed #cde8d9;
}

.ppou-detail .ppou-rev-card__linklabel {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ppou-detail .ppou-rev-card__link .ppou-url-hint {
    display: block;
    margin-top: 5px;
    color: var(--ndpp-muted, #9aa1a9);
}

.ppou-detail .ppou-rev-card__titlerow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ppou-detail .ppou-appr-card__reason--none {
    color: var(--ndpp-muted, #9aa1a9);
    font-style: italic;
}

.ppou-detail .ppou-rev-card__none {
    color: var(--ndpp-muted, #9aa1a9);
    font-style: italic;
    font-size: .85rem;
    align-self: center;
}

.ppou-detail .ppou-vc-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ppou-detail .ppou-vc-lang {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--ndpp-muted, #9aa1a9);
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 6px;
    padding: 1px 7px;
    background: #fff;
}

.ppou-detail .ppou-vc-body {
    max-height: 65vh;
    overflow-y: auto;
    background: #f6f7f9;
    padding: 18px;
}

.ppou-detail .ppou-vc-paper {
    background: #fff;
    border: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 10px;
    padding: 24px 28px;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .06);
    word-break: break-word;
}

    .ppou-detail .ppou-vc-paper img {
        max-width: 100%;
        height: auto;
    }

.ppou-detail .ppou-rev-public {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #e7f7ef;
    color: #0f7b4f;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

    .ppou-detail .ppou-rev-public > .fa {
        font-size: .72rem;
    }

.ppou-detail .ppou-cur {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #e2e5e9;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 1.1rem;
}

.ppou-detail .ppou-cur__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.ppou-detail .ppou-cur__title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.ppou-detail .ppou-cur__meta {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ndpp-muted, #9aa1a9);
}

.ppou-detail .ppou-cur--draft {
    background: #f8f9fb;
}

.ppou-detail .ppou-cur--waiting {
    background: #fff9f0;
    border-color: #f3ddb8;
}

    .ppou-detail .ppou-cur--waiting .ppou-cur__title {
        color: #b45309;
    }

.ppou-detail .ppou-cur--stack {
    display: block;
}

.ppou-detail .ppou-cur__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ppou-detail .ppou-cur--stack .ppou-appr-list {
    margin-top: 13px;
}

@media (max-width: 767px) {
    .ppou-detail .ppou-cur {
        flex-wrap: wrap;
    }

    .ppou-detail .ppou-cur__head {
        flex-wrap: wrap;
    }
}

.ppou-detail .ppou-appr-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ppou-detail .ppou-appr-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    background: #fff;
    padding: 12px 16px;
}

.ppou-detail .ppou-appr-card__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--danger-btn-button, #08b3ad) 10%, #fff);
    color: var(--danger-btn-button);
    font-weight: 700;
    font-size: .85rem;
}

.ppou-detail .ppou-appr-card__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.ppou-detail .ppou-appr-card__name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ppou-detail .ppou-appr-card__round {
    font-weight: 400;
    color: var(--ndpp-muted, #9aa1a9);
    font-size: .78rem;
}

.ppou-detail .ppou-appr-card__meta {
    font-size: .78rem;
    color: var(--ndpp-muted, #9aa1a9);
}

.ppou-detail .ppou-appr-card__reason {
    margin-top: 3px;
    font-size: .8rem;
    color: #5b626b;
    background: #f6f7f9;
    border-radius: 8px;
    padding: 4px 10px;
}

.ppou-detail .ppou-appr-status {
    flex: 0 0 auto;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.ppou-detail .ppou-appr-status--waiting {
    background: #fff4e5;
    color: #b45309;
}

.ppou-detail .ppou-appr-status--ok {
    background: #e7f7ef;
    color: #0f7b4f;
}

.ppou-detail .ppou-appr-status--no {
    background: #fdeaea;
    color: #b3261e;
}

@media (max-width: 767px) {
    .ppou-detail .ppou-appr-card {
        flex-wrap: wrap;
    }
}

.ppou-detail .ppou-checklist + .ppou-group-title, .ppou-detail .ppou-group-title--gap {
    margin-top: 1.6rem;
}

.ppou-detail .ppou-chk__meta {
    display: block;
    margin-top: 2px;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--ndpp-muted, #9aa1a9);
    font-weight: 400;
}

.ppou-detail .ppou-chk--head {
    padding: 0;
    margin: 0;
    background: transparent !important;
}

    .ppou-detail .ppou-chk--head .ppou-chk__text {
        font-weight: 600;
        font-size: .85rem;
        color: var(--ndpp-ink, #1f2329);
    }

    .ppou-detail .ppou-chk--head.is-indeterminate .ppou-chk__box {
    }

        .ppou-detail .ppou-chk--head.is-indeterminate .ppou-chk__box svg {
            display: none;
        }

        .ppou-detail .ppou-chk--head.is-indeterminate .ppou-chk__box::before {
            content: "";
            width: 8px;
            height: 2px;
            background: #fff;
            border-radius: 1px;
        }

.ppou-detail .ppou-favhead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: .25rem .85rem 15px;
    color: #6c757d;
    font-weight: 600;
    font-size: 13px;
}

    .ppou-detail .ppou-favhead::after {
        content: "";
        flex: 1;
        border-top: 1px solid #e2e5e9;
    }

.ppou-detail .ppou-fav-star {
    color: #f0ad4e;
    margin-right: 10px;
}

.ppou-detail .ppou-favdivider {
    margin: 0.35rem 0.85rem 1.35rem 0.85rem;
    border: 0;
    border-top: 1px solid #e2e5e9;
}

.ppou-detail .ppou-list-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.2rem;
}

.ppou-detail .ppou-main-id {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.ppou-detail .ppou-main-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppou-detail .ppou-main-name--empty {
    color: var(--ndpp-muted, #9aa1a9);
    font-weight: 500;
    font-style: italic;
}

.ppou-detail .ppou-main-status {
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.ppou-detail .ppou-main-status--draft {
    background: #eef1f4;
    color: #5b626b;
}

.ppou-detail .ppou-main-status--published {
    background: #e7f7ef;
    color: #0f7b4f;
}

.ppou-detail .ppou-main-status--waiting {
    background: #fff4e5;
    color: #b45309;
}

.ppou-detail .ppou-main-status--rejected {
    background: #fdecec;
    color: #b42318;
}

.ppou-detail .ppou-nav-head__ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--danger-btn-button, #08b3ad);
    font-size: 1.05rem;
    line-height: 1;
}

.ppou-detail .ppou-nav-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ndpp-ink, #1f2329);
    margin: 0;
}

.ppou-detail .sidebar-progressbar {
    height: 8px;
    background: #eef1f4;
    border-radius: 999px;
    margin-inline: 2px;
    margin-bottom: 6px;
    box-shadow: none;
    overflow: hidden;
}

.ppou-detail .sidebar-progressbar-fill {
    border-radius: 999px;
    box-shadow: none;
    background: var(--danger-btn-button);
}

.ppou-detail .sidebar-nav-item:first-child {
    margin-bottom: 8px;
    border-bottom: 1px solid #eceff3 !important;
}

.ppou-detail .sidebar-nav .sidebar-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--danger-btn-button, #08b3ad);
    border-radius: 0 3px 3px 0;
    transition: height .35s ease;
}

[dir="rtl"] .ppou-detail .sidebar-nav .sidebar-nav-link::before {
    left: auto;
    right: 0;
    border-radius: 3px 0 0 3px;
}

.ppou-detail .sidebar-nav-link:not(.active):hover {
    background: #f4f6f9;
}

.ppou-detail .sidebar-nav-link:not(.active) .step-label {
    color: var(--ndpp-ink, #1f2329);
}

.ppou-detail .sidebar-nav-step-done .step-circle {
    display: none;
}

.ppou-detail .sidebar-nav-step-done .sidebar-nav-link .step-label {
    color: var(--ndpp-ink, #1f2329) !important;
}

.ppou-detail .sidebar-nav .sidebar-nav-link.active {
    background: transparent !important;
}

    .ppou-detail .sidebar-nav .sidebar-nav-link.active::before {
        height: 20px;
    }

    .ppou-detail .sidebar-nav .sidebar-nav-link.active .step-circle {
        background: color-mix(in srgb, var(--danger-btn-button, #08b3ad) 10%, #fff) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--danger-btn-button) !important;
        font-weight: 700;
    }

    .ppou-detail .sidebar-nav .sidebar-nav-link.active .step-label {
        color: var(--danger-btn-button) !important;
        font-weight: 600;
    }

.ppou-detail .sidebar-nav-link .fa-check {
    order: -1;
    margin: 0;
    width: 30px;
    min-width: 30px;
    margin-right: 9px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger-btn-button, #08b3ad) 10%, #fff);
    font-size: .85rem;
    color: var(--danger-btn-button);
}

.ppou-detail .ppou-step-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.ppou-detail .ppou-step-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff4e5;
    color: #b45309;
    white-space: nowrap;
}

[dir="rtl"] .ppou-detail .sidebar-nav .sidebar-nav-link {
    padding: .55rem 1rem .55rem .85rem;
}

.ppou-detail .sidebar-nav .sidebar-nav-link.ppou-step-locked:not(.active) {
    cursor: not-allowed;
    opacity: .55;
}

    .ppou-detail .sidebar-nav .sidebar-nav-link.ppou-step-locked:not(.active):hover {
        background: transparent;
    }

    .ppou-detail .sidebar-nav .sidebar-nav-link.ppou-step-locked:not(.active) .step-label {
        color: #9aa1a9;
    }

    .ppou-detail .sidebar-nav .sidebar-nav-link.ppou-step-locked:not(.active) .step-circle {
        background: #f6f7f9;
        color: #b6bcc5;
    }

    .ppou-detail .sidebar-nav .sidebar-nav-link.ppou-step-locked:not(.active)::after {
        content: "\f023";
        font-family: FontAwesome;
        margin-inline-start: auto;
        font-size: .78rem;
        color: #c3c9d1;
    }

.table-admin-servicepurpose tbody tr.ndpp-group-row > td {
    padding: 0;
    cursor: pointer;
    background: #fafafa;
    border-top: 1px solid var(--ndpp-line, #e6e9ee);
    border-bottom: 1px solid var(--ndpp-line, #e6e9ee);
}

.table-admin-servicepurpose tbody tr.ndpp-group-row:hover > td {
    background: #eef0f3;
}

.table-admin-servicepurpose tbody tr.ndpp-group-row:first-child > td {
    border-top: 0;
}

.ndpp-group-inner {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .85rem;
    white-space: normal;
    color: var(--ndpp-muted, #6b7280);
    font-size: .8rem;
}

.ndpp-group-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    color: #98a2b3;
    transition: transform .18s ease, background-color .15s ease, color .15s ease;
}

    .ndpp-group-toggle > .ndpp-ico {
        width: 15px;
        height: 15px;
    }

.table-admin-servicepurpose tbody tr.ndpp-group-row:hover .ndpp-group-toggle {
    color: #475467;
}

.ndpp-group-row.is-collapsed .ndpp-group-toggle {
    transform: rotate(-90deg);
}

.ndpp-group-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #98a2b3;
    font-weight: 400;
    font-size: .8rem;
}

    .ndpp-group-label .ndpp-group-leaf {
        color: #101828;
        font-weight: 600;
    }

.ndpp-group-sep {
    margin: 0 .45rem;
    color: #d0d5dd;
    font-size: .78em;
    vertical-align: middle;
}

.ndpp-group-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.4rem;
    padding: 0 .55rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d5dbe3;
    color: #3f4a5a;
    font-size: .73rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 1px rgba(16,24,40,.05);
}

.table-admin-servicepurpose tbody tr.ndpp-group-row:hover .ndpp-group-count {
    border-color: #c3cad4;
}

.table-admin-servicepurpose .ndpp-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 6px;
    color: #b0b6bf;
    cursor: grab;
    transition: color .15s ease, background-color .15s ease;
}

    .table-admin-servicepurpose .ndpp-drag-handle:hover {
        color: #475467;
        background: #eef1f4;
    }

    .table-admin-servicepurpose .ndpp-drag-handle:active {
        cursor: grabbing;
    }

    .table-admin-servicepurpose .ndpp-drag-handle > .ndpp-ico {
        width: 16px;
        height: 16px;
    }

.table-admin-servicepurpose tbody tr.sp-dragging {
    opacity: .45;
    background: #eef4ff;
}

.ndpp-datatable .ndpp-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 1.15rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--ndpp-line, #eef0f3);
}

    .ndpp-datatable .ndpp-note > .ndpp-ico {
        flex: 0 0 auto;
        width: 17px;
        height: 17px;
        margin-top: .12rem;
        color: #7c93b8;
    }

.ndpp-note__body {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
}

.ndpp-note__title {
    font-size: .82rem;
    font-weight: 600;
    color: #344054;
}

.ndpp-note__text {
    font-size: .76rem;
    line-height: 1.5;
    color: #667085;
}
/* RTL */
[dir="rtl"] .table-admin-servicepurpose tbody tr.ndpp-group-row.is-collapsed .ndpp-group-toggle {
    transform: rotate(90deg);
}

[dir="rtl"] .ndpp-group-sep {
    display: inline-block;
    transform: scaleX(-1);
}


.ppou-detail .ppou-chk:has(> input[disabled]) {
    cursor: not-allowed;
}

    .ppou-detail .ppou-chk:has(> input[disabled]) .ppou-chk__box, .ppou-detail .ppou-chk:has(> input[disabled]) .ppou-chk__text {
        cursor: not-allowed;
    }

.ppou-detail .ppou-cur--returned {
    background: #fdf3f3;
    border-color: #f3c9c9;
}

    .ppou-detail .ppou-cur--returned .ppou-cur__title {
        color: #b42318;
    }

.ppou-detail .ppou-ret-latest {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: 13px;
    padding: .7rem .9rem;
    background: #fff;
    border: 1px solid #f3c9c9;
    border-radius: 8px;
}

.ppou-detail .ppou-ret-latest__reason {
    font-size: .9rem;
    color: #7f1d1d;
    overflow-wrap: anywhere;
}

.ppou-detail .ppou-ret-latest__label {
    font-weight: 600;
}

.ppou-detail .ppou-ret-latest__text {
    font-weight: 600;
}

.ppou-detail .ppou-ret-latest__meta {
    font-size: .76rem;
    color: #b06060;
}

.ppou-detail .ppou-ret-hint {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .55rem;
    font-size: .78rem;
    color: #b42318;
    font-weight: 600;
    margin-top: 14px !important;
}

[dir="rtl"] .ppou-detail .ppou-cur--returned {
    border-left: 1px solid #f3c9c9;
    border-right: 4px solid #dc2626;
}

.pcf-detail .pcf-prow--empty {
    align-items: center;
    padding: .65rem .8rem;
    border: 1.5px dashed #dfe3e8;
    border-radius: 10px;
    background: #fafbfc;
}

    .pcf-detail .pcf-prow--empty .pcf-prow__text {
        color: var(--ndpp-muted, #6b7280);
        font-weight: 400;
    }

.pcf-detail .pcf-fsec--locked,
.pcf-detail .pcf-fsec--locked .ndpp-fsec__head {
    cursor: not-allowed;
}

    .pcf-detail .pcf-fsec--locked .ndpp-fsec__title {
        color: #9aa1a9;
    }
/* flow อนุมัติ: ล็อกทั้งฟอร์มเมื่อรออนุมัติ/รอเผยแพร่ (fieldset[disabled] ปิด input, pcf-locked ปิด select2/summernote) */
.pcf-detail .pcf-editfs {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

    .pcf-detail .pcf-editfs.pcf-locked {
        pointer-events: none;
        opacity: .72;
    }
    /* Form History อยู่นอก fieldset จึงไม่ใช่ sibling ของการ์ดสุดท้ายข้างใน — .ndpp-formcard + .ndpp-formcard เอื้อมไม่ถึง */
    .pcf-detail .pcf-editfs + .ndpp-formcard {
        margin-top: 1rem;
    }

/* แถบสถานะเด่นบนหน้า detail — เปลี่ยนสี/ปุ่มตามสถานะ ให้เห็นชัดว่าต้องทำอะไรต่อ */
.pcf-detail .pcf-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #e2e5e9;
    border-left-width: 5px;
}

.pcf-detail .pcf-statusbar__msg {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pcf-detail .pcf-statusbar__icon {
    font-size: 22px;
    flex: 0 0 auto;
}

.pcf-detail .pcf-statusbar__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pcf-detail .pcf-statusbar__title {
    font-weight: 700;
    font-size: .98rem;
}

.pcf-detail .pcf-statusbar__sub {
    font-size: .82rem;
    opacity: .85;
}

.pcf-detail .pcf-statusbar__actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.pcf-detail .pcf-statusbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 9px;
    font-weight: 600;
    font-size: .9rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .08s, box-shadow .15s;
}

    .pcf-detail .pcf-statusbar__btn:hover {
        transform: translateY(-1px);
    }

.pcf-detail .pcf-statusbar__btn--primary {
    background: var(--danger-btn-button, #d25055);
    color: #fff;
}

    .pcf-detail .pcf-statusbar__btn--primary:hover {
        box-shadow: 0 4px 12px rgba(210,80,85,.30);
    }

.pcf-detail .pcf-statusbar__btn--approve {
    background: #1e9e77;
    color: #fff;
}

    .pcf-detail .pcf-statusbar__btn--approve:hover {
        box-shadow: 0 4px 12px rgba(30,158,119,.35);
    }

.pcf-detail .pcf-statusbar__btn--reject {
    background: #fff;
    color: #c0392b;
    border-color: #e2a49d;
}

    .pcf-detail .pcf-statusbar__btn--reject:hover {
        box-shadow: 0 4px 12px rgba(192,57,43,.18);
    }
/* สีตามสถานะ (พื้น + ขอบซ้าย + ไอคอน/หัวข้อ) ให้ตรงกับ badge ในตาราง */
.pcf-detail .pcf-statusbar--draft {
    background: linear-gradient(90deg,#eef2f7 0%,#f7f9fc 100%);
    border-left-color: #8a929c;
}

    .pcf-detail .pcf-statusbar--draft .pcf-statusbar__icon, .pcf-detail .pcf-statusbar--draft .pcf-statusbar__title {
        color: #4b5563;
    }

.pcf-detail .pcf-statusbar--returned {
    background: linear-gradient(90deg,#fdecea 0%,#fff6f5 100%);
    border-left-color: #c0392b;
}

    .pcf-detail .pcf-statusbar--returned .pcf-statusbar__icon, .pcf-detail .pcf-statusbar--returned .pcf-statusbar__title {
        color: #a5281b;
    }

.pcf-detail .pcf-statusbar--waiting {
    background: linear-gradient(90deg,#fff4e0 0%,#fff9ef 100%);
    border-left-color: #e69412;
}

    .pcf-detail .pcf-statusbar--waiting .pcf-statusbar__icon, .pcf-detail .pcf-statusbar--waiting .pcf-statusbar__title {
        color: #7c4a03;
    }

.pcf-detail .pcf-statusbar--approved {
    background: linear-gradient(90deg,#e6f6f0 0%,#f3fbf8 100%);
    border-left-color: #1e9e77;
}

    .pcf-detail .pcf-statusbar--approved .pcf-statusbar__icon, .pcf-detail .pcf-statusbar--approved .pcf-statusbar__title {
        color: #0f7355;
    }

[dir="rtl"] .pcf-detail .pcf-statusbar {
    border-left-width: 1px;
    border-right-width: 5px;
}

/* จุดสีนำหน้าตัวเลือกใน dropdown ตัวกรอง Status */
.ndpp-statusdot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

[dir="rtl"] .ndpp-statusdot {
    margin-right: 0;
    margin-left: 8px;
}

.pcf-detail .pcf-locked-hint {
    padding: .3rem .2rem;
    color: var(--ndpp-muted, #6b7280);
    font-size: .92rem;
    font-weight: 600;
    cursor: not-allowed;
}

.pcf-detail .pcf-locked-hint__em {
    color: var(--danger-btn-button);
    font-weight: 700;
}

.pcf-detail .pcf-pgroup + .pcf-pgroup {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px dashed #e7ecf2;
}

.pcf-detail .pcf-pgroup__head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .6rem;
}

.pcf-detail .pcf-pgroup__name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.pcf-detail .pcf-ptype + .pcf-ptype {
    margin-top: 1rem;
}

.pcf-detail .pcf-ptype__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.2rem;
}

.pcf-detail .pcf-ptype__name {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a929c;
}

.pcf-detail .pcf-ptype__var {
    font-size: .72rem;
    font-family: SFMono-Regular, Consolas, Menlo, monospace;
    color: #8a929c;
    background: #f4f6f8;
    border-radius: 6px;
    padding: 1px 7px;
}

.pcf-detail .pcf-prow {
    display: flex;
    gap: .75rem;
    padding: 0.95rem 1.2rem;
    align-items: center;
}

    .pcf-detail .pcf-prow + .pcf-prow {
        border-top: 1px solid #f0f2f5;
    }

.pcf-detail .pcf-prow__body {
    flex: 1 1 auto;
    min-width: 0;
}

.pcf-detail .pcf-prow__text {
    display: block;
    font-size: .92rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
    line-height: 1.45;
    word-break: break-word;
}

.pcf-detail .pcf-prow__texten {
    display: block;
    margin-top: 2px;
    font-size: .83rem;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.4;
    word-break: break-word;
}

.pcf-detail .pcf-prow__badges {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding-top: 2px;
}

.pcf-detail .pcf-pbadge {
    display: inline-flex;
    align-items: center;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
}

.pcf-detail .pcf-pbadge--req {
    background: #eef4ff;
    color: #3b5bdb;
}

.pcf-detail .pcf-pbadge--sen {
    background: #fdf1f1;
    color: #b42318;
}

.pcf-detail .pcf-pbadge--mkt {
    background: #fff4e5;
    color: #b45309;
}

.pcf-detail .pcf-prow__acts {
    flex: 0 0 auto;
}

.pcf-detail .pcf-prow .ndpp-drag-handle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 6px;
    color: #b0b6bf;
    cursor: grab;
    transition: color .15s ease, background-color .15s ease;
}

    .pcf-detail .pcf-prow .ndpp-drag-handle:hover {
        color: #475467;
        background: #eef1f4;
    }

    .pcf-detail .pcf-prow .ndpp-drag-handle:active {
        cursor: grabbing;
    }

    .pcf-detail .pcf-prow .ndpp-drag-handle > .ndpp-ico {
        width: 16px;
        height: 16px;
    }

.pcf-detail .pcf-prow.pcf-dragging {
    opacity: .45;
    background: #eef4ff;
}

.pcf-detail .pcf-preview-stage {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

    .pcf-detail .pcf-preview-stage img {
        max-width: 100%;
        height: auto;
    }

    .pcf-detail .pcf-preview-stage input[type="checkbox"] {
        opacity: 1 !important;
        position: static !important;
        width: 16px;
        height: 16px;
        margin-right: 6px;
        accent-color: var(--danger-btn-button, #d25055);
        vertical-align: middle;
    }

    .pcf-detail .pcf-preview-stage .form-check-label {
        display: inline;
        font-weight: 400;
    }

.pcf-detail .pcf-preview-note--warn {
    color: #b45309;
}

/* ── Add/Edit Purpose modal — context card (activity ถูก lock) + tint ม.26 + save hint ── */
.pcf-detail .pcf-mctx {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .95rem;
    margin-bottom: 1.15rem;
    background: linear-gradient(180deg, #fbfcfe, #f5f7fa);
    border: 1px solid #e6e9ee;
    border-radius: 12px;
}

.pcf-detail .pcf-mctx__ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e6e9ee;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    color: #8a929c;
}

    .pcf-detail .pcf-mctx__ico > .ndpp-ico {
        width: 15px;
        height: 15px;
    }

.pcf-detail .pcf-mctx__body {
    min-width: 0;
}

.pcf-detail .pcf-mctx__label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a929c;
    margin-bottom: 1px;
}

.pcf-detail .pcf-mctx__name {
    display: block;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
    line-height: 1.35;
    word-break: break-word;
}

.pcf-detail .pcf-fsec--sens {
    margin-top: 1.2rem;
    padding: .9rem 1rem .15rem;
    background: #fdf8f7;
    border: 1px solid #f5d5d2;
    border-radius: 10px;
}

    .pcf-detail .pcf-fsec--sens > .ndpp-fsec__head {
        padding-bottom: 10px;
        border-bottom-color: #f5d5d2;
    }

    .pcf-detail .pcf-fsec--sens .ndpp-fsec__title {
        color: #b42318;
    }

.pcf-detail .pcf-mhint {
    margin-inline-end: auto;
    font-size: .8rem;
    color: var(--ndpp-muted, #6b7280);
}

/* ── ปุ่ม { } Insert variable (หัว section เนื้อหา) — toggle ตารางตัวแปร ndpp-varbox ── */
.pcf-detail .pcf-vmenu {
    margin-inline-start: auto;
}

.pcf-detail .pcf-vmenu__btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .7rem;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    background: #fff;
    color: #475467;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

    .pcf-detail .pcf-vmenu__btn:hover,
    .pcf-detail .pcf-vmenu__btn:focus,
    .pcf-detail .pcf-vmenu__btn.is-open {
        border-color: #c9ced6;
        background: #f8f9fb;
        color: var(--ndpp-ink, #1f2329);
        outline: 0;
    }

    .pcf-detail .pcf-vmenu__btn > .ndpp-ico {
        flex: 0 0 auto;
        width: 13px;
        height: 13px;
        color: var(--danger-btn-button);
    }

.ndpp-dd__item.is-disabled {
    color: #b3b9c1 !important;
    cursor: not-allowed;
}

    .ndpp-dd__item.is-disabled:hover {
        background: transparent;
    }

    .ndpp-dd__item.is-disabled .ndpp-dd__text {
        color: inherit;
    }

    .ndpp-dd__item.is-disabled[data-tip] {
        position: relative;
    }

        .ndpp-dd__item.is-disabled[data-tip]:not(.is-selected)::after {
            content: attr(data-tip);
            position: absolute;
            inset-inline-end: .5rem;
            top: 50%;
            max-width: 75%;
            padding: .15rem .45rem;
            border-radius: 999px;
            background: #ffffff;
            color: #FF9800;
            font-size: .68rem;
            font-weight: 600;
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0;
            transform: translateY(calc(-50% + 3px));
            pointer-events: none;
            transition: opacity .15s ease, transform .15s ease;
        }

        .ndpp-dd__item.is-disabled[data-tip]:not(.is-selected):hover::after {
            opacity: 1;
            transform: translateY(-50%);
        }

.ndpp-pstats {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.ndpp-pstat {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .14rem .55rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: #f4f6f8;
    color: #5b626b;
    border: 1px solid #e6e9ee;
}

    .ndpp-pstat > em {
        font-style: normal;
        font-weight: 600;
        font-size: 11px;
        opacity: .75;
        letter-spacing: .01em;
    }

.ndpp-pstat--sen {
    background: #fdf1f1;
    color: #b42318;
    border-color: #f5d5d2;
}

.pcf-detail .pcf-order-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .45rem;
    margin: -.35rem 0 1rem;
    font-size: .8rem;
    color: var(--ndpp-muted, #6b7280);
}

.pcf-detail .pcf-order-hint__var {
    font-size: .72rem;
    font-family: SFMono-Regular, Consolas, Menlo, monospace;
    color: #8a929c;
    background: #f4f6f8;
    border-radius: 6px;
    padding: 1px 7px;
}

.pcf-detail .pcf-order-hint > .ndpp-ico {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: #8a929c;
}

.pcf-detail .pcf-hcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.35rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: #f4f6f8;
    border: 1px solid #e6e9ee;
    color: #5b626b;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pcf-detail .pcf-history {
    position: relative;
    padding: .2rem 0 .1rem;
}

    .pcf-detail .pcf-history::before {
        content: "";
        position: absolute;
        top: 16px;
        bottom: 16px;
        left: 8px;
        width: 2px;
        background: #eef0f4;
        border-radius: 2px;
    }

[dir="rtl"] .pcf-detail .pcf-history::before {
    left: auto;
    right: 8px;
}

.pcf-detail .pcf-hitem {
    position: relative;
    padding: .35rem 0 .35rem 2rem;
}

[dir="rtl"] .pcf-detail .pcf-hitem {
    padding: .35rem 2rem .35rem 0;
}

.pcf-detail .pcf-hitem__dot {
    position: absolute;
    left: 2.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid #cfd5dd;
}

[dir="rtl"] .pcf-detail .pcf-hitem__dot {
    left: auto;
    right: 2.5px;
}

.pcf-detail .pcf-hitem.is-latest .pcf-hitem__dot {
    border-color: var(--danger-btn-button);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-btn-button) 12%, #fff);
}

.pcf-detail .pcf-hitem__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem .9rem;
    padding: .7rem 1rem;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}


.pcf-detail .pcf-hitem.is-latest .pcf-hitem__card {
    border-color: color-mix(in srgb, var(--danger-btn-button) 22%, #eef0f3);
    background: color-mix(in srgb, var(--danger-btn-button) 2.5%, #fff);
}

.pcf-detail .pcf-hitem__main {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.pcf-detail .pcf-hitem__toprow {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pcf-detail .pcf-hitem__latest {
    display: inline-flex;
    align-items: center;
    padding: .14rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger-btn-button) 10%, #fff);
    color: var(--danger-btn-button);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.pcf-detail .pcf-hitem__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
}

.pcf-detail .pcf-hitem__metaitem {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    font-size: .78rem;
    color: var(--ndpp-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

    .pcf-detail .pcf-hitem__metaitem > .fa {
        font-size: .82rem;
        color: #a5adb8;
    }

.pcf-detail .pcf-hitem__who {
    gap: .45rem;
}

.pcf-detail .pcf-hitem__avatar {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e6e9ee;
    background: #f4f6f8;
}

.pcf-detail .pcf-hitem__avatar--init {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--danger-btn-button);
    background: color-mix(in srgb, var(--danger-btn-button) 9%, #fff);
    border-color: color-mix(in srgb, var(--danger-btn-button) 18%, #e6e9ee);
}

.pcf-detail .pcf-hitem__acts {
    flex: 0 0 auto;
}

.pcf-detail .pcf-hmodal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin: 0 0 1rem;
    padding: 0 0 .8rem;
    border-bottom: 1px solid #eef0f3;
}

.pcf-detail .pcf-hmodal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 2.4rem 1rem;
    color: var(--ndpp-muted, #9aa1a9);
    font-size: .9rem;
}

    .pcf-detail .pcf-hmodal-empty > .fa {
        font-size: 1.6rem;
        color: #cfd5dd;
    }

#modal-view-content .header2025-home-titlewrap {
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 12px;
    flex: 1 1 auto;
    width: 100%;
}

    #modal-view-content .header2025-home-titlewrap .modal-title {
        margin: 0 !important;
        order: 0;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

#modal-view-content .ndpp-preview-langtabs {
    margin: 0 !important;
    order: 1;
}

.pcf-detail .pcf-purposewarn {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .55rem .7rem;
    border-radius: 9px;
    /* background: 
color-mix(in srgb, #FF9800 9%, #fff); */
    /* border: 1px solid 
color-mix(in srgb, #FF9800 35%, #fff); */
    font-size: .78rem;
    line-height: 1.5;
    font-weight: 500;
    color: #FF9800;
}

    .pcf-detail .pcf-purposewarn > .fa {
        flex: 0 0 auto;
        margin-top: .15rem;
        color: #FF9800;
    }

.pcf-detail .pcf-purposewarn__text {
    min-width: 0;
}

.pcf-detail .ndpp-metacard__label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.pcf-detail .pcf-meta-chk {
    flex: 0 0 auto;
    font-size: .8rem;
    color: #c3c9d1;
}

    .pcf-detail .pcf-meta-chk.is-ok {
        color: #28a745;
    }


.pcf-detail .pcf-varwarn {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: 0rem 0.5rem 0.5rem 0.5rem;
    border-radius: 9px;
    font-size: .78rem;
    line-height: 1.5;
    font-weight: 500;
    color: #6b7280;
}



    .pcf-detail .pcf-varwarn code {
        padding: 0 9px;
        border-radius: 5px;
        background: #ffffff00;
        border: 1px solid #fde3bf00;
        color: #FF9800;
        font-size: 13px;
    }

.pcf-detail .pcf-varwarn__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.pcf-detail .pcf-varwarn__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .65rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #FF9800;
    color: #FF9800;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .pcf-detail .pcf-varwarn__btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px -4px rgba(146, 88, 10, .4);
    }

    .pcf-detail .pcf-varwarn__btn > .fa {
        font-size: .7rem;
        margin: 0;
        color: inherit;
    }

.pcf-detail .pcf-nextrev {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    color: var(--ndpp-muted, #6b7280);
}


.ndpp-modal-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .2rem;
    font-size: .72rem;
    font-weight: 500;
    color: #9aa1a9;
}

    .ndpp-modal-crumb > span:last-child {
        color: var(--ndpp-ink, #1f2329);
        font-weight: 600;
    }

.ndpp-modal-crumb__sep {
    color: #c3c8cf;
    font-weight: 400;
}

[dir="rtl"] .ndpp-modal-crumb__sep {
    transform: scaleX(-1);
}

#nsdx-admin-measurement-add-modal .modal-body {
    min-height: 45vh;
    overflow-y: auto;
}

.ndpp-smx {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

.ndpp-smx-list {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0px 20px;
}

.ndpp-smx-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin-bottom: .8rem;
}

.ndpp-smx-create {
    flex: 0 0 430px;
    max-width: 46%;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
    background: #fafbfc;
    padding: 1rem 1.1rem 1.1rem;
    animation: ndppSmxIn .18s ease;
}

@keyframes ndppSmxIn {
    from {
        opacity: 0;
        transform: translateX(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

[dir="rtl"] .ndpp-smx-create {
    animation-name: ndppSmxInRtl;
}

@keyframes ndppSmxInRtl {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ndpp-smx-create {
        animation: none;
    }
}

.ndpp-smx-create__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.ndpp-smx-create__title {
    font-weight: 700;
    font-size: .95rem;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-smx-create__foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .5rem;
}

.ndpp-smx-mini {
    border: 1px dashed #d4d9e0;
    border-radius: 10px;
    background: #ffffff;
    padding: .75rem .85rem;
    margin-top: .5rem;
}

.ndpp-smx-mini__title {
    font-weight: 600;
    font-size: .8rem;
    color: var(--ndpp-muted, #6b7280);
    margin-bottom: .5rem;
}

.ndpp-smx-mini__fields {
    display: grid;
    gap: .5rem;
    margin-bottom: .6rem;
}

.ndpp-smx-mini__foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

@media (max-width: 991px) {
    .ndpp-smx {
        flex-direction: column;
    }

    .ndpp-smx-create {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        order: -1;
    }
}

.ndpp-smx-create {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
}

.ndpp-smx-picker {
    max-height: 56vh;
    overflow-y: auto;
    padding-inline-end: .25rem;
}

.ndpp-smx-group {
    margin-bottom: .9rem;
}

.ndpp-smx-group__title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ndpp-muted, #6b7280);
    padding: .25rem .25rem .35rem;
    border-bottom: 1px solid var(--ndpp-line, #e9ecef);
    margin-bottom: .35rem;
}

.ndpp-smx-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    border-radius: 10px;
    cursor: pointer;
    margin: 0;
    transition: background .12s ease;
}

    .ndpp-smx-row:hover {
        background: #f5f6f8;
    }

    .ndpp-smx-row.is-picked {
        background: #f2f4f7;
    }

    .ndpp-smx-row > .ndpp-check__box {
        margin-top: 2px;
        flex: 0 0 auto;
    }

.ndpp-smx-row__body {
    min-width: 0;
    display: block;
    flex: 1 1 auto;
}

.ndpp-smx-row__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-smx-row__code {
    font-size: .74rem;
    font-weight: 600;
    color: var(--ndpp-muted, #6b7280);
    background: #eef0f3;
    border-radius: 6px;
    padding: .1rem .4rem;
    flex: 0 0 auto;
}

.ndpp-smx-row.is-picked .ndpp-smx-row__code {
    background: #e2e6ec;
}

.ndpp-smx-row__meta {
    display: block;
    font-size: .8rem;
    color: #808892;
    margin-top: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-smx-bar > .ndpp-filterbar {
    flex: 1 1 0;
    min-width: 0;
}

.ndpp-smx-bar__search {
    position: relative;
    flex: 1 1 200px;
    min-width: 150px;
    max-width: 340px;
}

    .ndpp-smx-bar__search > .ndpp-ico {
        position: absolute;
        inset-inline-start: .7rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1rem;
        height: 1rem;
        color: #adb3bd;
        pointer-events: none;
    }

    .ndpp-smx-bar__search > .ndpp-input {
        height: 2.25rem;
        padding: .4rem .8rem;
        padding-inline-start: 2.25rem;
        font-size: .85rem;
    }

        .ndpp-smx-bar__search > .ndpp-input:focus {
            border-color: var(--danger-btn-button, #d25055);
            box-shadow: 0 0 0 3px rgba(210, 80, 85, .12);
        }

.ndpp-smx-bar__add {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.ndpp-smx-create {
    border: 0;
    background: transparent;
    padding: .25rem 0 0;
}

.ndpp-smx-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 2rem;
    background: rgba(31, 35, 41, .45);
}

.ndpp-smx-dialog {
    width: min(480px, 94vw);
    max-height: 82vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    animation: ndppSmxDialogIn .16s ease;
}

@keyframes ndppSmxDialogIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ndpp-smx-dialog {
        animation: none;
    }
}

.ndpp-smx-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ndpp-line, #e2e5e9);
}

    .ndpp-smx-dialog__head h6 {
        margin: 0;
        font-size: .95rem;
        font-weight: 700;
        color: var(--ndpp-ink, #1f2329);
    }

.ndpp-smx-dialog__body {
    padding: 1.15rem 1.25rem .1rem;
}

.ndpp-smx-dialog__foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--ndpp-line, #e2e5e9);
    background: #fafbfc;
}

.ndpp-smx-selected {
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
    padding: .3rem;
}

    .ndpp-smx-selected .ndpp-smx-row--static {
        cursor: default;
        align-items: center;
    }

.ndpp-smx-create__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.ndpp-smx-card {
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
    background: #fff;
    padding: 1.5rem 1.75rem .85rem;
}

.ndpp-smx-card--full {
    grid-column: 1 / -1;
}

.ndpp-smx-create {
    padding: 1.25rem 1.25rem 1.35rem;
}

.ndpp-smx-card .form-group {
    margin-bottom: 1.4rem;
}

.ndpp-smx-card .ndpp-fsec__head {
    margin-bottom: 1.15rem;
}

.ndpp-smx-card textarea.ndpp-input {
    min-height: 96px;
}

    .ndpp-smx-card textarea.ndpp-input.ndpp-smx-mini__desc {
        min-height: 46px;
    }

.ndpp-smx-attrs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .9rem 1.25rem;
    padding: .3rem 0 1.15rem;
}

    .ndpp-smx-attrs .ndpp-check {
        margin: 0;
    }

@media (max-width: 991px) {
    .ndpp-smx-create__grid {
        grid-template-columns: 1fr;
    }
}

.ndpp-smx-foot-hint {
    align-self: center;
    font-size: .8rem;
    color: #8a929c;
}

.ndpp-wmodal .modal-footer .ndpp-smx-foot-back,
.ndpp-smx-foot-back {
    order: -1;
    margin-right: auto;
    margin-inline-end: auto;
}

[dir="rtl"] .ndpp-wmodal .modal-footer .ndpp-smx-foot-back {
    margin-right: .25rem;
    margin-left: auto;
}

.ndpp-smx-selected .ndpp-smx-row--static + .ndpp-smx-row--static {
    border-top: 1px solid #f0f2f5;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ndpp-smx-selected .ndpp-row-actions {
    flex: 0 0 auto;
}

.ndpp-smx-selected .ndpp-emptyrow {
    padding: 1rem .8rem;
}

.ndpp-smx-row__code {
    background: transparent;
    border: 1px solid #e9ecef;
    color: #6b7280;
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    letter-spacing: .01em;
}

.ndpp-smx-row__title {
    font-weight: 600;
}

.ndpp-smx-freq {
    margin-inline-start: auto;
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 600;
    color: #6b7280;
    background: #f1f3f6;
    border: 0;
    border-radius: 999px;
    padding: .14rem .55rem;
}

.ndpp-smx-group__title {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.ndpp-smx-group__count {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    color: #5b6472;
    background: #e6eaef;
    border-radius: 999px;
    padding: 0 .45rem;
    margin-inline-start: .45rem;
    vertical-align: middle;
}


[dir="rtl"] .ndpp-smx-row.is-picked {
    box-shadow: inset -3px 0 0 var(--danger-btn-button, #d25055);
}

.ndpp-smx-selected .ndpp-row-actions {
    opacity: .55;
    transition: opacity .12s ease;
}

.ndpp-smx-selected .ndpp-smx-row--static:hover .ndpp-row-actions,
.ndpp-smx-selected .ndpp-smx-row--static:focus-within .ndpp-row-actions {
    opacity: 1;
}

.ndpp-smx-selected .ndpp-emptyrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 1.6rem 1rem;
    text-align: center;
    color: #8a929c;
}

    .ndpp-smx-selected .ndpp-emptyrow > i {
        font-size: 1.05rem;
        color: #aab1ba;
        background: #f4f6f8;
        border-radius: 999px;
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.ndpp-fsec__head .ndpp-smx-count {
    font-size: .74rem;
    font-weight: 600;
    color: #6b7280;
    background: #f1f3f6;
    border-radius: 999px;
    padding: .1rem .5rem;
    margin-inline-start: .45rem;
}

.ndpp-wmodal .ndpp-datatable.ndpp-smx-table table.table thead th,
.ndpp-wmodal .ndpp-datatable.ndpp-smx-table table.table tbody td {
    word-break: normal;
}

    .ndpp-wmodal .ndpp-datatable.ndpp-smx-table table.table thead th.ndpp-col-fit,
    .ndpp-wmodal .ndpp-datatable.ndpp-smx-table table.table tbody td.ndpp-col-fit {
        white-space: nowrap;
    }

.ndpp-datatable.ndpp-smx-table table.table tbody td {
    padding: .8rem .85rem;
    vertical-align: middle;
}

.ndpp-smx-code {
    font-family: Consolas, "SFMono-Regular", Menlo, monospace;
    /*font-size: .76rem;*/
    color: #6b7280;
    white-space: nowrap;
}

.ndpp-smx-item-name {
    display: block;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-smx-item-desc {
    display: block;
    margin-top: .1rem;
    font-size: .76rem;
    color: #8a929c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 52ch;
}

.ndpp-smx-cell {
    font-size: .82rem;
    color: #3d434b;
}

.ndpp-datatable.ndpp-smx-table {
    border: 0;
}

.ndpp-smx-picker-table {
    padding: 0;
}

.ndpp-smx-picker .ndpp-smx-picker-table table.table thead th {
    position: sticky;
    top: -1px;
    z-index: 2;
    background: #f8f9fb;
}

.ndpp-smx-grouprow td {
    background: #fff;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-datatable.ndpp-smx-table table.table tbody tr.ndpp-smx-grouprow td {
    padding: 15px 0px 0px 0px;
    border-top: 0;
    border-bottom: 0;
}

.ndpp-smx-band {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: #fdf4f4;
    background: color-mix(in srgb, var(--danger-btn-button, #d25055) 6%, #fff);
    border: 1px solid #f3d9da;
    border: 1px solid color-mix(in srgb, var(--danger-btn-button, #d25055) 22%, #fff);
    border-radius: 9px;
    padding: .9rem .75rem;
}

.ndpp-smx-band__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger-btn-button, #d25055);
}

.ndpp-smx-band__title {
    min-width: 0;
    line-height: 1.3;
}

.ndpp-smx-grouprow .ndpp-smx-group__count {
    background: #fff;
    border: 1px solid #e2e6eb;
    margin-inline-start: 0;
}

.ndpp-smx-subgrouprow td {
    background: #fff;
    font-size: .76rem;
    font-weight: 600;
    color: #6b7280;
}

.ndpp-datatable.ndpp-smx-table table.table tbody tr.ndpp-smx-subgrouprow td {
    /*  padding: .55rem .85rem .25rem;*/
    padding-inline-start: 1.35rem;
    border-bottom: 0;
}

.ndpp-smx-subgrouprow td::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-inline-start: 2px solid #d3d9df;
    border-bottom: 2px solid #d3d9df;
    border-end-start-radius: 6px;
    vertical-align: 1px;
    margin-inline-end: .5rem;
}

.ndpp-smx-pickrow {
    cursor: pointer;
}

    .ndpp-smx-pickrow:hover td {
        background: #fafbfc;
    }

    .ndpp-smx-pickrow.is-picked td {
        background: #f6f8fa;
    }

.ndpp-lbl-add .ndpp-browse-ico + .ndpp-add-ico {
    margin-inline: 2px 0;
}

.ndpp-add-ico.ndpp-browse-ico:hover > .ndpp-ico {
    transform: none;
}

.ndpp-smx-dialog__link {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: .3rem;
    margin-inline: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--danger-btn-button, #d25055);
    cursor: pointer;
}

.ndpp-smx-dialog__head .close {
    font-size: 1.25rem;
    line-height: 1;
    padding: .1rem .2rem;
    margin: 0;
    border: 0;
    outline: none;
    box-shadow: none;
}

    .ndpp-smx-dialog__head .close:focus,
    .ndpp-smx-dialog__head .close:active {
        border: 0;
        outline: none;
        box-shadow: none;
    }

.ndpp-smx-dialog__link > .ndpp-ico {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

.ndpp-smx-dialog__link:hover,
.ndpp-smx-dialog__link:focus {
    text-decoration: underline;
    outline: none;
}

/*.ndpp-smx-pickrow.is-picked td:first-child {
    box-shadow: inset 3px 0 0 var(--danger-btn-button, #d25055);
}

[dir="rtl"] .ndpp-smx-pickrow.is-picked td:first-child {
    box-shadow: inset -3px 0 0 var(--danger-btn-button, #d25055);
}*/

.ndpp-smx-pickcheck {
    margin: 0;
    display: inline-flex;
    vertical-align: middle;
}

.lang-switch-container {
    display: inline-flex;
    background-color: #f1f5f9;
    padding: 3px;
    border-radius: 20px;
}

.modal-lg-consequence {
    max-width: 850px !important;
    width: 90% !important;
    margin: 1.75rem auto;
}

    .modal-lg-consequence .modal-body {
        padding: 20px 30px !important;
    }

    .modal-lg-consequence .form-group label {
        margin-bottom: 8px;
        font-weight: 600;
    }

    .modal-lg-consequence .form-control,
    .modal-body .form-control {
        border: 1px solid #dcdfe6;
        border-radius: 8px;
        transition: all 0.25s ease-in-out;
        outline: none !important;
    }

        .modal-lg-consequence .form-control:focus,
        .modal-body .form-control:focus {
            border-color: #00a898 !important;
            box-shadow: 0 0 0 3px rgba(0, 168, 152, 0.18) !important;
            background-color: #ffffff;
        }

.new-data-custom-textarea {
    resize: vertical;
    line-height: 1.6;
}


.new-pdpa-tag-legal-clean-wrapper {
    font-size: 12px;
    margin-top: 6px;
}

.new-pdpa-tag-legal-clean-title {
    font-weight: 500;
    color: #6c757d;
}

.new-pdpa-tag-legal-tag {
    display: inline-flex;
    align-items: center;
    background-color: #f1f5f9;
    color: #334155;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 12px;
    margin-right: 6px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}

    .new-pdpa-tag-legal-tag:hover {
        background-color: #e2e8f0;
    }

.new-pdpa-tag-legal-tag-more {
    background-color: #e6f7f5 !important;
    color: #00a898 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 4px;
    line-height: normal;
}

    .new-pdpa-tag-legal-tag-more:hover,
    .new-pdpa-tag-legal-tag-more:focus {
        background-color: #00a898 !important;
        color: #ffffff !important;
    }

.new-pdpa-tag-legal-dropdown-clean {
    min-width: 300px;
    border-radius: 8px !important;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.new-pdpa-tag-legal-clean-list {
    max-height: 220px;
    overflow-y: auto;
}

.new-pdpa-tag-legal-clean-item {
    font-size: 12px;
    color: #475569;
    padding: 6px 0;
    border-bottom: 1px solid #f8fafc;
    display: flex;
    align-items: center;
}

    .new-pdpa-tag-legal-clean-item:last-child {
        border-bottom: none;
    }

.new-pdpa-tag-badge-dot {
    width: 6px;
    height: 6px;
    background-color: #00a898;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    flex-shrink: 0;
}

.pdpa-legal-select-btn {
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    transition: all 0.2s ease;
}

    .pdpa-legal-select-btn:hover,
    .pdpa-legal-select-btn:focus {
        background-color: #ffffff;
        border-color: #00a898;
        box-shadow: 0 2px 8px rgba(0, 168, 152, 0.15);
    }

    .pdpa-legal-select-btn .style-arrow {
        font-size: 10px;
        transition: transform 0.2s ease;
    }

.dropdown.show .pdpa-legal-select-btn .style-arrow {
    transform: rotate(180deg);
}

.text-teal {
    color: #00a898 !important;
}

.badge-teal-soft {
    background-color: rgba(0, 168, 152, 0.1);
    color: #00a898;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
}

.badge-teal {
    background-color: #00a898;
    color: #ffffff;
    font-weight: 500;
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 11px;
}

.pdpa-legal-dropdown-menu {
    width: 380px;
    border-radius: 10px;
    margin-top: 6px !important;
}

.pdpa-legal-item {
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f1f5f9;
}

    .pdpa-legal-item:last-child {
        border-bottom: none;
    }

    .pdpa-legal-item:hover {
        background-color: #f0fdfa;
    }

.pdpa-legal-item-list::-webkit-scrollbar {
    width: 5px;
}

.pdpa-legal-item-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.new-pdpa-text-teal {
    color: #00a898 !important;
}

.new-pdpa-text-muted-dark {
    color: #64748b !important;
}

.new-pdpa-border-teal {
    border-color: #00a898 !important;
}

.new-pdpa-status-pill {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .new-pdpa-status-pill:hover {
        background-color: #ffffff;
        border-color: #00a898;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

.new-pdpa-badge-teal-pill {
    background-color: #00a898;
    color: #ffffff;
    font-weight: 600;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
}

.new-pdpa-popover-card {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 380px;
    background: #ffffff;
    z-index: 1050;
    margin-top: 8px;
}

.new-pdpa-popover-wrapper:hover .new-pdpa-popover-card {
    display: block;
    animation: newPdpaFadeIn 0.2s ease-in-out;
}

.new-pdpa-popover-list {
    max-height: 280px;
    overflow-y: auto;
}

.new-pdpa-popover-item {
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 12px;
}

    .new-pdpa-popover-item:last-child {
        border-bottom: none;
    }

    .new-pdpa-popover-item .new-pdpa-legal-no {
        font-weight: 700;
        color: #00a898;
        display: inline-block;
        width: 55px;
    }

    .new-pdpa-popover-item .new-pdpa-legal-desc {
        color: #1e293b;
        font-weight: 500;
    }

@keyframes newPdpaFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* tag legal page : survicepurpose */


.header-text-group.ndpp-headid {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ndpp-headid__text {
    min-width: 0;
}

.ndpp-modchip {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--danger-btn-button);
    background: #f3f4f6;
    background: color-mix(in srgb, var(--danger-btn-button) 12%, #fff);
}

@media (max-width: 575px) {
    .ndpp-modchip {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        font-size: 15px;
        border-radius: 10px;
    }
}

.translate-page .tp-col {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.translate-page .ndpp-datatable table.table thead th {
    padding: .75rem 1.2rem;
}

.translate-page .tp-miss {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 1.3rem;
    padding: 0 .45rem 0 .4rem;
    border: 0;
    border-radius: 999px;
    background: #fff4e5;
    color: #b45309;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .13s ease, color .13s ease;
}

    .translate-page .tp-miss:hover,
    .translate-page .tp-miss:focus {
        background: #fde7c6;
        color: #92400e;
        outline: none;
    }

.translate-page .tp-miss__dot {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background: #dd9b34;
}

.translate-page .tp-done {
    display: inline-flex;
    align-items: center;
    color: #8fbf9f;
}

    .translate-page .tp-done .ndpp-ico {
        width: 13px;
        height: 13px;
    }

.translate-page .tp-gridbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: 1rem;
}

.translate-page .tp-gridbar__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

[dir="rtl"] .translate-page .tp-gridbar__end {
    margin-left: 0;
    margin-right: auto;
}

.translate-page .ndpp-datatable table.table thead th + th,
.translate-page .ndpp-datatable table.table tbody td + td {
    border-left: 1px solid #eef0f3;
}

.translate-page .ndpp-datatable table.table tbody td:first-child {
    box-shadow: inset 1px 0 0 0 #eef0f3;
}

.translate-page .ndpp-datatable table.table tbody td:last-child {
    box-shadow: inset -1px 0 0 0 #eef0f3;
}

.translate-page .ndpp-datatable table.table tbody tr:last-child > td {
    border-bottom: 1px solid #eef0f3;
}

.translate-page .ndpp-input.is-key {
    font-weight: 500;
}

.translate-page .ndpp-datatable table.table td .ndpp-input {
    min-width: 250px;
    height: 2.6rem;
    padding: .5rem .7rem;
    font-size: .875rem;
}

.translate-page .ndpp-datatable table.table tbody td {
    padding: 0.75rem 1.2rem;
}

.translate-page .ndpp-input.is-empty {
    border-color: #f3e0bd;
    background: #fffaf0;
}

.translate-page .ndpp-input.is-dirty {
    border-color: var(--danger-btn-button);
    box-shadow: inset 2px 0 0 0 var(--danger-btn-button);
}

[dir="rtl"] .translate-page .ndpp-input.is-dirty {
    box-shadow: inset -2px 0 0 0 var(--danger-btn-button);
}

/* แถวที่เพิ่งเพิ่ม */
.translate-page .ndpp-datatable table.table tbody tr.is-newrow > td {
    background: #f9fafb;
}

.translate-page .ndpp-datatable table.table th:first-child,
.translate-page .ndpp-datatable table.table td:first-child {
    min-width: 280px;
    max-width: 380px;
}

.translate-page .ndpp-datatable table.table td.is-emptycell {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 2.4rem 1rem;
    text-align: center;
    color: var(--ndpp-muted);
}

body:has(.translate-page) {
    height: auto;
    overflow: visible;
}



.lvl-page .lvl-split {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

@media (max-width: 991px) {
    .lvl-page .lvl-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lvl-page .lvl-rail {
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}


.lvl-page .lvl-rail__head {
    padding: 0.9rem;
    border-bottom: 1px solid var(--ndpp-line, #eef0f3);
    background: #fff;
}

.lvl-page .lvl-rail__list {
    margin: 0;
    padding: .9rem .9rem;
    list-style: none;
}

.lvl-page .lvl-railitem {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    text-align: start;
    font-size: .86rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .lvl-page .lvl-railitem:hover {
        background: #f6f7f9;
    }

    .lvl-page .lvl-railitem.is-on {
        font-weight: 600;
    }

        .lvl-page .lvl-railitem.is-on .lvl-railitem__name {
            color: var(--danger-btn-button) !important;
        }

        .lvl-page .lvl-railitem.is-on .lvl-railitem__more {
            color: var(--danger-btn-button) !important;
        }

.lvl-page .lvl-railitem__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lvl-page .lvl-rail__empty {
    padding: 1.2rem .75rem;
    text-align: center;
    font-size: .82rem;
    color: var(--ndpp-muted);
}

.lvl-page .lvl-pane {
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    background: #fff;
    padding: 1.1rem 1.2rem 1.3rem;
}

.lvl-page .lvl-pane__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding-bottom: 1rem 2rem;
    border-bottom: 1px solid var(--ndpp-line, #eef0f3);
}

.lvl-page .lvl-pane__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.lvl-page .lvl-pane__sub {
    margin: .1rem 0 0;
    font-size: .8rem;
    color: var(--ndpp-muted);
}

.lvl-page .lvl-pane__actions {
    display: flex;
    align-items: center;
    gap: .45rem;
}

    .lvl-page .lvl-pane__actions .btn .ndpp-ico {
        width: 16px;
        height: 16px;
    }

.lvl-page .lvl-pane__empty {
    padding: 3.5rem 1rem;
    text-align: center;
    color: var(--ndpp-muted);
    font-size: .88rem;
}

.lvl-page .lvl-pane .ndpp-detail-panel {
    border: 0;
    border-radius: 0;
    padding: 0rem 0 0;
    background: transparent;
}

.lvl-page .lvl-treebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: .9rem 0;
}

.lvl-page .lvl-treebar__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

    .lvl-page .lvl-treebar__end .btn {
        height: 36px;
        display: inline-flex;
        align-items: center;
        padding: 0 .85rem;
        font-size: .82rem;
        font-weight: 600;
    }

.lvl-page .lvl-treebar .lvl-seg {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 3px;
    gap: 2px;
    background: #f1f3f6;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 9px;
}

    .lvl-page .lvl-treebar .lvl-seg > button {
        border: 0;
        background: transparent;
        border-radius: 7px;
        padding: 0 .7rem;
        height: 100%;
        font-size: .8rem;
        font-weight: 600;
        color: var(--ndpp-muted, #6b7280);
        white-space: nowrap;
        cursor: pointer;
        transition: background .12s ease, color .12s ease;
    }

        .lvl-page .lvl-treebar .lvl-seg > button:hover {
            color: var(--ndpp-ink, #1f2329);
        }

        /* กัน focus ring ของ browser/Bootstrap โผล่เป็นขอบตอนคลิก — สถานะ is-on บอกตัวเลือกอยู่แล้ว */
        .lvl-page .lvl-treebar .lvl-seg > button:focus,
        .lvl-page .lvl-treebar .lvl-seg > button:focus-visible,
        .lvl-page .lvl-treebar .lvl-seg > button:active {
            outline: 0;
            box-shadow: none;
        }

        .lvl-page .lvl-treebar .lvl-seg > button.is-on:focus,
        .lvl-page .lvl-treebar .lvl-seg > button.is-on:active {
            box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
        }

        .lvl-page .lvl-treebar .lvl-seg > button.is-on {
            background: #fff;
            color: var(--ndpp-ink, #1f2329);
            box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
        }

.lvl-page .lvl-tree {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    overflow: hidden;
}

.lvl-page .lvl-tree__group + .lvl-tree__group {
    border-top: 1px solid var(--ndpp-line, #eef0f3);
}

.lvl-page .lvl-tree__row {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .9rem 1.75rem;
    background: #f8f9fb;
}

.lvl-page .lvl-tree__caret {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ndpp-muted);
    cursor: pointer;
}

    .lvl-page .lvl-tree__caret:hover {
        background: #eef0f3;
    }

    /* ยุบ = ชี้ไปทางลูกศรอ่าน (ขวาใน LTR) / กาง = ชี้ลง */
    .lvl-page .lvl-tree__caret > .ndpp-ico {
        width: 14px;
        height: 14px;
        transform: rotate(-90deg);
        transition: transform .15s ease;
    }

[dir="rtl"] .lvl-page .lvl-tree__caret > .ndpp-ico {
    transform: rotate(90deg);
}

.lvl-page .lvl-tree__row.is-open .lvl-tree__caret > .ndpp-ico,
[dir="rtl"] .lvl-page .lvl-tree__row.is-open .lvl-tree__caret > .ndpp-ico {
    transform: rotate(0deg);
}

.lvl-page .lvl-tree__gcheck {
    flex: 0 0 auto;
}

.lvl-page .lvl-tree__name {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
    font-size: small;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
    cursor: pointer;
}

    .lvl-page .lvl-tree__name:focus,
    .lvl-page .lvl-tree__name:focus-visible,
    .lvl-page .lvl-tree__caret:focus,
    .lvl-page .lvl-tree__caret:focus-visible {
        outline: none;
        box-shadow: none;
    }

.lvl-page .lvl-tree__gname {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lvl-page .lvl-tree__n {
    flex: 0 0 auto;
    margin-inline-start: auto; /* ดันตัวนับไปชิดขวาสุดของแถว */
    min-width: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    background: #eef1f5;
    color: #6b7280;
    font-size: .72rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.lvl-page .lvl-tree__children {
    margin: 0;
    padding: .35rem 3.35rem 0.55rem;
    padding-inline-start: 3.1rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.lvl-page .lvl-tree__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .7rem .4rem;
    border-radius: 7px;
    font-size: small;
    font-weight: 400;
    color: #2b2f38;
}

.lvl-page label.lvl-tree__item:hover {
    background: #f6f7f9;
}

.lvl-page .lvl-tree__item > .ndpp-check__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    font-weight: inherit;
}

.lvl-page .lvl-tree__item > .ndpp-check__box {
    order: 2;
}

.lvl-page .lvl-tree__item--ro > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lvl-page .lvl-tree__item--ro > .ndpp-ico {
    flex: 0 0 auto;
    order: 2;
    width: 16px; /* base .ndpp-ico = 9px เล็กเกิน — ขยายให้สมดุลกับ checkbox 20px */
    height: 16px;
    color: var(--danger-btn-button);
}

.lvl-page .ndpp-check.is-all > .ndpp-check__box {
    background: var(--danger-btn-button);
    border-color: var(--danger-btn-button);
}

    .lvl-page .ndpp-check.is-all > .ndpp-check__box > svg {
        stroke-dashoffset: 0;
    }

.lvl-page .ndpp-check.is-partial > input:not(:checked) + .ndpp-check__box {
    background: color-mix(in srgb, var(--danger-btn-button) 14%, #fff);
    border-color: var(--danger-btn-button);
    position: relative;
}

    .lvl-page .ndpp-check.is-partial > input:not(:checked) + .ndpp-check__box::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 10px;
        height: 2.4px;
        border-radius: 2px;
        background: var(--danger-btn-button);
        transform: translate(-50%, -50%);
    }

.lvl-page .lvl-search {
    position: relative;
    width: 240px;
    max-width: 100%;
}

.lvl-page .lvl-rail__head .lvl-search {
    width: 100%;
}

.lvl-page .lvl-search > .ndpp-ico {
    position: absolute;
    top: 50%;
    inset-inline-start: .65rem;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: var(--ndpp-muted);
    pointer-events: none;
}

.lvl-page .lvl-search > .ndpp-input {
    height: 36px;
    padding: 0 .8rem;
    padding-inline-start: 2.15rem;
    padding-inline-end: 2.1rem; /* กันข้อความชนปุ่ม × */
    font-size: .82rem;
}

.lvl-page .lvl-search > .lvl-search__clear,
.ndpp-wmodal .lvl-search > .lvl-search__clear {
    position: absolute;
    top: 50%;
    inset-inline-end: .4rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ndpp-muted);
    cursor: pointer;
}

    .lvl-page .lvl-search > .lvl-search__clear:hover,
    .ndpp-wmodal .lvl-search > .lvl-search__clear:hover {
        background: #eef0f3;
        color: var(--ndpp-ink, #1f2329);
    }

    .lvl-page .lvl-search > .lvl-search__clear > .ndpp-ico,
    .ndpp-wmodal .lvl-search > .lvl-search__clear > .ndpp-ico {
        width: 12px;
        height: 12px;
    }

    .lvl-page .lvl-search > .lvl-search__clear:focus,
    .lvl-page .lvl-search > .lvl-search__clear:focus-visible,
    .ndpp-wmodal .lvl-search > .lvl-search__clear:focus,
    .ndpp-wmodal .lvl-search > .lvl-search__clear:focus-visible {
        outline: none;
        box-shadow: none;
    }

.lvl-page .lvl-empty {
    margin: 1.4rem 0 .4rem;
    text-align: center;
    font-size: .84rem;
    color: var(--ndpp-muted);
}

.lvl-page .lvl-fptable .ndpp-datatable {
    border: 0;
    padding: 0;
}

.lvl-page .ndpp-tabs > .nav-tabs > li > a .lvl-tab-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-start: 6px;
    border-radius: 50%;
    background: var(--danger-btn-button);
    vertical-align: middle;
}

@media (min-width: 992px) {
    .lvl-page .lvl-fptable .table-responsive {
        overflow-x: visible;
    }

    .lvl-page .lvl-fptable table.table thead th {
        position: sticky;
        top: 66px;
        z-index: 2;
    }
}

.lvl-page .lvl-fptable table.table tbody td {
    padding-top: 1.55rem;
    padding-bottom: 1.55rem;
}

.lvl-page .lvl-fptable .lvl-fpcol {
    width: 1%;
    min-width: 76px; /* ให้คอลัมน์ action มีพื้นที่หายใจ ไม่บีบชิดกัน */
    white-space: nowrap;
    text-align: center;
}

.lvl-page .lvl-fptable .lvl-fpcol__all {
    display: block;
    margin-top: 2px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--danger-btn-button);
    cursor: pointer;
}

.lvl-page .lvl-fptable .ndpp-check {
    gap: 0;
}

.lvl-page .lvl-fptable .lvl-fpcol__ro {
    width: 16px; /* base .ndpp-ico = 9px เล็กเกิน — ให้เท่ากับ ✓ ในแท็บ Menu Access */
    height: 16px;
    color: var(--danger-btn-button);
}

/* ── Function Privileges : group band (แถวกลุ่ม) ให้ต่างจากแถวหน้าอย่างชัด ── */
/* แถวกลุ่ม = แถบสีเทาเต็มความกว้าง + ชื่อกลุ่มตัวหนา + chevron ; แถวหน้า = พื้นขาว ย่อหน้า มี checkbox */
.lvl-page .lvl-fptable .pm-fp-grouprow > td {
    padding: .6rem 1.25rem;
    background: #f8f9fb;
    border-top: 1px solid var(--ndpp-line, #eef0f3);
}

    .lvl-page .lvl-fptable .pm-fp-grouprow > td > .lvl-tree__caret {
        vertical-align: middle;
    }

.lvl-page .lvl-fptable .pm-fp-grouprow .lvl-tree__gname {
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
    vertical-align: middle;
}

/* chevron: ยุบ = ชี้ขวา, กาง = ชี้ลง (ใช้ base .lvl-tree__caret rotate -90deg อยู่แล้ว) */
.lvl-page .lvl-fptable .pm-fp-grouprow.is-open .lvl-tree__caret > .ndpp-ico,
[dir="rtl"] .lvl-page .lvl-fptable .pm-fp-grouprow.is-open .lvl-tree__caret > .ndpp-ico {
    transform: rotate(0deg);
}

/* select-all ระดับกลุ่ม — ลิงก์เล็กต่อท้ายชื่อกลุ่ม (คนละที่กับ All ของแถวหน้า) */
.lvl-page .lvl-fptable .pm-fp-groupall {
    margin-inline-start: .75rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--danger-btn-button);
    cursor: pointer;
    vertical-align: middle;
}

/* แถวหน้า (menu) : ย่อหน้าให้เห็นว่าอยู่ใต้กลุ่ม + แถวเตี้ยลง (มีเป็นร้อยหน้า) */
.lvl-page .lvl-fptable .pm-fp-pagerow > td {
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.lvl-page .lvl-fptable .pm-fp-pagename {
    display: inline-block;
    padding-inline-start: 2.4rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
}

.lvl-page .lvl-fptable .pm-fp-pagerow:hover > td {
    background: #fafbfc;
}

/* select-all affordance : inline ข้างชื่อ (ไม่ห้อยใต้ชื่อ) — header/group เห็นตลอด, row โผล่ตอน hover */
.lvl-page .lvl-fptable thead th .lvl-fpcol__all {
    display: inline-block;
    margin: 0 0 0 .6rem;
    vertical-align: middle;
}

.lvl-page .lvl-fptable .pm-fp-pagerow .lvl-fpcol__all {
    display: inline-block;
    margin: 0 0 0 .6rem;
    font-size: .7rem;
    color: var(--ndpp-muted);
    opacity: 0;
    transition: opacity .12s ease;
}

    .lvl-page .lvl-fptable .pm-fp-pagerow:hover .lvl-fpcol__all,
    .lvl-page .lvl-fptable .pm-fp-pagerow .lvl-fpcol__all:focus {
        opacity: 1;
        color: var(--danger-btn-button);
        text-decoration: underline;
    }

/* ── Privilege Management : Admin sub-sections (Group → Sub-group → page) ── */
/* Menu Access tab — sub-group band indented under the group, pages indented under the sub */
.lvl-page .lvl-tree__subs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lvl-page .lvl-tree__subgroup + .lvl-tree__subgroup {
    border-top: 1px solid var(--ndpp-line, #eef0f3);
}

.lvl-page .lvl-tree__row--sub {
    padding: .55rem 1.75rem;
    padding-inline-start: 3.1rem;
    background: #fdfdfe;
}

    .lvl-page .lvl-tree__row--sub .lvl-tree__name {
        font-weight: 500;
    }

.lvl-page .lvl-tree__children--sub {
    padding-inline-start: 4.6rem;
}

/* Function Privileges tab — sub-section band + deeper page indent */
.lvl-page .lvl-fptable .pm-fp-subrow > td {
    padding: .5rem 1.25rem;
    padding-inline-start: 2.6rem;
    background: #fdfdfe;
    border-top: 1px solid var(--ndpp-line, #eef0f3);
}

.lvl-page .lvl-fptable .pm-fp-subrow .lvl-tree__gname {
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
    vertical-align: middle;
}

.lvl-page .lvl-fptable .pm-fp-subrow.is-open .lvl-tree__caret > .ndpp-ico,
[dir="rtl"] .lvl-page .lvl-fptable .pm-fp-subrow.is-open .lvl-tree__caret > .ndpp-ico {
    transform: rotate(0deg);
}

.lvl-page .lvl-fptable .pm-fp-pagerow--sub .pm-fp-pagename {
    padding-inline-start: 4rem;
}

/* AutoGateFP (app.js) hides action buttons the current page's function privileges don't allow */
.nsdx-fp-hidden {
    display: none !important;
}

.lvl-page .lvl-pane__head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    margin: -1.1rem -1.2rem 0;
    padding: 1.2rem 1.7rem;
    border-radius: 12px 12px 0 0;
}

.lvl-page .lvl-savebadge {
    display: inline-block;
    min-width: 18px;
    margin-inline-start: 7px;
    padding: 0 5px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .25);
    font-size: .72rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.lvl-page .lvl-hint {
    font-size: .8rem;
    color: var(--ndpp-muted);
}

.lvl-page .lvl-modal-sub,
.ndpp-wmodal .lvl-modal-sub {
    margin: .15rem 0 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ndpp-muted);
}

.ndpp-wmodal .lvl-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 46vh;
    overflow-y: auto;
}

.ndpp-wmodal .lvl-railitem {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    text-align: start;
    font-size: .86rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
    cursor: pointer;
}

    .ndpp-wmodal .lvl-railitem:hover {
        background: #f6f7f9;
        border-color: var(--ndpp-line, #e2e5e9);
    }

.ndpp-wmodal .lvl-railitem__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ไอคอน copy ท้ายแถวในเมนู Copy from — base 9px เล็กเกิน */
.ndpp-wmodal .lvl-railitem > .ndpp-ico {
    width: 14px;
    height: 14px;
}

.ndpp-wmodal .lvl-search {
    position: relative;
}

    .ndpp-wmodal .lvl-search > .ndpp-ico {
        position: absolute;
        top: 50%;
        inset-inline-start: .65rem;
        width: 14px;
        height: 14px;
        transform: translateY(-50%);
        color: var(--ndpp-muted);
        pointer-events: none;
    }

    .ndpp-wmodal .lvl-search > .ndpp-input {
        height: 38px;
        padding: 0 .8rem;
        padding-inline-start: 2.15rem;
        padding-inline-end: 2.1rem; /* กันข้อความชนปุ่ม × */
        font-size: .82rem;
    }

.lvl-page .lvl-railitem {
    align-items: flex-start;
}

.lvl-page .lvl-railitem__body {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.lvl-page .lvl-railitem__name {
    display: block;
}

/* แถวชื่อ : จุด dirty (หน้าชื่อ) + ชื่อ — จุดโผล่เฉพาะการ์ดที่เลือกและมีการแก้ค้าง */
.lvl-page .lvl-railitem__namerow {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

    .lvl-page .lvl-railitem__namerow > .lvl-railitem__name {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px;
    }

.lvl-page .lvl-railitem__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger-btn-button);
}

/* ── สถิติสรุปบนการ์ด rail : ข้อความสั้นบรรทัดเดียวแบบจาง (Users: 13 | Menus: 121) ── */
.lvl-page .lvl-railitem__stats {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
    font-weight: 400;
    color: #9aa1a9;
    font-variant-numeric: tabular-nums;
}

/* ── แถบ % ความครอบคลุมเมนู ── */
.lvl-page .lvl-railitem__cov {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: 5px;
}

.lvl-page .lvl-railitem__covtrack {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.lvl-page .lvl-railitem__covbar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #00a898;
    transition: width .25s ease, background-color .25s ease;
}

    .lvl-page .lvl-railitem__covbar.is-low {
        background: #ef4444;
    }

    .lvl-page .lvl-railitem__covbar.is-mid {
        background: #f59e0b;
    }

    .lvl-page .lvl-railitem__covbar.is-high {
        background: #00a898;
    }

.lvl-page .lvl-railitem__covpct {
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 700;
    color: var(--ndpp-muted);
    font-variant-numeric: tabular-nums;
}

    .lvl-page .lvl-railitem__covpct.is-low {
        color: #ef4444;
    }

    .lvl-page .lvl-railitem__covpct.is-mid {
        color: #f59e0b;
    }

    .lvl-page .lvl-railitem__covpct.is-high {
        color: #00a898;
    }

/* ── ปุ่ม kebab (quick actions) มุมขวาการ์ด — โผล่ตอน hover/focus ── */
.lvl-page .lvl-railitem__more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ndpp-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease;
}

    .lvl-page .lvl-railitem__more > .ndpp-ico {
        width: 14px;
        height: 14px;
    }

    .lvl-page .lvl-railitem:hover .lvl-railitem__more,
    .lvl-page .lvl-railitem.is-on .lvl-railitem__more,
    .lvl-page .lvl-railitem__more:focus-visible {
        opacity: 1;
    }

    .lvl-page .lvl-railitem__more:hover {
        background: #e9ecf0;
        color: var(--ndpp-ink, #1f2329);
    }

    .lvl-page .lvl-railitem__more:focus,
    .lvl-page .lvl-railitem__more:focus-visible {
        outline: none;
        box-shadow: none;
    }

/* การ์ดเป็น div[role=button] — เอา focus ring ดำของ browser ออกเหมือนปุ่มอื่นในหน้า */
.lvl-page .lvl-railitem:focus,
.lvl-page .lvl-railitem:focus-visible {
    outline: none;
    box-shadow: none;
}


body:has(.dsworklogform) {
    height: auto;
    overflow: visible;
}

/* the data-subject rows are click-to-select — signal it */
.dsworklogform .table-ds-list tbody tr {
    cursor: pointer;
}

.dsworklogform .dsw-select-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ndpp-muted, #6b7280);
    font-size: .8rem;
    margin-top: 8px;
}

    .dsworklogform .dsw-select-hint i {
        color: var(--danger-btn-button);
    }

/* inline error under the When picker */
.dsworklogform .dsw-date-error {
    display: block;
    margin-top: 6px;
    color: #d9534f;
    font-size: .8rem;
}

/* segmented radio (Select All / Select Data Subject, DC / DP / DPO) */
.dsworklogform .seg-radio {
    display: inline-flex;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

    .dsworklogform .seg-radio input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .dsworklogform .seg-radio label {
        margin: 0;
        padding: 7px 22px;
        cursor: pointer;
        font-weight: 600;
        font-size: .84rem;
        color: var(--ndpp-ink, #1f2329);
        border-left: 1px solid var(--ndpp-line, #e2e5e9);
        transition: background .15s ease, color .15s ease;
        user-select: none;
    }

        .dsworklogform .seg-radio label:first-of-type {
            border-left: 0;
        }

        .dsworklogform .seg-radio label:hover {
            background: #f4f6f8;
        }

    .dsworklogform .seg-radio input:checked + label,
    .dsworklogform .seg-radio input:checked + label:hover {
        background: var(--danger-btn-button);
        color: #fff;
    }

    .dsworklogform .seg-radio input:disabled + label,
    .dsworklogform .seg-radio input:disabled + label:hover {
        color: #aab2bd;
        background: #f7f8fa;
        cursor: not-allowed;
    }

.dsworklogform .dsw-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 300px));
    gap: 12px;
}

@media (max-width: 640px) {
    .dsworklogform .dsw-choice-grid {
        grid-template-columns: 1fr;
    }
}

.dsworklogform .dsw-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 40px 14px 16px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

[dir="rtl"] .dsworklogform .dsw-choice {
    padding: 14px 16px 14px 40px;
}

.dsworklogform .dsw-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dsworklogform .dsw-choice:hover {
    border-color: #b9bdc4;
}

.dsworklogform .dsw-choice__ico {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f4f6f8;
    color: #8a929c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}

.dsworklogform .dsw-choice__title {
    display: block;
    font-weight: 600;
    font-size: .86rem;
    line-height: 1.3;
    color: var(--ndpp-ink, #1f2329);
}

.dsworklogform .dsw-choice__desc {
    display: block;
    margin-top: 2px;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--ndpp-muted, #8a919c);
}

/* round tick in the card corner */
.dsworklogform .dsw-choice__tick {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #d5dae0;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, border-color .15s ease;
}

    .dsworklogform .dsw-choice__tick svg {
        width: 10px;
        height: 10px;
        fill: none;
        stroke: #fff;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0;
        transition: opacity .15s ease;
    }

/* selected — brand ring + soft tint */
.dsworklogform .dsw-choice:has(input:checked) {
    border-color: var(--danger-btn-button);
    box-shadow: inset 0 0 0 1px var(--danger-btn-button);
    background: #fdf6f6;
    background: color-mix(in srgb, var(--danger-btn-button) 4%, #fff);
}

    .dsworklogform .dsw-choice:has(input:checked) .dsw-choice__ico {
        background: #faeeee;
        background: color-mix(in srgb, var(--danger-btn-button) 10%, #fff);
        color: var(--danger-btn-button);
    }

    .dsworklogform .dsw-choice:has(input:checked) .dsw-choice__tick {
        background: var(--danger-btn-button);
        border-color: var(--danger-btn-button);
    }

        .dsworklogform .dsw-choice:has(input:checked) .dsw-choice__tick svg {
            opacity: 1;
        }

/* disabled — until an activity is picked */
.dsworklogform .dsw-choice:has(input:disabled) {
    background: #f7f8fa;
    border-color: var(--ndpp-line, #e2e5e9);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .65;
}

    .dsworklogform .dsw-choice:has(input:disabled) .dsw-choice__ico {
        background: #eef0f3;
        color: #aab2bd;
    }

.dsworklogform .table-ds-list td.dsw-col-check {
    width: 44px;
}

.dsworklogform .dsw-rowcheck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid #cfd5dc;
    background: #fff;
    vertical-align: middle;
    transition: background .12s ease, border-color .12s ease;
}

    .dsworklogform .dsw-rowcheck svg {
        width: 11px;
        height: 11px;
        fill: none;
        stroke: #fff;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0;
        transition: opacity .12s ease;
    }

.dsworklogform .table-ds-list tbody tr:hover td {
    background: #f4f6f8;
}

.dsworklogform .table-ds-list tbody tr:hover .dsw-rowcheck {
    border-color: #b9bdc4;
}

/* แถวที่เลือก — checkbox ติ๊กสีแบรนด์ + พื้นแถว tint */
.dsworklogform .table-ds-list tbody tr.selected .dsw-rowcheck {
    background: var(--danger-btn-button);
    border-color: var(--danger-btn-button);
}

    .dsworklogform .table-ds-list tbody tr.selected .dsw-rowcheck svg {
        opacity: 1;
    }

.dsworklogform .table-ds-list tbody tr.selected td {
    background: #fdf4f4;
    background: color-mix(in srgb, var(--danger-btn-button) 5%, #fff);
}

.dsworklogform .table-ds-list tbody tr.selected:hover td {
    background: #fbecec;
    background: color-mix(in srgb, var(--danger-btn-button) 8%, #fff);
}

.pal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 12px;
    padding: 2px 0 16px;
}

.pal-stat {
    --pal-accent: #8a929c;
    --pal-accent-soft: rgba(138, 146, 156, .13);
    --pal-accent-wash: rgba(138, 146, 156, .06);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 17px 16px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 14px;
    background-color: #fff;
    background-image: linear-gradient(150deg, var(--pal-accent-wash) 0%, rgba(255, 255, 255, 0) 58%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

    .pal-stat:hover {
        border-color: var(--pal-accent);
        box-shadow: 0 6px 18px rgba(16, 24, 40, .1);
        transform: translateY(-2px);
    }

.pal-stat__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.pal-stat__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .1px;
    color: var(--ndpp-muted, #6b7280);
    overflow-wrap: anywhere;
}

.pal-stat__ico {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: -2px;
    border-radius: 50%;
    color: var(--pal-accent);
    background: var(--pal-accent-soft);
    font-size: 16px;
}

.pal-stat__body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 34px;
}

.pal-stat__value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.8px;
    color: var(--ndpp-ink, #1f2329);
    font-variant-numeric: tabular-nums;
}

.pal-stat__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--pal-accent);
    background: var(--pal-accent-soft);
    white-space: nowrap;
}

.pal-stat__chipnum {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pal-stat__sub {
    padding-top: 9px;
    border-top: 1px solid rgba(16, 24, 40, .06);
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--ndpp-muted, #9aa1a9);
}

.pal-stat--view {
    --pal-accent: #4779c4;
    --pal-accent-soft: rgba(71, 121, 196, .13);
    --pal-accent-wash: rgba(71, 121, 196, .07);
}

.pal-stat--mod {
    --pal-accent: #e0730c;
    --pal-accent-soft: rgba(224, 115, 12, .13);
    --pal-accent-wash: rgba(224, 115, 12, .07);
}

.pal-stat--export {
    --pal-accent: #7a5fc0;
    --pal-accent-soft: rgba(122, 95, 192, .13);
    --pal-accent-wash: rgba(122, 95, 192, .07);
}

.pal-stat--fail {
    --pal-accent: var(--danger-btn-button, #d25055);
    --pal-accent-soft: rgba(210, 80, 85, .13);
    --pal-accent-wash: rgba(210, 80, 85, .07);
}

.pal-stat.is-alert {
    border-color: rgba(210, 80, 85, .4);
    --pal-accent-wash: rgba(210, 80, 85, .12);
}

    .pal-stat.is-alert .pal-stat__value {
        color: var(--pal-accent);
    }

.pal-tag {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 1px 8px;
    border: 1px solid #c9cfd8;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--ndpp-muted, #6b7280);
    background: #fff;
    vertical-align: 1px;
}

.pal-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .pal-pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.pal-pill--view {
    color: #4779c4;
    background: rgba(71, 121, 196, .10);
}

.pal-pill--create {
    color: #00a898;
    background: rgba(0, 168, 152, .10);
}

.pal-pill--update {
    color: #e0730c;
    background: rgba(224, 115, 12, .10);
}

.pal-pill--delete {
    color: #dc2626;
    background: rgba(220, 38, 38, .10);
}

.pal-cat--high {
    color: #e0730c;
    border-color: rgba(224, 115, 12, .35);
}

.pal-pill--export {
    color: #7a5fc0;
    background: rgba(122, 95, 192, .10);
}

.pal-pill--consent {
    color: #0a97b5;
    background: rgba(10, 151, 181, .10);
}

.pal-pill--auth {
    color: #475569;
    background: rgba(71, 85, 105, .10);
}

.pal-2line b {
    font-weight: 600;
    display: block;
}

.pal-2line small {
    color: var(--ndpp-muted, #6b7280);
    font-size: 11.5px;
}

.pal-tagrow {
    display: block;
    margin-top: 3px;
}

    .pal-tagrow .pal-tag:first-child {
        margin-inline-start: 0;
    }

.pal-modcell {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    min-width: 0;
}

.pal-tag--attach {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-color: rgba(122, 95, 192, .45);
    color: #7a5fc0;
    background: rgba(122, 95, 192, .08);
}

    .pal-tag--attach > .ndpp-ico {
        width: 9px;
        height: 9px;
        opacity: .85;
    }

.pal-notebox {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 8px;
}

.pal-notebox--attach {
    background: rgba(122, 95, 192, .07);
}

    .pal-notebox--attach > .ndpp-ico {
        color: #7a5fc0;
    }

.pal-notebox--export {
    background: rgba(224, 115, 12, .09);
}

    .pal-notebox--export > .ndpp-ico {
        color: #e0730c;
    }

.pal-notebox > .ndpp-ico {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

.pal-notebox__text {
    min-width: 0;
    color: var(--ndpp-ink, #1f2329);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.pal-ts {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pal-ip {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #545454;
}

.pal-actor {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pal-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f3f5;
}

.table-admin-piiauditlog {
    table-layout: fixed;
}


    .table-admin-piiauditlog th:nth-child(1), .table-admin-piiauditlog td:nth-child(1) {
        width: 12%;
    }

    .table-admin-piiauditlog th:nth-child(2), .table-admin-piiauditlog td:nth-child(2) {
        width: 16%;
    }

    .table-admin-piiauditlog th:nth-child(3), .table-admin-piiauditlog td:nth-child(3) {
        width: 9%;
    }

    .table-admin-piiauditlog th:nth-child(4), .table-admin-piiauditlog td:nth-child(4) {
        width: 17%;
    }

    .table-admin-piiauditlog th:nth-child(5), .table-admin-piiauditlog td:nth-child(5) {
        width: 19%;
    }

    .table-admin-piiauditlog th:nth-child(6), .table-admin-piiauditlog td:nth-child(6) {
        width: 11%;
    }

    .table-admin-piiauditlog th:nth-child(7), .table-admin-piiauditlog td:nth-child(7) {
        width: 10%;
    }

    .table-admin-piiauditlog th:nth-child(8), .table-admin-piiauditlog td:nth-child(8) {
        width: 6%;
    }

    .table-admin-piiauditlog .pal-2line {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        min-width: 0;
    }

        .table-admin-piiauditlog .pal-2line > b,
        .table-admin-piiauditlog .pal-2line > small:not(.pal-tagrow) {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .table-admin-piiauditlog .pal-trunc {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

/* Tab System Usage Log ในหน้า Audit Trail (_SystemUsageLogTab.cshtml) — 7 คอลัมน์ ลำดับต้องตรงกับ thead */
/* ความกว้างตามข้อมูล ที่ min-width 1240px — จอแคบกว่านี้เลื่อนแนวนอนใน .ndpp-dt-xscroll แทนการบีบคอลัมน์ */
/* Timestamp 11% ≈ 136px วันเวลามีวินาที · Actor 16% avatar + username / role / IP (3 บรรทัด) · Action 25% pill 100px + ชื่อ event (เกินตัด + tooltip) */
/* Status 9% "400 Bad Request" · Page 16% ชื่อเมนู + path ของ API · Target 18% เงื่อนไข / URL / ชื่อไฟล์ · Detail 5% ปุ่มเดียว */
.table-admin-systemusagelog {
    table-layout: fixed;
    min-width: 1240px;
}

    .table-admin-systemusagelog th:nth-child(1), .table-admin-systemusagelog td:nth-child(1) {
        width: 11%;
    }

    .table-admin-systemusagelog th:nth-child(2), .table-admin-systemusagelog td:nth-child(2) {
        width: 16%;
    }

    .table-admin-systemusagelog th:nth-child(3), .table-admin-systemusagelog td:nth-child(3) {
        width: 25%;
    }

    .table-admin-systemusagelog th:nth-child(4), .table-admin-systemusagelog td:nth-child(4) {
        width: 9%;
    }

    .table-admin-systemusagelog th:nth-child(5), .table-admin-systemusagelog td:nth-child(5) {
        width: 16%;
    }

    .table-admin-systemusagelog th:nth-child(6), .table-admin-systemusagelog td:nth-child(6) {
        width: 18%;
    }

    .table-admin-systemusagelog th:nth-child(7), .table-admin-systemusagelog td:nth-child(7) {
        width: 5%;
    }

    .table-admin-systemusagelog > tbody > tr > td {
        vertical-align: middle;
    }
/* หัวตารางกึ่งกลาง — tab System Usage Log และ PDPA Log (specificity สูงกว่า [dir="rtl"] .table th ใน rtl.css จึงกลางทั้งสองทิศ) */
.ndpp-datatable table.table-admin-systemusagelog thead th,
.ndpp-datatable table.table-admin-piiauditlog thead th {
    text-align: center;
}
/* คอลัมน์ Action: ช่อง pill กว้างคงที่ ชื่อ event เริ่มตำแหน่งเดียวกันทุกแถว (ป้ายยาวสุด "Login / Auth" ≈ 96px) */
.sul-action {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sul-action__type {
    flex: 0 0 100px;
    min-width: 0;
}

    .sul-action__type .pal-pill {
        max-width: 100%;
        padding: 4px 9px;
        font-size: 11.5px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.sul-action > .sul-cell {
    flex: 1 1 auto;
}
/* IP ต้องเห็นครบ — IPv6 ยาวได้ถึง 39 ตัว ตัดด้วย ... ไม่ได้ จึงให้ขึ้นบรรทัดใหม่ได้ทุกตำแหน่ง */
.sul-cell__sub.sul-ip {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.sul-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sul-cell__main, .sul-cell__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sul-cell__main {
    color: var(--ndpp-ink, #1f2329);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

    .sul-cell__main.is-empty {
        color: var(--ndpp-muted, #6b7280);
        font-weight: 500;
    }

.sul-cell__sub {
    color: var(--ndpp-muted, #6b7280);
    font-size: 11.5px;
    line-height: 1.35;
}

.sul-cell__sub--danger {
    color: #dc2626;
    font-weight: 600;
}

.sul-actor {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .sul-actor .pal-avatar {
        flex: 0 0 auto;
    }

.sul-code {
    flex: 0 0 auto;
    padding: 0 5px;
    border: 1px solid #cbd2db;
    border-radius: 4px;
    background: #fff;
    color: #475569;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 16px;
}

.sul-mono {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 11.5px;
}

.sul-kv__value.sul-mono {
    word-break: break-all;
}
/* ตารางนี้ไม่มีช่องค้นหา — Show N entries ชิดขวา; markup เขียนเอง จึงคืน direction ที่ rtl.css กลับไว้ให้ label ของ DataTables */
.sul-dt .dataTables_wrapper .dataTables_length {
    margin-left: auto;
}

    .sul-dt .dataTables_wrapper .dataTables_length label {
        direction: ltr;
    }

[dir="rtl"] .sul-dt .dataTables_wrapper .dataTables_length {
    margin-left: 0;
    margin-right: auto;
}

    [dir="rtl"] .sul-dt .dataTables_wrapper .dataTables_length label {
        direction: rtl;
    }

.pal-notebox__link {
    color: var(--danger-btn-button);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .pal-notebox__link:hover, .pal-notebox__link:focus {
        color: var(--danger-btn-button);
        text-decoration: underline;
    }

.pal-userfilter {
    width: 160px;
    height: 34px;
}
/* modal รายละเอียด: การ์ด label/value ทุกช่องมาจาก log ตรง ๆ */
.sul-kvgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.sul-kvgrid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sul-kvgrid--flat {
    margin-bottom: 0;
}

.sul-kv {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 10px;
    background: #f8f9fb;
}

.sul-kvgrid--flat .sul-kv {
    background: #fff;
}

.sul-kv__label {
    color: var(--ndpp-muted, #6b7280);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.sul-kv__value {
    color: var(--ndpp-ink, #1f2329);
    font-size: 13px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.sul-kv__hint {
    color: var(--ndpp-muted, #6b7280);
}

.sul-section {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.sul-box {
    padding: 10px 12px;
    border: 1px dashed var(--ndpp-line, #e6e9ef);
    border-radius: 10px;
    background: #fbfcfd;
}

.sul-box--empty {
    color: var(--ndpp-muted, #6b7280);
    font-size: 13px;
}

.sul-pre {
    margin: 0;
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

@media (max-width: 767px) {
    .sul-kvgrid, .sul-kvgrid--4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pal-kv {
    display: grid;
    grid-template-columns: 170px 1fr;
    row-gap: 8px;
    column-gap: 14px;
    font-size: .85rem;
    margin: 0 0 4px;
}

    .pal-kv dt {
        color: var(--ndpp-muted, #9aa1a9);
        font-weight: 400;
        margin: 0;
    }

    .pal-kv dd {
        color: var(--ndpp-ink, #1f2329);
        font-weight: 500;
        margin: 0;
        overflow-wrap: anywhere;
    }

.pal-ua {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pal-ua__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ndpp-soft, #f2f4f7);
    color: #4b5563;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.7;
    white-space: nowrap;
}

    .pal-ua__chip > .ndpp-ico {
        width: 11px;
        height: 11px;
        opacity: .75;
    }

.pal-ua__rawbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 7px;
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    background: var(--ndpp-soft, #f8f9fb);
    padding: 15px;
}

.pal-ua__rawmain {
    flex: 1 1 auto;
    min-width: 0;
}

.pal-ua__rawlabel {
    display: block;
    margin-bottom: 3px;
    color: var(--ndpp-muted, #9aa1a9);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.pal-ua__raw {
    display: block;
    padding: 0;
    background: none;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    word-break: break-all;
    border: none;
}

.pal-ua__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ndpp-muted, #9aa1a9);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

    .pal-ua__copy:hover {
        background: rgba(0, 0, 0, .05);
        color: var(--danger-btn-button, #d25055);
    }

    .pal-ua__copy > .ndpp-ico {
        width: 13px;
        height: 13px;
    }

    .pal-ua__copy:focus {
        outline: 0;
        box-shadow: none;
    }

    .pal-ua__copy:focus-visible {
        outline: 2px solid var(--danger-btn-button, #d25055);
        outline-offset: 2px;
        border-radius: 6px;
    }

.pal-diff {
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 8px;
    overflow: hidden;
}

    .pal-diff table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        margin: 0;
    }

    .pal-diff th {
        background: #f8f9fb;
        text-align: left;
        font-size: 11.5px;
        font-weight: 600;
        color: #4b5563;
        padding: 8px 12px;
        border-bottom: 1px solid var(--ndpp-line, #e6e9ef);
    }

    .pal-diff td {
        padding: 8px 12px;
        border-bottom: 1px solid #eef0f4;
        vertical-align: top;
        font-weight: 500;
    }

    .pal-diff tr:last-child td {
        border-bottom: 0;
    }

    .pal-diff td.pal-cell-before {
        background: #fdf1f1;
        color: var(--ndpp-muted, #6b7280);
    }

    .pal-diff td.pal-cell-after {
        background: #eef8f1;
        font-weight: 500;
    }

    .pal-diff th.pal-diff__field {
        width: 32%;
    }

.pal-maskhint {
    font-size: 11.5px;
    color: var(--ndpp-muted, #6b7280);
    margin: 7px 0 0;
}

.pal-failreason {
    margin: 0;
    color: var(--danger-btn-button, #d25055);
}

.pal-note {
    margin: 0;
    font-weight: 500;
}

.pal-notelist {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .pal-notelist > li {
        position: relative;
        padding-left: 15px;
        font-weight: 500;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }

        .pal-notelist > li + li {
            margin-top: 5px;
        }

        .pal-notelist > li::before {
            content: "";
            position: absolute;
            left: 3px;
            top: .68em;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--ndpp-muted, #6b7280);
            opacity: .55;
        }

[dir="rtl"] .pal-notelist > li {
    padding-left: 0;
    padding-right: 15px;
}

    [dir="rtl"] .pal-notelist > li::before {
        left: auto;
        right: 3px;
    }

.pal-fields--sensitive,
.pal-note--sensitive,
.pal-notelist--sensitive > li {
    color: #dc2626;
    font-weight: 600;
}

    .pal-notelist--sensitive > li::before {
        background: #dc2626;
        opacity: 1;
    }

.ndpp-tag--hidden {
    display: none;
}

.ndpp-tags.is-expanded .ndpp-tag--hidden {
    display: inline-block;
}

.ndpp-tag--more {
    cursor: pointer;
    border-style: dashed;
    border-color: #cfd4dd;
    color: var(--ndpp-accent, #00a898);
    font-weight: 600;
    -webkit-user-select: none;
    user-select: none;
}

    .ndpp-tag--more:hover {
        border-color: var(--ndpp-accent, #00a898);
        color: var(--ndpp-accent, #00a898);
    }

.ndpp-cell-ellipsis--1 {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    white-space: nowrap;
    word-break: normal;
}

.table-admin-preferenceconsentdetail {
    table-layout: fixed;
}

    /* 9 คอลัมน์: Transaction Date / Data Subject (Name+Email ยุบรวม) / Activity UID / Activity / Form Name / Channel / Version / Status / View
   (ต้องนับให้ตรงกับ columns ใน admin-preferenceconsentdetail-controller.js — ขาดไป 1 = ทุกคอลัมน์หลังจากนั้นได้ width ผิดช่อง) */
    .table-admin-preferenceconsentdetail th:nth-child(1), .table-admin-preferenceconsentdetail td:nth-child(1) {
        width: 10%;
    }

    .table-admin-preferenceconsentdetail th:nth-child(2), .table-admin-preferenceconsentdetail td:nth-child(2) {
        width: 19%;
    }

    .table-admin-preferenceconsentdetail th:nth-child(3), .table-admin-preferenceconsentdetail td:nth-child(3) {
        width: 8%;
    }

    .table-admin-preferenceconsentdetail th:nth-child(4), .table-admin-preferenceconsentdetail td:nth-child(4) {
        width: 16%;
    }

    .table-admin-preferenceconsentdetail th:nth-child(5), .table-admin-preferenceconsentdetail td:nth-child(5) {
        width: 15%;
    }

    .table-admin-preferenceconsentdetail th:nth-child(6), .table-admin-preferenceconsentdetail td:nth-child(6) {
        width: 11%;
    }

    .table-admin-preferenceconsentdetail th:nth-child(7), .table-admin-preferenceconsentdetail td:nth-child(7) {
        width: 7%;
    }

    .table-admin-preferenceconsentdetail th:nth-child(8), .table-admin-preferenceconsentdetail td:nth-child(8) {
        width: 8%;
    }

    .table-admin-preferenceconsentdetail th:nth-child(9), .table-admin-preferenceconsentdetail td:nth-child(9) {
        width: 6%;
    }
/* หัวคอลัมน์ภาษาไทยยาวกว่าอังกฤษมาก (เช่น "ช่องทางการจัดเก็บข้อมูล") — nowrap ของ .ndpp-datatable
   ทำให้ล้นทับคอลัมน์ข้างเคียง ให้ตัดขึ้นบรรทัดใหม่แทน */
.ndpp-datatable table.table-admin-preferenceconsentdetail thead th {
    white-space: normal;
    vertical-align: middle;
}

.table-admin-datasubject {
    table-layout: fixed;
}

    /* 6 คอลัมน์: Created / Data Subject (Name+Email ยุบรวม) / UID / Activity / Status / Action */
    .table-admin-datasubject th:nth-child(1), .table-admin-datasubject td:nth-child(1) {
        width: 13%;
    }

    .table-admin-datasubject th:nth-child(2), .table-admin-datasubject td:nth-child(2) {
        width: 30%;
    }

    .table-admin-datasubject th:nth-child(3), .table-admin-datasubject td:nth-child(3) {
        width: 11%;
    }

    .table-admin-datasubject th:nth-child(4), .table-admin-datasubject td:nth-child(4) {
        width: 31%;
    }

    .table-admin-datasubject th:nth-child(5), .table-admin-datasubject td:nth-child(5) {
        width: 8%;
    }

    .table-admin-datasubject th:nth-child(6), .table-admin-datasubject td:nth-child(6) {
        width: 7%;
    }

    .table-admin-datasubject .ndpp-tags {
        gap: .35rem;
    }

    .table-admin-datasubject .ndpp-tag {
        white-space: normal;
        word-break: break-word;
        text-overflow: clip;
    }

/* Stakeholder — 10 คอลัมน์: Stakeholder / Role / OU / Entity / BP / Activity / Usage / Status /
   Document References / Action — รวมต้องได้ 100% ไม่งั้นคอลัมน์ท้ายไม่มีที่ แล้วเนื้อหาไปซ้อนกับ Action
   min-width: จอแคบให้เลื่อนแนวนอน (table-responsive) แทนการบีบจนป้ายล้นช่อง */
.table-admin-stakeholder {
    table-layout: fixed;
    min-width: 1280px;
}

    .table-admin-stakeholder th:nth-child(1), .table-admin-stakeholder td:nth-child(1) {
        width: 18%;
    }

    .table-admin-stakeholder th:nth-child(2), .table-admin-stakeholder td:nth-child(2) {
        width: 8%;
    }

    .table-admin-stakeholder th:nth-child(3), .table-admin-stakeholder td:nth-child(3) {
        width: 11%;
    }

    .table-admin-stakeholder th:nth-child(4), .table-admin-stakeholder td:nth-child(4) {
        width: 11%;
    }

    .table-admin-stakeholder th:nth-child(5), .table-admin-stakeholder td:nth-child(5) {
        width: 11%;
    }

    .table-admin-stakeholder th:nth-child(6), .table-admin-stakeholder td:nth-child(6) {
        width: 11%;
    }

    .table-admin-stakeholder th:nth-child(7), .table-admin-stakeholder td:nth-child(7) {
        width: 7%;
    }

    .table-admin-stakeholder th:nth-child(8), .table-admin-stakeholder td:nth-child(8) {
        width: 7%;
    }

    .table-admin-stakeholder th:nth-child(9), .table-admin-stakeholder td:nth-child(9) {
        width: 10%;
    }

    .table-admin-stakeholder th:nth-child(10), .table-admin-stakeholder td:nth-child(10) {
        width: 6%;
    }

    /* หัว "Document References" ยาวกว่าช่อง — ให้ตัดขึ้นบรรทัดใหม่แทนการล้นไปทับหัว Action */
    .table-admin-stakeholder thead th:nth-child(9) {
        white-space: normal;
        line-height: 1.3;
    }

    .table-admin-stakeholder .ndpp-tags {
        gap: .35rem;
    }

    .table-admin-stakeholder .ndpp-tag {
        white-space: normal;
        word-break: break-word;
        text-overflow: clip;
    }

/* เซลล์ระบุตัวบุคคลในตาราง — avatar + ชื่อ + อีเมล (ยุบ 2 คอลัมน์เหลือ 1) */
.ndpp-idcell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ndpp-idcell__av {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--danger-btn-button, #00a898);
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 12%, #fff);
    /*  border: 1px solid color-mix(in srgb, var(--danger-btn-button, #00a898) 28%, #fff);*/
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .2px;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
}

/* ช่องที่ใส่รูปคน (ไม่ใช่อักษรย่อ) เป็นวงกลม */
.ndpp-idcell__av--img {
    padding: 0;
    background: #fff;
    border-radius: 50%;
}

    .ndpp-idcell__av--img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ndpp-idcell__av.is-minor {
    color: #ff9800;
    background: color-mix(in srgb, #ff9800 14%, #fff);
    border-color: color-mix(in srgb, #ff9800 35%, #fff);
}

.ndpp-idcell__av .ndpp-ico {
    width: 15px;
    height: 15px;
}

.ndpp-idcell__body {
    min-width: 0;
}

/* เซลล์ที่เป็นลิงก์ต้องบอกตัวเองว่ากดได้ — ย้อมเฉพาะชื่อ (ตัวระบุหลัก) ไม่ย้อมทั้งก้อน */
a.ndpp-idcell__body {
    cursor: pointer;
}

    a.ndpp-idcell__body:hover .ndpp-idcell__name {
        color: var(--danger-btn-button);
    }

.ndpp-idcell__name,
.ndpp-idcell__sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ชื่อเป็นตัวระบุตัวบุคคลหลักของแถว เข้มกว่าคอลัมน์อื่นได้ (อีเมลด้านล่างจางไว้ตามเดิม) */
.ndpp-idcell__name {
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-datatable--pop,
.ndpp-datatable--pop .dataTables_wrapper {
    overflow: visible;
}

.ndpp-idcell__namerow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .ndpp-idcell__namerow .ndpp-idcell__name {
        flex: 0 1 auto;
    }

/* ป้าย ม.20 + การ์ดผู้ปกครองที่กางตอน hover — CSS ล้วน ไม่ผูก JS */
.ndpp-mtag {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid color-mix(in srgb, #ff9800 45%, #fff);
    color: #e58a00;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: help;
    outline: none;
}

.ndpp-mtag--static {
    cursor: default;
}

.ndpp-mtag__card {
    position: absolute;
    top: calc(100% + 8px);
    left: -6px;
    z-index: 30;
    display: none;
    flex-direction: column;
    gap: 12px;
    width: max-content;
    min-width: 250px;
    max-width: 330px;
    padding: 16px 18px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px -10px rgba(16, 24, 40, .3);
    color: var(--ndpp-ink, #1f2329);
    font-size: .78rem;
    font-weight: 400;
    white-space: normal;
    cursor: default;
}

    /* หัวลูกศรชี้ขึ้นไปที่ป้าย — สองชั้น (ขอบ + พื้น) ให้เส้นขอบการ์ดต่อเนื่อง */
    .ndpp-mtag__card::before,
    .ndpp-mtag__card::after {
        content: "";
        position: absolute;
        left: 16px;
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
    }

    .ndpp-mtag__card::before {
        top: -6px;
        background: var(--ndpp-line, #e6e9ef);
    }

    .ndpp-mtag__card::after {
        top: -5px;
        background: #fff;
    }

.ndpp-mtag__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ndpp-mtag__av {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--danger-btn-button, #00a898);
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--danger-btn-button, #00a898) 28%, #fff);
}

    .ndpp-mtag__av .ndpp-ico {
        width: 20px;
        height: 20px;
    }

.ndpp-mtag__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ndpp-mtag:hover .ndpp-mtag__card,
.ndpp-mtag:focus-within .ndpp-mtag__card {
    display: flex;
}

.ndpp-mtag__hd {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ndpp-line, #e6e9ef);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ndpp-muted, #6b7280);
}

.ndpp-mtag__nm {
    font-weight: 600;
    font-size: .84rem;
    line-height: 1.4;
}

.ndpp-mtag__em {
    color: var(--ndpp-muted, #6b7280);
}

/* จุดสีนำหน้าตัวเลือกใน dropdown (ผ่าน templateResult) */
.ndpp-optdot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    vertical-align: middle;
}

    .ndpp-optdot.is-minor {
        background: #ff9800;
    }

    .ndpp-optdot.is-adult {
        background: var(--danger-btn-button, #00a898);
    }

[dir="rtl"] .ndpp-optdot {
    margin-right: 0;
    margin-left: 7px;
}

/* การ์ดผู้ปกครอง: กรณียังไม่ได้ระบุผู้ปกครอง (ข้อมูลไม่ครบตาม ม.20) */
.ndpp-mtag__av.is-warn {
    color: #ff9800;
    background: color-mix(in srgb, #ff9800 14%, #fff);
    border-color: color-mix(in srgb, #ff9800 35%, #fff);
}

.ndpp-mtag__none {
    font-weight: 600;
    color: #ff9800;
}

.ndpp-mtag__hint {
    color: var(--ndpp-muted, #6b7280);
    font-size: .74rem;
}

[dir="rtl"] .ndpp-mtag__card {
    left: auto;
    right: -6px;
}

    [dir="rtl"] .ndpp-mtag__card::before,
    [dir="rtl"] .ndpp-mtag__card::after {
        left: auto;
        right: 16px;
    }

.ndpp-idcell__sub {
    margin-top: 2px;
    color: var(--ndpp-muted, #6b7280);
    font-size: .8rem;
}

.ndpp-cell-sub {
    display: block;
    margin-top: 3px;
    color: #8a929c;
    font-size: .78rem;
    line-height: 1.35;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-cell-date {
    display: inline-block;
    line-height: 1.35;
}

    .ndpp-cell-date b {
        display: block;
        font-weight: 500;
        white-space: nowrap;
    }

    .ndpp-cell-date .ndpp-cell-sub {
        margin-top: 3px;
    }

/* ป้าย "New" ในคอลัมน์เวลาที่สร้าง — แถวที่เพิ่งถูกเพิ่ม (ดู DateHelpers.NewTag) */
/* วางเป็นบรรทัดใหม่ใต้เวลา คอลัมน์นี้กว้าง 13% ถ้าต่อข้างจะดันคอลัมน์เพี้ยน */
.ndpp-newtag {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 12%, #fff);
    color: var(--danger-btn-button, #00a898);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
}

.ndpp-cell-sub__sep {
    margin: 0 6px;
    color: #c3c9d1;
}

.ndpp-cell-sub__age {
    white-space: nowrap;
    font-weight: 500;
}

.ndpp-cell-sub__age--warn {
    color: #FF9800;
    font-weight: 500;
}

.ndpp-cell-sub__age--late {
    color: #b4383e;
    font-weight: 500;
}

.table-admin-piiauditlog thead th.sorting,
.table-admin-piiauditlog thead th.sorting_asc,
.table-admin-piiauditlog thead th.sorting_desc,
.table-admin-systemusagelog thead th.sorting_asc,
.table-admin-systemusagelog thead th.sorting_desc {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

    .table-admin-piiauditlog thead th.sorting:hover,
    .table-admin-piiauditlog thead th.sorting_asc:hover,
    .table-admin-piiauditlog thead th.sorting_desc:hover,
    .table-admin-systemusagelog thead th.sorting_asc:hover,
    .table-admin-systemusagelog thead th.sorting_desc:hover {
        color: var(--ndpp-accent, #9B1B2C);
    }

    .table-admin-piiauditlog thead th.sorting:after,
    .table-admin-piiauditlog thead th.sorting_asc:after,
    .table-admin-piiauditlog thead th.sorting_desc:after,
    .table-admin-systemusagelog thead th.sorting_asc:after,
    .table-admin-systemusagelog thead th.sorting_desc:after {
        margin-left: 8px;
        font-family: fontawesome;
        font-weight: normal;
    }

    .table-admin-piiauditlog thead th.sorting:after {
        content: "\f0dc";
        color: rgba(50, 50, 50, .5);
    }

    .table-admin-piiauditlog thead th.sorting_asc:after,
    .table-admin-systemusagelog thead th.sorting_asc:after {
        content: "\f0de";
    }

    .table-admin-piiauditlog thead th.sorting_desc:after,
    .table-admin-systemusagelog thead th.sorting_desc:after {
        content: "\f0dd";
    }

.ndpp-th-tz {
    font-weight: inherit;
    color: inherit;
    white-space: nowrap;
    letter-spacing: 0;
    text-transform: none;
}

.ds-form .ds-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 18px;
    margin: 0;
    min-height: 470px;
}

@media (max-height: 800px) {
    .ds-form .ds-grid {
        min-height: 380px;
    }
}

.ds-form .ds-grid > [class*="col-"] {
    flex: 1 1 100%;
    width: auto;
    max-width: none;
    padding: 0;
}

.ds-form .ds-grid > .col-lg-7 {
    flex: 7 1 320px;
}

.ds-form .ds-grid > .col-lg-5 {
    flex: 5 1 280px;
}

@media (max-width: 991.98px) {
    .ds-form .ds-grid > .col-lg-7,
    .ds-form .ds-grid > .col-lg-5 {
        flex: 1 1 100%;
    }
}

.ds-form .ds-card {
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    height: 100%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.ds-form .ds-card--accent {
    background: #fafbfc;
}

.ds-form .ds-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ndpp-line, #e6e9ef);
}

.ds-form .ds-card__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.ds-form .ds-divider {
    border-top: 1px dashed var(--ndpp-line, #e6e9ef);
    margin: 2px 0 14px;
}

.ds-form .ds-sub {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    color: var(--ndpp-muted, #6b7280);
}

.ds-form .ds-textarea {
    min-height: 62px;
}


/* ปุ่มพับ/กางชื่อภาษาอังกฤษ */
.ds-form .ds-collapse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: .82rem;
    font-weight: 600;
    color: var(--danger-btn-button, #d25055);
    cursor: pointer;
}

    /* .ndpp-ico--chevron ชี้ลงเป็นค่าตั้งต้น หมุน -90 = สถานะพับ (ดู master_icon_new.css) */
    .ds-form .ds-collapse:focus,
    .ds-form .ds-collapse:active {
        outline: none;
        box-shadow: none;
    }

    .ds-form .ds-collapse:focus-visible {
        text-decoration: underline;
    }

    .ds-form .ds-collapse .ndpp-ico {
        transform: rotate(-90deg);
        transition: transform .15s ease;
    }

        .ds-form .ds-collapse .ndpp-ico.is-open {
            transform: none;
        }

[dir="rtl"] .ds-form .ds-collapse .ndpp-ico {
    transform: rotate(90deg);
}

    [dir="rtl"] .ds-form .ds-collapse .ndpp-ico.is-open {
        transform: none;
    }

.ds-form .ndpp-dd__menu {
    min-width: 100%;
    width: 100%;
}

.ds-form .ndpp-dd--chips .ndpp-dd__toggle {
    gap: 8px;
    padding: 9px 2.2rem 9px .7rem;
}

.ds-form .ndpp-dd--chips .ndpp-dd__value {
    gap: 8px;
}

.ds-form .ndpp-dd__chip {
    padding: 5px 7px 5px 11px;
    border-radius: 7px;
    font-weight: 400;
    line-height: 1.5;
}

.ds-form .ds-readbox {
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 10px;
    background: #f6f8fa;
    padding: 10px 12px 0;
    margin-bottom: 14px;
}

.ds-form .ds-readbox__note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -2px -12px 10px;
    padding: 0 12px 9px;
    border-bottom: 1px solid var(--ndpp-line, #e6e9ef);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--ndpp-muted, #6b7280);
}

    .ds-form .ds-readbox__note .ndpp-ico {
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
        color: var(--danger-btn-button, #00a898);
    }

.ds-form .ds-readbox .form-group {
    margin-bottom: 10px;
}

    .ds-form .ds-readbox .form-group + .form-group {
        padding-top: 10px;
        border-top: 1px dashed var(--ndpp-line, #e6e9ef);
    }

    .ds-form .ds-readbox .form-group > label {
        margin-bottom: 4px;
        font-size: .78rem;
        color: var(--ndpp-muted, #6b7280);
    }

.ds-form .ds-missing {
    align-self: center;
    margin-right: 12px;
    font-size: .8rem;
    color: var(--danger-btn-button, #d25055);
}

[dir="rtl"] .ds-form .ds-missing {
    margin-right: 0;
    margin-left: 12px;
}

.ds-form .tb-ds-service {
    overflow-x: visible;
}

.ds-form .ndpp-tabs {
    margin-bottom: 18px;
}

.ds-form .ndpp-ds-card.ds-profile {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    gap: .85rem;
    padding: .7rem 1rem;
    margin-bottom: 16px;
    background: #fafbfc;
    border-radius: 12px;
    align-items: center;
}

.ds-form .ds-profile .ndpp-ds-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: .95rem;
    letter-spacing: 0;
    box-shadow: none;
}

    .ds-form .ds-profile .ndpp-ds-card__avatar .ndpp-ico {
        width: 22px;
        height: 22px;
    }

.ds-form .ds-profile .ndpp-ds-card__namerow {
    gap: 8px;
    margin: 0;
}

.ds-form .ds-profile .ndpp-ds-card__name {
    font-size: 1rem;
    margin: 0;
}

.ds-form .ds-profile__sub {
    margin-top: 1px;
    font-size: .78rem;
    color: var(--ndpp-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

.ds-form .ds-card__active {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}

.ds-form .ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 20px 30px;
    color: var(--ndpp-muted, #6b7280);
}

    .ds-form .ds-empty .ndpp-ico {
        width: 26px;
        height: 26px;
        margin-bottom: 12px;
        opacity: .45;
    }

.ds-form .ds-empty__text {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ds-form .ds-empty__sub {
    margin: 5px 0 0;
    font-size: .82rem;
}


.ds-form .ds-birthgrid {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 5px;
}

.ds-form .ds-birthhead {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .ds-form .ds-birthhead > label {
        margin-bottom: 0;
    }

.ds-form .ds-birthgrid > .ndpp-input {
    grid-column: 1;
    grid-row: 2;
}

.ds-form .ds-birthgrid > .ds-agechip {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
}

.ds-form .ds-agenum {
    display: inline-flex;
    align-items: baseline;
    flex: 0 0 auto;
    max-width: 100%;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef1f6;
    white-space: nowrap;
    color: #3f4a5a;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 7px;
}

.ds-form .ds-agenum__v {
    font-weight: 700;
    color: var(--ndpp-text, #303c4b);
}

.ds-form .ds-cshead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ndpp-line, #e6e9ef);
}

.ds-form .ds-cshead__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.ds-form .ds-viewtoggle {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 9px;
    background: #f4f6f9;
}

.ds-form .ds-viewtoggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ndpp-muted, #6b7280);
    font-size: .78rem;
    line-height: 1.5;
}

    .ds-form .ds-viewtoggle__btn .ndpp-ico {
        width: 13px;
        height: 13px;
    }

    .ds-form .ds-viewtoggle__btn.is-active {
        background: #fff;
        color: var(--ndpp-ink, #1f2329);
        font-weight: 600;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
    }

    .ds-form .ds-viewtoggle__btn:focus,
    .ds-form .ds-viewtoggle__btn:active {
        outline: none;
        box-shadow: none;
    }

.ds-form .ds-up__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 22px 16px;
    margin: 12px 0 0;
    border: 1.5px dashed #cfd6e0;
    border-radius: 12px;
    background: #fafbfc;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

    .ds-form .ds-up__zone:hover {
        border-color: var(--danger-btn-button, #00a898);
        background: color-mix(in srgb, var(--danger-btn-button, #00a898) 4%, #fff);
    }

    .ds-form .ds-up__zone.is-over {
        border-color: var(--danger-btn-button, #00a898);
        background: color-mix(in srgb, var(--danger-btn-button, #00a898) 8%, #fff);
    }

    .ds-form .ds-up__zone.is-slim {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 10px 14px;
    }

        .ds-form .ds-up__zone.is-slim .ndpp-ico {
            width: 16px;
            height: 16px;
        }

        .ds-form .ds-up__zone.is-slim .ds-up__main {
            font-size: .82rem;
            font-weight: 500;
        }

        .ds-form .ds-up__zone.is-slim .ds-up__hint::before {
            content: "(";
        }

        .ds-form .ds-up__zone.is-slim .ds-up__hint::after {
            content: ")";
        }

    .ds-form .ds-up__zone.is-error {
        border-color: #d9534f;
    }

    .ds-form .ds-up__zone .ndpp-ico {
        width: 24px;
        height: 24px;
        color: var(--danger-btn-button, #00a898);
    }

.ds-form .ds-up__main {
    font-size: .88rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ds-form .ds-up__hint {
    font-size: .78rem;
    color: var(--ndpp-muted, #6b7280);
}

.ds-form .ds-up__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ds-form .ds-up__err {
    margin: -6px 0 12px;
    color: #d9534f;
    font-size: .8rem;
}

.ds-form .ds-up__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 10px;
    background: #fff;
}

.ds-form .ds-up__picked {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 9px;
    background: #fff;
}

    .ds-form .ds-up__picked .ndpp-ico {
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        color: var(--ndpp-muted, #6b7280);
    }

.ds-form .ds-up__pname {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
}

.ds-form .ds-up__psize {
    flex: 0 0 auto;
    color: var(--ndpp-muted, #6b7280);
    font-size: .78rem;
}

.ds-form .ds-up__type {
    flex: 0 1 220px;
    height: 34px;
    min-height: 34px;
    padding: 2px 8px;
    font-size: .82rem;
}

    .ds-form .ds-up__type.is-error {
        border-color: #d9534f;
    }

/* ปุ่มอัปโหลดเต็มความกว้างคอลัมน์ — เป็น action เดียวของการ์ดฝั่งซ้าย */
.ds-form .ds-up__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
}

    .ds-form .ds-up__go .ndpp-ico {
        width: 15px;
        height: 15px;
    }

.ds-form .ds-up__count {
    padding: 1px 9px;
    border-radius: 999px;
    background: #eef1f6;
    color: #3f4a5a;
    font-size: .74rem;
    font-weight: 600;
}

.ds-form .ds-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ds-form .ds-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 10px;
    background: #fff;
}

.ds-form .ds-file--pending {
    flex-wrap: wrap;
    border-color: color-mix(in srgb, var(--danger-btn-button, #00a898) 45%, #fff);
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 4%, #fff);
}

.ds-form .ds-file__type {
    flex: 1 1 260px;
    min-width: 210px;
    max-width: 340px;
}

    .ds-form .ds-file__type .ndpp-dd__toggle {
        height: 34px;
        padding: 0 32px 0 12px;
        font-size: .82rem;
        align-items: center;
    }

.ds-form .ds-file__acts .ds-cs__btn {
    height: 34px;
}

.ds-form .ds-file__type.has-error .ndpp-dd__toggle {
    border-color: #d9534f;
}

.ds-form .ds-file__err {
    color: #d9534f;
}

.ds-form .ds-file__ico {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--ndpp-muted, #6b7280);
}

.ds-form .ds-file__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ds-form .ds-file__name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .86rem;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
}

.ds-form .ds-file__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: .76rem;
    color: #8a93a0;
}

    .ds-form .ds-file__meta * {
        color: inherit;
    }

.ds-form .ds-file__dot {
    opacity: .6;
}

.ds-form .ds-file__acts {
    flex: 0 0 auto;
}

.ds-form .ds-cslist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds-form .ds-cs {
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 10px;
    padding: 20px 20px;
    background: #fff;
}

    .ds-form .ds-cs.is-editing {
        border-color: color-mix(in srgb, var(--danger-btn-button, #00a898) 45%, #fff);
    }

.ds-form .ds-cs__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ds-form .ds-cs__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
    word-break: break-word;
}

.ds-form .ds-cs__edit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 8px;
    background: #fff;
    color: var(--ndpp-muted, #6b7280);
}

    .ds-form .ds-cs__edit:hover {
        border-color: var(--danger-btn-button, #00a898);
        color: var(--danger-btn-button, #00a898);
    }

    .ds-form .ds-cs__edit .ndpp-ico {
        width: 14px;
        height: 14px;
    }

/* ปุ่มบันทึก/ยกเลิก ยืนที่เดียวกับปุ่มดินสอ (สลับกัน ไม่เพิ่มบรรทัด) */
.ds-form .ds-cs__acts {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 6px;
}

.ds-form .ds-cs__btn {
    padding: 4px 12px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 8px;
    background: #fff;
    color: var(--ndpp-ink, #1f2329);
    font-size: .78rem;
    line-height: 1.5;
}

.ds-form .ds-cs__btn--save {
    border-color: var(--danger-btn-button, #00a898);
    background: var(--danger-btn-button, #00a898);
    color: #fff;
    font-weight: 600;
}

.ds-form .ds-cs__btn:disabled {
    opacity: .55;
}

.ds-form .ds-cs__btn:focus,
.ds-form .ds-cs__btn:active {
    outline: none;
    box-shadow: none;
}

.ds-form .ds-cs__st {
    flex: 0 0 auto;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.ds-form .ds-cs__st--ok {
    background: #e9f7f0;
    color: #14714a;
}

.ds-form .ds-cs__st--out {
    background: #fdecec;
    color: #b3403f;
}

.ds-form .ds-cs__st--hold {
    background: color-mix(in srgb, #ff9800 14%, #fff);
    color: #b26500;
}

.ds-form .ds-cs__st--none {
    background: #f1f3f6;
    color: #6b7280;
}

.ds-form .ds-cs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 18px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ndpp-line, #e6e9ef);
    font-size: .8rem;
}

.ds-form .ds-cs__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ds-form .ds-cs__k {
    font-size: .72rem;
    color: #8a93a0;
    font-weight: 600;
    margin-bottom: 12px !important;
}

.ds-form .ds-cs__v {
    font-size: .93rem;
    font-weight: 500;
    color: #1f2329;
}

    .ds-form .ds-cs__v * {
        color: inherit;
    }

.ds-form .ds-cs__v--empty {
    color: var(--ndpp-muted, #6b7280);
}

.ds-form .ds-cs__none {
    color: var(--ndpp-muted, #6b7280);
    font-style: italic;
}

.ds-form .ds-cs__in {
    width: 100%;
    min-width: 0;
}

    .ds-form select.ds-cs__in,
    .ds-form input.ds-cs__in,
    .ds-form .ds-cs__in.input-group,
    .ds-form .ds-cs__in > .form-control {
        height: 32px;
        min-height: 32px;
        padding: 2px 8px;
        font-size: .8rem;
        line-height: 1.4;
    }

        .ds-form .ds-cs__in.input-group > .form-control {
            height: 100%;
        }

    .ds-form .ds-cs__in .input-group-text {
        height: 100%;
        padding: 2px 9px;
    }

.ds-form .ds-cs__cell.has-error .ds-cs__in {
    border-color: #d9534f;
}

.ds-form .ds-agechip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-top: 7px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1.5;
}

.ds-form .ds-agechip__dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.ds-form .ds-agechip__main {
    font-weight: 700;
}

.ds-form .ds-agechip--minor {
    background: color-mix(in srgb, #ff9800 14%, #fff);
    color: #ff9800;
}

    .ds-form .ds-agechip--minor .ds-agechip__dot {
        background: #ff9800;
    }

.ds-form .ds-agechip--adult {
    background: #e9f7f0;
    color: #14714a;
}

    .ds-form .ds-agechip--adult .ds-agechip__dot {
        background: #16a34a;
    }

/* หน้า Edit Data Subject: แถวสถานะใต้วันเกิด + ผู้ปกครอง — อายุ / ผู้เยาว์ / สถานะยืนยันของผู้ปกครอง อยู่แถวเดียวกัน
   flex ตาม dir อยู่แล้ว ไม่ต้องมี override ใน rtl.css */
.ds-form .ds-statusrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

/* วันเกิด + ผู้ปกครอง (Edit Data Subject): สูงเท่ากันเสมอ
   ปุ่ม Guardian โหมด profile พอเลือกคนแล้วกลายเป็น 2 บรรทัด (ชื่อ + อีเมล) สูงกว่า .ndpp-input ~13px
   → ล็อกความสูงทั้งคู่ แล้วจัดเนื้อหาในปุ่มกึ่งกลางแนวตั้งแทน padding บน/ล่าง
   (0,4,0 อยู่หลัง .modal.ndpp-wmodal .ndpp-dd--form .ndpp-dd__toggle (0,4,0) จึงชนะ) */
.ds-form .ds-birthrow .ndpp-input,
.ds-form .ds-birthrow .ndpp-dd--form .ndpp-dd__toggle {
    box-sizing: border-box;
    height: 48px;
}

.ds-form .ds-birthrow .ndpp-dd--form .ndpp-dd__toggle {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.ds-form .ds-statusrow > .ds-agenum,
.ds-form .ds-statusrow > .ds-agechip {
    margin: 0;
}

/* มาตรา 20: ผู้ปกครองปฏิเสธความยินยอมของผู้เยาว์ (flag สถานะผู้ปกครอง หน้า Edit Data Subject) */
.ds-form .ds-agechip--rejected {
    background: color-mix(in srgb, #d9534f 12%, #fff);
    color: #b52b27;
}

    .ds-form .ds-agechip--rejected .ds-agechip__dot {
        background: #d9534f;
    }

/* ฟอร์มโปรไฟล์ผู้ปกครอง — เปิดจากแถวในเมนู dropdown */
.ds-form .ds-gform {
    padding: 12px 14px 0;
    margin-bottom: 14px;
    border: 1px dashed var(--ndpp-line, #e6e9ef);
    border-radius: 10px;
    background: #fbfcfd;
}

.ds-form .ds-gform__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ds-form .ds-gform__title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.ds-form .ds-gform__close {
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--ndpp-muted, #6b7280);
    cursor: pointer;
}

    .ds-form .ds-gform__close:focus,
    .ds-form .ds-gform__close:active {
        outline: none;
        box-shadow: none;
    }

.ndpp-dd--ro {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
    min-height: 28px;
    align-items: center;
}

.ndpp-dd__rochip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    background: #fff;
    color: var(--ndpp-ink, #1f2329);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .04);
}

.ndpp-dd__roempty {
    color: var(--ndpp-muted, #6b7280);
    font-size: .82rem;
}

/* select2-custom โหมด profile — แถวตัวเลือกเป็นโปรไฟล์คน (วงกลมอักษรย่อ + ชื่อ) */
.ndpp-dd--profile .ndpp-dd__avatar,
.ndpp-dd__menu--profile .ndpp-dd__avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
    background: #e4e8ee;
    text-transform: uppercase;
}

.ndpp-dd--profile .ndpp-dd__avatar--sm {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    margin-right: 7px;
    font-size: .64rem;
}

.ndpp-dd__menu--profile .ndpp-dd__item,
.ndpp-dd--profile .ndpp-dd__item {
    align-items: center;
    padding-top: 7px;
    padding-bottom: 7px;
}

.ndpp-dd--profile .ndpp-dd__toggle .ndpp-dd__value {
    display: inline-flex;
    align-items: center;
}

[dir="rtl"] .ndpp-dd--profile .ndpp-dd__avatar,
[dir="rtl"] .ndpp-dd__menu--profile .ndpp-dd__avatar {
    margin-right: 0;
    margin-left: 9px;
}

/* แถวโปรไฟล์ 2 บรรทัด: ชื่อ + อีเมล */
.ndpp-dd--profile .ndpp-dd__text--profile,
.ndpp-dd__menu--profile .ndpp-dd__text--profile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.ndpp-dd--profile .ndpp-dd__pname,
.ndpp-dd__menu--profile .ndpp-dd__pname {
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-dd--profile .ndpp-dd__psub,
.ndpp-dd__menu--profile .ndpp-dd__psub {
    font-size: .76rem;
    color: var(--ndpp-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-dd__menu--profile .ndpp-dd__item,
.ndpp-dd--profile .ndpp-dd__item {
    justify-content: flex-start;
    gap: 12px;
    padding: .5rem .85rem;
    text-align: left;
}

    .ndpp-dd__menu--profile .ndpp-dd__item .ndpp-dd__text--profile,
    .ndpp-dd--profile .ndpp-dd__item .ndpp-dd__text--profile {
        flex: 1 1 auto;
        text-align: left;
        font-weight: 400;
    }

.ndpp-dd__menu--profile .ndpp-dd__avatar,
.ndpp-dd--profile .ndpp-dd__avatar {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    margin-right: 0;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--danger-btn-button, #00a898);
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--danger-btn-button, #00a898) 28%, #fff);
}

    .ndpp-dd__menu--profile .ndpp-dd__avatar .ndpp-ico,
    .ndpp-dd--profile .ndpp-dd__avatar .ndpp-ico {
        width: 17px;
        height: 17px;
    }

.ndpp-dd--profile .ndpp-dd__avatar--sm .ndpp-ico {
    width: 13px;
    height: 13px;
}

.ndpp-dd__menu--profile .ndpp-dd__pname,
.ndpp-dd--profile .ndpp-dd__pname {
    font-size: .9rem;
}

.ndpp-dd__menu--profile .ndpp-dd__item.is-selected .ndpp-dd__pname,
.ndpp-dd--profile .ndpp-dd__item.is-selected .ndpp-dd__pname {
    font-weight: 700;
}

.ndpp-dd--profile .ndpp-dd__avatar--sm {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    margin-right: 8px;
    font-size: .66rem;
}

[dir="rtl"] .ndpp-dd__menu--profile .ndpp-dd__item,
[dir="rtl"] .ndpp-dd--profile .ndpp-dd__item {
    text-align: right;
}

    [dir="rtl"] .ndpp-dd__menu--profile .ndpp-dd__item .ndpp-dd__text--profile,
    [dir="rtl"] .ndpp-dd--profile .ndpp-dd__item .ndpp-dd__text--profile {
        text-align: right;
    }

[dir="rtl"] .ndpp-dd--profile .ndpp-dd__avatar--sm {
    margin-right: 0;
    margin-left: 8px;
}

/* profile mode: ค่าที่เลือกในปุ่ม toggle เป็น 2 บรรทัด (ชื่อ + อีเมล) */
.ndpp-dd--profile .ndpp-dd__selprofile {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
    text-align: left;
}

.ndpp-dd--profile .ndpp-dd__selsub {
    font-size: .74rem;
    color: var(--ndpp-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[dir="rtl"] .ndpp-dd--profile .ndpp-dd__selprofile {
    text-align: right;
}

.imp-modal .modal-body {
    counter-reset: impstep;
}

.imp-modal .ndpp-fsec__num::before {
    counter-increment: impstep;
    content: counter(impstep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--danger-btn-button, #00a898);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
}

/* จุด accent ปกติของ .ndpp-fsec__num ถูกแทนด้วยวงเลขข้างบน */
.imp-modal .ndpp-fsec__num {
    width: auto;
    height: auto;
    background: none;
}

.imp-modal .ndpp-fsec__head {
    align-items: center;
}

/* ปุ่มดาวน์โหลดเทมเพลตอยู่ในหัวขั้น "เลือกไฟล์" ชิดขวา */
.imp-modal .imp-tpl {
    margin-left: auto;
}

.imp-modal .imp-tpl__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 8px;
    background: #fff;
    color: var(--ndpp-ink, #1f2329);
    font-size: .8rem;
    font-weight: 500;
}

    .imp-modal .imp-tpl__btn .ndpp-ico {
        width: 14px;
        height: 14px;
        color: var(--ndpp-muted, #6b7280);
    }

/* ยังเลือกขอบเขตไม่ครบ = บอกเหตุผลแทนการ disable ช่องไฟล์เงียบ ๆ */
.imp-modal .imp-lock {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border: 1px dashed var(--ndpp-line, #e6e9ef);
    border-radius: 10px;
    background: #fafbfc;
    color: var(--ndpp-muted, #6b7280);
    font-size: .82rem;
}

    .imp-modal .imp-lock .ndpp-ico {
        flex: 0 0 15px;
        width: 15px;
        height: 15px;
        color: var(--danger-btn-button, #00a898);
    }

.imp-modal .imp-picked {
    margin-top: 10px;
}

/* ตารางจับคู่ฟิลด์: ชื่อฟิลด์เด่น ชนิด/หมายเหตุเป็นบรรทัดรองจาง */
.imp-modal .imp-map__field {
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.imp-modal .imp-map__req {
    color: #d9534f;
    font-style: normal;
    font-weight: 700;
}

.imp-modal .imp-map__type,
.imp-modal .imp-map__note {
    display: block;
    margin-top: 2px;
    color: #8a93a0;
    font-size: .74rem;
}

.imp-modal .imp-map .form-group {
    margin-bottom: 0;
}

.imp-modal .imp-map select.ndpp-input,
.imp-modal .imp-opt .ndpp-input {
    height: 32px;
    min-height: 32px;
    padding: 2px 8px;
    font-size: .8rem;
}

.imp-modal .imp-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .imp-modal .imp-opt + .imp-opt {
        margin-top: 6px;
    }

.imp-modal .imp-opt__k {
    flex: 0 0 auto;
    color: #8a93a0;
    font-size: .74rem;
}

.imp-modal .imp-opt.has-error .ndpp-input {
    border-color: #d9534f;
}

/* ตัวเลขสรุปเป็นตัวกรองพรีวิวด้วย — pill ไม่ใช่ปุ่มสีทึบ 3 ก้อนแข่งกัน */
.imp-modal .imp-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.imp-modal .imp-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 999px;
    background: #fff;
    color: var(--ndpp-muted, #6b7280);
    font-size: .8rem;
    font-weight: 600;
}

.imp-modal .imp-pill__n {
    color: var(--ndpp-ink, #1f2329);
    font-weight: 700;
}

.imp-modal .imp-pill:disabled {
    opacity: .5;
}

.imp-modal .imp-pill.is-active {
    border-color: var(--danger-btn-button, #00a898);
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 8%, #fff);
    color: var(--danger-btn-button, #00a898);
}

.imp-modal .imp-pill--ok.is-active {
    border-color: #16a34a;
    background: #e9f7f0;
    color: #14714a;
}

.imp-modal .imp-pill--err.is-active {
    border-color: #d9534f;
    background: #fdecec;
    color: #b3403f;
}

.imp-modal .imp-pill:focus,
.imp-modal .imp-pill:active {
    outline: none;
    box-shadow: none;
}

.imp-modal .imp-hint {
    color: #8a93a0;
    font-size: .78rem;
}

/* หัวตารางพรีวิว: ชื่อฟิลด์ระบบ + คอลัมน์ต้นทางเป็นบรรทัดรอง (เดิมใช้ <br>from<br>) */
.imp-modal .imp-th {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}

.imp-modal .imp-th__t {
    font-weight: 600;
}

.imp-modal .imp-th__s {
    color: #8a93a0;
    font-size: .72rem;
    font-weight: 400;
}

.imp-modal .imp-th.is-missing .imp-th__t,
.imp-modal .imp-th.is-missing .imp-th__s {
    color: #d9534f;
}

.imp-modal .imp-st {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.imp-modal .imp-st--ok {
    background: #e9f7f0;
    color: #14714a;
}

.imp-modal .imp-st--err {
    background: #fdecec;
    color: #b3403f;
}

/* แถวคำเตือนใต้แถวข้อมูล — พื้นอ่อนบอกว่าเป็นของแถวเดียวกัน ไม่ใช่ record ใหม่ */
.imp-modal .imp-warn > td {
    padding-top: 0;
    border-top: 0;
    color: #b3403f;
    font-size: .78rem;
}

[dir="rtl"] .imp-modal .imp-tpl {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .imp-modal .imp-th {
    text-align: right;
}

/* ===== Data Subject Right Request — list page ===== */
.srrk {
    margin: 0 0 1rem;
}

.srrk-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.srrk-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
}

.srrk-ic {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 16px;
}

.srrk-ic-total {
    background: color-mix(in srgb, var(--danger-btn-button) 12%, #fff);
    color: var(--danger-btn-button);
}

.srrk-ic-prog {
    background: #e8f0fb;
    color: #1f6bb8;
}

.srrk-ic-done {
    background: #e9f7f0;
    color: #14714a;
}

.srrk-ic-over {
    background: #fdecec;
    color: #b3403f;
}

.srrk-ic-soon {
    background: color-mix(in srgb, #ff9800 14%, #fff);
    color: #b26500;
}

.srrk-num {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ndpp-ink, #1f2329);
    font-variant-numeric: tabular-nums;
}

.srrk-lbl {
    margin-top: 1px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--ndpp-muted, #6b7280);
}

.srrk-danger .srrk-num {
    color: #b3403f;
}

.srrk-warn .srrk-num {
    color: #b26500;
}

.srrk-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.srrk-panel {
    padding: 15px 17px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
}

.srrk-ph {
    margin-bottom: 13px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.srrk-bar-row {
    display: grid;
    grid-template-columns: 150px 1fr 34px;
    gap: 10px;
    align-items: center;
    margin-bottom: 9px;
}

.srrk-bar-label {
    font-size: .78rem;
    color: var(--ndpp-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srrk-bar-track {
    height: 8px;
    background: #eef1f5;
    border-radius: 999px;
    overflow: hidden;
}

.srrk-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--danger-btn-button);
    transition: width .5s cubic-bezier(.22,.61,.36,1);
}

.srrk-bar-val {
    font-size: .78rem;
    font-weight: 700;
    text-align: right;
    color: var(--ndpp-ink, #1f2329);
    font-variant-numeric: tabular-nums;
}

.srrk-trend {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 128px;
}

.srrk-trend-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.srrk-trend-bar-wrap {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.srrk-trend-bar {
    width: 60%;
    min-height: 3px;
    border-radius: 6px 6px 0 0;
    background: var(--danger-btn-button);
    transition: height .5s cubic-bezier(.22,.61,.36,1);
}

.srrk-trend-val {
    margin-top: 4px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
}

.srrk-trend-lbl {
    font-size: .68rem;
    color: var(--ndpp-muted, #6b7280);
}

.srrk-empty {
    padding: 20px;
    text-align: center;
    font-size: .8rem;
    color: var(--ndpp-muted, #6b7280);
}

@media (max-width: 1100px) {
    .srrk-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .srrk-panels {
        grid-template-columns: 1fr;
    }
}

.srr-widgets {
    margin-bottom: 1rem;
    padding: 4px 6px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 12px;
}

/* ปุ่มเลือกคอลัมน์อยู่ในการ์ดตาราง เป็นแถวของตัวเองเหนือ Search/Show entries
   ไม่ใช้ position:absolute เพราะความกว้างของแถว Show entries ไม่คงที่ (คำต่อท้าย select) แล้วจะทับกัน */
.srr-tablebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--ndpp-line, #e6e9ef);
}

    .srr-tablebar > .ndpp-filterbar {
        flex: 1 1 auto;
        min-width: 0;
    }

.srr-tbactions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.srr-morebtn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 36px;
    padding: 0 .85rem;
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 9px;
    background: #fff;
    color: #4a5160;
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

    .srr-morebtn .ndpp-ico {
        width: 16px;
        height: 16px;
        color: var(--ndpp-muted, #6b7280);
    }

    .srr-morebtn:hover,
    .srr-morebtn[aria-expanded="true"] {
        border-color: var(--danger-btn-button);
        background: #f6f8fa;
        color: var(--danger-btn-button);
    }

        .srr-morebtn:hover .ndpp-ico,
        .srr-morebtn[aria-expanded="true"] .ndpp-ico {
            color: inherit;
        }

    .srr-morebtn:focus {
        outline: none;
    }

/* เมนูเลือกคอลัมน์ — ชื่อคอลัมน์ไทยยาวมาก ถ้าปล่อยตามเนื้อหาเมนูจะกว้างเกินครึ่งจอ */
#table-config .dropdown-menu {
    min-width: 15rem;
    max-width: 18rem;
    padding: .3rem;
}

.srr-colitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem .55rem;
    border-radius: 7px;
    cursor: pointer;
}

    .srr-colitem > i {
        flex: 0 0 auto;
        color: var(--ndpp-muted, #6b7280);
    }

.srr-colitem__lbl {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
}

.table-subjectrightrequest-subjectrightrequest {
    table-layout: fixed;
}

    .table-subjectrightrequest-subjectrightrequest th:nth-child(1), .table-subjectrightrequest-subjectrightrequest td:nth-child(1) {
        width: 7%;
    }

    .table-subjectrightrequest-subjectrightrequest th:nth-child(2), .table-subjectrightrequest-subjectrightrequest td:nth-child(2) {
        width: 19%;
    }

    .table-subjectrightrequest-subjectrightrequest th:nth-child(3), .table-subjectrightrequest-subjectrightrequest td:nth-child(3) {
        width: 17%;
    }

    .table-subjectrightrequest-subjectrightrequest th:nth-child(4), .table-subjectrightrequest-subjectrightrequest td:nth-child(4) {
        width: 15%;
    }

    .table-subjectrightrequest-subjectrightrequest th:nth-child(5), .table-subjectrightrequest-subjectrightrequest td:nth-child(5) {
        width: 8%;
    }

    .table-subjectrightrequest-subjectrightrequest th:nth-child(6), .table-subjectrightrequest-subjectrightrequest td:nth-child(6) {
        width: 13%;
    }

    .table-subjectrightrequest-subjectrightrequest th:nth-child(7), .table-subjectrightrequest-subjectrightrequest td:nth-child(7) {
        width: 13%;
    }

    .table-subjectrightrequest-subjectrightrequest th:nth-child(8), .table-subjectrightrequest-subjectrightrequest td:nth-child(8) {
        width: 8%;
    }

.srr-req {
    display: block;
    font-size: .95rem;
    font-weight: 700;
}
/* คำอธิบายสิทธิ (มาตรา xx ...) เป็นสาระของคำร้อง ไม่ใช่ข้อความรอง — อ่านออกได้เต็ม 3 บรรทัด */
.srr-req__sub {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.45;
    color: #4a5160;
}

/* DPO/DPA ต้องเห็นชื่อเต็มบรรทัดเดียวเสมอ จึงไม่ใช้ ellipsis แบบ .ndpp-idcell__name */
.srr-person {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ขนาดเท่า .ndpp-idcell__av เพื่อให้แถวสูงเท่าคอลัมน์เจ้าของข้อมูล
   ทรงกลม ต่างจากคอลัมน์เจ้าของข้อมูลที่เป็นสี่เหลี่ยมมนโดยตั้งใจ */
.srr-person__av {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef1f5;
}

.srr-person__body {
    min-width: 0;
}

.srr-person__name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

/* หัวตารางหน้านี้ยาวมาก (ชื่อเต็มของ DPO/DPA) — ตัดด้วย ... บรรทัดเดียว ชื่อเต็มดูได้จาก tooltip
   ไอคอน sort เป็น ::after จึงต้องถอดออกจาก flow ไม่งั้นโดน ellipsis กลืนไปด้วย */
.ndpp-datatable table.table-subjectrightrequest-subjectrightrequest thead th {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1.9rem;
}

    .ndpp-datatable table.table-subjectrightrequest-subjectrightrequest thead th.sorting:after,
    .ndpp-datatable table.table-subjectrightrequest-subjectrightrequest thead th.sorting_asc:after,
    .ndpp-datatable table.table-subjectrightrequest-subjectrightrequest thead th.sorting_desc:after {
        position: absolute;
        top: 50%;
        right: .7rem;
        margin-left: 0;
        transform: translateY(-50%);
    }

/* ── Coach-mark tour ต่อหน้า (.ndpp-tour) — ล้าง theme กรมท่าของ landing/welcome.css ── */
.shepherd-element.ndpp-tour {
    width: min(412px, calc(100vw - 32px));
    max-width: 412px;
    border: 1px solid var(--tut-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
}

.ndpp-tour .shepherd-content {
    border-radius: 14px;
    background: #fff;
}

.ndpp-tour .shepherd-header,
.ndpp-tour.shepherd-has-title .shepherd-content .shepherd-header {
    align-items: flex-start;
    padding: 25px 20px 12px 20px;
    border-radius: 14px 14px 0 0;
    background: #fff;
    line-height: 1.35;
}

.ndpp-tour .shepherd-title {
    flex: 1 1 auto;
    color: var(--tut-ink);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.4;
}

.ndpp-tour .shepherd-cancel-icon {
    flex: 0 0 auto;
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--tut-faint);
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    border: 0;
    background: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    transition: .15s;
}

    .ndpp-tour .shepherd-cancel-icon:focus,
    .ndpp-tour .shepherd-cancel-icon:active {
        outline: none;
        box-shadow: none;
    }

    .ndpp-tour .shepherd-cancel-icon:hover {
        background: var(--tut-soft);
        color: var(--tut-ink);
    }

.ndpp-tour .shepherd-text {
    padding: 15px 40px 15px 20px;
    color: var(--tut-ink2);
}

.ndpp-tour__text {
    margin: 0;
    color: var(--tut-ink2);
    font-size: 14px;
    line-height: 1.65;
}

.ndpp-tour__legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px -8px 0;
    padding-top: 18px;
    border-top: 1px solid var(--ndpp-line, #e6e9ef);
}

.ndpp-tour__lgd {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 5px 8px;
    border-radius: 8px;
}

.ndpp-tour__lgd-s {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    /* gap: 5px; */
    /*min-width: 40px;*/
}

.ndpp-tour__lgd-t {
    color: var(--tut-ink2);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
}

.ndpp-tour .shepherd-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 22px 22px 18px;
    border-radius: 0;
}

    .ndpp-tour .shepherd-footer > *:not(.ndpp-tour__dots):not(.shepherd-button) {
        display: none !important;
    }

.ndpp-tour__dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-end: auto;
}

.ndpp-tour__dots--count {
    font-size: 11px;
    font-weight: 600;
    color: #b6bcc4;
    letter-spacing: .02em;
}

.ndpp-tour__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tut-line);
    transition: .2s;
}

    .ndpp-tour__dot.is-on {
        width: 16px;
        border-radius: 99px;
        background: var(--tut-accent);
    }

.ndpp-tour .shepherd-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 6px;
    padding: 8px 14px;
    border: 0;
    border-top: 0;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    transition: .15s;
}

    /* กดแล้วไม่ต้องมีขอบดำ (browser focus ring) — เหลือ ring จาง ๆ เฉพาะเวลาเดินด้วยคีย์บอร์ด */
    .ndpp-tour .shepherd-button:focus {
        outline: none;
        box-shadow: none;
    }

    .ndpp-tour .shepherd-button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--tut-accent100);
    }

    .ndpp-tour .shepherd-button.ndpp-tour__btn--primary {
        background: var(--tut-accent);
        color: #fff;
    }

        .ndpp-tour .shepherd-button.ndpp-tour__btn--primary:not(:disabled):hover {
            background: var(--tut-accent600);
            color: #fff;
        }

    .ndpp-tour .shepherd-button.ndpp-tour__btn--ghost {
        background: transparent;
        color: var(--tut-muted);
    }

        .ndpp-tour .shepherd-button.ndpp-tour__btn--ghost:not(:disabled):hover {
            background: var(--tut-soft);
            color: var(--tut-ink);
        }



/* ปุ่มเปิด tour ในแถบควบคุม — ไม่มีขอบ/พื้น เป็นตัวช่วยรอง ไม่แย่งสายตาจาก Add Widget/Save */
.ndpp-tour-launch {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 3.2rem;
    padding: 0 .95rem;
    border: 0;
    background: none;
    color: var(--ndpp-muted, #6c7a86);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease;
}

    .ndpp-tour-launch > .ndpp-ico {
        width: 16px;
        height: 16px;
        opacity: .9;
    }

    .ndpp-tour-launch:hover,
    .ndpp-tour-launch:focus {
        outline: none;
        color: var(--ndpp-ink, #1f2329);
    }

/* ไอคอน ? ข้างหัวข้อ เปิดทัวร์ค้างที่ขั้นของหัวข้อนั้น (ใช้ .ndpp-ico--help-circle จากทะเบียนกลาง) */
.ndpp-tour-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #C3CAD3;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

    .ndpp-tour-dot > .ndpp-ico {
        width: 14px;
        height: 14px;
    }

    .ndpp-tour-dot:hover,
    .ndpp-tour-dot:focus {
        outline: none;
        background: #F0FDFA;
        color: #01A998;
    }

.ndpp-tour-veil {
    position: fixed;
    inset: 0;
    z-index: 9996;
    background: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

    .ndpp-tour-veil.is-on {
        opacity: 1;
        pointer-events: auto;
    }

.ndpp-tour-spot {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 9997;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .5);
    opacity: 0;
    pointer-events: none;
    transition: top .34s cubic-bezier(.22,.61,.36,1), left .34s cubic-bezier(.22,.61,.36,1), width .34s cubic-bezier(.22,.61,.36,1), height .34s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
}

    .ndpp-tour-spot.is-on {
        opacity: 1;
    }

.ndpp-tour__hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 22px;
    border-top: 1px solid var(--tut-line2);
    border-radius: 9px;
    background: var(--tut-soft);
    color: #b6bcc4;
    font-size: 10.5px;
}

    .ndpp-tour__hint kbd {
        min-width: 17px;
        padding: 0 4px;
        border: 1px solid var(--tut-line);
        border-bottom-width: 2px;
        border-radius: 4px;
        background: #fff;
        box-shadow: none;
        color: var(--tut-muted);
        font-family: inherit;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.6;
        text-align: center;
    }

.ndpp-tour__hintgrp > span {
    margin-inline-start: 2px;
}

.ndpp-tour__hintgrp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ndpp-tour .shepherd-content {
    position: relative;
    padding: 10px;
}

    .ndpp-tour .shepherd-content::before {
        content: "";
        position: absolute;
        left: 50%;
        width: 12px;
        height: 12px;
        border: 1px solid var(--tut-line);
        background: #fff;
        transform: translateX(-50%) rotate(45deg);
    }

.ndpp-tour[data-popper-placement^='bottom'] .shepherd-content::before {
    top: -6px;
    border-width: 1px 0 0 1px;
}

.ndpp-tour[data-popper-placement^='top'] .shepherd-content::before {
    bottom: -6px;
    border-width: 0 1px 1px 0;
}

.ndpp-tour[data-popper-placement^='left'] .shepherd-content::before,
.ndpp-tour[data-popper-placement^='right'] .shepherd-content::before {
    display: none;
}

.ndpp-tour .shepherd-footer button:not(:last-of-type) {
    border: 0;
}

/* ── Login & Privilege tab (Views/Admin/User.cshtml — ใช้ร่วม StakeholderProfile + StaffProfile) ── */
.upx .nsdx-password-wrapper > .ndpp-input {
    padding-inline-end: 40px;
}

.upx .ndpp-input:-webkit-autofill,
.upx .ndpp-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px #fff inset;
    -webkit-text-fill-color: var(--ndpp-ink, #1f2329);
}

.upx .help-block-pwd {
    display: block;
    margin-top: 8px;
    padding: 10px 12px;
    background: #fff7f7;
    border: 1px solid #f2d5d6;
    border-radius: 9px;
}

.upx .upx-req__item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: .82rem;
    line-height: 1.45;
    color: #a5484c;
    font-weight: 400;
}

    .upx .upx-req__item + .upx-req__item {
        margin-top: 5px;
    }

    .upx .upx-req__item::before {
        content: "";
        flex: 0 0 auto;
        width: 13px;
        height: 13px;
        margin-top: 2px;
        border-radius: 50%;
        background: var(--danger-btn-button);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center/9px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center/9px no-repeat;
        opacity: .75;
    }

.upx select.ndpp-input {
    height: auto;
}

.upx-optgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.upx-opt {
    position: relative;
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    background: #fff;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .upx-opt:hover {
        border-color: #cfd4da;
    }

    .upx-opt.is-active {
        border-color: var(--danger-btn-button);
    }

    .upx-opt > input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.upx-opt__dot {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #d0d6de;
    background: #fff;
    transition: border-color .15s ease, border-width .15s ease;
}

.upx-opt.is-active .upx-opt__dot {
    border-width: 5px;
    border-color: var(--danger-btn-button);
}

.upx-opt__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.upx-opt__title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.upx-opt__sub {
    font-size: .72rem;
    line-height: 1.35;
    color: var(--ndpp-muted, #98a0ab);
}

.upx-opt__field {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.upx-opt__unit {
    font-size: .72rem;
    color: var(--ndpp-muted, #98a0ab);
}

.upx-num {
    width: 58px;
    height: 34px;
    padding: 0 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--ndpp-ink, #1f2329);
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    outline: none;
}

    .upx-num:focus {
        border-color: #b9bdc4;
    }

    .upx-num[disabled] {
        background: #f5f6f8;
        color: #a6adb6;
    }

/* การ์ดติ๊ก — โครงเดียวกับการ์ดตัวเลือกด้านบน ต่างแค่ใช้กล่องติ๊กแทนวงกลม */
.upx-check > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.upx-check .ndpp-check__box {
    flex: 0 0 auto;
}

.upx-check:hover .ndpp-check__box {
    border-color: var(--danger-btn-button);
}

.upx-check > input:checked + .ndpp-check__box {
    background: var(--danger-btn-button);
    border-color: var(--danger-btn-button);
}

    .upx-check > input:checked + .ndpp-check__box > svg {
        stroke-dashoffset: 0;
    }

.upx-date {
    width: 132px;
    text-align: start;
}

.upx-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 1rem;
    padding: 10px 16px;
    background: #fafbfc;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
}

    .upx-foot .ndpp-dash-btn {
        min-height: 2rem;
        height: 2rem;
        padding: 1.2rem .8rem;
        font-size: 13px;
        gap: 6px;
    }

@media (max-width: 767.98px) {
    .upx-opt {
        flex: 1 1 100%;
    }
}

/* ── Stakeholder Profile page (Views/Admin/StakeholderProfile.cshtml) ── */
.b64-upload-wrapper {
    display: none;
}

/* โครงหน้า: การ์ดโปรไฟล์ซ้าย (sticky) + ฟอร์มขวา */
.sp-grid {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 991.98px) {
    .sp-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sp-aside {
    align-self: stretch;
}

.sp-sticky {
    position: sticky;
    top: 84px;
}

/* sticky ต้องให้ viewport เป็นตัวเลื่อน — .wrapper/body ที่ overflow:auto ตัด sticky ทิ้ง */
html:has(.sp-profile) {
    overflow-x: hidden;
}

body:has(.sp-profile) {
    height: auto;
    overflow: visible;
}

    body:has(.sp-profile) .wrapper {
        overflow: visible;
    }

.sp-idcard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 20px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.sp-idcard__band {
    align-self: stretch;
    height: 92px;
    margin: 0 -20px;
    background: linear-gradient(135deg, #e4e7ea 0%, #edeff2 55%, #f5f6f8 100%);
}

.sp-avatar-wrap {
    position: relative;
    width: 108px;
    height: 108px;
    margin-top: -54px;
}

.sp-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #f2f4f7;
    border: 4px solid #fff;
    box-shadow: 0 6px 18px -8px rgba(16, 24, 40, .35);
}

.sp-avatar-input {
    display: none;
}

.sp-avatar-hit {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

    .sp-avatar-hit:focus, .sp-avatar-edit:focus {
        outline: none;
    }


.sp-avatar-edit {
    position: absolute;
    inset-inline-end: 0;
    bottom: 4px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--danger-btn-button);
    color: #fff;
    border: 3px solid #fff;
    padding: 0;
    cursor: pointer;
    font-size: 12px;
    transition: transform .15s;
}

    .sp-avatar-edit:hover,
    .sp-avatar-wrap:hover .sp-avatar-edit {
        transform: scale(1.08);
    }

.sp-idcard__name {
    margin: 14px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
}

.sp-idcard__role {
    margin-top: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #eef0f3);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    color: var(--ndpp-ink, #1f2329);
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.sp-idcard__list {
    width: 100%;
    margin-top: 26px;
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-top: 1px solid var(--ndpp-line, #eef0f3);
}

.sp-idrow {
    display: flex;
    align-items: center;
    gap: 13px;
}

.sp-idrow__ico {
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sp-idrow__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sp-idrow__label {
    color: var(--ndpp-faint, #9aa1a9);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.2;
}

.sp-idrow__value {
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ndpp-ink, #1f2329);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 20px 0 0;
    padding: 12px 14px;
    background: #f7f8fa;
    border-radius: 10px;
    cursor: pointer;
}

.sp-status__label {
    color: var(--ndpp-muted, #6c7a86);
    font-size: .78rem;
    font-weight: 600;
}

.sp-status__switch {
    margin: 0;
}

/* ฝั่งขวา */
.sp-main {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 12px;
    padding: 0 1.5rem 1.5rem;
}

.sp-tabs {
    border-bottom: 1px solid var(--ndpp-line, #eef0f3);
    margin: 0 -1.5rem 1.25rem;
    padding: 0 1.5rem;
    gap: 4px;
}

    .sp-tabs .nav-item {
        margin: 0;
    }

    .sp-tabs a {
        display: block;
        padding: 14px 16px;
        border: 0;
        background: none;
        color: var(--ndpp-muted, #6c7a86);
        font-size: .86rem;
        font-weight: 600;
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }

        .sp-tabs a:hover {
            color: var(--ndpp-ink, #1f2329);
        }

        .sp-tabs a.active {
            color: var(--danger-btn-button);
            border-bottom-color: var(--danger-btn-button);
        }

/* ช่องเลือกหลายค่าให้สูงเท่า .ndpp-input เหมือนช่องอื่นในฟอร์ม เฉพาะหน้านี้ */
.sp-profile .ndpp-dd--chips .ndpp-dd__toggle {
    min-height: 48px;
    padding: 15px 2.6rem 15px 18px;
    font-size: 13px;
    font-weight: 400;
}

.sp-profile .ndpp-dd--chips .ndpp-dd__caret {
    inset-inline-end: 18px;
}

.sp-desc {
    min-height: 96px;
    resize: vertical;
}

.sp-lawtag {
    margin-inline-start: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #00968817;
    color: var(--danger-btn-button);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2px;
}

/* แถบบันทึกติดขอบล่าง แนวเดียวกับ .ppou-main-foot — padding-right เผื่อไอคอนแชทลอยที่บังปุ่ม */
.sp-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 10px 16px;
    padding-right: 77px;
    background: #fafbfc;
    border-top: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 0 0 12px 12px;
    position: sticky;
    bottom: 0;
    z-index: 3;
}

    .sp-foot .ndpp-dash-dirty {
        margin-inline-end: auto;
    }

    .sp-foot .ndpp-dash-btn {
        min-height: 2rem;
        height: 2rem;
        padding: 1.2rem .8rem;
        font-size: 13px;
        gap: 6px;
    }


.sp-profile input[nsdx-date-picker] {
    background-color: #fff !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 34px;
}

[dir="rtl"] .sp-profile input[nsdx-date-picker] {
    background-position: left 10px center;
    padding-right: 12px;
    padding-left: 34px;
}


/* DPO Appointment — โทนเดียวกับการ์ดฟอร์มอื่นในหน้า */
.dpo-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-size: .8rem;
    line-height: 1.55;
    color: #56606d;
}

    .dpo-hint > .ndpp-ico {
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
        margin-top: 3px;
        color: #8a929c;
    }

.dpo-chip {
    margin-inline-start: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.dpo-chip--warn {
    background: #fff4e5;
    color: #b45309;
}
/* การแจ้ง PDPC = งานที่เกิดนอกระบบ แยกจากการ์ดฟอร์มขาว ๆ ด้วยพื้นเทาอ่อน + สีตามสถานะ */
.dpo-pdpc {
    background: #f7f9fb;
    border-color: #e3e8ee;
}

    .dpo-pdpc.is-pending {
        --dpo-tone: #d9a441;
    }

    .dpo-pdpc.is-notified {
        --dpo-tone: #4b83c4;
    }

    .dpo-pdpc.is-confirmed {
        --dpo-tone: #3f9a6a;
    }

.dpo-pdpc__head {
    border-bottom-color: #e3e8ee;
}

/* tooltip ของหน้านี้ — การ์ดขาว เงานุ่ม ไม่ใช่กล่องดำของ bootstrap */
.sp-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-inline-start: 4px;
    outline: none;
}

.dpo-help {
    width: 14px;
    height: 14px;
    color: #98a0ab;
    cursor: help;
    transition: color .15s;
}

.sp-tip:hover .dpo-help, .sp-tip:focus-visible .dpo-help {
    color: var(--danger-btn-button);
}

.sp-tip__bubble {
    position: absolute;
    bottom: calc(100% + 9px);
    inset-inline-start: 50%;
    width: 268px;
    padding: 11px 13px;
    z-index: 40;
    transform: translate(-50%, 4px);
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 10px;
    box-shadow: 0 10px 28px -12px rgba(16, 24, 40, .3), 0 2px 6px -2px rgba(16, 24, 40, .08);
    color: #46505c;
    font-size: .76rem;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    text-align: start;
    text-transform: none;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

    .sp-tip__bubble::after {
        content: "";
        position: absolute;
        top: 100%;
        inset-inline-start: 50%;
        width: 10px;
        height: 10px;
        margin: -6px 0 0 -5px;
        background: #fff;
        border-inline-end: 1px solid #e6eaef;
        border-bottom: 1px solid #e6eaef;
        transform: rotate(45deg);
    }

.sp-tip:hover .sp-tip__bubble,
.sp-tip:focus-visible .sp-tip__bubble {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 575.98px) {
    .sp-tip__bubble {
        width: 208px;
    }
}

.dpo-pdpc__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dpo-tone, #b6bfca);
}

.dpo-pdpc__state {
    margin-inline-start: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e3e8ee;
    color: var(--dpo-tone, #6c7a86);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.dpo-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 11px;
    background: #e9eef3;
}

.dpo-seg__btn {
    flex: 1 1 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6c7a86;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

    .dpo-seg__btn:hover {
        color: var(--ndpp-ink, #1f2329);
    }

    .dpo-seg__btn:focus, .dpo-seg__btn:active {
        outline: none;
        box-shadow: none;
    }

    .dpo-seg__btn:focus-visible {
        box-shadow: 0 0 0 2px rgba(16, 24, 40, .18);
    }

    .dpo-seg__btn.is-active {
        background: #fff;
        color: var(--dpo-tone, var(--danger-btn-button));
        box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
    }

    .dpo-seg__btn > .ndpp-ico {
        width: 15px;
        height: 15px;
    }

.dpo-type {
    max-width: 260px;
}

.dpo-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 20px 16px;
    border: 1.5px dashed #dfe3e8;
    border-radius: 10px;
    background: #fcfcfd;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

    .dpo-drop:hover {
        border-color: var(--danger-btn-button);
        background: #fff;
    }

    .dpo-drop.is-over {
        border-color: var(--danger-btn-button);
        background: #fdf5f5;
    }

    .dpo-drop.is-locked {
        opacity: .55;
        cursor: not-allowed;
        pointer-events: none;
    }

.dpo-drop__ico {
    width: 20px;
    height: 20px;
    color: var(--danger-btn-button);
}

.dpo-drop__main {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.dpo-drop__link {
    margin-inline-start: 4px;
    color: var(--danger-btn-button);
    text-decoration: underline;
}

.dpo-drop__note {
    font-size: .7rem;
    color: var(--ndpp-muted, #98a0ab);
}

.dpo-file-input {
    display: none;
}

.dpo-docgrid {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}

.dpo-doc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 14px 10px 12px;
    border: 1px solid #e2e5e9;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
}

    .dpo-doc:hover {
        border-color: #cfd4da;
        box-shadow: 0 2px 8px -4px rgba(16, 24, 40, .18);
    }

.dpo-doc__thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #f4f6f8;
    color: var(--danger-btn-button);
}

    .dpo-doc__thumb > .ndpp-ico {
        width: 19px;
        height: 19px;
    }

.dpo-doc__name {
    width: 100%;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ndpp-ink, #1f2329);
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dpo-doc__chip {
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #56606d;
    font-size: .65rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dpo-doc__date {
    font-size: .65rem;
    color: var(--ndpp-muted, #98a0ab);
}

.dpo-doc__acts {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}

.dpo-doc:hover .dpo-doc__acts, .dpo-doc:focus-within .dpo-doc__acts {
    opacity: 1;
}

.dpo-doc__btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e5e9;
    border-radius: 7px;
    background: #fff;
    color: #8a929c;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

    .dpo-doc__btn:focus {
        outline: none;
    }

    .dpo-doc__btn > .ndpp-ico {
        width: 13px;
        height: 13px;
    }

    .dpo-doc__btn:hover {
        color: var(--ndpp-ink, #1f2329);
        border-color: #cfd4da;
    }

.dpo-doc__btn--danger:hover {
    color: #d9534f;
    border-color: #f0c4c6;
}

.dpo-empty {
    margin-top: 12px;
    padding: 16px;
    border: 1px dashed #e6e9ee;
    border-radius: 9px;
    text-align: center;
    font-size: .75rem;
    color: var(--ndpp-muted, #98a0ab);
}

/* Modal เปลี่ยนรูปโปรไฟล์ — แท็บเลือก avatar สำเร็จรูป หรืออัปโหลดรูปจริง */
.sp-avmodal .modal-dialog {
    max-width: 1040px;
    width: 94vw;
}

.sp-avmodal .modal-body {
    padding-top: 1rem;
    min-height: 430px;
}

.sp-avtabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    border-radius: 11px;
    background: #e9eef3;
}

.sp-avtab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6c7a86;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

    .sp-avtab:hover {
        color: var(--ndpp-ink, #1f2329);
    }

    .sp-avtab:focus, .sp-avtab:active {
        outline: none;
        box-shadow: none;
    }

    .sp-avtab:focus-visible {
        box-shadow: 0 0 0 2px rgba(16, 24, 40, .18);
    }

    .sp-avtab.is-active {
        background: #fff;
        color: var(--danger-btn-button);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
    }

    .sp-avtab > .ndpp-ico {
        width: 15px;
        height: 15px;
    }

/* แท็บแต่งอวาตาร์ — ตัวอย่างสดฝั่งซ้าย ชิ้นส่วนกับสีฝั่งขวา */
.sp-dress {
    display: grid;
    grid-template-columns: 264px 1fr;
    gap: 18px;
    align-items: start;
}

.sp-dress__side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 18px 16px;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    background: #fafbfc;
}

.sp-dress__stage {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef1f4;
    border: 4px solid #fff;
    box-shadow: 0 14px 30px -18px rgba(16, 24, 40, .8);
}

    .sp-dress__stage svg {
        display: block;
        width: 100%;
        height: 100%;
    }

.sp-dress__acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.sp-dress__act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #e2e5e9;
    border-radius: 9px;
    background: #fff;
    color: var(--ndpp-ink, #1f2329);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .sp-dress__act:hover {
        border-color: #cfd4da;
    }

    .sp-dress__act:focus, .sp-dress__act:active {
        outline: none;
        box-shadow: none;
    }

    .sp-dress__act > .ndpp-ico {
        width: 13px;
        height: 13px;
    }

.sp-dress__act--primary {
    background: var(--danger-btn-button);
    border-color: var(--danger-btn-button);
    color: #fff;
    box-shadow: 0 6px 14px -10px var(--danger-btn-button);
}

    .sp-dress__act--primary:hover {
        border-color: var(--danger-btn-button);
    }

.sp-dress__panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-dtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: #eef1f5;
}

.sp-dtab {
    flex: 1 1 auto;
    padding: 8px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    white-space: nowrap;
    color: #6c7a86;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

    .sp-dtab:hover {
        color: var(--ndpp-ink, #1f2329);
    }

    .sp-dtab:focus, .sp-dtab:active {
        outline: none;
        box-shadow: none;
    }

    .sp-dtab.is-active {
        background: #fff;
        color: var(--danger-btn-button);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
    }

.sp-dpane {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 54vh;
    min-height: 300px;
    overflow-y: auto;
    padding-inline-end: 4px;
}

/* แต่ละแท็บมีแถบสีของชิ้นตัวเอง ถ้ายังไม่ได้สวมชิ้นนั้นก็ไม่มีอะไรให้เลือกสี */
.sp-dnote {
    font-size: .74rem;
    color: var(--ndpp-faint, #9aa1a9);
}

.sp-dcard {
    padding: 14px;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    background: #fbfcfd;
}

.sp-drow {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
}

.sp-dopt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 5px;
    overflow: hidden;
    border: 1px solid #e6e9ee;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

    .sp-dopt:hover {
        border-color: #cfd4da;
        transform: translateY(-1px);
    }

    .sp-dopt:focus, .sp-dopt:active {
        outline: none;
    }

    .sp-dopt.is-active {
        border-color: var(--danger-btn-button);
        box-shadow: 0 0 0 3px rgba(0, 168, 152, .15);
    }

    .sp-dopt svg {
        display: block;
        width: 100%;
        height: 100%;
    }

.sp-dopt--none {
    border-style: dashed;
    background: #fbfcfd;
    color: #b6bfca;
}

    .sp-dopt--none.is-active {
        border-style: solid;
        color: var(--danger-btn-button);
    }

    .sp-dopt--none > .ndpp-ico {
        width: 17px;
        height: 17px;
    }

.sp-dsw {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .sp-dsw + .sp-dsw {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px dashed #e9edf1;
    }

.sp-dsw__name {
    color: var(--ndpp-faint, #9aa1a9);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.sp-dchips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* สลับโทนพื้นหลัง อ่อน/เข้ม — สีชุดเดียวกัน คนละระดับความสว่าง */
.sp-dtone {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: #eef1f5;
}

.sp-dtone__btn {
    padding: 4px 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6c7a86;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

    .sp-dtone__btn:focus, .sp-dtone__btn:active {
        outline: none;
        box-shadow: none;
    }

    .sp-dtone__btn.is-active {
        background: #fff;
        color: var(--danger-btn-button);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
    }

.sp-dchip {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(16, 24, 40, .12);
    border-radius: 50%;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}

    .sp-dchip:hover {
        transform: scale(1.1);
    }

    .sp-dchip:focus, .sp-dchip:active {
        outline: none;
    }

    .sp-dchip.is-active {
        box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px var(--danger-btn-button);
    }

.sp-dchip--lg {
    width: 30px;
    height: 30px;
}
/* ปุ่มแรกของทุกแถว = คงสีเดิม/อัตโนมัติ ใช้เส้นทแยงบอกว่าไม่ได้เลือกสีอะไร */
.sp-dchip--auto {
    background: linear-gradient(135deg, #fff 44%, #d5dae0 44%, #d5dae0 56%, #fff 56%);
}

@media (max-width: 767.98px) {
    .sp-dress {
        grid-template-columns: 1fr;
    }

    .sp-dress__side {
        position: static;
    }

    .sp-dpane {
        max-height: none;
        min-height: 0;
    }

    .sp-dtab {
        font-size: .74rem;
    }
}


.sp-avup {
    display: flex;
    flex-direction: column;
}

.sp-avsplit {
    display: grid;
    grid-template-columns: 264px 1fr;
    gap: 16px;
    align-items: stretch;
}

.sp-avdrop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 380px;
    margin: 0;
    padding: 26px 20px;
    border: 1.5px dashed #dfe3e8;
    border-radius: 14px;
    background: linear-gradient(180deg, #fcfdfe, #f6f8fa);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

    .sp-avdrop:hover {
        border-color: var(--danger-btn-button);
        background: #fff;
    }

    .sp-avdrop.is-over {
        border-color: var(--danger-btn-button);
        background: #fdf7f7;
    }

    .sp-avdrop.is-filled {
        border-style: solid;
        border-color: #e6eaef;
        background: #fff;
    }

.sp-avdrop__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
}

/* ฝั่งซ้ายโชว์รูปเต็มใบ (contain) ส่วนฝั่งขวาโชว์ผลหลังครอปเป็นวงกลม — คนละหน้าที่กัน */
.sp-avfull {
    display: block;
    width: 100%;
    max-width: 250px;
    aspect-ratio: 4 / 3;
    margin-bottom: 3px;
    border-radius: 10px;
    overflow: hidden;
    background: #f7f8fa;
    border: 1px solid #e6eaef;
    box-shadow: 0 8px 20px -14px rgba(16, 24, 40, .6);
}

    .sp-avfull > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.sp-avdrop__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e6eaef;
    color: var(--danger-btn-button);
    box-shadow: 0 8px 18px -12px rgba(16, 24, 40, .5);
}

    .sp-avdrop__ring > .ndpp-ico {
        width: 23px;
        height: 23px;
    }

.sp-avdrop__title {
    max-width: 100%;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ndpp-ink, #1f2329);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-avdrop__sub {
    font-size: .78rem;
    color: var(--ndpp-muted, #98a0ab);
}

.sp-avdrop__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    padding: 9px 17px;
    border-radius: 9px;
    background: var(--danger-btn-button);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 6px 14px -10px var(--danger-btn-button);
}

    .sp-avdrop__cta > .ndpp-ico {
        width: 14px;
        height: 14px;
    }

.sp-avdrop__cta--ghost {
    background: #fff;
    border: 1px solid #e2e5e9;
    color: var(--ndpp-ink, #1f2329);
    box-shadow: none;
}

.sp-avdrop:hover .sp-avdrop__cta--ghost {
    border-color: #cfd4da;
}

.sp-avdrop__note {
    margin-top: 5px;
    font-size: .72rem;
    color: var(--ndpp-faint, #9aa1a9);
}

/* พรีวิวสด — โชว์ทั้ง 3 ขนาดที่รูปนี้จะไปโผล่จริง (การ์ดโปรไฟล์ / ตาราง / หัวเมนู) */
.sp-avprev {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 14px;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    background: #fafbfc;
}

.sp-avprev__label {
    align-self: flex-start;
    color: var(--ndpp-faint, #9aa1a9);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.sp-avprev__stage {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin: auto 0;
    padding: 8px 0;
}

.sp-avshot {
    border-radius: 50%;
    overflow: hidden;
    background: #eef1f4;
    border: 3px solid #fff;
    box-shadow: 0 8px 18px -12px rgba(16, 24, 40, .6);
}

    .sp-avshot > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.sp-avshot--lg {
    width: 92px;
    height: 92px;
}

.sp-avshot--md {
    width: 42px;
    height: 42px;
}

.sp-avshot--sm {
    width: 26px;
    height: 26px;
    border-width: 2px;
}

.sp-avshot--xs {
    width: 30px;
    height: 30px;
    border-width: 2px;
}

/* แถบเทียบ เดิม → ใหม่ โผล่เฉพาะตอนเลือกรูปใหม่แล้ว */
.sp-avba {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e6e9ee;
}

.sp-avba__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sp-avba__cap {
    font-size: .68rem;
    font-weight: 600;
    color: var(--ndpp-faint, #9aa1a9);
}

.sp-avba__cap--new {
    color: var(--danger-btn-button);
}

.sp-avba__arrow {
    width: 14px;
    height: 14px;
    margin-bottom: 15px;
    color: #c3c9d1;
}

[dir="rtl"] .sp-avba__arrow {
    transform: scaleX(-1);
}

.sp-avprev__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
    max-width: 100%;
}

.sp-avprev__name {
    max-width: 100%;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-avprev__size {
    font-size: .72rem;
    color: var(--ndpp-muted, #98a0ab);
}

.sp-avprev__now {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.sp-avstage {
    display: flex;
}

    .sp-avstage > label, .sp-avstage > .sp-avcrop {
        flex: 1 1 auto;
        min-width: 0;
    }

/* โหมดกะระยะ — canvas วาดรูป + วงกลมเจาะ ลากย้าย/เลื่อนซูมได้ */
.sp-avcrop {
    display: flex;
    flex-direction: column;
    border: 1px solid #e6eaef;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

    .sp-avcrop.is-over {
        border-color: var(--danger-btn-button);
    }

.sp-avcrop__canvas {
    display: block;
    width: 100%;
    height: 300px;
    background: #eef1f4;
    cursor: grab;
    touch-action: none;
}

    .sp-avcrop__canvas.is-dragging {
        cursor: grabbing;
    }

.sp-avcrop__zoom {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 4px;
}

.sp-avcrop__zico {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    color: #98a0ab;
}

.sp-avcrop__range {
    flex: 1 1 auto;
    height: 4px;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 999px;
    background: #e3e8ee;
    cursor: pointer;
}

    .sp-avcrop__range:focus {
        outline: none;
    }

    .sp-avcrop__range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--danger-btn-button);
        border: 2px solid #fff;
        box-shadow: 0 1px 4px rgba(16, 24, 40, .35);
        cursor: pointer;
    }

    .sp-avcrop__range::-moz-range-thumb {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--danger-btn-button);
        border: 2px solid #fff;
        box-shadow: 0 1px 4px rgba(16, 24, 40, .35);
        cursor: pointer;
    }

.sp-avcrop__acts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px 14px;
}

.sp-avcrop__hint {
    margin-inline-end: auto;
    font-size: .72rem;
    color: var(--ndpp-faint, #9aa1a9);
}

.sp-avcrop__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    background: #fff;
    color: var(--ndpp-ink, #1f2329);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .sp-avcrop__btn:hover {
        border-color: #cfd4da;
    }

    .sp-avcrop__btn:focus {
        outline: none;
    }

    .sp-avcrop__btn > .ndpp-ico {
        width: 13px;
        height: 13px;
    }

.sp-avcrop__btn--danger:hover {
    color: #d9534f;
    border-color: #f0c4c6;
}

.sp-avprev__adjust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 13px;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    background: #fff;
    color: var(--ndpp-ink, #1f2329);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

    .sp-avprev__adjust:hover {
        border-color: var(--danger-btn-button);
        color: var(--danger-btn-button);
    }

    .sp-avprev__adjust:focus {
        outline: none;
    }

    .sp-avprev__adjust > .ndpp-ico {
        width: 13px;
        height: 13px;
    }


@media (max-width: 767.98px) {
    .sp-avsplit {
        grid-template-columns: 1fr;
    }

    .sp-avdrop {
        min-height: 240px;
    }

    .sp-avcrop__canvas {
        height: 240px;
    }

    .sp-avprev__stage {
        margin: 0;
    }
}

.sp-avfoot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

    .sp-avfoot .ndpp-dash-btn {
        min-height: 2rem;
        height: 2rem;
        padding: 1.2rem .8rem;
        font-size: 13px;
        gap: 6px;
    }

/* Skeleton — เลียนโครงหน้านี้ให้ตรงตำแหน่งจริง ของจริงโผล่มาแล้วไม่ขยับ */
.sp-profile {
    position: relative;
}

.sp-sk {
    padding: 0;
    background: #fafafa;
    min-height: 100vh;
}

    .sp-sk .sp-idcard {
        padding-bottom: 20px;
    }

    .sp-sk .sp-idcard__band {
        background: #eef1f5;
    }

.sp-sk-avatar {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    border: 4px solid #fff;
}

.sp-sk-name {
    height: 17px;
    width: 62%;
    margin-top: 16px;
}

.sp-sk-role {
    height: 24px;
    width: 84px;
    margin-top: 10px;
    border-radius: 999px;
}

.sp-sk .sp-idrow {
    align-items: flex-start;
}

.sp-sk-ico {
    width: 18px;
    height: 16px;
    flex: 0 0 18px;
    margin-top: 2px;
}

.sp-sk-idbody {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

.sp-sk-lbl {
    height: 10px;
    width: 78px;
}

.sp-sk-val {
    height: 13px;
    width: 82%;
}

.sp-sk-val--short {
    width: 55%;
}

.sp-sk-status {
    height: 44px;
    width: 100%;
    margin-top: 20px;
    border-radius: 10px;
}

.sp-sk-tabs {
    display: flex;
    gap: 26px;
    margin: 0 -1.5rem 1.25rem;
    padding: 14px 1.5rem;
    border-bottom: 1px solid var(--ndpp-line, #eef0f3);
}

.sp-sk-tab {
    height: 13px;
    width: 72px;
}

.sp-sk-tab--wide {
    width: 108px;
}

.sp-sk-card {
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: #fff;
}

    .sp-sk-card + .sp-sk-card {
        margin-top: 1rem;
    }

.sp-sk-cardhead {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .95rem;
    padding-bottom: 15px;
    border-bottom: 1px solid #eceef1;
}

.sp-sk-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
}

.sp-sk-cardtitle {
    height: 11px;
    width: 128px;
}

.sp-sk-row {
    display: flex;
    gap: 15px;
    margin-bottom: 1.25rem;
}

    .sp-sk-row:last-child {
        margin-bottom: 0;
    }

.sp-sk-fld {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.sp-sk-input {
    height: 48px;
    border-radius: 9px;
}

.sp-sk-input--chips {
    height: 48px;
}

.sp-sk-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 10px 16px;
    background: #fafbfc;
    border-top: 1px solid var(--ndpp-line, #eef0f3);
    border-radius: 0 0 12px 12px;
}

.sp-sk-btn {
    height: 32px;
    width: 92px;
    border-radius: 8px;
}

@media (max-width: 991.98px) {
    .sp-sk-row--3, .sp-sk-row--2 {
        flex-direction: column;
    }
}

.cf-raw {
    display: block;
    width: 100%;
    max-width: 100%;
}

.cf-raw__frame {
    display: block;
    width: 100%;
    height: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
    color-scheme: light;
}

/* ข้อความเตือนใต้ช่องกรอก — โทนเดียวกับกล่องเตือนรหัสผ่านหน้า User */
.sp-profile .sp-fielderr {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 8px;
    padding: 10px 12px;
    background: #fff7f7;
    border: 1px solid #f2d5d6;
    border-radius: 9px;
    font-size: .82rem;
    line-height: 1.45;
    color: #a5484c;
    font-weight: 400;
}

    .sp-profile .sp-fielderr::before {
        content: "";
        flex: 0 0 auto;
        width: 13px;
        height: 13px;
        margin-top: 2px;
        border-radius: 50%;
        background: var(--danger-btn-button);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center/9px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center/9px no-repeat;
        opacity: .75;
    }

.ndpp-datatable table.table-admin-dataaccess td:nth-child(2) {
    max-width: 260px;
}

.ndpp-datatable table.table-admin-dataaccess td:nth-child(3),
.ndpp-datatable table.table-admin-dataaccess td:nth-child(5) {
    max-width: 230px;
}

/* Subject ทั้งเซลล์เป็นลิงก์ — ให้ 2 บรรทัดซ้อนกันเหมือน .ndpp-idcell__body ปกติ */
.table-admin-dataaccess a.ndpp-idcell__body {
    display: block;
    text-decoration: none;
}

    .table-admin-dataaccess a.ndpp-idcell__body:hover .ndpp-idcell__name {
        color: var(--danger-btn-button);
    }

/* กระดาน widget ที่ฝังในหน้า Inbox — คิวงานคือพระเอกของหน้า กระดานจึงต้องเตี้ยและไม่ sticky */
.nk-inbox-board {
    margin-bottom: 1.25rem;
}

    .nk-inbox-board .ndpp-dash-toolbar {
        position: static;
        margin-bottom: 1.25rem;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: transparent;
    }

    .nk-inbox-board .ndpp-dash-bar {
        align-items: center;
    }

    .nk-inbox-board .ndpp-dash-empty {
        padding: 1.5rem 1rem;
    }

        .nk-inbox-board .ndpp-dash-empty h4 {
            font-size: 1rem;
        }

    .nk-inbox-board .ndpp-dash-empty__art {
        display: none;
    }

    .nk-inbox-board .ndpp-palette__menu {
        min-width: 288px;
        margin-top: .4rem;
        padding: 8px;
        border: 1px solid var(--ndpp-line, #eceef1);
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(20, 23, 28, .14);
    }

/* สเวตช์บนตัวปุ่ม = แถบเล็กพอให้เดาสีออก ไม่ใช่แถบเต็มความกว้างแบบในเมนู */
.ndpp-palette__sw--btn {
    width: 34px;
    height: 14px;
    border-radius: 4px;
}

.nk-inbox-board .ndpp-palette > .ndpp-dash-btn {
    border-color: var(--ndpp-line);
    border-width: 1px;
    border-style: solid;
}

.nk-inbox-board .ndpp-dash-empty {
    cursor: pointer;
    border: 1px dashed var(--ndpp-line);
    border-radius: 12px;
    transition: background-color .12s ease, border-color .12s ease;
}

    .nk-inbox-board .ndpp-dash-empty:hover {
        background: #f8f9fb;
        border-color: #c7ccd3;
    }

/* ===== Privacy Notice Wizard (pnw) ===== */
.pnw-checklist {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e3e6ec;
    border-radius: 6px;
    padding: 8px 12px;
    background: #fff;
}

.pnw-check {
    display: block;
    font-weight: 400;
    padding: 4px 0;
    margin: 0;
    cursor: pointer;
}

    .pnw-check input[type="checkbox"] {
        margin-right: 8px;
    }

.pnw-box {
    border: 1px solid #e3e6ec;
    border-radius: 6px;
    padding: 10px 12px;
    background: #f8f9fb;
    margin-bottom: 12px;
}

.pnw-preview {
    border: 1px solid #e3e6ec;
    border-radius: 6px;
    padding: 16px 20px;
    background: #fff;
    max-height: 420px;
    overflow-y: auto;
}

    .pnw-preview h4 {
        margin-top: 14px;
        color: #2b3a55;
        font-size: 15px;
    }

    .pnw-preview h2 {
        font-size: 18px;
    }

    .pnw-preview ul {
        padding-left: 20px;
    }

.mb-5 {
    margin-bottom: 5px;
}

/* ===== Privacy Notice Wizard — clickable option rows ===== */
.pnw-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 6px;
    user-select: none;
    transition: background .12s ease;
}

    .pnw-option + .pnw-option {
        border-top: 1px solid #f0f2f5;
    }

    .pnw-option:hover {
        background: #f4f7fb;
    }

    .pnw-option > i.fa {
        font-size: 16px;
        color: #9aa4b2;
        width: 18px;
        text-align: center;
    }

    .pnw-option.is-selected {
        background: #eaf3ff;
    }

        .pnw-option.is-selected > i.fa {
            color: #2f7be6;
        }

        .pnw-option.is-selected > span {
            color: #1f2d45;
            font-weight: 500;
        }
    /* defect #4007: tab Disclosure ใน Privacy Notice Wizard เป็น read-only (ค่ามาจากการแมป objective ของกิจกรรม)
   — R2: ทำให้ "ดู disabled" ชัดเจน (เทา + not-allowed) ให้ผู้ใช้เข้าใจว่าแก้จากหน้านี้ไม่ได้ แต่ยังเห็นว่าอันไหนถูกติ๊ก */
    .pnw-option.is-readonly {
        cursor: not-allowed;
        opacity: .9;
    }

        .pnw-option.is-readonly:hover {
            background: transparent;
        }

        .pnw-option.is-readonly > i.fa {
            color: #c2c7d0;
        }

        .pnw-option.is-readonly > span {
            color: #9aa1ac;
        }

        .pnw-option.is-readonly.is-selected, .pnw-option.is-readonly.is-selected:hover {
            background: #f1f3f5;
        }

            .pnw-option.is-readonly.is-selected > i.fa {
                color: #8a929c;
            }

            .pnw-option.is-readonly.is-selected > span {
                color: #6b7280;
                font-weight: 500;
            }

/* Objective redesign — per-entity config repeater (modal) */
.ndpp-obj-entity-add {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

    .ndpp-obj-entity-add > select2-custom {
        flex: 1;
        min-width: 0;
    }

.ndpp-obj-entity {
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: rgba(0,0,0,.015);
}

    .ndpp-obj-entity:not(.is-collapsed) {
        padding-bottom: 2px;
    }

.nd-2025-menu__group:not(.is-active):not(.is-open) > .nd-2025-menu__lv1link:hover { background: color-mix(in srgb, var(--danger-btn-button, #00a898) 8%, transparent); }
.nd-2025-menu__group:not(.is-active):not(.is-open) > .nd-2025-menu__lv1link:hover .nd-2025-menu__icon,
.nd-2025-menu__group:not(.is-active):not(.is-open) > .nd-2025-menu__lv1link:hover .nd-2025-menu__text { color: var(--danger-btn-button, #00a898); }
.nd-2025-sidebar .nd-lv2-marker__dot circle { fill: var(--danger-btn-button, #00a898); }
html.ndpp-side-dark .nd-2025-sidebar .nd-2025-menu__group:not(.is-active):not(.is-open) > .nd-2025-menu__lv1link:hover { background: color-mix(in srgb, var(--danger-btn-button, #00a898) 22%, transparent); }
html.ndpp-side-accent-low .nd-2025-sidebar .nd-2025-menu__group:not(.is-active):not(.is-open) > .nd-2025-menu__lv1link:hover { background: var(--nd-hover-2); }
html.ndpp-side-accent-low .nd-2025-sidebar .nd-2025-menu__group:not(.is-active):not(.is-open) > .nd-2025-menu__lv1link:hover .nd-2025-menu__icon,
html.ndpp-side-accent-low .nd-2025-sidebar .nd-2025-menu__group:not(.is-active):not(.is-open) > .nd-2025-menu__lv1link:hover .nd-2025-menu__text { color: var(--nd-text); }

.ndpp-obj-entity__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
}

.ndpp-obj-entity.is-collapsed .ndpp-obj-entity__head {
    margin-bottom: 0;
}

.ndpp-obj-entity__chev {
    font-size: 11px;
    color: var(--ndpp-muted, #5a6576);
    transition: transform .15s;
    flex: 0 0 auto;
}

.ndpp-obj-entity.is-collapsed .ndpp-obj-entity__chev {
    transform: rotate(-90deg);
}

.ndpp-obj-entity__name {
    font-weight: 600;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-obj-entity__sum {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-left: 6px;
}

.ndpp-oe-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ndpp-muted, #5a6576);
    background: #eef1f6;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    padding: 1px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

    .ndpp-oe-badge > b {
        font-weight: 700;
        color: var(--danger-btn-button);
        font-variant-numeric: tabular-nums;
    }

    .ndpp-oe-badge.is-empty {
        color: var(--ndpp-muted, #5a6576);
        background: transparent;
        border-style: dashed;
    }

.ndpp-obj-entity__head .ndpp-add-ico {
    margin-left: auto;
    flex: 0 0 auto;
}
/* checkbox-list card แบบ Activity RoPA — scoped ใต้ .ndpp-obj-entity ใช้ global token */
.ndpp-obj-entity .rp-card {
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 12px;
}

.ndpp-obj-entity .rp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--ndpp-line, #e2e5e9);
    background: #f6f7f9;
}

.ndpp-obj-entity .rp-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--ndpp-ink, #1f2329);
}

.ndpp-obj-entity .rp-tools {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ndpp-line, #e2e5e9);
}

.ndpp-obj-entity .rp-search {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
}

    .ndpp-obj-entity .rp-search:focus {
        outline: 0;
        border-color: #b9bdc4;
    }

.ndpp-obj-entity .rp-linkbtn {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--danger-btn-button);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

    .ndpp-obj-entity .rp-linkbtn:hover {
        background: rgba(210,80,85,.09);
    }

.ndpp-obj-entity .rp-listcount {
    background: #fff;
    border-bottom: 1px solid var(--ndpp-line, #e2e5e9);
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ndpp-muted, #5a6576);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

    .ndpp-obj-entity .rp-listcount .rp-lc-lbl {
        font-weight: 500;
        opacity: .7;
    }

.ndpp-obj-entity .rp-list {
    padding: 8px 10px;
    max-height: 240px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .ndpp-obj-entity .rp-list .ndpp-check {
        padding: 7px 8px;
        border-radius: 8px;
        margin: 0;
        width: 100%;
        transition: background .12s;
    }

        .ndpp-obj-entity .rp-list .ndpp-check:hover {
            background: #f6f7f9;
        }

    .ndpp-obj-entity .rp-list .ndpp-check__text {
        font-size: 13px;
    }

.ndpp-obj-entity .rp-empty {
    padding: 16px;
    color: var(--ndpp-muted, #5a6576);
    font-size: 12.5px;
    text-align: center;
}
/* modal Add/Edit Objective — กว้างขึ้น (per-entity มี card 2 คอลัมน์) */
.ndpp-obj-modal-wide {
    max-width: 1400px;
    width: 96vw;
}

.ndpp-fav-edit:hover {
    text-decoration: underline;
    color: var(--danger-btn-button);
}
/* ตารางสรุป + แก้ไข inline ต่อ entity (per-objective × entity) */
.ndpp-oe-summary {
    margin: 4px 0 14px;
}

    .ndpp-oe-summary table {
        margin-bottom: 0;
        table-layout: fixed;
        width: 100%;
    }

    .ndpp-oe-summary td {
        font-size: 12.5px;
        vertical-align: top;
        white-space: normal;
        word-break: break-word;
    }
    /* กำหนดสัดส่วนคอลัมน์ (thead กำหนดความกว้างใน table-layout:fixed) — General แคบลง, ที่เหลือสมดุล */
    .ndpp-oe-summary thead th:nth-child(1) {
        width: 15%;
    }
    /* Entity */
    .ndpp-oe-summary thead th:nth-child(2) {
        width: 20%;
    }
    /* General Personal Data */
    .ndpp-oe-summary thead th:nth-child(3) {
        width: 15%;
    }
    /* Sensitive Data */
    .ndpp-oe-summary thead th:nth-child(4) {
        width: 14%;
    }
    /* Collection Channel */
    .ndpp-oe-summary thead th:nth-child(5) {
        width: 16%;
    }
    /* Disclosure */
    .ndpp-oe-summary thead th:nth-child(6) {
        width: 14%;
    }
    /* Country */
    .ndpp-oe-summary thead th:nth-child(7) {
        width: 6%;
    }
    /* action */
    .ndpp-oe-summary .ndpp-col-action {
        white-space: nowrap;
    }
    /* คอลัมน์ Country (ที่ 6) ไม่ให้แคบจนชื่อประเทศตัดกลางคำ (THAILAND -> TH/AIL/AN/D) #4001 */
    .ndpp-oe-summary th:nth-child(6), .ndpp-oe-summary td:nth-child(6) {
        min-width: 110px;
    }

    .ndpp-oe-summary .ndpp-oe-row.is-editing > td {
        background: #f3f6fb;
    }

    .ndpp-oe-summary .ndpp-oe-editrow > td {
        background: #fafbfc;
        padding: 8px 14px 2px;
        border-top: 0;
    }
/* .ndpp-obj-entity ในแถว editor = แค่ตัว scope ของ .rp-* (ไม่เอากล่อง/ขอบ/พื้นของมัน) */
.ndpp-oe-editrow .ndpp-obj-entity {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
}

.ndpp-oe-editrow .row {
    margin-left: 0;
    margin-right: 0;
}
/* Sensitive Data (ม.26) — header โทนม่วง/แดง เหมือนหน้า ActivityDetail (--sens = #a21caf) */
.ndpp-obj-entity .rp-card.rp-sens {
    border-color: #f0abfc;
}

.ndpp-obj-entity .rp-sens .rp-head {
    background: #fdf4ff;
}

.ndpp-obj-entity .rp-sens .rp-title {
    color: #a21caf;
}

    .ndpp-obj-entity .rp-sens .rp-title i {
        color: #a21caf;
    }

.ndpp-obj-entity .rp-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fae8ff;
    color: #a21caf;
}

.ndpp-obj-entity .rp-sens .ndpp-check > input:checked + .ndpp-check__box {
    background: #a21caf;
    border-color: #a21caf;
}

/* defect #4018: ระหว่าง Master Data Setup tour (Shepherd) เปิดอยู่ overlay(path)/popup ของ tour z-index สูงกว่า modal เลยบังปุ่ม Close/X จนกดปิด modal ไม่ได้ — เมื่อมี modal เปิด (body.modal-open) ให้ overlay+popup ของ tour คลิกทะลุ (modal กดได้, ปิด modal แล้ว tour กลับมาปกติ ไม่ต้องยกเลิก tour) */
body.modal-open .shepherd-modal-overlay-container,
body.modal-open .shepherd-modal-overlay-container path,
body.modal-open .shepherd-element {
    pointer-events: none !important;
}

/* Legal Basis master — ป้าย Document References ที่มีการอ้างอิง: hover ดูรายชื่อ Privacy Notice/Policy ที่ถูกนับ */
.ndpp-ref-hover {
    display: inline-block;
    max-width: 100%;
    cursor: help;
}

    .ndpp-ref-hover:hover > span {
        text-decoration: underline dotted;
        text-underline-offset: 2px;
    }

.ndpp-scope-tip.ndpp-ref-tip {
    min-width: 240px;
    max-width: 420px;
    padding: 10px 14px 11px;
    text-align: start;
}

.ndpp-ref-tip__head {
    font-weight: 700;
    font-size: 12px;
    margin: 8px 0 3px;
    color: #334;
}

.ndpp-ref-tip__title {
    font-weight: 700;
    font-size: 12.5px;
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--ndpp-line, #e6e9ef);
}

.ndpp-ref-tip__list {
    margin: 0;
    padding-inline-start: 16px;
}

    .ndpp-ref-tip__list li {
        font-size: 12px;
        line-height: 1.45;
        margin: 1px 0;
    }

.ndpp-ref-tip__more {
    list-style: none;
    color: #8a929c;
}

.ndpp-ref-tip__empty {
    font-size: 12px;
    color: #8a929c;
}

/* FN-01-05 Entity Comment / Note — รายการโน้ตในแท็บ Comment / Note ของ modal Entity */
.ndpp-entnote {
    border: 1px solid var(--ndpp-line, #e6e9ef);
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.ndpp-entnote__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: .78rem;
    color: var(--ndpp-muted, #8a929c);
}

.ndpp-entnote__del {
    border: 0;
    background: transparent;
    padding: 2px 4px;
    color: #ef4444;
    line-height: 1;
    cursor: pointer;
}

.ndpp-entnote__text {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ndpp-ink, #1f2329);
    font-size: .85rem;
}

.ndpp-entnote-composer__act {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.ndpp-wmodal__toptab .ndpp-entnote-count {
    margin-inline-start: 6px;
    padding: 0 7px;
    border-radius: 10px;
    font-size: .72rem;
    background: var(--ndpp-line, #e6e9ef);
    color: var(--ndpp-ink, #1f2329);
}
/* Rebranding Config (ConfigTheme) */
.ndpp-themecolors { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ndpp-themecolor { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--ndpp-line, #e2e5e9); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 400; transition: border-color .15s ease, box-shadow .15s ease; }
.ndpp-themecolor:hover { border-color: #cfd4da; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.ndpp-themecolor:focus-within { border-color: #b9bdc4; }
.ndpp-themecolor.is-changed { border-color: color-mix(in srgb, var(--danger-btn-button, #00a898) 45%, #fff); }
.ndpp-themecolor__swatch { position: relative; flex: none; width: 40px; height: 40px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); overflow: hidden; transition: background-color .2s ease; }
.ndpp-themecolor__swatch input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.ndpp-themecolor__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ndpp-themecolor__name { font-size: .88rem; font-weight: 600; color: var(--ndpp-ink, #1f2329); }
.ndpp-themecolor__hint { font-size: .75rem; line-height: 1.4; color: var(--ndpp-muted, #8b93a1); }
.ndpp-themecolor__hex { flex: none; padding: 5px 7px; border-radius: 6px; background: #f4f5f7; color: #545b66; font: 500 .75rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.ndpp-themeassets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ndpp-themeasset { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ndpp-themeasset__label { font-size: .85rem; font-weight: 600; color: var(--ndpp-ink, #1f2329); }
.ndpp-themeasset__frame { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border: 1px solid var(--ndpp-line, #e2e5e9); border-radius: 12px; overflow: hidden; background-color: #fafbfc; }
.ndpp-themeasset__frame--logo { padding: 18px; background-image: linear-gradient(45deg, #f1f3f5 25%, transparent 25%), linear-gradient(-45deg, #f1f3f5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f3f5 75%), linear-gradient(-45deg, transparent 75%, #f1f3f5 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.ndpp-themeasset__frame--logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ndpp-themeasset__frame--bg img { width: 100%; height: 100%; object-fit: cover; }
.ndpp-themeasset__pick { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 12px; border: 1px solid var(--ndpp-line, #e2e5e9); border-radius: 9px; background: #fff; color: var(--ndpp-ink, #1f2329); font-size: .8rem; font-weight: 500; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.ndpp-themeasset__pick:hover { border-color: #cfd4da; background: #f8f9fb; }
.ndpp-themeasset__pick input[type="file"] { display: none; }
.ndpp-themeasset__pick > .ndpp-ico { width: 13px; height: 13px; color: #8a929c; }
.ndpp-themeasset .ndpp-upload__note { margin-top: 0; }

.ndpp-themepreview { margin-top: 4px; border: 1px solid var(--ndpp-line, #e2e5e9); border-radius: 12px; overflow: hidden; background: var(--tp-body, #f7f8fa); }
.ndpp-themepreview__header { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 10px; background: var(--tp-header, #fff); border-bottom: 1px solid rgba(15, 23, 42, .08); transition: background .2s ease; }
.ndpp-themepreview__header img { height: 16px; max-width: 70px; object-fit: contain; }
.ndpp-themepreview__dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(15, 23, 42, .12); }
.ndpp-themepreview__main { display: flex; height: 150px; }
.ndpp-themepreview__side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 46px; padding-top: 10px; background: var(--tp-side, #fff); border-inline-end: 1px solid rgba(15, 23, 42, .08); transition: background .2s ease; }
.ndpp-themepreview__side > span { width: 22px; height: 22px; border-radius: 7px; background: rgba(15, 23, 42, .08); }
.ndpp-themepreview__side > span.is-active { background: color-mix(in srgb, var(--tp-btn, #00a898) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--tp-btn, #00a898); }
.ndpp-themepreview__body { flex: 1 1 auto; padding: 12px; background: var(--tp-body, #f7f8fa); transition: background .2s ease; }
.ndpp-themepreview__card { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.ndpp-themepreview__line { width: 80%; height: 6px; border-radius: 3px; background: #e6e9ee; }
.ndpp-themepreview__line--short { width: 50%; }
.ndpp-themepreview__btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.ndpp-themepreview__btn { width: 44px; height: 16px; border-radius: 5px; background: var(--tp-btn, #00a898); border: 1.5px solid var(--tp-border, #00a898); transition: background .2s ease, border-color .2s ease; }
.ndpp-themepreview__btn--outline { background: #fff; }

.ndpp-themecolor__end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ndpp-themecolor__def { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 5px; border: 1px solid var(--ndpp-line, #e2e5e9); border-radius: 999px; background: #fff; color: #6b7380; font-size: .7rem; font-weight: 500; line-height: 16px; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.ndpp-themecolor__def:hover { border-color: #cfd4da; color: var(--ndpp-ink, #1f2329); }
.ndpp-themecolor__def:focus { outline: none; }
.ndpp-themecolor__def:focus-visible { box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb, 0, 168, 152), .2); }
.ndpp-themecolor__defdot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18); }
.ndpp-themedefault { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ndpp-themedefault__dots { display: inline-flex; }
.ndpp-themedefault__dots > span { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1px rgba(15, 23, 42, .18); }
.ndpp-themedefault__dots > span + span { margin-inline-start: -3px; }

@media (max-width: 767.98px) {
    .ndpp-themeassets { grid-template-columns: 1fr; }
}

/* theme contrast — class ติดที่ <html> โดย SetThemeContrast (nsdx-config-theme.js) */
html.ndpp-side-dark .nd-2025-sidebar,
html.ndpp-side-dark .nd-2025-flyout { --nd-text: rgba(255, 255, 255, .94); --nd-muted: rgba(255, 255, 255, .72); --nd-muted2: rgba(255, 255, 255, .5); --nd-border: rgba(255, 255, 255, .12); --nd-hover: rgba(255, 255, 255, .06); --nd-hover-2: rgba(255, 255, 255, .1); }
html.ndpp-side-dark .nd-2025-sidebar .nd-2025-menu__icon,
html.ndpp-side-dark .nd-2025-flyout-icon { color: rgba(255, 255, 255, .7); }
html.ndpp-side-dark .nd-2025-sidebar .nd-2025-menu__group:not(.is-active):not(.is-open) > .nd-2025-menu__lv1link:hover .nd-2025-menu__icon,
html.ndpp-side-dark .nd-2025-flyout-item:not(.is-active):hover .nd-2025-flyout-icon { color: #fff; }
html.ndpp-side-dark .nd-2025-sidebar .nd-2025-menu__lv2 { background: rgba(255, 255, 255, .04); }
html.ndpp-side-dark .nd-2025-sidebar .nd-2025-menu__lv2link:hover,
html.ndpp-side-dark .nd-2025-sidebar .nd-2025-menu__lv1link:hover .nd-2025-menu__caret,
html.ndpp-side-dark .nd-2025-sidebar--collapsed .nd-2025-productmark:hover { background: rgba(255, 255, 255, .08); }
html.ndpp-side-dark .nd-2025-sidebar .nd-2025-expandbtn { color: var(--nd-muted); }
html.ndpp-side-dark .nd-2025-sidebar .nd-2025-expandbtn:hover { background: rgba(255, 255, 255, .08); }
html.ndpp-side-dark .nd-2025-sidebar .nd-lv2-marker line { stroke: rgba(255, 255, 255, .18); }
html.ndpp-side-dark .nd-2025-flyout { border-color: rgba(255, 255, 255, .12); }
html.ndpp-side-dark .nd-2025-flyout-title { color: var(--nd-text); border-bottom-color: rgba(255, 255, 255, .1); }
html.ndpp-side-dark .nd-2025-flyout-item { color: rgba(255, 255, 255, .88); }
html.ndpp-side-dark .nd-2025-flyout-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }

html.ndpp-side-dark .nd-2025-productbrand__title,
html.ndpp-side-dark .nd-2025-productbrand__sub { color: var(--nd-text); }
html.ndpp-side-dark .nd-2025-sidebar .nd-search__hintText { color: var(--nd-muted2); }
html.ndpp-side-dark .nd-2025-sidebar .nd-search__bar { --nd-text: #0F172A; --nd-muted: #64748B; --nd-muted2: #94A3B8; background: #fff; border-color: transparent; }
html.ndpp-side-accent-low .nd-2025-expandbtn__text { color: var(--nd-text); }

/* สีปุ่มกลืนกับพื้น sidebar — เมนู active ใช้สีตัวอักษรของ sidebar แทนสีปุ่ม */
html.ndpp-side-accent-low .nd-2025-menu__group.is-active > .nd-2025-menu__lv1link,
html.ndpp-side-accent-low .nd-2025-menu__group.is-open > .nd-2025-menu__lv1link,
html.ndpp-side-accent-low .nd-2025-flyout-item.is-active { background: var(--nd-hover-2); color: var(--nd-text); }
html.ndpp-side-accent-low .nd-2025-menu__group.is-active > .nd-2025-menu__lv1link .nd-2025-menu__icon,
html.ndpp-side-accent-low .nd-2025-menu__group.is-active > .nd-2025-menu__lv1link .nd-2025-menu__text,
html.ndpp-side-accent-low .nd-2025-menu__group.is-open > .nd-2025-menu__lv1link .nd-2025-menu__icon,
html.ndpp-side-accent-low .nd-2025-menu__group.is-open > .nd-2025-menu__lv1link .nd-2025-menu__text,
html.ndpp-side-accent-low .nd-2025-flyout-item.is-active .nd-2025-flyout-icon { color: var(--nd-text); }
html.ndpp-side-accent-low .nd-2025-menu__group.is-active > .nd-2025-menu__lv1link::before { background: var(--nd-text) !important; }
html.ndpp-side-accent-low .nd-2025-sidebar .nd-lv2-marker__dot circle { fill: var(--nd-text); }

html.ndpp-hdr-accent-low a.ndpp-breadcrumb__item:hover,
html.ndpp-hdr-accent-low a.ndpp-breadcrumb__item:focus { color: var(--ndpp-ink, #1f2937); text-decoration: underline; }
html.ndpp-hdr-dark .ndpp-breadcrumb__item { color: rgba(255, 255, 255, .72); }
html.ndpp-hdr-dark .ndpp-breadcrumb__item--current { color: #fff; }
html.ndpp-hdr-dark .ndpp-breadcrumb__sep { color: rgba(255, 255, 255, .4); }
html.ndpp-hdr-dark a.ndpp-breadcrumb__item:hover,
html.ndpp-hdr-dark a.ndpp-breadcrumb__item:focus { color: #fff; }
html.ndpp-hdr-dark .main-header .header2025-btn.icon-btn,
html.ndpp-hdr-dark .main-header .header2025-btn.lang-btn,
html.ndpp-hdr-dark .main-header .ms-setup-badge { background: #fff; border-color: transparent; }
html.ndpp-hdr-dark .main-header .header2025-btn.icon-btn:hover,
html.ndpp-hdr-dark .main-header .header2025-btn.lang-btn:hover { background: #f3f5f8; }

/* ── การ์ดผู้ใช้แบบ hover (NdppUserCards) ─────────────────────────────────── */
/* โครงข้างในเป็น sp-idcard ที่นี่คุมแค่ตำแหน่ง แอนิเมชัน และย่อขนาดให้พอดีการ์ด hover */
/* ⚠️ ถ้าจะใส่ปุ่มในการ์ดต้องเอา pointer-events:none ออก แล้วเมาส์ที่ย้ายจากเซลล์เข้าการ์ด */
/* จะทำให้เซลล์เกิด mouseout → ตั้งเวลาปิด → การ์ดหนีตอนจะกด ต้องเพิ่ม mouseenter ที่การ์ดด้วย */
.ndpp-ucard {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
    width: 21rem;
    max-width: 21rem;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(31, 35, 41, .04), 0 20px 48px -14px rgba(31, 35, 41, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.94);
    transform-origin: top left;
    transition: opacity .16s ease, transform .16s cubic-bezier(.2, .8, .3, 1), visibility 0s .16s;
    pointer-events: none;
}

.ndpp-ucard.is-above { transform: translateY(10px) scale(.94); transform-origin: bottom left; }
[dir="rtl"] .ndpp-ucard { transform-origin: top right; }
[dir="rtl"] .ndpp-ucard.is-above { transform-origin: bottom right; }

.ndpp-ucard.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1);
}

/* เนื้อในทยอยขึ้นตามการ์ด — keyframe ยิงตอน is-open เท่านั้น (render ใหม่ทุกครั้งที่เปิด) */
@keyframes ndpp-ucard-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ndpp-ucard-av { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
.ndpp-ucard.is-open .sp-avatar-wrap { animation: ndpp-ucard-av .38s cubic-bezier(.34, 1.4, .64, 1) .08s both; }
.ndpp-ucard.is-open .sp-idcard__name,
.ndpp-ucard.is-open .ndpp-ucard__role,
.ndpp-ucard.is-open .sp-idcard__list > *,
.ndpp-ucard.is-open .ndpp-tags,
.ndpp-ucard.is-open .ndpp-ucard__none { animation: ndpp-ucard-in .32s cubic-bezier(.22, .61, .36, 1) both; }
.ndpp-ucard.is-open .sp-idcard__name { animation-delay: .14s; }
.ndpp-ucard.is-open .ndpp-ucard__role { animation-delay: .18s; }
.ndpp-ucard.is-open .sp-idcard__list > :nth-child(1) { animation-delay: .2s; }
.ndpp-ucard.is-open .sp-idcard__list > :nth-child(2) { animation-delay: .25s; }
.ndpp-ucard.is-open .sp-idcard__list > :nth-child(3) { animation-delay: .3s; }
.ndpp-ucard.is-open .sp-idcard__list > :nth-child(n+4) { animation-delay: .35s; }
.ndpp-ucard.is-open .ndpp-tags { animation-delay: .34s; }
.ndpp-ucard.is-open .ndpp-ucard__none { animation-delay: .14s; }

/* การ์ดเจ้าของข้อมูล (ไม่มีปก/รูป) — ชุดเดียวกัน คนละชื่อ class */
.ndpp-ucard.is-open .ndpp-dscard__av { animation: ndpp-ucard-av .38s cubic-bezier(.34, 1.4, .64, 1) .06s both; }
.ndpp-ucard.is-open .ndpp-dscard__namerow,
.ndpp-ucard.is-open .ndpp-dscard__mail,
.ndpp-ucard.is-open .ndpp-dscard__role,
.ndpp-ucard.is-open .ndpp-dscard__sec { animation: ndpp-ucard-in .32s cubic-bezier(.22, .61, .36, 1) both; }
.ndpp-ucard.is-open .ndpp-dscard__namerow { animation-delay: .12s; }
.ndpp-ucard.is-open .ndpp-dscard__mail { animation-delay: .17s; }
.ndpp-ucard.is-open .ndpp-dscard__role { animation-delay: .22s; }
.ndpp-ucard.is-open .ndpp-dscard__sec { animation-delay: .26s; }
.ndpp-ucard.is-open .ndpp-dscard__sec .ndpp-tag:nth-child(1) { animation: ndpp-ucard-in .3s cubic-bezier(.22, .61, .36, 1) .32s both; }
.ndpp-ucard.is-open .ndpp-dscard__sec .ndpp-tag:nth-child(2) { animation: ndpp-ucard-in .3s cubic-bezier(.22, .61, .36, 1) .37s both; }
.ndpp-ucard.is-open .ndpp-dscard__sec .ndpp-tag:nth-child(n+3) { animation: ndpp-ucard-in .3s cubic-bezier(.22, .61, .36, 1) .42s both; }

@media (prefers-reduced-motion: reduce) {
    .ndpp-ucard, .ndpp-ucard.is-open { transition: opacity .12s ease; transform: none; }
    .ndpp-ucard.is-open * { animation: none !important; }
}

/* ย่อจาก 92px/108px ของ sidebar — margin-top ต้องเป็นครึ่งของขนาดรูปติดลบ จึงคร่อมแถบพอดี */
.ndpp-ucard .sp-idcard__band {
    height: 62px;
}

.ndpp-ucard .sp-avatar-wrap {
    width: 76px;
    height: 76px;
    margin-top: -38px;
}

.ndpp-ucard .sp-avatar {
    border-width: 3px;
}

/* ไม่มีรูป — ไม่ปล่อยให้เป็นช่องขาวเปล่า */
.ndpp-ucard span.sp-avatar {
    display: block;
    background: #eef1f5;
}

/* การ์ดของเจ้าของข้อมูล — คนละทรงกับ sp-idcard ไม่มีปกและไม่มีรูปคร่อมปก */
.ndpp-ucard--ds {
    width: 19rem;
    max-width: 19rem;
    padding: 14px 16px 16px;
    background: #fff;
    border: 1px solid var(--ndpp-line, #eef0f3);
}

.ndpp-dscard__head {
    display: flex;
    align-items: center;
    gap: 11px;
}

/* ตัวย่อชุดเดียวกับ .ndpp-idcell__av ในเซลล์ตาราง ขยับขนาดขึ้นให้สมกับการ์ด */
.ndpp-dscard__av {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--danger-btn-button, #00a898);
    background: color-mix(in srgb, var(--danger-btn-button, #00a898) 12%, #fff);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1;
}

/* เคสเก่าที่ตัวตนในการ์ดเป็นผู้แจ้งเหตุ — ไอคอนตกใจสีส้มแทนตัวย่อ */
.ndpp-dscard__av--rp {
    color: #e58a00;
    background: color-mix(in srgb, #ff9800 14%, #fff);
    border: 1px solid color-mix(in srgb, #ff9800 32%, #fff);
}

.ndpp-dscard__av--rp .ndpp-ico {
    width: 19px;
    height: 19px;
}

.ndpp-dscard__av.is-minor {
    color: #ff9800;
    background: color-mix(in srgb, #ff9800 14%, #fff);
}

.ndpp-dscard__id {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ndpp-dscard__namerow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ndpp-dscard__name {
    min-width: 0;
    color: var(--ndpp-ink, #1f2329);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-dscard__mail {
    color: var(--ndpp-faint, #9aa1a9);
    font-size: .8rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-dscard__role {
    margin-top: 11px;
}

.ndpp-dscard__sec {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--ndpp-line, #eef0f3);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ndpp-dscard__label {
    color: var(--ndpp-faint, #9aa1a9);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .01em;
}

.ndpp-ucard .sp-idcard__name {
    margin-top: 11px;
    font-size: 1rem;
}

.ndpp-ucard .sp-idcard__list {
    margin-top: 18px;
    padding-top: 16px;
    gap: 15px;
}

/* ไม่ใช้ไอคอนนำแถว body จึงต้องยืดเต็มแถวเอง ไม่งั้นกว้างเท่า max-content แล้วชิปไม่ตัดบรรทัด */
.ndpp-ucard .sp-idrow__body {
    flex: 1 1 auto;
}

.ndpp-ucard__role {
    display: block;
    margin-top: 9px;
}

/* gap .9rem ของระบบกว้างเกินสำหรับการ์ด hover */
.ndpp-ucard .ndpp-tags {
    gap: 6px;
    min-width: 0;
}

/* ลดความสูงป้ายลงจากที่ออกแบบไว้ให้เซลล์ตาราง สี/ขอบ/มุมมน/ขนาดอักษรคงเดิม */
/* break-word ไม่ใช่ anywhere — anywhere ยอมหักกลางคำแม้ยังมีที่ตัดที่ดีกว่า */
.ndpp-ucard .ndpp-tag {
    padding: 4px 10px;
    margin-top: 3px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
}

/* ในตาราง --more กดได้เพื่อกางรายการ ในการ์ดไม่มีที่ให้กาง */
.ndpp-ucard .ndpp-tag--more {
    cursor: default;
    font-variant-numeric: tabular-nums;
}

.ndpp-ucard__none {
    color: rgba(31, 35, 41, .3);
    font-size: .88rem;
}

[dir="rtl"] .ndpp-ucard {
    transform-origin: top right;
}

/* Usage Type — list + modal (ใช้ช่องกรอกชุดเดียวกับฟอร์ม Role) */
.modal.fade.center-modal.ndpp-ut-wmodal .modal-dialog {
    width: 560px;
    max-width: 92vw;
}

.ndpp-ut-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.ndpp-ut-name__main,
.ndpp-ut-name__sub {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ndpp-ut-name__main {
    font-weight: 600;
    color: var(--ndpp-ink, #0F172A);
}

.ndpp-ut-name__sub {
    font-size: 12px;
    color: #64748B;
}

.ndpp-ut-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #334155;
    background: #F1F5F9;
    border-radius: 999px;
}

    .ndpp-ut-count > .ndpp-ico {
        width: 12px;
        height: 12px;
        color: #7991b4;
    }

.ndpp-scope-list__lock.ndpp-ut-inuse {
    margin-top: 10px;
    color: #475569;
    background: #F8FAFC;
    border-color: #E2E8F0;
}

/* Tutorial Playlist */
.modal.fade.center-modal.ndpp-tpl-wmodal .modal-dialog {
    width: 760px;
    max-width: 94vw;
}

.ndpp-tpl-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.ndpp-tpl-wmodal .ndpp-wmodal__left textarea.form-control {
    min-height: 88px;
}

.ndpp-tpl-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    color: #334155;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.ndpp-tpl-link:hover,
.ndpp-tpl-link:focus {
    border-color: var(--danger-btn-button);
    color: var(--danger-btn-button);
    text-decoration: none;
    outline: none;
}

.ndpp-tpl-link > .fa {
    flex: none;
    color: var(--danger-btn-button);
}

.ndpp-tpl-link > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-tpl-link.is-plain {
    color: #64748B;
}

.ndpp-tpl-link.is-plain > .fa {
    color: #94A3B8;
}

@media (max-width: 700px) {
    .ndpp-tpl-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Data Discovery Dashboard */
.ndpp-ddd-add,
.ndpp-ddd-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ndpp-ddd-add:focus,
.ndpp-ddd-link:focus {
    outline: none;
}

.ndpp-ddd-add {
    border: 1px dashed #CBD5E1;
    background: #fff;
    color: #64748B;
}

.ndpp-ddd-add:hover {
    border-color: var(--danger-btn-button);
    border-style: solid;
    color: var(--danger-btn-button);
}

.ndpp-ddd-add > .fa {
    font-size: 11px;
}

.ndpp-ddd-link {
    border: 1px solid color-mix(in srgb, var(--danger-btn-button) 30%, #fff);
    background: rgba(var(--danger-btn-button-rgb), .07);
    color: var(--danger-btn-button);
}

.ndpp-ddd-link:hover {
    background: rgba(var(--danger-btn-button-rgb), .14);
}

.ndpp-ddd-link > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ndpp-ddd-link > .ndpp-ico {
    flex: none;
    width: 14px;
    height: 14px;
}

.ndpp-ddd-link > .ndpp-ddd-link__edit {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity .15s ease;
}

.ndpp-ddd-link:hover > .ndpp-ddd-link__edit {
    opacity: .8;
}

/* Document File Attachment */
.modal.fade.center-modal.ndpp-dfa-wmodal .modal-dialog {
    width: 480px;
    max-width: 92vw;
}

.ndpp-dfa-wmodal .ndpp-upload__file {
    max-width: 300px;
}

.ndpp-dfa-type {
    display: inline-block;
    min-width: 46px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #F1F5F9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
}

.ndpp-dfa-type--pdf { background: #FEF2F2; color: #DC2626; }
.ndpp-dfa-type--doc,
.ndpp-dfa-type--docx { background: #EFF6FF; color: #2563EB; }
.ndpp-dfa-type--xls,
.ndpp-dfa-type--xlsx,
.ndpp-dfa-type--csv { background: #ECFDF5; color: #059669; }
.ndpp-dfa-type--ppt,
.ndpp-dfa-type--pptx { background: #FFF7ED; color: #EA580C; }
.ndpp-dfa-type--png,
.ndpp-dfa-type--jpg,
.ndpp-dfa-type--gif { background: #F5F3FF; color: #7C3AED; }

/* Risk Level Config */
.modal.fade.center-modal.ndpp-crisk-wmodal .modal-dialog {
    width: 640px;
    max-width: 92vw;
}

.ndpp-crisk-example {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    padding: 5px 11px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.ndpp-crisk-example:focus,
.ndpp-crisk-example:active {
    outline: none;
    box-shadow: none;
}

.ndpp-crisk-example:hover {
    border-color: var(--danger-btn-button);
    color: var(--danger-btn-button);
}

.ndpp-crisk-example > .ndpp-ico {
    width: 14px;
    height: 14px;
}

.ndpp-crisk-hint {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #64748B;
}

.ndpp-crisk-example__img {
    display: block;
    max-width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
}

.ndpp-crisk-matrix {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 6px;
}

.ndpp-crisk-matrix__y {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ndpp-crisk-matrix__y > span {
    transform: rotate(-90deg);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #94A3B8;
}

.ndpp-crisk-matrix__x {
    grid-column: 2;
    padding-top: 4px;
    padding-inline-start: 110px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #94A3B8;
}

.ndpp-crisk-matrix table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 4px;
}

.ndpp-crisk-matrix th {
    width: 110px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    text-align: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ndpp-crisk-matrix tfoot th {
    width: auto;
    padding: 6px 2px 0;
    text-align: center;
}

.ndpp-crisk-matrix tfoot th:first-child {
    width: 110px;
}

.ndpp-crisk-matrix td {
    position: relative;
    height: 58px;
    padding: 6px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    transition: background-color .2s ease;
}

.ndpp-crisk-matrix__lbl {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

.ndpp-crisk-matrix__num {
    position: absolute;
    top: 4px;
    inset-inline-end: 7px;
    font-size: 10px;
    font-weight: 600;
    opacity: .75;
}

.ndpp-crisk-levels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.ndpp-crisk-level {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--ndpp-line, #e2e5e9);
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ndpp-crisk-level:hover {
    border-color: #cfd4da;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}

.ndpp-crisk-level > .ndpp-themecolor__swatch {
    margin: 0;
    cursor: pointer;
}

.ndpp-crisk-level__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ndpp-crisk-level__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.ndpp-crisk-level__name {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}

.ndpp-crisk-level__hex {
    font-size: 11.5px;
    color: #94A3B8;
}

.ndpp-crisk-level__range {
    margin-inline-start: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lv, #64748B) 14%, #fff);
    font-size: 12px;
    font-weight: 600;
    color: color-mix(in srgb, var(--lv, #64748B) 75%, #0F172A);
}

.ndpp-crisk-level__count {
    font-size: 12px;
    color: #64748B;
    white-space: nowrap;
}

.ndpp-crisk-level__count > b {
    color: #0F172A;
}

.ndpp-crisk-level__slider {
    --fill: color-mix(in srgb, var(--lv, #64748B) 85%, #fff);
    width: 100%;
    height: 18px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ndpp-crisk-level__slider:focus {
    outline: none;
}

.ndpp-crisk-level__slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--fill) 0, var(--fill) var(--p, 0%), #E9EDF2 var(--p, 0%), #E9EDF2 100%);
}

.ndpp-crisk-level__slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: #E9EDF2;
}

.ndpp-crisk-level__slider::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--fill);
}

.ndpp-crisk-level__slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 3px solid var(--lv, #64748B);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
    -webkit-appearance: none;
    appearance: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.ndpp-crisk-level__slider::-moz-range-thumb {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 3px solid var(--lv, #64748B);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
    transition: transform .15s ease, box-shadow .15s ease;
}

.ndpp-crisk-level__slider:hover::-webkit-slider-thumb,
.ndpp-crisk-level__slider:active::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--lv, #64748B) 18%, transparent), 0 1px 4px rgba(15, 23, 42, .2);
}

.ndpp-crisk-level__slider:hover::-moz-range-thumb,
.ndpp-crisk-level__slider:active::-moz-range-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--lv, #64748B) 18%, transparent), 0 1px 4px rgba(15, 23, 42, .2);
}

[dir="rtl"] .ndpp-crisk-level__slider::-webkit-slider-runnable-track {
    background: linear-gradient(to left, var(--fill) 0, var(--fill) var(--p, 0%), #E9EDF2 var(--p, 0%), #E9EDF2 100%);
}

.ndpp-crisk-level__lock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94A3B8;
}

.ndpp-crisk-level__lock > .ndpp-ico {
    width: 13px;
    height: 13px;
}

.ndpp-crisk-dist {
    display: flex;
    gap: 2px;
    height: 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    overflow: hidden;
}

.ndpp-crisk-dist > span {
    flex-basis: 0;
    min-width: 2px;
    transition: flex-grow .2s ease, background-color .2s ease;
}

.ndpp-crisk-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ndpp-crisk-legend > li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
}

.ndpp-crisk-legend > li > i {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.ndpp-crisk-legend > li > b {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    color: #0F172A;
}

@media (max-width: 760px) {
    .ndpp-crisk-matrix th { width: 72px; }
    .ndpp-crisk-matrix tfoot th:first-child { width: 72px; }
    .ndpp-crisk-matrix__x { padding-inline-start: 72px; }
    .ndpp-crisk-matrix td { height: 46px; }
    .ndpp-crisk-matrix__lbl { font-size: 10.5px; }
}

/* Personal Access Token */
.modal.fade.center-modal.ndpp-pat-wmodal:not(.ndpp-sm-wmodal) .modal-dialog {
    width: 980px;
    max-width: 94vw;
}

.modal.fade.center-modal.ndpp-pat-newmodal .modal-dialog {
    width: 560px;
    max-width: 92vw;
}

.ndpp-pat-wmodal .ndpp-wmodal__left {
    flex: 1 1 40%;
}

.ndpp-pat-scopes {
    flex: 1 1 60%;
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ndpp-pat-scopes .ndpp-wmodal__pv-head {
    margin-bottom: 0;
}

.ndpp-pat-scopes__count {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: var(--danger-btn-button);
}

.ndpp-pat-scopes__bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ndpp-pat-chip {
    height: 28px;
    padding: 0 11px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ndpp-pat-chip:hover {
    border-color: var(--danger-btn-button);
    color: var(--danger-btn-button);
}

.ndpp-pat-chip--solid,
.ndpp-pat-chip--solid:hover {
    border-color: var(--danger-btn-button);
    background: var(--danger-btn-button);
    color: #fff;
}

.ndpp-pat-chip--ghost {
    border-color: transparent;
    background: transparent;
    color: #64748B;
}

.ndpp-pat-scopes .ndpp-pat-scopes__search {
    width: 100%;
}

.ndpp-pat-scopes .ndpp-role-scopehint {
    margin-top: -4px;
}

.ndpp-pat-scopes__list {
    max-height: 44vh;
    overflow-y: auto;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #fff;
}

.ndpp-pat-scope {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    border-bottom: 1px solid #F1F5F9;
}

.ndpp-pat-scope:last-child {
    border-bottom: 0;
}

.ndpp-pat-scope__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: #0F172A;
}

.ndpp-pat-scope__acts {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ndpp-pat-tg {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    background: #fff;
    font-size: 11.5px;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ndpp-pat-tg > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ndpp-pat-tg:hover {
    border-color: #CBD5E1;
}

.ndpp-pat-tg.is-on {
    border-color: var(--danger-btn-button);
    background: rgba(var(--danger-btn-button-rgb), .1);
    color: var(--danger-btn-button);
}

.ndpp-pat-tg.is-off {
    opacity: .35;
    pointer-events: none;
}

.ndpp-pat-tg:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .15);
}

.ndpp-pat-rowbtn {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-inline-start: 2px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94A3B8;
    cursor: pointer;
}

.ndpp-pat-rowbtn:hover {
    background: #F1F5F9;
    color: #334155;
}

.ndpp-pat-rowbtn > .ndpp-ico {
    width: 14px;
    height: 14px;
}

.ndpp-pat-scopes__empty {
    padding: 18px;
    text-align: center;
    font-size: 13px;
    color: #94A3B8;
}

.ndpp-pat-mask {
    padding: 2px 8px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #374151;
    font-size: .8rem;
}

.ndpp-pat-warn {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    background: #FFFBEB;
    font-size: 13px;
    line-height: 1.55;
    color: #92400E;
}

.ndpp-pat-warn > .ndpp-ico {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #D97706;
}

.ndpp-pat-plain {
    display: flex;
    align-items: stretch;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    overflow: hidden;
}

.ndpp-pat-plain__val {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    background: transparent;
    color: #0F172A;
    font-size: 13px;
    word-break: break-all;
}

.ndpp-pat-plain__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 0;
    border-inline-start: 1px solid #E2E8F0;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--danger-btn-button);
    cursor: pointer;
}

.ndpp-pat-plain__copy:hover {
    background: rgba(var(--danger-btn-button-rgb), .06);
}

.ndpp-pat-plain__copy.is-done {
    color: #059669;
}

.ndpp-pat-plain__copy > .ndpp-ico {
    width: 15px;
    height: 15px;
}

@media (max-width: 860px) {
    .ndpp-pat-wmodal .ndpp-wmodal__split { flex-direction: column; align-items: stretch; }
}


/* ── Footer 2026 ─────────────────────────────────────────────── */
/* padding ขวา 86px กันปุ่มลอย NetkaGPT (fixed right:16px กว้าง 54px) ทับลิงก์ฝั่งขวา */
.ndpp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 18px;
    height: auto;
    min-height: 56px;
    padding: 14px 86px 14px 24px;
    background: #fff;
    border-top: 1px solid #EDEEF0;
    color: #64748B;
    font-size: 12.5px;
    line-height: 1.6;
}

.ndpp-footer__left,
.ndpp-footer__right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.ndpp-footer__brand {
    color: #0F172A;
    font-weight: 600;
}

.ndpp-footer__ver {
    padding: 1px 8px;
    border: 1px solid #D9F2EE;
    border-radius: 999px;
    background: #F0FDFA;
    color: #0F766E;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
}

.ndpp-footer__copy,
.ndpp-footer__rights {
    color: #94A3B8;
}

.ndpp-footer__link {
    color: #64748B;
    text-decoration: none;
    transition: color .15s ease;
}

    .ndpp-footer__link:hover,
    .ndpp-footer__link:focus {
        color: #01A998;
        text-decoration: none;
    }

/* เส้นคั่นกลุ่ม (แบรนด์ | ลิขสิทธิ์) */
.ndpp-footer__sep {
    width: 1px;
    height: 12px;
    margin: 0 2px;
    background: #E2E8F0;
}

/* จุดคั่นระหว่างลิงก์ */
.ndpp-footer__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #CBD5E1;
}

@media (max-width: 767px) {
    .ndpp-footer {
        justify-content: flex-start;
        padding: 12px 86px 12px 16px;
    }

    .ndpp-footer__sep {
        display: none;
    }
}

/* modal ฟอร์มแบบ Edit Widget (ndpp-role-wmodal) ใช้ร่วมกับหน้า master data — ดึงจาก master */
.ndpp-role-wmodal .modal-dialog {
    width: 960px;
    max-width: 92vw;
}

.ndpp-role-wmodal .modal-body.ndpp-role-wbody {
    padding: 1.4rem 1.5rem;
}

.ndpp-role-wmodal .ndpp-wmodal__left {
    flex: 1 1 52%;
}

.ndpp-role-wmodal .ndpp-wmodal__preview.ndpp-role-scopepanel {
    flex: 1 1 48%;
    position: static;
}

.ndpp-role-wmodal .ndpp-wmodal__left .form-group {
    margin-bottom: 1.15rem;
}

.ndpp-role-wmodal .ndpp-wmodal__left .control-label {
    margin-bottom: 7px;
    font-size: 13.5px;
}

.ndpp-role-wmodal .ndpp-wmodal__left .form-control {
    height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--ndpp-ink, #0F172A);
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

    .ndpp-role-wmodal .ndpp-wmodal__left .form-control::placeholder {
        color: #A0AEC0;
    }

    .ndpp-role-wmodal .ndpp-wmodal__left .form-control:hover {
        border-color: #CBD5E1;
    }

    .ndpp-role-wmodal .ndpp-wmodal__left .form-control:focus {
        border-color: var(--danger-btn-button);
        box-shadow: 0 0 0 3px rgba(var(--danger-btn-button-rgb), .15);
    }

.ndpp-role-wmodal .ndpp-wmodal__left textarea.form-control {
    height: auto;
    min-height: 104px;
    line-height: 1.55;
    resize: vertical;
}

.ndpp-role-wmodal .ndpp-wmodal__left .has-error .form-control {
    border-color: #F5A3A8;
}

    .ndpp-role-wmodal .ndpp-wmodal__left .has-error .form-control:focus {
        border-color: #e7515a;
        box-shadow: 0 0 0 3px rgba(231, 81, 90, .14);
    }

.modal.ndpp-role-wmodal .ndpp-wmodal__left .ndpp-dd--form .ndpp-dd__toggle {
    min-height: 44px;
    padding: 10px 14px;
    background-color: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

    .modal.ndpp-role-wmodal .ndpp-wmodal__left .ndpp-dd--form .ndpp-dd__toggle:hover:not(:disabled) {
        border-color: #CBD5E1;
    }

    .modal.ndpp-role-wmodal .ndpp-wmodal__left .ndpp-dd--form .ndpp-dd__toggle:disabled,
    .modal.ndpp-role-wmodal .ndpp-wmodal__left .ndpp-dd--form .ndpp-dd__toggle.is-disabled {
        background-color: #F8FAFC;
        box-shadow: none;
    }

.ndpp-role-lblrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ndpp-role-count {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: #94A3B8;
}

.ndpp-role-status {
    padding: 12px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
}

.ndpp-role-scopehint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #64748B;
}

.ndpp-scope-list__lock {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #92400E;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
}

    .ndpp-scope-list__lock > .ndpp-ico {
        flex: none;
        width: 13px;
        height: 13px;
        margin-top: 2px;
    }

/* master data list ขนาดเล็ก — modal ฟอร์มสั้น 1-2 ช่อง */
.modal.fade.center-modal.ndpp-sm-wmodal .modal-dialog {
    width: 440px;
    max-width: 92vw;
}

.modal.fade.center-modal.ndpp-md-wmodal .modal-dialog {
    width: 560px;
    max-width: 92vw;
}

/* คอลัมน์ Action ชิดขอบท้ายตาราง */
table th.ndpp-col-action.ndpp-col-end,
table td.ndpp-col-action.ndpp-col-end {
    text-align: right;
}

.ndpp-col-action.ndpp-col-end .ndpp-row-actions {
    justify-content: flex-end;
}

/* RoPA Report — การ์ดแท็บพื้นขาว (แบบ .sp-main / .sp-tabs ของ Stakeholder Profile) */
.ropa-report .rg-tabs { background: #fff; border: 1px solid var(--ndpp-line, #eef0f3); border-radius: 12px; padding: 0 1.5rem 1.5rem; }
.ropa-report .rg-tabs > .nav-tabs { gap: 4px; margin: 0 -1.5rem; padding: 0 1.5rem; border-bottom: 1px solid var(--ndpp-line, #eef0f3); }
.ropa-report .rg-tabs > .nav-tabs > li > a { padding: 18px 16px; font-size: .86rem; }
.ropa-report .rg-hero { margin-bottom: 16px; padding: 22px 26px 24px; background: #fff; border: 1px solid var(--ndpp-line, #eef0f3); border-radius: 12px; }
.ropa-report .rg-hero__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--ndpp-line, #eef0f3); }
.ropa-report .rg-hero__title { margin: 0; font-size: 13px; font-weight: 700; color: var(--ndpp-ink, #1f2329); }
.ropa-report .rg-hero__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 20px; margin-inline-start: auto; }
.ropa-report .rg-hero__titlewrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ropa-report .rg-hero__asof { font-size: 11px; font-weight: 500; color: var(--ndpp-muted, #6c7a86); }
.ropa-report .rg-hero__body { display: flex; flex-direction: column; gap: 16px; }
.ropa-report .rg-hero__inv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 12px; min-width: 0; }
.ropa-report .rg-hero__tile { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 18px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; }
.ropa-report .rg-hero__txt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; row-gap: 4px; min-width: 0; }
.ropa-report .rg-hero__txt > span { grid-row: 2; grid-column: 1 / -1; }
.ropa-report .rg-hero__txt > small { grid-row: 1; grid-column: 2; }
.ropa-report .rg-hero__tile b { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--ndpp-ink, #1f2329); font-variant-numeric: tabular-nums; }
.ropa-report .rg-hero__tile span { overflow: hidden; font-size: .8rem; font-weight: 500; line-height: 1.35; color: #4b5563; text-overflow: ellipsis; white-space: nowrap; }
.ropa-report .rg-hero__tile small { overflow: hidden; font-size: .72rem; color: var(--ndpp-muted, #6c7a86); text-overflow: ellipsis; white-space: nowrap; }
.ropa-report .rg-hero__tile .rg-hero__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: #f3f4f6; color: #4b5563; }
.ropa-report .rg-hero__ic > .ndpp-ico { width: 17px; height: 17px; }
.ropa-report .rg-dpo { display: flex; align-items: center; gap: 16px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--ndpp-line, #eef0f3); }
.ropa-report .rg-hero__body:has(> .rg-hero__inv.ng-hide) > .rg-dpo { padding-top: 0; border-top: 0; }
.ropa-report .rg-dpo__k { font-size: .8rem; font-weight: 600; color: var(--ndpp-muted, #6c7a86); white-space: nowrap; }
.ropa-report .rg-dpo__list { display: flex; flex-wrap: wrap; flex: 1; gap: 12px 32px; min-width: 0; }
.ropa-report .rg-dpo__p { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ropa-report .rg-dpo__av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #eef1f5; }
.ropa-report .rg-dpo__txt { display: flex; flex-direction: column; min-width: 0; }
.ropa-report .rg-dpo__txt b { font-size: .92rem; font-weight: 600; color: var(--ndpp-ink, #1f2329); }
.ropa-report .rg-dpo__txt span { overflow: hidden; font-size: .76rem; font-weight: 400; color: var(--ndpp-muted, #6c7a86); text-overflow: ellipsis; white-space: nowrap; }
.ropa-report .rg-dpo__term { padding: 3px 10px; border-radius: 99px; background: #f2f4f7; font-size: .74rem; color: var(--ndpp-muted, #6c7a86); white-space: nowrap; }
.ropa-report .rg-dpo__group { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; border-radius: 10px; cursor: default; outline: none; }
.ropa-report .rg-dpo__group:focus-visible { box-shadow: 0 0 0 2px var(--danger-btn-button); }
.ropa-report .rg-dpo__pop { position: absolute; top: 100%; inset-inline-start: 0; z-index: 40; padding-top: 8px; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.ropa-report .rg-dpo__group:hover .rg-dpo__pop, .ropa-report .rg-dpo__group:focus-within .rg-dpo__pop { visibility: visible; opacity: 1; transform: none; }
.ropa-report .rg-dpo__card { width: 380px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--ndpp-line, #eef0f3); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .12); overflow: hidden; }
.ropa-report .rg-dpo__pophead { display: flex; align-items: baseline; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--ndpp-line, #eef0f3); font-size: .8rem; font-weight: 600; color: var(--ndpp-muted, #6c7a86); }
.ropa-report .rg-dpo__pophead b { color: var(--ndpp-ink, #1f2329); }
.ropa-report .rg-dpo__count { margin-inline-start: auto; padding: 2px 10px; border-radius: 99px; background: #f2f4f7; font-size: .72rem; color: var(--ndpp-ink, #1f2329); }
.ropa-report .rg-dpo__poplist { max-height: 320px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.ropa-report .rg-dpo__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.ropa-report .rg-dpo__row:hover { background: #f6f7f9; }
.ropa-report .rg-dpo__rav { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #eef1f5; }
.ropa-report .rg-dpo__rtxt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ropa-report .rg-dpo__rtxt b { overflow: hidden; font-size: .84rem; font-weight: 600; color: var(--ndpp-ink, #1f2329); text-overflow: ellipsis; white-space: nowrap; }
.ropa-report .rg-dpo__rtxt span { overflow: hidden; font-size: .72rem; font-weight: 400; color: var(--ndpp-muted, #6c7a86); text-overflow: ellipsis; white-space: nowrap; }
.ropa-report .rg-dpo__range { flex: none; padding: 2px 8px; border-radius: 99px; font-size: .7rem; font-weight: 600; color: var(--ndpp-muted, #6c7a86); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ropa-report .rg-dpo__range.is-open { background: none; color: #1e7e34; font-weight: 700; }
.ropa-report .rg-dpo__stack { display: inline-flex; flex: none; }
.ropa-report .rg-dpo__face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #eef1f5; border: 2px solid #fff; margin-inline-start: -10px; }
.ropa-report .rg-dpo__face:first-child { margin-inline-start: 0; }
.ropa-report .rg-dpo__face--more { display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--ndpp-muted, #6c7a86); }
.ropa-report .rg-dpo__none { font-size: .82rem; color: var(--ndpp-muted, #6c7a86); }
@media (max-width: 640px) {
    .ropa-report .rg-tabs { padding: 0 1rem 1rem; }
    .ropa-report .rg-tabs > .nav-tabs { margin: 0 -1rem; padding: 0 1rem; }
}

/* RoPA Report — แท็บภาพรวมการกำกับดูแล + สรุปผู้บริหาร (_RopaGovernanceTabs.cshtml) */
.ropa-gov { --rg-s1: #9aa1a9; --rg-s2: #f59e0b; --rg-s3: #dc3545; --rg-s4: #3b82f6; --rg-s5: #8b5cf6; --rg-s6: #28a745;
    --rg-line: var(--ndpp-line, #e6e8eb); --rg-ink: var(--ndpp-ink, #1f2329); --rg-muted: var(--ndpp-muted, #6b7280); --rg-faint: #9aa1a9;
    --rg-over: #DC2626; --rg-near: #D97706; --rg-reopen: #7C3AED; position: relative; min-height: 240px; }
.ropa-gov .rg-meta { font-size: .82rem; color: var(--rg-muted); margin-bottom: 4px; }
.ropa-gov .rg-sec { font-size: .82rem; font-weight: 700; color: var(--rg-muted); margin: 18px 0 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ropa-gov .rg-sec--gap { margin-top: 26px; }
.ropa-gov .rg-sec small { font-weight: 500; color: var(--rg-faint); font-size: .78rem; }
.ropa-gov .rg-error { text-align: center; color: var(--rg-muted); padding: 48px 16px; }

.ropa-gov .rg-ov { margin-top: 20px; padding: 26px 30px 28px; background: #fff; border: 1px solid var(--rg-line); border-radius: 16px; }
.ropa-gov .rg-ov__sec { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 28px 0 12px; font-size: 13px; font-weight: 700; color: var(--rg-ink); }
.ropa-gov .rg-ov__sec small { font-size: .78rem; font-weight: 400; color: var(--rg-faint); }
.ropa-gov .rg-ov__split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 32px; }
.ropa-gov .rg-ov__col { display: flex; flex-direction: column; min-width: 0; }
.ropa-gov .rg-ov__col + .rg-ov__col { padding-inline-start: 32px; border-inline-start: 1px solid var(--rg-line); }
.ropa-gov .rg-ov__col > .rg-ov__sec { margin-top: 0; }
.ropa-gov .rg-ov__col .rg-ov__alerts { flex: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0; }
.ropa-gov .rg-ov__rows { display: flex; flex-direction: column; gap: 2px; }
.ropa-gov .rg-ov__row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 40px 52px; align-items: center; gap: 16px; padding: 8px 15px; margin: 0 -10px; border: 0; border-radius: 8px; background: transparent; font: inherit; text-align: start; cursor: pointer; transition: background-color .15s, opacity .15s; }
.ropa-gov .rg-ov__row:hover { background: #f6f7f9; }
.ropa-gov .rg-ov__row:focus { outline: none; }
.ropa-gov .rg-ov__row:focus-visible { outline: 2px solid var(--danger-btn-button); outline-offset: -2px; }
.ropa-gov .rg-ov__row.is-on { background: color-mix(in srgb, var(--c) 10%, #fff); }
.ropa-gov .rg-ov__row.is-dim { opacity: .45; }
.ropa-gov .rg-ov__lg { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .85rem; font-weight: 600; color: #1f2329; }
.ropa-gov .rg-ov__lg i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.ropa-gov .rg-ov__lg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ropa-gov .rg-ov__track { display: block; height: 10px; border-radius: 6px; background: #eef0f3; overflow: hidden; }
.ropa-gov .rg-ov__track i { display: block; height: 100%; border-radius: 6px; background: var(--c); }
.ropa-gov .rg-ov__row b { text-align: end; font-size: .95rem; font-weight: 700; color: var(--rg-ink); font-variant-numeric: tabular-nums; }
.ropa-gov .rg-ov__row small { text-align: end; font-size: .82rem; color: var(--rg-faint); font-variant-numeric: tabular-nums; }
.ropa-gov .rg-ov__alerts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ropa-gov .rg-alert { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 15px; margin: 0 -10px; border: 0; border-top: 1px solid #eef1f5; border-radius: 8px; background: transparent; font: inherit; text-align: start; color: var(--rg-ink); cursor: pointer; transition: background-color .15s; }
.ropa-gov .rg-alert:hover { background: #f6f7f9; }
.ropa-gov .rg-alert[disabled]:hover { background: transparent; }
.ropa-gov .rg-alert:first-child { border-top-color: transparent; }
.ropa-gov .rg-alert:focus { outline: none; }
.ropa-gov .rg-alert:focus-visible { outline: 2px solid var(--danger-btn-button); outline-offset: -2px; }
.ropa-gov .rg-alert.is-on { background: #f1f3f5; }
.ropa-gov .rg-alert[disabled] { cursor: default; }
.ropa-gov .rg-alert__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--c); }
.ropa-gov .rg-alert__ic > .ndpp-ico { width: 18px; height: 18px; }
.ropa-gov .rg-alert.is-on .rg-alert__ic { background: color-mix(in srgb, var(--c) 12%, #fff); box-shadow: none; color: var(--c); }
.ropa-gov .rg-alert__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ropa-gov .rg-alert__t { font-size: .9rem; font-weight: 600; }
.ropa-gov .rg-alert__sub { overflow: hidden; font-size: .74rem; font-weight: 400; color: var(--rg-faint); text-overflow: ellipsis; white-space: nowrap; }
.ropa-gov .rg-alert__v { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ropa-gov .rg-alert__v b { font-size: 1.35rem; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.ropa-gov .rg-alert__v small { font-size: .8rem; color: var(--rg-muted); }
.ropa-gov .rg-c1 { --c: var(--rg-s1); } .ropa-gov .rg-c2 { --c: var(--rg-s2); } .ropa-gov .rg-c3 { --c: var(--rg-s3); }
.ropa-gov .rg-c4 { --c: var(--rg-s4); } .ropa-gov .rg-c5 { --c: var(--rg-s5); } .ropa-gov .rg-c6 { --c: var(--rg-s6); }

.ropa-gov .rg-over { --c: var(--rg-over); } .ropa-gov .rg-near { --c: var(--rg-near); } .ropa-gov .rg-reopen { --c: var(--rg-reopen); }

/* badge สถานะ / SLA — ชุดสีเดียวกับหน้า RoPA Management (ropa-st--sN / ropa-sla--*) */
.ropa-gov .ropa-st--s1 { background: #eef0f2; color: #6b7280; }
.ropa-gov .ropa-st--s2 { background: #fff4e5; color: #b45309; }
.ropa-gov .ropa-st--s3 { background: #fdecec; color: #c0392b; }
.ropa-gov .ropa-st--s4 { background: #e8f0fe; color: #1d4ed8; }
.ropa-gov .ropa-st--s5 { background: #f3ecfe; color: #6d28d9; }
.ropa-gov .ropa-st--s6 { background: #e6f7ee; color: #1e7e34; }
.ropa-gov .ropa-sla { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 10px; white-space: nowrap; line-height: 1.7; }
.ropa-gov .ropa-sla--ontrack { background: #e6f7f2; color: #0b7d68; }
.ropa-gov .ropa-sla--duesoon { background: #fff4e5; color: #b45309; }
.ropa-gov .ropa-sla--overdue { background: #fdecec; color: #c0392b; }
.ropa-gov .ropa-sla--none { background: #eef0f2; color: #6b7280; }

.ropa-gov .rg-tablebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 10px; font-size: .82rem; color: var(--rg-muted); }
.ropa-gov .rg-tablebar b { color: var(--rg-ink); }
.ropa-gov .rg-tools { display: flex; gap: 4px; margin-inline-start: auto; }
.ropa-gov .rg-search { display: flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #e2e5e9; border-radius: 8px; padding: 6px 12px; min-width: 200px; }
.ropa-gov .rg-search:focus-within { background: #fff; border-color: #c9c9ce; }
.ropa-gov .rg-search input { border: 0; outline: 0; background: transparent; font-size: .85rem; flex: 1; min-width: 0; }
.ropa-gov .rg-twrap { border: 1px solid var(--rg-line); border-radius: 10px; overflow: auto; }
.ropa-gov .rg-trk { margin-top: 20px; background: #fff; border: 1px solid var(--rg-line); border-radius: 16px; }
.ropa-gov .rg-trk__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 22px 30px 0; }
.ropa-gov .rg-trk__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--rg-ink); }
.ropa-gov .rg-trk__title small { font-size: .78rem; font-weight: 400; color: var(--rg-faint); }
.ropa-gov .rg-trk__tools { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.ropa-gov .rg-trk__tools .rg-tools { margin-inline-start: 0; }
.ropa-gov .rg-trk__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 30px 18px; }
.ropa-gov .rg-trk__count { margin-inline-start: auto; font-size: .78rem; color: var(--rg-faint); }
.ropa-gov .rg-trk .rg-twrap { padding: 0 16px 8px; border: 0; border-radius: 0 0 16px 16px; }
.ropa-gov .rg-trk .rg-table > thead th:first-child, .ropa-gov .rg-trk .rg-table > tbody > tr.rg-row > td:first-child { padding-inline-start: 10px; }
.ropa-gov .rg-trk .rg-table > thead th:last-child, .ropa-gov .rg-trk .rg-table > tbody > tr.rg-row > td:last-child { padding-inline-end: 14px; }
.ropa-gov .rg-trk .rg-table > tbody:last-child > tr:last-child > td { border-bottom: 0; }
.ropa-gov .rg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.ropa-gov .rg-table > thead th { text-align: start; font-weight: 600; color: #4a5160; font-size: .78rem; padding: 11px 16px; background: #fafafb; border-bottom: 1px solid var(--rg-line); white-space: nowrap; }
.ropa-gov .rg-table > tbody > tr > td { padding: 16px 16px; border-bottom: 1px solid var(--rg-line); vertical-align: middle; }
.ropa-gov .rg-row { cursor: pointer; }
.ropa-gov .rg-row:hover > td { background: #f7f8fa; }
.ropa-gov .rg-row.is-open > td { background: #f2f4f6; }
.ropa-gov .rg-row:focus-visible { outline: 2px solid var(--danger-btn-button, #00a899); outline-offset: -2px; }
.ropa-gov .rg-chev { display: inline-block; width: 12px; height: 12px; color: #b4bac2; transition: transform .18s ease, color .15s; }
[dir="rtl"] .ropa-gov .rg-chev { transform: scaleX(-1); }
.ropa-gov .rg-row:hover .rg-chev { color: var(--rg-ink); }
.ropa-gov .is-open .rg-chev { transform: rotate(90deg); color: var(--rg-ink); }
.ropa-gov .rg-expand { width: 28px; }
.ropa-gov .rg-table > tbody > tr.rg-row .rg-strong { font-size: .88rem; }
.ropa-gov .rg-strong { font-weight: 600; color: var(--rg-ink); }
.ropa-gov .rg-dim { color: var(--rg-faint); font-size: .78rem; white-space: nowrap; }
.ropa-gov .rg-table > tbody > tr.rg-sub > td { padding: 0; background: #fafbfc; }
.ropa-gov .rg-subtable .rg-strong { font-size: .84rem; }
.ropa-gov .rg-subwrap { padding: 4px 16px 14px 50px; }
[dir="rtl"] .ropa-gov .rg-subwrap { padding: 4px 50px 14px 16px; }
.ropa-gov .rg-subtable { width: 100%; border-collapse: collapse; font-size: .85rem; background: #fff; border: 1px solid var(--rg-line); border-radius: 8px; }
.ropa-gov .rg-subtable th { text-align: start; font-weight: 600; color: #4a5160; font-size: .78rem; padding: 7px 10px; background: #f5f6f7; border-bottom: 1px solid var(--rg-line); white-space: nowrap; }
.ropa-gov .rg-subtable td { padding: 8px 10px; border-bottom: 1px solid var(--rg-line); vertical-align: middle; }
.ropa-gov .rg-subtable tr:last-child > td { border-bottom: 0; }
.ropa-gov .rg-subtable .rg-sub > td { padding: 0; background: #f5f6f7; }
.ropa-gov .rg-subtable--bp, .ropa-gov .rg-subtable--act { table-layout: fixed; }
.ropa-gov .rg-subtable--bp { min-width: 900px; }
.ropa-gov .rg-subtable--act { min-width: 800px; }
.ropa-gov .rg-subtable--bp td, .ropa-gov .rg-subtable--act td { overflow-wrap: anywhere; }
.ropa-gov .rg-subtable--bp .rg-c-exp { width: 28px; }
.ropa-gov .rg-subtable--bp .rg-c-bp { width: 28%; }
.ropa-gov .rg-subtable--bp .rg-c-resp { width: 34%; }
.ropa-gov .rg-subtable--bp .rg-c-person { width: 24%; }
.ropa-gov .rg-subtable--bp .rg-c-cnt { width: 14%; }
.ropa-gov .rg-subtable--act .rg-c-id { width: 15%; }
.ropa-gov .rg-subtable--act .rg-c-act { width: 20%; }
.ropa-gov .rg-subtable--act .rg-c-st { width: 18%; }
.ropa-gov .rg-subtable--act .rg-c-due { width: 10%; }
.ropa-gov .rg-subtable--act .rg-c-sla { width: 17%; }
.ropa-gov .rg-subtable--act .rg-c-last { width: 10%; }
.ropa-gov .rg-subtable--act .rg-c-upd { width: 10%; }
.ropa-gov .rg-subtable--act .rg-strong { white-space: nowrap; }
.ropa-gov .rg-subtable--act .ndpp-status, .ropa-gov .rg-subtable--act .ropa-sla { white-space: normal; max-width: 100%; }
.ropa-gov .rg-subwrap2 { padding: 6px 10px 10px 34px; }
[dir="rtl"] .ropa-gov .rg-subwrap2 { padding: 6px 34px 10px 10px; }
.ropa-gov .rg-trk .rg-table > tbody > tr.rg-row.is-open > td { background: transparent; border-bottom-color: transparent; }
.ropa-gov .rg-trk .rg-table > tbody > tr.rg-sub > td { background: #fff; }
.ropa-gov .rg-trk .rg-subwrap, .ropa-gov .rg-trk .rg-subwrap2 { position: relative; }
.ropa-gov .rg-trk .rg-subwrap { padding: 0 14px 18px 37px; }
.ropa-gov .rg-trk .rg-subwrap2 { padding: 0 14px 14px 37px; }
[dir="rtl"] .ropa-gov .rg-trk .rg-subwrap { padding: 0 37px 18px 14px; }
[dir="rtl"] .ropa-gov .rg-trk .rg-subwrap2 { padding: 0 37px 14px 14px; }
.ropa-gov .rg-trk .rg-subwrap::before, .ropa-gov .rg-trk .rg-subwrap2::before { content: ""; position: absolute; top: 0; bottom: 18px; width: 1.5px; border-radius: 2px; background: linear-gradient(to bottom, #d5dae1 0%, #d5dae1 70%, rgba(213, 218, 225, 0) 100%); }
.ropa-gov .rg-trk .rg-subwrap::before { inset-inline-start: 15px; }
.ropa-gov .rg-trk .rg-subwrap::before { content: none; }
.ropa-gov .rg-trk .rg-subtable--bp > thead th:first-child, .ropa-gov .rg-trk .rg-subtable--bp > tbody > tr > td:first-child { position: relative; }
.ropa-gov .rg-trk .rg-subtable--bp > thead th:first-child::before, .ropa-gov .rg-trk .rg-subtable--bp > tbody:not(:last-child) > tr > td:first-child::after { content: ""; position: absolute; inset-inline-start: -22px; top: -1px; bottom: -1px; border-inline-start: 1.5px solid #d5dae1; }
.ropa-gov .rg-trk .rg-subtable--bp > tbody > tr.rg-row > td:first-child::before { content: ""; position: absolute; inset-inline-start: -22px; top: 0; width: 30px; height: 50%; border-inline-start: 1.5px solid #d5dae1; border-bottom: 1.5px solid #d5dae1; border-end-start-radius: 10px; }
.ropa-gov .rg-trk .rg-subtable--bp > tbody > tr.rg-row.is-open > td:nth-child(2) { position: relative; }
.ropa-gov .rg-trk .rg-subtable--bp > tbody > tr.rg-row.is-open > td:nth-child(2)::after { content: ""; position: absolute; inset-inline-start: -11px; top: calc(50% + 8px); bottom: -1px; border-inline-start: 1.5px solid #d5dae1; }
.ropa-gov .rg-trk .rg-subwrap2::before { inset-inline-start: 17px; bottom: 14px; }
.ropa-gov .rg-trk .rg-subwrap2::before { content: none; }
.ropa-gov .rg-trk .rg-subtable--act > thead th:first-child, .ropa-gov .rg-trk .rg-subtable--act > tbody > tr > td:first-child { position: relative; }
.ropa-gov .rg-trk .rg-subtable--act > thead th:first-child::before, .ropa-gov .rg-trk .rg-subtable--act > tbody > tr:not(:last-child) > td:first-child::after { content: ""; position: absolute; inset-inline-start: -20px; top: -1px; bottom: 0; border-inline-start: 1.5px solid #d5dae1; }
.ropa-gov .rg-trk .rg-subtable--act > tbody > tr:not(:last-child) > td:first-child::after { top: 0; bottom: -1px; }
.ropa-gov .rg-trk .rg-subtable--act > tbody > tr > td:first-child::before { content: ""; position: absolute; inset-inline-start: -20px; top: 0; width: 25px; height: 50%; border-inline-start: 1.5px solid #d5dae1; border-bottom: 1.5px solid #d5dae1; border-end-start-radius: 10px; }
.ropa-gov .rg-trk .rg-table > tbody > tr.rg-row.is-open > td:first-child { position: relative; }
.ropa-gov .rg-trk .rg-table > tbody > tr.rg-row.is-open > td:first-child::after { content: ""; position: absolute; inset-inline-start: 15px; top: calc(50% + 8px); bottom: -1px; border-inline-start: 1.5px solid #d5dae1; }
.ropa-gov .rg-trk .rg-subtable--bp > thead th:first-child::before { inset-inline-start: -23px; bottom: -2px; }
.ropa-gov .rg-trk .rg-subtable--act > thead th:first-child::before { inset-inline-start: -20.5px; bottom: -2px; }
.ropa-gov .rg-trk .rg-subtable { border-collapse: separate; border-spacing: 0; border: 0; border-radius: 0; background: transparent; }
.ropa-gov .rg-trk .rg-subtable > thead th { padding: 11px 12px; background: #f8f9fb; border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line); color: #4b5563; font-weight: 600; }
.ropa-gov .rg-trk .rg-subtable > thead th:first-child { border-inline-start: 1px solid var(--rg-line); border-start-start-radius: 9px; border-end-start-radius: 9px; }
.ropa-gov .rg-trk .rg-subtable > thead th:last-child { border-inline-end: 1px solid var(--rg-line); border-start-end-radius: 9px; border-end-end-radius: 9px; }
.ropa-gov .rg-trk .rg-subtable > tbody > tr > td { padding: 16px 12px; border-bottom: 1px solid #eef0f3; }
.ropa-gov .rg-trk .rg-subtable--act > tbody > tr:last-child > td { border-bottom: 0; }
.ropa-gov .rg-trk .rg-subtable--bp > tbody > tr.rg-row.is-open > td { background: transparent; border-bottom-color: transparent; }
.ropa-gov .rg-trk .rg-subtable .rg-sub > td { padding: 0; background: transparent; }
.ropa-gov .rg-trk .rg-subtable--bp > tbody > tr.rg-sub:not(:last-child) > td, .ropa-gov .rg-trk .rg-subtable--bp > tbody:not(:last-child) > tr.rg-sub > td { border-bottom: 1px solid #eef0f3; }
.ropa-gov .rg-trk .rg-table { color: #374151; }
.ropa-gov .rg-trk .rg-table .rg-dim { color: #4b5563; font-weight: 500; }
.ropa-gov .rg-trk .rg-subtable > tbody > tr > td { color: #1f2937; font-weight: 500; }
.ropa-gov .rg-trk .rg-subtable .rg-dim { color: #4b5563; font-weight: 500; }
.ropa-gov .rg-subtable--bp .rg-dim, .ropa-gov .rg-subtable--act > tbody > tr > td:nth-child(2) .rg-dim { white-space: normal; }
.ropa-gov .rg-trk .rg-table > thead th { padding-top: 14px; padding-bottom: 14px; background: #f8f9fb; border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line); color: var(--danger-btn-button); font-weight: 700; }
.ropa-gov .rg-trk .rg-table > thead th:first-child { border-inline-start: 1px solid var(--rg-line); border-start-start-radius: 9px; border-end-start-radius: 9px; }
.ropa-gov .rg-trk .rg-table > thead th:last-child { border-inline-end: 1px solid var(--rg-line); border-start-end-radius: 9px; border-end-end-radius: 9px; }
/* ความกว้างคอลัมน์คงที่ — ตารางย่อยของทุก Entity / Business Process จัดแนวตรงกัน */
.ropa-gov .rg-empty-row td { text-align: center; color: var(--rg-faint); padding: 32px 14px !important; }

.ropa-gov .rg-exec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 20px 0 16px; }
.ropa-gov .rg-exec-title { font-size: 13px; font-weight: 700; color: var(--rg-ink); }
.ropa-gov .rg-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.ropa-gov .rg-span5 { grid-column: span 5; } .ropa-gov .rg-span6 { grid-column: span 6; } .ropa-gov .rg-span7 { grid-column: span 7; } .ropa-gov .rg-span12 { grid-column: span 12; }
.ropa-gov .rg-panel { border: 1px solid var(--rg-line); border-radius: 16px; padding: 26px 30px 28px; background: #fff; min-width: 0; }
.ropa-gov .rg-panel__t { font-size: 13px; font-weight: 700; color: var(--rg-ink); margin-bottom: 4px; }
.ropa-report .rg-tt { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ropa-gov .rg-panel__t { display: flex; align-items: center; gap: 6px; }
.ropa-gov .rg-panel__s { font-size: .78rem; font-weight: 400; color: var(--rg-faint); margin-bottom: 18px; }
.ropa-gov .rg-cov { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.ropa-gov .rg-ring { position: relative; width: 172px; height: 172px; flex-shrink: 0; }
.ropa-gov .rg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ropa-gov .rg-ring__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ropa-gov .rg-ring__pct { font-size: 2.3rem; font-weight: 700; line-height: 1; color: var(--rg-ink); font-variant-numeric: tabular-nums; }
.ropa-gov .rg-ring__pct small { font-size: 1rem; color: var(--rg-muted); }
.ropa-gov .rg-ring__cap { font-size: .75rem; color: var(--rg-muted); margin-top: 6px; line-height: 1.4; }
.ropa-gov .rg-legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 9px; }
.ropa-gov .rg-legend__row { display: grid; grid-template-columns: 8px 1fr auto 52px; gap: 10px; align-items: center; font-size: .85rem; font-weight: 600; color: var(--rg-ink); padding-bottom: 10px; border-bottom: 1px solid #eef0f3; }
.ropa-gov .rg-legend__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ropa-gov .rg-legend__row i { width: 8px; height: 8px; border-radius: 50%; }
.ropa-gov .rg-legend__row small { display: block; font-size: .75rem; color: var(--rg-faint); font-weight: 400; }
.ropa-gov .rg-legend__row b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.ropa-gov .rg-legend__row span:last-child { text-align: end; color: var(--rg-muted); font-variant-numeric: tabular-nums; }
.ropa-gov .rg-span7:has(> .rg-cov) { display: flex; flex-direction: column; }
.ropa-gov .rg-span7 > .rg-cov { flex: 1; flex-wrap: nowrap; justify-content: center; gap: clamp(24px, 4vw, 45px); }
.ropa-gov .rg-span7 > .rg-cov .rg-ring { width: 200px; height: 200px; }
.ropa-gov .rg-span7 > .rg-cov .rg-legend { flex: 1 1 auto; min-width: 0; max-width: 420px; }

.ropa-gov .rg-holders { display: flex; flex-direction: column; }
.ropa-gov .rg-holder { border-top: 1px solid #eef1f5; }
.ropa-gov .rg-holder__btn { width: 100%; display: grid; grid-template-columns: 40px 1fr auto 14px; gap: 14px; align-items: center; padding: 14px 15px; margin: 0 -15px; width: calc(100% + 30px); background: transparent; border: 0; border-radius: 8px; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.ropa-gov .rg-holder__btn:disabled { cursor: default; }
.ropa-gov .rg-holder__btn:hover:not(:disabled) { background: #f6f7f9; }
.ropa-gov .rg-holder__btn:focus { outline: 0; }
.ropa-gov .rg-holder__btn:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger-btn-button) 35%, transparent); }
.ropa-gov .rg-kpi:focus, .ropa-gov .rg-bring:focus, .ropa-gov .rg-ro-row:focus, .ropa-gov .rg-ov__row:focus, .ropa-gov .rg-alert:focus { outline: 0; }
.ropa-gov .rg-kpi:focus-visible, .ropa-gov .rg-bring:focus-visible, .ropa-gov .rg-ro-row:focus-visible, .ropa-gov .rg-ov__row:focus-visible, .ropa-gov .rg-alert:focus-visible { outline: 2px solid color-mix(in srgb, var(--danger-btn-button) 35%, transparent); outline-offset: 2px; }
.ropa-report button:focus, .ropa-report [tabindex]:focus { outline: 0; }
.ropa-report button:focus-visible, .ropa-report [tabindex]:focus-visible { outline: 2px solid color-mix(in srgb, var(--danger-btn-button) 35%, transparent); outline-offset: 2px; }
.ropa-gov .rg-holder__ic { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: #f3f4f6; color: #4b5563; }
.ropa-gov .rg-holder__ic > .ndpp-ico { width: 18px; height: 18px; }
.ropa-gov .rg-holder__name { display: block; font-size: .88rem; font-weight: 600; color: var(--rg-ink); }
.ropa-gov .rg-holder__desc { display: block; margin-top: 3px; font-size: .76rem; font-weight: 400; color: var(--rg-faint); }
.ropa-gov .rg-holder__num { text-align: end; font-size: 1.5rem; font-weight: 800; color: var(--rg-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ropa-gov .rg-holder__num small { display: block; font-size: .72rem; font-weight: 500; color: var(--rg-faint); }
.ropa-gov .rg-holder__btn > tspan { display: none; }
.ropa-gov #RgHolderModal .modal-content { border-radius: 11px; }
.ropa-gov .rg-span7:has(> .rg-cov) { align-self: start; }

.ropa-gov .rg-mini { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.ropa-gov .rg-mini th { padding: 11px 12px; background: #f8f9fb; border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line); font-size: .78rem; font-weight: 600; color: #4b5563; text-align: start; white-space: nowrap; }
.ropa-gov .rg-mini td { padding: 14px 12px; border-bottom: 1px solid #eef0f3; vertical-align: middle; color: #1f2937; font-weight: 500; }
.ropa-gov .rg-mini th:first-child { border-inline-start: 1px solid var(--rg-line); border-start-start-radius: 9px; border-end-start-radius: 9px; }
.ropa-gov .rg-mini th:last-child { border-inline-end: 1px solid var(--rg-line); border-start-end-radius: 9px; border-end-end-radius: 9px; }
.ropa-gov .rg-mini .rg-dim { color: #4b5563; font-weight: 500; }
.ropa-gov .rg-holders > .rg-holder:first-child { border-top: 0; }
.ropa-gov .rg-mini tr:last-child td { border-bottom: 0; }
.ropa-gov .rg-mini .rg-num { text-align: end; font-variant-numeric: tabular-nums; }

.ropa-gov .rg-lines { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.ropa-gov .rg-barrow { display: grid; grid-template-columns: minmax(130px, 230px) 1fr 52px; align-items: center; gap: 14px; font-size: .85rem; font-weight: 600; color: var(--rg-ink); padding: 6px 0; }
.ropa-gov .rg-barrow .rg-val { text-align: end; color: var(--rg-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ropa-gov .rg-stack { display: flex; gap: 3px; height: 18px; }
.ropa-gov .rg-stack span { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 18px; border-radius: 5px; font-size: .7rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; cursor: default; }
.ropa-gov .rg-stack .rg-g1 { background: var(--rg-s1); } .ropa-gov .rg-stack .rg-g2 { background: var(--rg-s2); }
.ropa-gov .rg-stack .rg-g3 { background: var(--rg-s3); } .ropa-gov .rg-stack .rg-g4 { background: var(--rg-s4); }
.ropa-gov .rg-stack .rg-g5 { background: var(--rg-s5); } .ropa-gov .rg-stack .rg-g6 { background: var(--rg-s6); }
.ropa-gov .rg-keys { display: flex; gap: 14px; flex-wrap: wrap; font-size: .75rem; color: var(--rg-muted); margin-top: 8px; }
.ropa-gov .rg-keys i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -1px; }

.ropa-gov .rg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.ropa-gov .rg-kpis--5 { grid-template-columns: repeat(5, 1fr); }
.ropa-gov .rg-kpi { border: 1px solid #e6e8ec; border-radius: 12px; padding: 14px 16px; text-align: start; background: #fff; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.ropa-gov .rg-kpi:hover { background: #f6f7f9; }
.ropa-gov .rg-kpi.is-active { border-color: var(--danger-btn-button, #00a899); box-shadow: 0 0 0 1px var(--danger-btn-button, #00a899) inset; background: #fff; }
.ropa-gov .rg-kpi.rg-kpi--total { background: #fff; }
.ropa-gov .rg-kpi b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ropa-gov .rg-kpi span { display: block; margin-top: 4px; font-size: .78rem; font-weight: 500; color: #4b5563; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ropa-gov .rg-t-o { color: var(--rg-over); } .ropa-gov .rg-t-n { color: var(--rg-near); } .ropa-gov .rg-t-k { color: #475569; }
.ropa-gov .rg-t-approved { color: #0D9488; } .ropa-gov .rg-t-direct { color: #C2410C; } .ropa-gov .rg-t-pending { color: #D97706; } .ropa-gov .rg-t-rejected { color: #64748b; }
.ropa-gov .rg-sub-h { font-size: .8rem; font-weight: 700; color: var(--rg-ink); margin: 0 0 6px; }
.ropa-gov .rg-od .rg-barrow { grid-template-columns: 96px 1fr 84px; padding: 5px 0; }
.ropa-gov .rg-od .rg-stack { height: 22px; }
.ropa-gov .rg-od .rg-stack span { cursor: pointer; }
.ropa-gov .rg-od .rg-stack span.is-on { outline: 2px solid #0f172a; outline-offset: 1px; }
.ropa-gov .rg-stack .rg-o { background: var(--rg-over); } .ropa-gov .rg-stack .rg-n { background: #FBBF24; color: #78350f; } .ropa-gov .rg-stack .rg-k { background: #E2E8F0; color: #475569; }
.ropa-gov .rg-keys i.rg-o { background: var(--rg-over); } .ropa-gov .rg-keys i.rg-n { background: #FBBF24; } .ropa-gov .rg-keys i.rg-k { background: #E2E8F0; }
.ropa-gov .rg-keys .rg-push { margin-inline-start: auto; color: var(--rg-faint); }
.ropa-gov .rg-stack .rg-r-approved, .ropa-gov .rg-keys i.rg-r-approved { background: #0D9488; }
.ropa-gov .rg-stack .rg-r-direct, .ropa-gov .rg-keys i.rg-r-direct { background: #F97316; }
.ropa-gov .rg-stack .rg-r-pending, .ropa-gov .rg-keys i.rg-r-pending { background: #FBBF24; }
.ropa-gov .rg-stack .rg-r-rejected, .ropa-gov .rg-keys i.rg-r-rejected { background: #CBD5E1; }
.ropa-gov .rg-ro-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr 28px; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; font-size: .82rem; }
.ropa-gov .rg-ro-row:hover { background: #f6f7f9; } .ropa-gov .rg-ro-row.is-on { background: #fff; box-shadow: 0 0 0 1px var(--danger-btn-button, #00a899) inset; }
.ropa-gov .rg-ro-row .rg-track { display: block; height: 14px; background: #f1f5f9; border-radius: 4px; }
.ropa-gov .rg-ro-row .rg-stack { height: 100%; gap: 2px; }
.ropa-gov .rg-ro-row .rg-stack span { min-width: 6px; border-radius: 4px; }
.ropa-gov .rg-ro-row b { text-align: end; font-variant-numeric: tabular-nums; }
.ropa-gov .rg-drill { margin-top: 18px; border-top: 1px solid #eef1f5; padding-top: 16px; overflow-x: auto; }
.ropa-gov .rg-drill__head { display: flex; align-items: center; gap: 8px; font-size: .85rem; margin-bottom: 10px; }
.ropa-gov .rg-drill__head span { color: var(--rg-faint); }
.ropa-gov .rg-drill__head .ropa-linkbtn { margin-inline-start: auto; }
.ropa-gov .ropa-linkbtn { border: 0; background: transparent; color: var(--danger-btn-button, #00a899); font-size: .8rem; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.ropa-gov .ropa-linkbtn:hover { text-decoration: underline; }
.ropa-gov .ropa-linkbtn:focus { outline: 0; }
.ropa-gov .ropa-linkbtn:focus-visible { outline: 2px solid color-mix(in srgb, var(--danger-btn-button) 35%, transparent); outline-offset: 2px; border-radius: 6px; }
.ropa-gov .rg-hint { margin-top: 10px; font-size: .75rem; color: var(--rg-faint); }
.ropa-gov .rg-ro-item { border: 1px solid #e6e8ec; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; font-size: .82rem; line-height: 1.5; }
.ropa-gov .rg-ro-item dl { display: grid; grid-template-columns: 130px 1fr; gap: 3px 10px; margin: 6px 0 0; }
.ropa-gov .rg-ro-item dt { color: var(--rg-faint); font-weight: 400; }
.ropa-gov .rg-ro-item dd { margin: 0; }
.ropa-gov .rg-rings { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ropa-gov .rg-bring { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px 14px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; font: inherit; color: inherit; cursor: pointer; }
.ropa-gov .rg-bring:hover { background: #f6f7f9; }
.ropa-gov .rg-bring.is-on { border-color: var(--danger-btn-button, #00a899); box-shadow: 0 0 0 1px var(--danger-btn-button, #00a899) inset; background: #fff; }
.ropa-gov .rg-bring svg { width: 84px; height: 84px; margin-bottom: 4px; }
.ropa-gov .rg-bring__p { font-size: 15px; font-weight: 700; fill: var(--rg-ink); }
.ropa-gov .rg-bring__n { font-size: .75rem; color: var(--rg-faint); } .ropa-gov .rg-bring__n b { font-size: .95rem; color: var(--rg-ink); }
.ropa-gov .rg-bring__l { font-size: .78rem; text-align: center; line-height: 1.3; min-height: 30px; }
.ropa-gov .rg-foot { font-size: .75rem; color: var(--rg-faint); margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rg-line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ropa-report .rg-skel__ic { width: 40px; height: 40px; border-radius: 9px; }
.ropa-report .rg-skel__num { width: 44px; height: 22px; }
.ropa-report .rg-skel__lbl { grid-column: 1 / -1; width: 110px; margin-top: 6px; }
.ropa-report .rg-skel__asof { width: 340px; max-width: 100%; height: 10px; margin-top: 6px; }
.ropa-gov .rg-skel__filters { display: flex; flex-wrap: wrap; gap: 12px; }
.ropa-gov .rg-skel__t { width: 220px; height: 14px; margin-bottom: 20px; }
.ropa-gov .rg-skel__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; align-items: center; gap: 16px; padding: 11px 0; }
.ropa-gov .rg-skel__row--lg { grid-template-columns: minmax(0, 1fr) 70px; padding: 8px 0; }
.ropa-gov .rg-skel__bar { height: 8px; border-radius: 99px; }
.ropa-gov .rg-skel__bar--thick { height: 18px; border-radius: 5px; }
.ropa-gov .rg-skel__alert { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid #eef1f5; }
.ropa-gov .rg-skel__t + .rg-skel__alert { border-top: 0; }
.ropa-gov .rg-skel__lines { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ropa-gov .rg-skel__n { width: 32px; height: 22px; justify-self: end; }
.ropa-gov .rg-skel__cov { display: flex; align-items: center; justify-content: center; gap: 45px; padding: 8px 0; }
.ropa-gov .rg-skel__donut { flex: none; width: 200px; height: 200px; border-radius: 50%; }
.ropa-gov .rg-skel__lines--lg { flex: 0 1 380px; }
.ropa-gov .rg-skel__grid { margin-top: 20px; }
.ropa-gov .rg-skel .rg-ov { margin-top: 20px; }
.ropa-gov .rg-skel .rg-trk__head { padding-bottom: 0; }
.ropa-gov .rg-skel .rg-trk__head .rg-skel__t { margin-bottom: 0; }
.ropa-gov .rg-skel .rg-twrap { padding: 0 16px 12px; }
.ropa-gov .rg-exec { --rg-faint: #6b7280; --rg-muted: #4b5563; }
.ropa-gov .rg-exec .rg-meta, .ropa-gov .rg-exec .rg-panel__s, .ropa-gov .rg-exec .rg-holder__desc, .ropa-gov .rg-exec .rg-legend__row small, .ropa-gov .rg-exec .rg-ring__cap, .ropa-gov .rg-exec .rg-keys, .ropa-gov .rg-exec .rg-bring__n, .ropa-gov .rg-exec .rg-bring__l, .ropa-gov .rg-exec .rg-hint, .ropa-gov .rg-exec .rg-holder__num small, .ropa-gov .rg-exec .rg-ro-item dt, .ropa-gov .rg-exec .rg-foot { font-weight: 500; }
.ropa-gov .rg-exec .rg-legend__row span:last-child, .ropa-gov .rg-exec .rg-barrow .rg-val { color: #374151; font-weight: 600; }

@media (max-width: 1100px) {
    .ropa-report .rg-hero__inv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ropa-gov .rg-ov__split { grid-template-columns: minmax(0, 1fr); }
    .ropa-gov .rg-ov__col + .rg-ov__col { padding-inline-start: 0; border-inline-start: 0; }
    .ropa-gov .rg-ov__alerts { grid-template-columns: minmax(0, 1fr); }
    .ropa-gov .rg-grid > * { grid-column: span 12; }
    .ropa-gov .rg-lines { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ropa-gov .rg-span7 > .rg-cov { flex-wrap: wrap; }
    .ropa-report .rg-hero { padding: 18px 16px; }
    .ropa-report .rg-hero__inv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ropa-gov .rg-ov__row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 6px; }
    .ropa-gov .rg-ov__track { grid-column: 1 / -1; grid-row: 2; }
    .ropa-gov .rg-ov { padding: 20px 16px; }
    .ropa-gov .rg-kpis, .ropa-gov .rg-kpis--5 { grid-template-columns: 1fr 1fr; }
}

/* Cookie Consent Log (REQ-2026-0132) — ชิปหมวด cookie ที่ยอมรับ / ไม่ยอมรับ ในตารางและ modal */
.ccl-cat {
    display: inline-block;
    min-width: 30px;
    margin-right: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.ccl-cat--on {
    background: #e9f7f0;
    color: #14714a;
}

.ccl-cat--off {
    background: #f1f3f6;
    color: #9ca3af;
    text-decoration: line-through;
}

/* Cookie Consent Log — modal ประวัติการกด consent */
.ccl-modal .header2025-home-titlewrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ccl-modal__sub { font-size: .8rem; color: var(--ndpp-muted, #8a929c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccl-modal__note { margin-inline-start: auto; font-size: .78rem; color: var(--ndpp-muted, #8a929c); }
.ccl-loading { padding: 48px 0; text-align: center; font-size: 22px; color: #c4c9d0; }
.ccl-num { font-variant-numeric: tabular-nums; }
.ccl-sum { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.ccl-sum__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: #fff; border: 1px solid var(--ndpp-line, #e2e5e9); border-radius: 12px; }
.ccl-sum__label { font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ndpp-muted, #8a929c); }
.ccl-sum__value { font-size: .92rem; font-weight: 600; color: var(--ndpp-ink, #1f2329); word-break: break-word; }
.ccl-sum__hint { font-size: .78rem; color: var(--ndpp-muted, #8a929c); word-break: break-all; }
.ccl-sum__mono { font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .8rem; font-weight: 500; word-break: break-all; }
.ccl-sum__num { font-size: 1.5rem; line-height: 1.1; color: var(--danger-btn-button); font-variant-numeric: tabular-nums; }
.ccl-empty { padding: 36px 16px; text-align: center; font-size: .85rem; color: var(--ndpp-muted, #8a929c); border: 1px dashed var(--ndpp-line, #e2e5e9); border-radius: 12px; }
.ccl-txwrap { overflow-x: auto; border: 1px solid var(--ndpp-line, #e2e5e9); border-radius: 12px; }
.ccl-txtable { margin: 0; font-size: .82rem; }
.ccl-txtable > thead th { padding: 11px 12px; background: #f8f9fb; border-top: 0; border-bottom: 1px solid var(--ndpp-line, #e2e5e9); font-size: .74rem; font-weight: 600; color: #4b5563; white-space: nowrap; }
.ccl-txtable > tbody > tr > td { padding: 12px; vertical-align: middle; border-top: 0; border-bottom: 1px solid #eef0f3; }
.ccl-txtable > tbody > tr:last-child > td { border-bottom: 0; }
.ccl-txtable .ccl-txtoggle { width: 1%; padding-inline-end: 0; }
.ccl-chev { width: 11px; height: 11px; color: #b4bac2; transition: transform .18s ease, color .15s; }
[dir="rtl"] .ccl-chev { transform: scaleX(-1); }
.ccl-txrow { cursor: pointer; transition: background-color .12s; }
.ccl-txrow:hover > td { background: #fafbfc; }
.ccl-txrow:focus { outline: none; }
.ccl-txrow:focus-visible > td { background: #f5f6f8; }
.ccl-txrow:hover .ccl-chev { color: var(--ndpp-ink, #1f2329); }
.ccl-txrow.is-open > td { background: #fafbfc; border-bottom-color: transparent; }
.ccl-txrow.is-open .ccl-chev { transform: rotate(90deg); color: var(--ndpp-ink, #1f2329); }
.ccl-txpage { max-width: 260px; }
.ccl-txdetail > td { padding: 4px 16px 18px 40px !important; background: #fafbfc; }
[dir="rtl"] .ccl-txdetail > td { padding: 4px 40px 18px 16px !important; }
.ccl-txcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ccl-txcat { padding: 10px 12px; background: #fff; border: 1px solid var(--ndpp-line, #e2e5e9); border-radius: 10px; }
.ccl-txcat__head { display: flex; align-items: center; gap: 8px; }
.ccl-txcat__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c4c9d0; }
.ccl-txcat.is-on .ccl-txcat__dot { background: #22a06b; }
.ccl-txcat__name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ndpp-ink, #1f2329); }
.ccl-txcat__state { flex: none; font-size: .74rem; font-weight: 600; color: var(--ndpp-muted, #8a929c); }
.ccl-txcat.is-on .ccl-txcat__state { color: #14714a; }
.ccl-txcat.is-off .ccl-txcat__name { color: var(--ndpp-muted, #8a929c); }
.ccl-txcat__svc { margin-top: 6px; padding-inline-start: 16px; font-size: .78rem; line-height: 1.5; color: var(--ndpp-muted, #8a929c); white-space: normal; word-break: break-word; }
.ccl-txmeta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 24px; padding: 12px 14px; background: #fff; border: 1px solid var(--ndpp-line, #e2e5e9); border-radius: 10px; }
.ccl-txmeta__item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ccl-txmeta__item--full { grid-column: 1 / -1; }
.ccl-txmeta__label { font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ndpp-muted, #8a929c); }
.ccl-txmeta__value { font-size: .82rem; color: var(--ndpp-ink, #1f2329); white-space: normal; word-break: break-word; }
.ccl-txmeta__ua { font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .76rem; color: #4b5563; }
.ccl-cookie { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; font-family: SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .74rem; color: #4b5563; background: #fff; border: 1px solid var(--ndpp-line, #e2e5e9); border-radius: 6px; }
[dir="rtl"] .ccl-cookie { margin: 0 0 4px 4px; }
@media (max-width: 768px) { .ccl-sum { grid-template-columns: 1fr 1fr; } .ccl-txmeta { grid-template-columns: 1fr; } }

/* Cookie Discovery Schedule (#/admin/cookiediscoveryschedule) */
.cds-card { margin-bottom: 16px; }
.cds-card .ndpp-fsec { padding: 4px 6px; }
.cds-readonly { margin-inline-start: auto; font-size: .78rem; color: var(--ndpp-muted, #8a919c); }
.cds-interval { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.cds-interval__box { position: relative; width: 200px; }
.cds-interval__box .ndpp-input { padding-inline-end: 64px; font-size: 15px; font-weight: 600; }
.cds-interval__unit { position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ndpp-muted, #8a919c); pointer-events: none; }
.cds-interval__summary { display: inline-block; font-size: 13px; font-weight: 500; color: var(--ndpp-ink, #1f2329); }
.cds-interval__summary.is-invalid { color: #dc3545; }
.cds-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cds-preset { padding: 6px 14px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: #4b5563; background: #fff; border: 1px solid #e2e5e9; border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s; }
.cds-preset:hover:not(:disabled) { border-color: #c4c9d0; color: var(--ndpp-ink, #1f2329); }
.cds-preset.is-on { border-color: var(--danger-btn-button); color: var(--danger-btn-button); font-weight: 600; }
.cds-preset:disabled { cursor: not-allowed; opacity: .6; }
.cds-preset:focus { outline: none; box-shadow: none; }
.cds-preset:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-btn-button) 25%, transparent); }
.cds-note { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px dashed #eceef1; font-size: 12px; line-height: 1.55; color: var(--ndpp-muted, #8a919c); }
.cds-dt { font-variant-numeric: tabular-nums; }

/* RoPA Management (#/admin/ropamanagement) — ย้ายจาก inline <style> ใน RopaManagement.cshtml, scope .ropa-mgmt กันชนหน้า RoPA Report ที่ใช้ชื่อ class ซ้ำ */
.ropa-mgmt { --rm-line: var(--ndpp-line, #e6e8eb); --rm-ink: var(--ndpp-ink, #1f2329); --rm-muted: var(--ndpp-muted, #6b7280); --rm-faint: #9aa1a9; }

/* สถานะ pill (ชุดสีเดียวกับ Governance Overview) — 7/8/9 = สถานะพัก: สีตัวอักษรเท่าขั้นปลายทาง ไม่มีพื้น */
.ropa-mgmt .ropa-st--s1 { background: #eef0f2; color: #6b7280; }
.ropa-mgmt .ropa-st--s2 { background: #fff4e5; color: #b45309; }
.ropa-mgmt .ropa-st--s3 { background: #fdecec; color: #c0392b; }
.ropa-mgmt .ropa-st--s4 { background: #e8f0fe; color: #1d4ed8; }
.ropa-mgmt .ropa-st--s5 { background: #f3ecfe; color: #6d28d9; }
.ropa-mgmt .ropa-st--s6 { background: #e6f7ee; color: #1e7e34; }
.ropa-mgmt .ropa-st--s7 { background: transparent; border: 0; padding-left: 0; padding-right: 0; color: #1d4ed8; }
.ropa-mgmt .ropa-st--s8 { background: transparent; border: 0; padding-left: 0; padding-right: 0; color: #6d28d9; }
.ropa-mgmt .ropa-st--s9 { background: transparent; border: 0; padding-left: 0; padding-right: 0; color: #1e7e34; }

.ropa-mgmt .ropa-sla { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 10px; white-space: nowrap; line-height: 1.7; }
.ropa-mgmt .ropa-sla--ontrack { background: #e6f7f2; color: #0b7d68; }
.ropa-mgmt .ropa-sla--duesoon { background: #fff4e5; color: #b45309; }
.ropa-mgmt .ropa-sla--overdue { background: #fdecec; color: #c0392b; }
.ropa-mgmt .ropa-reopen-flag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: #fff4e5; color: #b45309; white-space: nowrap; }
.ropa-mgmt .ropa-delete-flag { background: #fdecea; color: #c0392b; }

.ropa-mgmt .ropa-linkbtn { border: 0; background: transparent; color: var(--danger-btn-button, #00a899); font-size: .8rem; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.ropa-mgmt .ropa-linkbtn:hover { text-decoration: underline; }
.ropa-mgmt .ropa-linkbtn:focus { outline: 0; }
.ropa-mgmt .ropa-linkbtn:focus-visible { outline: 2px solid color-mix(in srgb, var(--danger-btn-button) 35%, transparent); outline-offset: 2px; border-radius: 6px; }

/* ── หน้า list: การ์ดเดียวครอบสรุปสถานะ + ตาราง tree (แนวเดียวกับ rg-trk ของ RoPA Report) ── */
.ropa-mgmt .rm-board { margin-top: 4px; background: #fff; border: 1px solid var(--rm-line); border-radius: 16px; }
.ropa-mgmt .rm-board__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 22px 30px 0; }
.ropa-mgmt .rm-board__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--rm-ink); }
.ropa-mgmt .rm-board__title small { font-size: .78rem; font-weight: 400; color: var(--rm-faint); }
.ropa-mgmt .rm-board__tools { display: inline-flex; gap: 6px; margin-inline-start: auto; }

.ropa-mgmt .rm-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 16px 30px 20px; }
.ropa-mgmt .rm-kpi { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px; background: #fff; border: 1px solid var(--rm-line); border-radius: 12px; }
.ropa-mgmt .rm-kpi__lg { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .8rem; font-weight: 600; color: #4b5563; }
.ropa-mgmt .rm-kpi__lg i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ropa-mgmt .rm-kpi__lg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ropa-mgmt .rm-kpi__n { display: flex; align-items: baseline; gap: 6px; }
.ropa-mgmt .rm-kpi__n b { font-size: 1.45rem; line-height: 1.1; font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
.ropa-mgmt .rm-kpi__n small { font-size: .74rem; font-weight: 600; color: var(--rm-faint); }
.ropa-mgmt .rm-kpi.is-zero b { color: #c4c9d0; }
.ropa-mgmt .rm-kpi.is-zero .rm-kpi__lg i { background: #d5dae1; }

.ropa-mgmt .rm-twrap { padding: 0 16px 8px; overflow: auto; }
.ropa-mgmt .rm-empty { padding: 8px 16px 24px; }

/* ── tree table: Entity / BP = แถวหัวกลุ่ม span เต็ม, Activity = แถวข้อมูล + เส้นโครง tree แบบ rg-trk ── */
/* แกนเส้น: Entity = 16px (กลางลูกศร), BP = 42px, เนื้อหา activity เริ่ม 64px · RTL กลับด้านทั้งชุด */
.ropa-mgmt { --rm-rail: #d5dae1; }
.ropa-mgmt .ropa-tree-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.ropa-mgmt .ropa-col-code { width: 1%; }
.ropa-mgmt .ropa-col-title { width: 24%; }
.ropa-mgmt .ropa-col-status { width: 14%; }
.ropa-mgmt .ropa-col-sla { width: 10%; }
.ropa-mgmt .ropa-col-review { width: 12%; }
.ropa-mgmt .ropa-col-action { width: 1%; }
.ropa-mgmt .ropa-tree-table tbody td { padding: 12px 14px; vertical-align: middle; }

.ropa-mgmt .ropa-tree-table td.ropa-grouphead { position: relative; padding: 0; cursor: pointer; user-select: none; transition: background-color .12s; }
.ropa-mgmt td.ropa-grouphead:hover { background-color: #fafbfc; }
.ropa-mgmt td.ropa-grouphead:focus { outline: none; }
.ropa-mgmt td.ropa-grouphead:focus-visible { background-color: #f5f6f8; }
.ropa-mgmt tr.ropa-tr--entity:not(:first-child) td.ropa-grouphead { border-top: 1px solid var(--rm-line); }
.ropa-mgmt td.ropa-grouphead.is-entity.is-open, .ropa-mgmt tr.ropa-tr--bp > td { border-bottom-color: transparent; }
.ropa-mgmt .ropa-ghead { display: flex; align-items: center; gap: 10px; padding: 16px 14px 16px 10px; }
.ropa-mgmt .ropa-ghead--bp { padding: 12px 14px 12px 36px; }
[dir="rtl"] .ropa-mgmt .ropa-ghead { padding: 16px 10px 16px 14px; }
[dir="rtl"] .ropa-mgmt .ropa-ghead--bp { padding: 12px 36px 12px 14px; }
.ropa-mgmt .ropa-node__caret { flex: 0 0 auto; width: 12px; height: 12px; color: #b4bac2; transition: transform .18s ease, color .15s; }
[dir="rtl"] .ropa-mgmt .ropa-node__caret { transform: scaleX(-1); }
.ropa-mgmt td.ropa-grouphead:hover .ropa-node__caret, .ropa-mgmt td.ropa-grouphead.is-open .ropa-node__caret { color: var(--rm-ink); }
.ropa-mgmt td.ropa-grouphead.is-open .ropa-node__caret { transform: rotate(90deg); }
.ropa-mgmt .ropa-node__title { font-weight: 700; font-size: .88rem; color: var(--rm-ink); }
.ropa-mgmt .ropa-ghead--bp .ropa-node__title { font-weight: 600; font-size: .85rem; }
.ropa-mgmt .ropa-node__count { display: inline-flex; gap: .3em; font-size: .78rem; font-weight: 500; color: #8a919c; }
.ropa-mgmt .ropa-node__spacer { flex: 1 1 auto; }

/* หัวคอลัมน์เหนือ activity ของแต่ละ BP */
.ropa-mgmt .ropa-tree-table td.ropa-colhead { padding: 10px 14px; border-bottom-color: var(--rm-line); font-size: .74rem; font-weight: 600; color: #4b5563; white-space: nowrap; }

/* activity data row */
.ropa-mgmt tr.ropa-tr--act:hover > td { background-color: #fafbfc; }
.ropa-mgmt .ropa-td-code { white-space: nowrap; }
.ropa-mgmt .ropa-leaf__code { font-weight: 700; font-size: .82rem; color: var(--rm-ink); font-variant-numeric: tabular-nums; }
.ropa-mgmt .ropa-leaf__title { font-size: .85rem; font-weight: 500; color: #374151; }
.ropa-mgmt .ropa-td-status .ropa-reopen-flag { margin-top: 4px; }
.ropa-mgmt .ropa-td-action { white-space: nowrap; }
.ropa-mgmt .ropa-actions-cell { justify-content: center; }
.ropa-mgmt .ropa-actions-cell .ropa-act-approvedel i { color: #28a745; }
.ropa-mgmt .ropa-actions-cell .ropa-act-rejectdel i { color: #c0392b; }

/* เส้นแนวตั้งที่ลากผ่านทั้งแถว = background (rm-l-e / rm-l-b จาก JS) */
.ropa-mgmt tr.ropa-tr--bp > td, .ropa-mgmt tr.ropa-tr--colhead > td:first-child, .ropa-mgmt tr.ropa-tr--act > td:first-child {
    background-image: var(--rm-e, none), var(--rm-b, none);
    background-size: 1.5px 100%, 1.5px 100%;
    background-position: 15.25px 0, 41.25px 0;
    background-repeat: no-repeat;
    background-origin: border-box;
}
[dir="rtl"] .ropa-mgmt tr.ropa-tr--bp > td, [dir="rtl"] .ropa-mgmt tr.ropa-tr--colhead > td:first-child, [dir="rtl"] .ropa-mgmt tr.ropa-tr--act > td:first-child { background-position: right 15.25px top 0, right 41.25px top 0; }
.ropa-mgmt tr.rm-l-e > td:first-child { --rm-e: linear-gradient(var(--rm-rail), var(--rm-rail)); }
.ropa-mgmt tr.rm-l-b > td:first-child { --rm-b: linear-gradient(var(--rm-rail), var(--rm-rail)); }
.ropa-mgmt tr.ropa-tr--colhead > td:first-child, .ropa-mgmt tr.ropa-tr--act > td:first-child { position: relative; padding-inline-start: 64px; }

/* เส้นลงจากลูกศรของแถวที่กาง */
.ropa-mgmt td.ropa-grouphead.is-open::after { content: ""; position: absolute; top: calc(50% + 8px); bottom: -1px; border-inline-start: 1.5px solid var(--rm-rail); }
.ropa-mgmt td.ropa-grouphead.is-entity.is-open::after { inset-inline-start: 15.25px; }
.ropa-mgmt td.ropa-grouphead.is-bp.is-open::after { inset-inline-start: 41.25px; }
/* เส้นโค้ง └ จากแกนพ่อไปหาลูก */
.ropa-mgmt tr.ropa-tr--bp > td::before, .ropa-mgmt tr.ropa-tr--act > td:first-child::before { content: ""; position: absolute; top: 0; height: 50%; border-inline-start: 1.5px solid var(--rm-rail); border-bottom: 1.5px solid var(--rm-rail); border-end-start-radius: 10px; }
.ropa-mgmt tr.ropa-tr--bp > td::before { inset-inline-start: 15.25px; width: 17px; }
.ropa-mgmt tr.ropa-tr--act > td:first-child::before { inset-inline-start: 41.25px; width: 16px; }

/* animation เปิดหลัง skeleton (การ์ดเกิดด้วย ng-if) — ใช้ keyframe rgRiseIn / rgFadeIn ชุดเดียวกับ RoPA Report · แถวที่เพิ่งกางออกก็จางเข้าแบบเดียวกัน */
.ropa-mgmt .rm-board { animation: rgRiseIn .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.ropa-mgmt .rm-kpi { animation: rgRiseIn .45s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.12s + var(--i, 0) * .05s); }
.ropa-mgmt .rm-kpi:nth-child(2) { --i: 1; }
.ropa-mgmt .rm-kpi:nth-child(3) { --i: 2; }
.ropa-mgmt .rm-kpi:nth-child(4) { --i: 3; }
.ropa-mgmt .rm-kpi:nth-child(5) { --i: 4; }
.ropa-mgmt .rm-kpi:nth-child(6) { --i: 5; }
.ropa-mgmt .ropa-tree-table tbody tr { animation: rgFadeIn .35s ease backwards; }
.ropa-mgmt .rm-board > .rm-twrap { animation: rgFadeIn .4s ease .3s backwards; }
@media (prefers-reduced-motion: reduce) { .ropa-mgmt .rm-board, .ropa-mgmt .rm-kpi, .ropa-mgmt .ropa-tree-table tbody tr, .ropa-mgmt .rm-board > .rm-twrap { animation: none !important; } }
@media (max-width: 1200px) { .ropa-mgmt .rm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ropa-mgmt .rm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 16px 20px; } .ropa-mgmt .rm-board__head { padding: 18px 16px 0; } }

/* ── modal: detail sections (เหมือน View ในหน้า RoPA Report) ── */
.ropa-mgmt .ropa-view-sec { margin-bottom: 16px; }
.ropa-mgmt .ropa-view-sec__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rm-line); }
.ropa-mgmt .ropa-view-sec__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger-btn-button, #00a899); flex: 0 0 auto; }
.ropa-mgmt .ropa-view-sec__title { font-weight: 700; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: var(--rm-ink); }
.ropa-mgmt .ropa-cell-list { margin: 0; padding: 0 0 0 1.1em; list-style-type: disc; }
.ropa-mgmt .ropa-cell-list li { word-break: break-word; }
[dir="rtl"] .ropa-mgmt .ropa-cell-list { padding: 0 1.1em 0 0; }

.ropa-mgmt .ropa-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--rm-line); margin-bottom: 16px; }
.ropa-mgmt .ropa-tabs__btn { border: 0; background: transparent; padding: 10px 18px; font-weight: 600; font-size: .85rem; color: var(--rm-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; }
.ropa-mgmt .ropa-tabs__btn:focus { outline: 0; }
.ropa-mgmt .ropa-tabs__btn.is-active { color: var(--danger-btn-button, #00a899); border-bottom-color: var(--danger-btn-button, #00a899); }

/* single-record matrix (view tab + create/edit preview) */
.ropa-mgmt .ropa-scroll { overflow: auto; max-height: calc(100vh - 320px); border: 1px solid #e2e5e9; border-radius: 10px; }
.ropa-mgmt .ropa-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: .82rem; }
.ropa-mgmt .ropa-table thead .ropa-group-row th { position: sticky; top: 0; z-index: 3; background: var(--danger-btn-button, #00a899); color: #fff; text-align: center; padding: 8px 10px; font-weight: 700; letter-spacing: .02em; border-right: 1px solid rgba(255,255,255,.6); white-space: nowrap; }
.ropa-mgmt .ropa-table thead .ropa-col-row th { position: sticky; top: 37px; z-index: 2; background: #f4f6f7; color: var(--rm-ink); text-align: left; padding: 7px 10px; font-weight: 600; font-size: .78rem; border-bottom: 2px solid var(--danger-btn-button, #00a899); border-right: 1px solid var(--rm-line); vertical-align: bottom; min-width: 180px; }
.ropa-mgmt .ropa-table tbody td { padding: 8px 10px; border-bottom: 1px solid #eceef0; border-right: 1px solid #f1f3f4; vertical-align: top; min-width: 180px; max-width: 420px; }
.ropa-mgmt .ropa-table thead .ropa-col-row th.ropa-sec-start { border-left: 2px solid var(--danger-btn-button, #00a899); }
.ropa-mgmt .ropa-table tbody td.ropa-sec-start { border-left: 2px solid #cfd6da; }
[dir="rtl"] .ropa-mgmt .ropa-table thead .ropa-col-row th.ropa-sec-start { border-left: 0; border-right: 2px solid var(--danger-btn-button, #00a899); }
[dir="rtl"] .ropa-mgmt .ropa-table tbody td.ropa-sec-start { border-left: 0; border-right: 2px solid #cfd6da; }
.ropa-mgmt .ropa-table .ropa-tag { display: inline-block; margin: 2px 5px 2px 0; padding: 3px 10px; border-radius: 6px; background: color-mix(in srgb, var(--danger-btn-button, #00a899) 12%, #fff); color: color-mix(in srgb, var(--danger-btn-button, #00a899) 82%, #000); font-size: .8rem; line-height: 1.4; white-space: normal; word-break: break-word; max-width: 100%; }
[dir="rtl"] .ropa-mgmt .ropa-table .ropa-tag { margin: 2px 0 2px 5px; }
/* 2-row compare: บน = ปัจจุบัน, ล่าง = version ที่เลือก (muted), ช่องที่ต่าง = highlight */
.ropa-mgmt .ropa-table tr.ropa-prow--sel td { background: #fafbfc; }
.ropa-mgmt .ropa-table tr.ropa-prow--sel .ropa-tag { background: #f2f3f5; color: #8a929c; }
.ropa-mgmt .ropa-table td.ropa-pcell-diff { background: #fff7e6; }
.ropa-mgmt .ropa-table tr.ropa-prow--sel td.ropa-pcell-diff { background: #fdf0d9; }
.ropa-mgmt .ropa-prow__tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 9px; font-size: .68rem; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.ropa-mgmt .ropa-prow__tag--cur { background: #e8f3ec; color: #1f7a3d; }
.ropa-mgmt .ropa-prow__tag--sel { background: #eceff2; color: #6b7280; }


/* wide modal เมื่อโชว์ตาราง preview — !important ทับ inline ของ changeSizeModal */
.ropa-mgmt .ndpp-wmodal .modal-dialog.ropa-modal-wide { max-width: 98vw !important; width: 98vw !important; }
.ropa-mgmt .ropa-info .ndpp-ds-card__meta { border-top: 0; margin-top: 0; padding-top: 0; }

/* field ที่แก้ไม่ได้ในฟอร์ม — พื้นเทา + cursor ห้าม */
#nsdx-admin-ropamanagement-modal .ndpp-input[readonly],
#nsdx-admin-ropamanagement-modal .ndpp-input:disabled { background: #f1f3f5; color: #6b7280; cursor: not-allowed; }

/* history timeline */
.ropa-mgmt .ropa-timeline { position: relative; padding-left: 22px; }
.ropa-mgmt .ropa-timeline:before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--rm-line); }
.ropa-mgmt .ropa-hist { position: relative; margin-bottom: 14px; }
.ropa-mgmt .ropa-hist__dot { position: absolute; left: -19px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger-btn-button, #00a899); box-shadow: 0 0 0 3px #fff; }
.ropa-mgmt .ropa-hist__card { background: #fff; border: 1px solid var(--rm-line); border-radius: 10px; padding: 9px 12px; }
.ropa-mgmt .ropa-hist__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ropa-mgmt .ropa-hist__action { font-weight: 700; font-size: .85rem; color: var(--rm-ink); }
.ropa-mgmt .ropa-hist__when { font-size: .75rem; color: var(--rm-muted); }
.ropa-mgmt .ropa-hist__flow { font-size: .8rem; color: #545454; margin-top: 2px; }
.ropa-mgmt .ropa-hist__by { font-size: .75rem; color: var(--rm-muted); margin-top: 2px; }
.ropa-mgmt .ropa-hist__comment { font-size: .82rem; color: #545454; margin-top: 6px; padding: 6px 9px; background: #f7f8fa; border-radius: 7px; white-space: pre-wrap; word-break: break-word; }
[dir="rtl"] .ropa-mgmt .ropa-timeline { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .ropa-mgmt .ropa-timeline:before { left: auto; right: 7px; }
[dir="rtl"] .ropa-mgmt .ropa-hist__dot { left: auto; right: -19px; }

/* progress stepper (Start → In progress → Approver → DPO → Completed) */
.ropa-mgmt .ropa-stepper { display: flex; align-items: flex-start; margin: 2px 0 16px; }
.ropa-mgmt .ropa-step { flex: 1 1 0; text-align: center; position: relative; min-width: 0; }
.ropa-mgmt .ropa-step:before, .ropa-mgmt .ropa-step:after { content: ""; position: absolute; top: 15px; height: 3px; background: #e2e5e9; z-index: 0; }
.ropa-mgmt .ropa-step:before { left: 0; width: 50%; }
.ropa-mgmt .ropa-step:after { right: 0; width: 50%; }
.ropa-mgmt .ropa-step:first-child:before, .ropa-mgmt .ropa-step:last-child:after { display: none; }
.ropa-mgmt .ropa-step.is-done:before, .ropa-mgmt .ropa-step.is-done:after, .ropa-mgmt .ropa-step.is-active:before { background: #28a745; }
.ropa-mgmt .ropa-step__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; background: #fff; border: 3px solid #e2e5e9; color: var(--rm-faint); font-size: .8rem; font-weight: 700; }
.ropa-mgmt .ropa-step__dot .fa { font-size: .82rem; }
.ropa-mgmt .ropa-step.is-done .ropa-step__dot { background: #28a745; border-color: #28a745; color: #fff; }
.ropa-mgmt .ropa-step.is-active .ropa-step__dot { background: var(--danger-btn-button, #00a899); border-color: var(--danger-btn-button, #00a899); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-btn-button, #00a899) 22%, #fff); }
.ropa-mgmt .ropa-step.is-reject .ropa-step__dot { background: #dc3545; border-color: #dc3545; color: #fff; }
.ropa-mgmt .ropa-step.is-reject:before { background: #28a745; }
.ropa-mgmt .ropa-step.is-reopen .ropa-step__dot { background: #f0932b; border-color: #f0932b; color: #fff; }
.ropa-mgmt .ropa-step.is-reopen:before, .ropa-mgmt .ropa-step.is-reopen:after { background: #28a745; }
.ropa-mgmt .ropa-step__label { display: block; margin-top: 6px; font-size: .72rem; font-weight: 600; color: var(--rm-muted); line-height: 1.25; padding: 0 2px; }
.ropa-mgmt .ropa-step.is-active .ropa-step__label, .ropa-mgmt .ropa-step.is-done .ropa-step__label { color: var(--rm-ink); }
.ropa-mgmt .ropa-step.is-reject .ropa-step__label { color: #c0392b; }
.ropa-mgmt .ropa-step.is-reopen .ropa-step__label { color: #b45309; }

/* Change List tab (field-diff review) */
.ropa-mgmt .ropa-changelist thead th { background: #f4f6f7; font-weight: 600; font-size: .8rem; color: var(--rm-ink); white-space: nowrap; }
.ropa-mgmt .ropa-changelist td { vertical-align: top; font-size: .82rem; color: #545454; }
.ropa-mgmt .ropa-changelist textarea.ndpp-input { min-width: 170px; }
.ropa-mgmt .ropa-chg { display: inline-block; font-size: .66rem; font-weight: 600; padding: 1px 7px; border-radius: 10px; margin-right: 7px; vertical-align: middle; }
.ropa-mgmt .ropa-chg--added { background: #e7f6ec; color: #1e7e34; }
.ropa-mgmt .ropa-chg--edited { background: #fff4e5; color: #b45309; }
.ropa-mgmt .ropa-chg--removed { background: #fdecea; color: #c0392b; }
.ropa-mgmt .ropa-change-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ropa-mgmt .ropa-change-warn { font-size: .82rem; color: #c0392b; }
.ropa-mgmt .ropa-act { border: 0; border-radius: 8px; font-size: .82rem; font-weight: 700; padding: 7px 16px; cursor: pointer; white-space: nowrap; }
.ropa-mgmt .ropa-act--approve { background: #28a745; color: #fff; }
.ropa-mgmt .ropa-act--sendback { background: #fff; color: #c0392b; border: 1px solid #f1c9c9; }
.ropa-mgmt .ropa-act:hover:not(:disabled) { filter: brightness(1.05); }
.ropa-mgmt .ropa-act:disabled { opacity: .5; cursor: not-allowed; }
.ropa-mgmt .ropa-fullchg__title { font-size: .9rem; font-weight: 600; color: var(--rm-ink); margin-bottom: 10px; }
.ropa-mgmt .ropa-chg-group > td { background: #f5f6f8; font-weight: 600; color: var(--rm-ink); font-size: .82rem; border-top: 2px solid #e2e5e9; }
/* FN-22-02 version comparison bar */
.ropa-mgmt .ropa-vcompare { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ropa-mgmt .ropa-vcompare__lbl { font-size: .85rem; font-weight: 600; color: var(--rm-ink); }
.ropa-mgmt .ropa-vcompare__sel { flex: 0 0 auto; width: 250px; max-width: 45%; }
.ropa-mgmt .ropa-vcompare__arrow { color: #8a929c; }
[dir="rtl"] .ropa-mgmt .ropa-vcompare__arrow { transform: scaleX(-1); }
/* ลิงก์ไป Activity Detail ใน header ของ Activity Content Preview */
.ropa-mgmt .ropa-fsec-link { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--danger-btn-button, #00a899); cursor: pointer; white-space: nowrap; }
.ropa-mgmt .ropa-fsec-link:hover { text-decoration: underline; color: var(--danger-btn-button, #00a899); }
.ropa-mgmt .ropa-fsec-link .ndpp-ico { width: 15px; height: 15px; }

/* RoPA Report (Governance Overview / Executive Summary) — animation เปิดหลัง skeleton: .rg-reveal เปลี่ยนจาก display:none → แสดง = animation ของลูกเริ่มเล่น (สลับแท็บก็เล่นใหม่) */
@keyframes rgRiseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rgGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ropa-gov .rg-reveal > .page-toolbar__row { animation: rgFadeIn .35s ease backwards; }
.ropa-gov .rg-reveal .rg-ov, .ropa-gov .rg-reveal .rg-trk, .ropa-gov .rg-reveal .rg-exec .rg-panel { animation: rgRiseIn .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.ropa-gov .rg-reveal .rg-ov { animation-delay: .05s; }
.ropa-gov .rg-reveal .rg-trk { animation-delay: .2s; }
.ropa-gov .rg-reveal .rg-ov__row, .ropa-gov .rg-reveal .rg-alert { animation: rgRiseIn .45s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.15s + var(--i, 0) * .05s); }
.ropa-gov .rg-reveal .rg-ov__track i { transform-origin: left center; animation: rgGrowX .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.3s + var(--i, 0) * .05s); }
[dir="rtl"] .ropa-gov .rg-reveal .rg-ov__track i { transform-origin: right center; }
.ropa-gov .rg-reveal .rg-table > tbody > tr.rg-row { animation: rgFadeIn .4s ease backwards; animation-delay: calc(.3s + var(--i, 0) * .04s); }
.ropa-gov .rg-reveal :is(.rg-ov__row, .rg-alert, .rg-table > tbody):nth-child(1) { --i: 0; }
.ropa-gov .rg-reveal :is(.rg-ov__row, .rg-alert, .rg-table > tbody):nth-child(2) { --i: 1; }
.ropa-gov .rg-reveal :is(.rg-ov__row, .rg-alert, .rg-table > tbody):nth-child(3) { --i: 2; }
.ropa-gov .rg-reveal :is(.rg-ov__row, .rg-alert, .rg-table > tbody):nth-child(4) { --i: 3; }
.ropa-gov .rg-reveal :is(.rg-ov__row, .rg-alert, .rg-table > tbody):nth-child(5) { --i: 4; }
.ropa-gov .rg-reveal :is(.rg-ov__row, .rg-alert, .rg-table > tbody):nth-child(6) { --i: 5; }
.ropa-gov .rg-reveal :is(.rg-ov__row, .rg-alert, .rg-table > tbody):nth-child(7) { --i: 6; }
.ropa-gov .rg-reveal :is(.rg-ov__row, .rg-alert, .rg-table > tbody):nth-child(n+8) { --i: 7; }
.ropa-gov .rg-reveal .rg-exec .rg-panel:nth-child(2) { animation-delay: .08s; }
.ropa-gov .rg-reveal .rg-exec .rg-panel:nth-child(3) { animation-delay: .16s; }
.ropa-gov .rg-reveal .rg-exec .rg-panel:nth-child(4) { animation-delay: .24s; }
.ropa-gov .rg-reveal .rg-exec .rg-panel:nth-child(5) { animation-delay: .32s; }
.ropa-gov .rg-reveal .rg-exec .rg-panel:nth-child(n+6) { animation-delay: .4s; }
.ropa-report .ropa-scroll, .ropa-report .ropa-empty { animation: rgRiseIn .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.ropa-report .rg-hero__inv:not(.ng-hide) > .rg-hero__tile { animation: rgRiseIn .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.ropa-report .rg-hero__inv:not(.ng-hide) > .rg-hero__tile:nth-child(2) { animation-delay: .06s; }
.ropa-report .rg-hero__inv:not(.ng-hide) > .rg-hero__tile:nth-child(3) { animation-delay: .12s; }
.ropa-report .rg-hero__inv:not(.ng-hide) > .rg-hero__tile:nth-child(4) { animation-delay: .18s; }
.ropa-report .rg-hero__inv:not(.ng-hide) > .rg-hero__tile:nth-child(5) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .ropa-gov .rg-reveal *, .ropa-gov .rg-reveal > *, .ropa-report .ropa-scroll, .ropa-report .ropa-empty, .ropa-report .rg-hero__tile { animation: none !important; } }

/* scrollbar หลักของหน้า (ยกจาก master) — สเปกเดียวกับ scrollbar บางโมเดิร์นใน .ndpp-wmodal .modal-body และการ์ดอื่น */
/* gutter: stable กันเนื้อหาขยับตอน scrollbar โผล่/หาย เช่นจังหวะสลับ skeleton → เนื้อหาจริง */
/* Chrome 121+ ถ้าเห็น scrollbar-width/color จะเลิกสนใจ ::-webkit-scrollbar แล้ววาด thin ของตัวเอง (หนากว่า 6px) จึงให้เบราว์เซอร์ที่รู้จัก ::-webkit-scrollbar ใช้ชุด webkit เท่านั้น ชุดมาตรฐานเหลือให้ Firefox */
html { scrollbar-gutter: stable; }
@supports selector(::-webkit-scrollbar) {
    /* ราง 12px ให้เมาส์จับง่าย แต่ thumb เว้นขอบโปร่ง 3px → เห็นเป็นแท่ง 6px, hover อวบขึ้นเป็น 8px */
    html::-webkit-scrollbar { width: 12px; height: 12px; }
    html::-webkit-scrollbar-track { background: transparent; }
    html::-webkit-scrollbar-thumb { background: #d6dae0; border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
    html:hover::-webkit-scrollbar-thumb { background-color: #c2c8d0; }
    html::-webkit-scrollbar-thumb:hover { background-color: #aeb4bd; border-width: 2px; }
    html::-webkit-scrollbar-corner { background: transparent; }
    /* กล่องอื่นที่ scroll ได้ทุกหน้า — :where() = specificity 0 กล่องที่มีสไตล์ scrollbar ของตัวเอง (หรือซ่อนไว้) ยังชนะ */
    :where(body *)::-webkit-scrollbar { width: 10px; height: 10px; }
    :where(body *)::-webkit-scrollbar-track { background: transparent; }
    :where(body *)::-webkit-scrollbar-thumb { background: #d6dae0; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
    :where(body *):hover::-webkit-scrollbar-thumb { background-color: #c2c8d0; }
    :where(body *)::-webkit-scrollbar-thumb:hover { background-color: #aeb4bd; }
    :where(body *)::-webkit-scrollbar-corner { background: transparent; }
}
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-width: auto; scrollbar-color: #d6dae0 transparent; }
    html:hover { scrollbar-color: #c2c8d0 transparent; }
}