@import url(https://fonts.googleapis.com/css?family=Nunito:400,400i,600,700&display=swap&subset=latin-ext);
@import url(../../vendor/bootstrap/bootstrap.min.css);
@import url(../../dist/icons/themify/themify-icons.css);
@import url(../../dist/icons/font-awesome/css/font-awesome.min.css);

.bg-primary {
    background: #3db16b !important;
    color: white !important;
}

.bg-primary-bright {
    background: #c0c5e4 !important;
}

.bg-primary-gradient {
    background: -webkit-linear-gradient(220deg, #3db16b, #65d993) !important;
    background: -moz- oldlinear-gradient(220deg, #3db16b, #65d993) !important;
    background: -o-linear-gradient(220deg, #3db16b, #65d993) !important;
    background: linear-gradient(230deg, #3db16b, #65d993) !important;
    color: white !important;
}

.bg-info {
    background: #00bcd4 !important;
    color: white !important;
}

.bg-info-bright {
    background: #e1efff !important;
}

.bg-info-gradient {
    background: -webkit-linear-gradient(220deg, #00bcd4, #28e4fc) !important;
    background: -moz- oldlinear-gradient(220deg, #00bcd4, #28e4fc) !important;
    background: -o-linear-gradient(220deg, #00bcd4, #28e4fc) !important;
    background: linear-gradient(230deg, #00bcd4, #28e4fc) !important;
    color: white !important;
}

.bg-secondary {
    background: dimgray !important;
    color: white !important;
}

.bg-secondary-bright {
    background: #ededed !important;
}

.bg-secondary-gradient {
    background: -webkit-linear-gradient(220deg, dimgray, #919191) !important;
    background: -moz- oldlinear-gradient(220deg, dimgray, #919191) !important;
    background: -o-linear-gradient(220deg, dimgray, #919191) !important;
    background: linear-gradient(230deg, dimgray, #919191) !important;
    color: white !important;
}

.bg-success {
    background: #0abb87 !important;
    color: white !important;
}

.bg-success-bright {
    background: #cef5ea !important;
}

.bg-success-gradient {
    background: -webkit-linear-gradient(220deg, #0abb87, #32e3af) !important;
    background: -moz- oldlinear-gradient(220deg, #0abb87, #32e3af) !important;
    background: -o-linear-gradient(220deg, #0abb87, #32e3af) !important;
    background: linear-gradient(230deg, #0abb87, #32e3af) !important;
    color: white !important;
}

.bg-danger {
    background: #ea4141 !important;
    color: white !important;
}

.bg-danger-bright {
    background: #fcd0df !important;
}

.bg-danger-gradient {
    background: -webkit-linear-gradient(220deg, #ea4141, #ff6969) !important;
    background: -moz- oldlinear-gradient(220deg, #ea4141, #ff6969) !important;
    background: -o-linear-gradient(220deg, #ea4141, #ff6969) !important;
    background: linear-gradient(230deg, #ea4141, #ff6969) !important;
    color: white !important;
}

.bg-danger-light {
    background: #ffd7d7 !important;
}

.bg-warning {
    background: #ff9d36 !important;
    color: white !important;
}

.bg-warning-bright {
    background: #ffe6cc !important;
}

.bg-warning-gradient {
    background: -webkit-linear-gradient(220deg, #ff9d36, #ffc55e) !important;
    background: -moz- oldlinear-gradient(220deg, #ff9d36, #ffc55e) !important;
    background: -o-linear-gradient(220deg, #ff9d36, #ffc55e) !important;
    background: linear-gradient(230deg, #ff9d36, #ffc55e) !important;
    color: white !important;
}

.bg-light {
    background: #e6e6e6 !important;
}

.bg-dark {
    background: #3a3f51 !important;
    color: #272935 !important;
}

.bg-dark-bright {
    background: #d4d5d8 !important;
}

.bg-dark-gradient {
    background: -webkit-linear-gradient(220deg, #3a3f51, #585d6f) !important;
    background: -moz- oldlinear-gradient(220deg, #3a3f51, #585d6f) !important;
    background: -o-linear-gradient(220deg, #3a3f51, #585d6f) !important;
    background: linear-gradient(230deg, #3a3f51, #585d6f) !important;
    color: white !important;
}

.bg-facebook {
    background: #3b5998 !important;
    color: white !important;
}

.bg-twitter {
    background: #55acee !important;
    color: white !important;
}

.bg-linkedin {
    background: #0077b5 !important;
    color: white !important;
}

.bg-whatsapp {
    background: #43d854 !important;
    color: white !important;
}

.bg-instagram {
    background: #3f729b !important;
    color: white !important;
}

.bg-dribbble {
    background: #ea4c89 !important;
    color: white !important;
}

.bg-google {
    background: #db4437 !important;
    color: white !important;
}

.bg-youtube {
    background: #cd201f !important;
    color: white !important;
}

.text-primary {
    color: #3db16b !important;
}

.text-info {
    color: #00bcd4 !important;
}

.text-success {
    color: #0abb87 !important;
}

.text-danger {
    color: #ea4141 !important;
}

.text-warning {
    color: #ff9d36 !important;
}

.text-light {
    color: #e6e6e6 !important;
}

.text-facebook {
    color: #3b5998 !important;
}

.text-twitter {
    color: #55acee !important;
}

.text-google {
    color: #db4437 !important;
}

.text-linkedin {
    color: #0077b5 !important;
}

.text-instagram {
    color: #3f729b !important;
}

.text-whatsapp {
    color: #43d854 !important;
}

.text-dribbble {
    color: #ea4c89 !important;
}

a {
    color: #007bff;
    text-decoration: none;
    -webkit-transition: color .2s;
    -o-transition: color .2s;
    -moz-transition: color .2s;
    transition: color .2s;
}

    a.link-1 {
        color: black;
    }

        a.link-1:hover, a.link-1:focus {
            color: #828282;
        }

    a.link-2 {
        color: black;
    }

        a.link-2:hover, a.link-2:focus {
            color: #3db16b;
        }

    a:hover {
        text-decoration: none;
    }

    a:not(.active.list-group-item), a:not(.btn):hover, a:not(.btn):active, a:not(.btn):focus {
        text-decoration: none !important;
        color: #b1583d;
        outline: none;
    }

    a:not(.active.list-active-group-item), a:not(.btn):hover, a:not(.btn):active, a:not(.btn):focus {
        text-decoration: none !important;
        color: #bebedb;
        outline: none;
    }

    a.btn:hover, a.btn:active, a.btn:focus {
        text-decoration: none !important;
    }

.page-link {
    color: #3db16b;
}

    .page-link:not(:disabled):not(.disabled):focus {
        -webkit-box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.3);
        -moz-box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.3);
        box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.3);
    }

.btn {
    font-size: 14px;
    width: auto;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 10px 15px;
    line-height: 14px;
}

    .btn[data-toggle="dropdown"] {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .btn.btn-sm {
        padding: 5px 10px;
        font-size: 13px;
    }

    .btn.btn-lg {
        padding: 15px 20px;
        font-size: 17px;
    }

    .btn.btn-block {
        width: 100%;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .btn.btn-square {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .btn.btn-rounded {
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        padding: 10px 20px;
    }

        .btn.btn-rounded.btn-sm {
            padding: 5px 15px;
            font-size: 13px;
        }

        .btn.btn-rounded.btn-lg {
            padding: 20px 30px;
            font-size: 17px;
        }

    .btn.btn-floating {
        height: 35px;
        width: 35px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

        .btn.btn-floating.btn-sm {
            height: 30px;
            width: 30px;
        }

        .btn.btn-floating.btn-lg {
            height: 50px;
            width: 50px;
        }

    .btn.btn-uppercase {
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-weight: 600;
    }

        .btn.btn-uppercase.btn-sm {
            font-size: 11px;
        }

        .btn.btn-uppercase.btn-lg {
            font-size: 14px;
        }

    .btn.btn-shadow {
        -webkit-box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.3);
    }

        .btn.btn-shadow:focus, .btn.btn-shadow:active {
            -webkit-box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.3) !important;
            -moz-box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.3) !important;
            box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.3) !important;
        }

    .btn.btn-primary, a.btn[href="#next"], a.btn[href="#previous"] {
        background: #3db16b;
        border-color: #3db16b;
        color: white;
    }

        .btn.btn-primary:not(:disabled):not(.disabled):hover, a.btn:not(:disabled):not(.disabled):hover[href="#next"], a.btn:not(:disabled):not(.disabled):hover[href="#previous"], .btn.btn-primary:not(:disabled):not(.disabled):focus, a.btn:not(:disabled):not(.disabled):focus[href="#next"], a.btn:not(:disabled):not(.disabled):focus[href="#previous"], .btn.btn-primary:not(:disabled):not(.disabled):active, a.btn:not(:disabled):not(.disabled):active[href="#next"], a.btn:not(:disabled):not(.disabled):active[href="#previous"] {
            background: #1f934d;
            border-color: #1f934d;
            color: white;
        }

        .btn.btn-primary:not(:disabled):not(.disabled):focus, a.btn:not(:disabled):not(.disabled):focus[href="#next"], a.btn:not(:disabled):not(.disabled):focus[href="#previous"] {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.4) !important;
        }

        .btn.btn-primary.btn-pulse:not(:disabled):not(.disabled), a.btn.btn-pulse:not(:disabled):not(.disabled)[href="#next"], a.btn.btn-pulse:not(:disabled):not(.disabled)[href="#previous"] {
            -webkit-box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-primary:hover, a.btn:hover[href="#next"], a.btn:hover[href="#previous"] {
            -webkit-animation: none;
        }

    .btn.btn-gradient-primary {
        background: -webkit-linear-gradient(70deg, #65d993, #2ea25c);
        background: -moz- oldlinear-gradient(70deg, #65d993, #2ea25c);
        background: -o-linear-gradient(70deg, #65d993, #2ea25c);
        background: linear-gradient(20deg, #65d993, #2ea25c);
        border-color: transparent;
        color: white;
    }

        .btn.btn-gradient-primary:not(:disabled):not(.disabled):hover, .btn.btn-gradient-primary:not(:disabled):not(.disabled):focus, .btn.btn-gradient-primary:not(:disabled):not(.disabled):active {
            background: -webkit-linear-gradient(70deg, #3db16b, #2ea25c);
            background: -moz- oldlinear-gradient(70deg, #3db16b, #2ea25c);
            background: -o-linear-gradient(70deg, #3db16b, #2ea25c);
            background: linear-gradient(20deg, #3db16b, #2ea25c);
            border-color: transparent;
        }

        .btn.btn-gradient-primary:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.5);
            -moz-box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.5);
        }

        .btn.btn-gradient-primary.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-gradient-primary:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-primary {
        background: rgba(61, 177, 107, 0.3);
        border-color: transparent;
        color: #0b7f39;
    }

        .btn.btn-light-primary:not(:disabled):not(.disabled):hover, .btn.btn-light-primary:not(:disabled):not(.disabled):focus, .btn.btn-light-primary:not(:disabled):not(.disabled):active {
            background: rgba(61, 177, 107, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-primary:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.2);
            -moz-box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.2);
            box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.2);
        }

        .btn.btn-light-primary.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-light-primary:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-primary {
        background: none;
        border-color: #3db16b;
        color: #33a761;
        border-width: 1px;
    }

        .btn.btn-outline-primary:not(:disabled):not(.disabled):hover {
            background: #3db16b;
            border-color: #3db16b;
            color: white;
        }

        .btn.btn-outline-primary:not(:disabled):not(.disabled):focus, .btn.btn-outline-primary:not(:disabled):not(.disabled):active {
            background: #1f934d;
            border-color: #1f934d;
            color: white;
        }

        .btn.btn-outline-primary:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(61, 177, 107, 0.4);
        }

        .btn.btn-outline-primary.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(61, 177, 107, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-primary:hover {
            -webkit-animation: none;
        }

    .btn.btn-secondary {
        background: dimgray;
        border-color: dimgray;
    }

        .btn.btn-secondary:not(:disabled):not(.disabled):hover, .btn.btn-secondary:not(:disabled):not(.disabled):focus, .btn.btn-secondary:not(:disabled):not(.disabled):active {
            background: #4b4b4b;
            border-color: #4b4b4b;
        }

        .btn.btn-secondary:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.4) !important;
        }

        .btn.btn-secondary.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-secondary:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-secondary {
        background: -webkit-linear-gradient(70deg, #919191, #5a5a5a);
        background: -moz- oldlinear-gradient(70deg, #919191, #5a5a5a);
        background: -o-linear-gradient(70deg, #919191, #5a5a5a);
        background: linear-gradient(20deg, #919191, #5a5a5a);
        border-color: transparent;
        color: white;
    }

        .btn.btn-gradient-secondary:not(:disabled):not(.disabled):hover, .btn.btn-gradient-secondary:not(:disabled):not(.disabled):focus, .btn.btn-gradient-secondary:not(:disabled):not(.disabled):active {
            background: -webkit-linear-gradient(70deg, dimgray, #5a5a5a);
            background: -moz- oldlinear-gradient(70deg, dimgray, #5a5a5a);
            background: -o-linear-gradient(70deg, dimgray, #5a5a5a);
            background: linear-gradient(20deg, dimgray, #5a5a5a);
            border-color: transparent;
        }

        .btn.btn-gradient-secondary:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.5);
            -moz-box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.5);
        }

        .btn.btn-gradient-secondary.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-gradient-secondary:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-secondary {
        background: rgba(105, 105, 105, 0.3);
        border-color: transparent;
        color: #373737;
    }

        .btn.btn-light-secondary:not(:disabled):not(.disabled):hover, .btn.btn-light-secondary:not(:disabled):not(.disabled):focus, .btn.btn-light-secondary:not(:disabled):not(.disabled):active {
            background: rgba(105, 105, 105, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-secondary:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.2);
            -moz-box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.2);
            box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.2);
        }

        .btn.btn-light-secondary.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-light-secondary:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-secondary {
        background: none;
        border-color: dimgray;
        color: #5f5f5f;
        border-width: 1px;
    }

        .btn.btn-outline-secondary:not(:disabled):not(.disabled):hover {
            background: dimgray;
            border-color: dimgray;
            color: white;
        }

        .btn.btn-outline-secondary:not(:disabled):not(.disabled):focus, .btn.btn-outline-secondary:not(:disabled):not(.disabled):active {
            background: #4b4b4b;
            border-color: #4b4b4b;
            color: white;
        }

        .btn.btn-outline-secondary:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(105, 105, 105, 0.4);
        }

        .btn.btn-outline-secondary.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(105, 105, 105, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-secondary:hover {
            -webkit-animation: none;
        }

    .btn.btn-success {
        background: #0abb87;
        border-color: #0abb87;
    }

        .btn.btn-success:not(:disabled):not(.disabled):hover, .btn.btn-success:not(:disabled):not(.disabled):focus, .btn.btn-success:not(:disabled):not(.disabled):active {
            background: #009d69;
            border-color: #009d69;
        }

        .btn.btn-success:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.4) !important;
        }

        .btn.btn-success.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-success:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-success {
        background: -webkit-linear-gradient(70deg, #32e3af, #00ac78);
        background: -moz- oldlinear-gradient(70deg, #32e3af, #00ac78);
        background: -o-linear-gradient(70deg, #32e3af, #00ac78);
        background: linear-gradient(20deg, #32e3af, #00ac78);
        border-color: transparent;
        color: white;
    }

        .btn.btn-gradient-success:not(:disabled):not(.disabled):hover, .btn.btn-gradient-success:not(:disabled):not(.disabled):focus, .btn.btn-gradient-success:not(:disabled):not(.disabled):active {
            background: -webkit-linear-gradient(70deg, #0abb87, #00ac78);
            background: -moz- oldlinear-gradient(70deg, #0abb87, #00ac78);
            background: -o-linear-gradient(70deg, #0abb87, #00ac78);
            background: linear-gradient(20deg, #0abb87, #00ac78);
            border-color: transparent;
        }

        .btn.btn-gradient-success:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.5);
            -moz-box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.5);
        }

        .btn.btn-gradient-success.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-gradient-success:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-success {
        background: rgba(10, 187, 135, 0.3);
        border-color: transparent;
        color: #008955;
    }

        .btn.btn-light-success:not(:disabled):not(.disabled):hover, .btn.btn-light-success:not(:disabled):not(.disabled):focus, .btn.btn-light-success:not(:disabled):not(.disabled):active {
            background: rgba(10, 187, 135, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-success:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.2);
            -moz-box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.2);
            box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.2);
        }

        .btn.btn-light-success.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-light-success:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-success {
        background: none;
        border-color: #0abb87;
        color: #00b17d;
        border-width: 1px;
    }

        .btn.btn-outline-success:not(:disabled):not(.disabled):hover {
            background: #0abb87;
            border-color: #0abb87;
            color: white;
        }

        .btn.btn-outline-success:not(:disabled):not(.disabled):focus, .btn.btn-outline-success:not(:disabled):not(.disabled):active {
            background: #009d69;
            border-color: #009d69;
            color: white;
        }

        .btn.btn-outline-success:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(10, 187, 135, 0.4);
        }

        .btn.btn-outline-success.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(10, 187, 135, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-success:hover {
            -webkit-animation: none;
        }

    .btn.btn-danger {
        background: #ea4141;
        border-color: #ea4141;
    }

        .btn.btn-danger:not(:disabled):not(.disabled):hover, .btn.btn-danger:not(:disabled):not(.disabled):focus, .btn.btn-danger:not(:disabled):not(.disabled):active {
            background: #cc2323;
            border-color: #cc2323;
        }

        .btn.btn-danger:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.4) !important;
        }

        .btn.btn-danger.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-danger:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-danger {
        background: -webkit-linear-gradient(70deg, #ff6969, #db3232);
        background: -moz- oldlinear-gradient(70deg, #ff6969, #db3232);
        background: -o-linear-gradient(70deg, #ff6969, #db3232);
        background: linear-gradient(20deg, #ff6969, #db3232);
        border-color: transparent;
        color: white;
    }

        .btn.btn-gradient-danger:not(:disabled):not(.disabled):hover, .btn.btn-gradient-danger:not(:disabled):not(.disabled):focus, .btn.btn-gradient-danger:not(:disabled):not(.disabled):active {
            background: -webkit-linear-gradient(70deg, #ea4141, #db3232);
            background: -moz- oldlinear-gradient(70deg, #ea4141, #db3232);
            background: -o-linear-gradient(70deg, #ea4141, #db3232);
            background: linear-gradient(20deg, #ea4141, #db3232);
            border-color: transparent;
        }

        .btn.btn-gradient-danger:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.5);
            -moz-box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.5);
        }

        .btn.btn-gradient-danger.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-gradient-danger:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-danger {
        background: rgba(234, 65, 65, 0.3);
        border-color: transparent;
        color: #b80f0f;
    }

        .btn.btn-light-danger:not(:disabled):not(.disabled):hover, .btn.btn-light-danger:not(:disabled):not(.disabled):focus, .btn.btn-light-danger:not(:disabled):not(.disabled):active {
            background: rgba(234, 65, 65, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-danger:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.2);
            -moz-box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.2);
            box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.2);
        }

        .btn.btn-light-danger.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-light-danger:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-danger {
        background: none;
        border-color: #ea4141;
        color: #e03737;
        border-width: 1px;
    }

        .btn.btn-outline-danger:not(:disabled):not(.disabled):hover {
            background: #ea4141;
            border-color: #ea4141;
            color: white;
        }

        .btn.btn-outline-danger:not(:disabled):not(.disabled):focus, .btn.btn-outline-danger:not(:disabled):not(.disabled):active {
            background: #cc2323;
            border-color: #cc2323;
            color: white;
        }

        .btn.btn-outline-danger:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(234, 65, 65, 0.4);
        }

        .btn.btn-outline-danger.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(234, 65, 65, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-danger:hover {
            -webkit-animation: none;
        }

    .btn.btn-warning {
        background: #ff9d36;
        border-color: #ff9d36;
    }

        .btn.btn-warning:not(:disabled):not(.disabled):hover, .btn.btn-warning:not(:disabled):not(.disabled):focus, .btn.btn-warning:not(:disabled):not(.disabled):active {
            background: #e17f18;
            border-color: #e17f18;
        }

        .btn.btn-warning:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.4) !important;
        }

        .btn.btn-warning.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-warning:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-warning {
        background: -webkit-linear-gradient(70deg, #ffc55e, #f08e27);
        background: -moz- oldlinear-gradient(70deg, #ffc55e, #f08e27);
        background: -o-linear-gradient(70deg, #ffc55e, #f08e27);
        background: linear-gradient(20deg, #ffc55e, #f08e27);
        border-color: transparent;
        color: white;
        color: #212529;
    }

        .btn.btn-gradient-warning:not(:disabled):not(.disabled):hover, .btn.btn-gradient-warning:not(:disabled):not(.disabled):focus, .btn.btn-gradient-warning:not(:disabled):not(.disabled):active {
            background: -webkit-linear-gradient(70deg, #ff9d36, #f08e27);
            background: -moz- oldlinear-gradient(70deg, #ff9d36, #f08e27);
            background: -o-linear-gradient(70deg, #ff9d36, #f08e27);
            background: linear-gradient(20deg, #ff9d36, #f08e27);
            border-color: transparent;
        }

        .btn.btn-gradient-warning:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.5);
            -moz-box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.5);
        }

        .btn.btn-gradient-warning.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-gradient-warning:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-warning {
        background: rgba(255, 157, 54, 0.3);
        border-color: transparent;
        color: #cd6b04;
    }

        .btn.btn-light-warning:not(:disabled):not(.disabled):hover, .btn.btn-light-warning:not(:disabled):not(.disabled):focus, .btn.btn-light-warning:not(:disabled):not(.disabled):active {
            background: rgba(255, 157, 54, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-warning:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.2);
            -moz-box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.2);
            box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.2);
        }

        .btn.btn-light-warning.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-light-warning:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-warning {
        background: none;
        border-color: #ff9d36;
        color: #f5932c;
        border-width: 1px;
    }

        .btn.btn-outline-warning:not(:disabled):not(.disabled):hover {
            background: #ff9d36;
            border-color: #ff9d36;
            color: white;
        }

        .btn.btn-outline-warning:not(:disabled):not(.disabled):focus, .btn.btn-outline-warning:not(:disabled):not(.disabled):active {
            background: #e17f18;
            border-color: #e17f18;
            color: white;
        }

        .btn.btn-outline-warning:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(255, 157, 54, 0.4);
        }

        .btn.btn-outline-warning.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(255, 157, 54, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-warning:hover {
            -webkit-animation: none;
        }

        .btn.btn-outline-warning:not(:disabled):not(.disabled):hover, .btn.btn-outline-warning:not(:disabled):not(.disabled):focus, .btn.btn-outline-warning:not(:disabled):not(.disabled):active {
            color: #212529;
        }

    .btn.btn-info {
        background: #00bcd4;
        border-color: #00bcd4;
    }

        .btn.btn-info:not(:disabled):not(.disabled):hover, .btn.btn-info:not(:disabled):not(.disabled):focus, .btn.btn-info:not(:disabled):not(.disabled):active {
            background: #009eb6;
            border-color: #009eb6;
        }

        .btn.btn-info:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.4) !important;
        }

        .btn.btn-info.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-info:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-info {
        background: -webkit-linear-gradient(70deg, #28e4fc, #00adc5);
        background: -moz- oldlinear-gradient(70deg, #28e4fc, #00adc5);
        background: -o-linear-gradient(70deg, #28e4fc, #00adc5);
        background: linear-gradient(20deg, #28e4fc, #00adc5);
        border-color: transparent;
        color: white;
    }

        .btn.btn-gradient-info:not(:disabled):not(.disabled):hover, .btn.btn-gradient-info:not(:disabled):not(.disabled):focus, .btn.btn-gradient-info:not(:disabled):not(.disabled):active {
            background: -webkit-linear-gradient(70deg, #00bcd4, #00adc5);
            background: -moz- oldlinear-gradient(70deg, #00bcd4, #00adc5);
            background: -o-linear-gradient(70deg, #00bcd4, #00adc5);
            background: linear-gradient(20deg, #00bcd4, #00adc5);
            border-color: transparent;
        }

        .btn.btn-gradient-info:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.5);
            -moz-box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.5);
        }

        .btn.btn-gradient-info.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-gradient-info:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-info {
        background: rgba(0, 188, 212, 0.3);
        border-color: transparent;
        color: #008aa2;
    }

        .btn.btn-light-info:not(:disabled):not(.disabled):hover, .btn.btn-light-info:not(:disabled):not(.disabled):focus, .btn.btn-light-info:not(:disabled):not(.disabled):active {
            background: rgba(0, 188, 212, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-info:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.2);
            -moz-box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.2);
            box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.2);
        }

        .btn.btn-light-info.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-light-info:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-info {
        background: none;
        border-color: #00bcd4;
        color: #00b2ca;
        border-width: 1px;
    }

        .btn.btn-outline-info:not(:disabled):not(.disabled):hover {
            background: #00bcd4;
            border-color: #00bcd4;
            color: white;
        }

        .btn.btn-outline-info:not(:disabled):not(.disabled):focus, .btn.btn-outline-info:not(:disabled):not(.disabled):active {
            background: #009eb6;
            border-color: #009eb6;
            color: white;
        }

        .btn.btn-outline-info:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.4);
        }

        .btn.btn-outline-info.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-info:hover {
            -webkit-animation: none;
        }

    .btn.btn-light {
        margin: 5px;
        background: #e6e6e6;
        border-color: #e6e6e6;
    }

        .btn.btn-light:not(:disabled):not(.disabled):hover, .btn.btn-light:not(:disabled):not(.disabled):focus, .btn.btn-light:not(:disabled):not(.disabled):active {
            background: #c8c8c8;
            border-color: #c8c8c8;
        }

        .btn.btn-light:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.4) !important;
        }

        .btn.btn-light.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-light:hover {
            -webkit-animation: none;
        }



    .btn.btn-light2 {
        margin: 5px;
        background: #e6e6e6;
        border-color: #e6e6e6;
    }

        .btn.btn-light2:not(:disabled):not(.disabled):hover, .btn.btn-light2:not(:disabled):not(.disabled):focus, .btn.btn-light2:not(:disabled):not(.disabled):active {
            background: #c8c8c8;
            border-color: #c8c8c8;
        }

        .btn.btn-light2:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.4) !important;
        }

        .btn.btn-light2.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-light2:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-light {
        background: -webkit-linear-gradient(70deg, white, #d7d7d7);
        background: -moz- oldlinear-gradient(70deg, white, #d7d7d7);
        background: -o-linear-gradient(70deg, white, #d7d7d7);
        background: linear-gradient(20deg, white, #d7d7d7);
        border-color: transparent;
        color: white;
        color: inherit;
    }

        .btn.btn-gradient-light:not(:disabled):not(.disabled):hover, .btn.btn-gradient-light:not(:disabled):not(.disabled):focus, .btn.btn-gradient-light:not(:disabled):not(.disabled):active {
            background: -webkit-linear-gradient(70deg, #e6e6e6, #d7d7d7);
            background: -moz- oldlinear-gradient(70deg, #e6e6e6, #d7d7d7);
            background: -o-linear-gradient(70deg, #e6e6e6, #d7d7d7);
            background: linear-gradient(20deg, #e6e6e6, #d7d7d7);
            border-color: transparent;
        }

        .btn.btn-gradient-light:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.5);
            -moz-box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.5);
        }

        .btn.btn-gradient-light.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-gradient-light:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-light {
        background: none;
        border-color: #000;
        color: white !important;
        border-width: 1px;
    }

        .btn.btn-outline-light:not(:disabled):not(.disabled):hover {
            background: #e6e6e6;
            border-color: #e6e6e6;
            color: white;
        }

        .btn.btn-outline-light:not(:disabled):not(.disabled):focus, .btn.btn-outline-light:not(:disabled):not(.disabled):active {
            background: #e6e6e6;
            border-color: #c8c8c8;
            color: white !important;
        }

        .btn.btn-outline-light:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.4);
        }

        .btn.btn-outline-light.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(230, 230, 230, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-light:hover {
            -webkit-animation: none;
        }

        .btn.btn-outline-light:not(:disabled):not(.disabled):hover, .btn.btn-outline-light:not(:disabled):not(.disabled):focus, .btn.btn-outline-light:not(:disabled):not(.disabled):active {
            color: #212529;
        }

    .btn.btn-dark {
        background: #3a3f51;
        border-color: #3a3f51;
    }

        .btn.btn-dark:not(:disabled):not(.disabled):hover, .btn.btn-dark:not(:disabled):not(.disabled):focus, .btn.btn-dark:not(:disabled):not(.disabled):active {
            background: #1c2133;
            border-color: #1c2133;
        }

        .btn.btn-dark:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.4) !important;
        }

        .btn.btn-dark.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-dark:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-dark {
        background: -webkit-linear-gradient(70deg, #626779, #2b3042);
        background: -moz- oldlinear-gradient(70deg, #626779, #2b3042);
        background: -o-linear-gradient(70deg, #626779, #2b3042);
        background: linear-gradient(20deg, #626779, #2b3042);
        border-color: transparent;
        color: white;
    }

        .btn.btn-gradient-dark:not(:disabled):not(.disabled):hover, .btn.btn-gradient-dark:not(:disabled):not(.disabled):focus, .btn.btn-gradient-dark:not(:disabled):not(.disabled):active {
            background: -webkit-linear-gradient(70deg, #3a3f51, #2b3042);
            background: -moz- oldlinear-gradient(70deg, #3a3f51, #2b3042);
            background: -o-linear-gradient(70deg, #3a3f51, #2b3042);
            background: linear-gradient(20deg, #3a3f51, #2b3042);
            border-color: transparent;
        }

        .btn.btn-gradient-dark:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.5);
            -moz-box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.5);
        }

        .btn.btn-gradient-dark.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-gradient-dark:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-dark {
        background: rgba(58, 63, 81, 0.3);
        border-color: transparent;
        color: #080d1f;
    }

        .btn.btn-light-dark:not(:disabled):not(.disabled):hover, .btn.btn-light-dark:not(:disabled):not(.disabled):focus, .btn.btn-light-dark:not(:disabled):not(.disabled):active {
            background: rgba(58, 63, 81, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-dark:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.2);
            -moz-box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.2);
            box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.2);
        }

        .btn.btn-light-dark.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-light-dark:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-dark {
        background: none;
        border-color: #b0b4bf;
        color: #ffffff;
        border-width: 1px;
        /*  background: none;
  border-color: #3a3f51;
  color: #303547;
  border-width: 1px;*/
    }

        .btn.btn-outline-dark:not(:disabled):not(.disabled):hover {
            background: #3a3f51;
            border-color: #3a3f51;
            color: white;
        }

        .btn.btn-outline-dark:not(:disabled):not(.disabled):focus, .btn.btn-outline-dark:not(:disabled):not(.disabled):active {
            background: #1c2133;
            border-color: #1c2133;
            color: white;
        }

        .btn.btn-outline-dark:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.4);
        }

        .btn.btn-outline-dark.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-dark:hover {
            -webkit-animation: none;
        }

    .btn.btn-facebook {
        background: #3b5998;
        border-color: #3b5998;
        color: white;
    }

        .btn.btn-facebook:not(:disabled):not(.disabled):hover, .btn.btn-facebook:not(:disabled):not(.disabled):focus, .btn.btn-facebook:not(:disabled):not(.disabled):active {
            background: #1d3b7a;
            border-color: #1d3b7a;
        }

        .btn.btn-facebook:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.4) !important;
        }

        .btn.btn-facebook.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(59, 89, 152, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(59, 89, 152, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(59, 89, 152, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-facebook:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-facebook {
        background: none;
        border-color: #3b5998;
        color: #314f8e;
        border-width: 1px;
    }

        .btn.btn-outline-facebook:not(:disabled):not(.disabled):hover {
            background: #3b5998;
            border-color: #3b5998;
            color: white;
        }

        .btn.btn-outline-facebook:not(:disabled):not(.disabled):focus, .btn.btn-outline-facebook:not(:disabled):not(.disabled):active {
            background: #1d3b7a;
            border-color: #1d3b7a;
            color: white;
        }

        .btn.btn-outline-facebook:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.4);
        }

        .btn.btn-outline-facebook.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(59, 89, 152, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(59, 89, 152, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(59, 89, 152, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-facebook:hover {
            -webkit-animation: none;
        }

    .btn.btn-google {
        background: #db4437;
        border-color: #db4437;
        color: white;
    }

        .btn.btn-google:not(:disabled):not(.disabled):hover, .btn.btn-google:not(:disabled):not(.disabled):focus, .btn.btn-google:not(:disabled):not(.disabled):active {
            background: #bd2619;
            border-color: #bd2619;
        }

        .btn.btn-google:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(219, 68, 55, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(219, 68, 55, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(219, 68, 55, 0.4) !important;
        }

        .btn.btn-google.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(219, 68, 55, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(219, 68, 55, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(219, 68, 55, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-google:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-google {
        background: none;
        border-color: #db4437;
        color: #d13a2d;
        border-width: 1px;
    }

        .btn.btn-outline-google:not(:disabled):not(.disabled):hover {
            background: #db4437;
            border-color: #db4437;
            color: white;
        }

        .btn.btn-outline-google:not(:disabled):not(.disabled):focus, .btn.btn-outline-google:not(:disabled):not(.disabled):active {
            background: #bd2619;
            border-color: #bd2619;
            color: white;
        }

        .btn.btn-outline-google:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(219, 68, 55, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(219, 68, 55, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(219, 68, 55, 0.4);
        }

        .btn.btn-outline-google.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(219, 68, 55, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(219, 68, 55, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(219, 68, 55, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-google:hover {
            -webkit-animation: none;
        }

    .btn.btn-twitter {
        background: #55acee;
        border-color: #55acee;
        color: white;
    }

        .btn.btn-twitter:not(:disabled):not(.disabled):hover, .btn.btn-twitter:not(:disabled):not(.disabled):focus, .btn.btn-twitter:not(:disabled):not(.disabled):active {
            background: #378ed0;
            border-color: #378ed0;
        }

        .btn.btn-twitter:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(85, 172, 238, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(85, 172, 238, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(85, 172, 238, 0.4) !important;
        }

        .btn.btn-twitter.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(85, 172, 238, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(85, 172, 238, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(85, 172, 238, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-twitter:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-twitter {
        background: none;
        border-color: #55acee;
        color: #4ba2e4;
        border-width: 1px;
    }

        .btn.btn-outline-twitter:not(:disabled):not(.disabled):hover {
            background: #55acee;
            border-color: #55acee;
            color: white;
        }

        .btn.btn-outline-twitter:not(:disabled):not(.disabled):focus, .btn.btn-outline-twitter:not(:disabled):not(.disabled):active {
            background: #378ed0;
            border-color: #378ed0;
            color: white;
        }

        .btn.btn-outline-twitter:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(85, 172, 238, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(85, 172, 238, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(85, 172, 238, 0.4);
        }

        .btn.btn-outline-twitter.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(85, 172, 238, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(85, 172, 238, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(85, 172, 238, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-twitter:hover {
            -webkit-animation: none;
        }

    .btn.btn-linkedin {
        background: #0077b5;
        border-color: #0077b5;
        color: white;
    }

        .btn.btn-linkedin:not(:disabled):not(.disabled):hover, .btn.btn-linkedin:not(:disabled):not(.disabled):focus, .btn.btn-linkedin:not(:disabled):not(.disabled):active {
            background: #005997;
            border-color: #005997;
        }

        .btn.btn-linkedin:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 119, 181, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(0, 119, 181, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(0, 119, 181, 0.4) !important;
        }

        .btn.btn-linkedin.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 119, 181, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(0, 119, 181, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(0, 119, 181, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-linkedin:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-linkedin {
        background: none;
        border-color: #0077b5;
        color: #006dab;
        border-width: 1px;
    }

        .btn.btn-outline-linkedin:not(:disabled):not(.disabled):hover {
            background: #0077b5;
            border-color: #0077b5;
            color: white;
        }

        .btn.btn-outline-linkedin:not(:disabled):not(.disabled):focus, .btn.btn-outline-linkedin:not(:disabled):not(.disabled):active {
            background: #005997;
            border-color: #005997;
            color: white;
        }

        .btn.btn-outline-linkedin:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 119, 181, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(0, 119, 181, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(0, 119, 181, 0.4);
        }

        .btn.btn-outline-linkedin.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 119, 181, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(0, 119, 181, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(0, 119, 181, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-linkedin:hover {
            -webkit-animation: none;
        }

    .btn.btn-whatsapp {
        background: #43d854;
        border-color: #43d854;
        color: white;
    }

        .btn.btn-whatsapp:not(:disabled):not(.disabled):hover, .btn.btn-whatsapp:not(:disabled):not(.disabled):focus, .btn.btn-whatsapp:not(:disabled):not(.disabled):active {
            background: #25ba36;
            border-color: #25ba36;
        }

        .btn.btn-whatsapp:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(67, 216, 84, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(67, 216, 84, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(67, 216, 84, 0.4) !important;
        }

        .btn.btn-whatsapp.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(67, 216, 84, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(67, 216, 84, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(67, 216, 84, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-whatsapp:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-whatsapp {
        background: none;
        border-color: #43d854;
        color: #39ce4a;
        border-width: 1px;
    }

        .btn.btn-outline-whatsapp:not(:disabled):not(.disabled):hover {
            background: #43d854;
            border-color: #43d854;
            color: white;
        }

        .btn.btn-outline-whatsapp:not(:disabled):not(.disabled):focus, .btn.btn-outline-whatsapp:not(:disabled):not(.disabled):active {
            background: #25ba36;
            border-color: #25ba36;
            color: white;
        }

        .btn.btn-outline-whatsapp:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(67, 216, 84, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(67, 216, 84, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(67, 216, 84, 0.4);
        }

        .btn.btn-outline-whatsapp.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(67, 216, 84, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(67, 216, 84, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(67, 216, 84, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-whatsapp:hover {
            -webkit-animation: none;
        }

    .btn.btn-instagram {
        background: #3f729b;
        border-color: #3f729b;
        color: white;
    }

        .btn.btn-instagram:not(:disabled):not(.disabled):hover, .btn.btn-instagram:not(:disabled):not(.disabled):focus, .btn.btn-instagram:not(:disabled):not(.disabled):active {
            background: #21547d;
            border-color: #21547d;
        }

        .btn.btn-instagram:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(63, 114, 155, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(63, 114, 155, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(63, 114, 155, 0.4) !important;
        }

        .btn.btn-instagram.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(63, 114, 155, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(63, 114, 155, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(63, 114, 155, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-instagram:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-instagram {
        background: none;
        border-color: #3f729b;
        color: #356891;
        border-width: 1px;
    }

        .btn.btn-outline-instagram:not(:disabled):not(.disabled):hover {
            background: #3f729b;
            border-color: #3f729b;
            color: white;
        }

        .btn.btn-outline-instagram:not(:disabled):not(.disabled):focus, .btn.btn-outline-instagram:not(:disabled):not(.disabled):active {
            background: #21547d;
            border-color: #21547d;
            color: white;
        }

        .btn.btn-outline-instagram:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(63, 114, 155, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(63, 114, 155, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(63, 114, 155, 0.4);
        }

        .btn.btn-outline-instagram.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(63, 114, 155, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(63, 114, 155, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(63, 114, 155, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-instagram:hover {
            -webkit-animation: none;
        }

    .btn.btn-dribbble {
        background: #ea4c89;
        border-color: #ea4c89;
        color: white;
    }

        .btn.btn-dribbble:not(:disabled):not(.disabled):hover, .btn.btn-dribbble:not(:disabled):not(.disabled):focus, .btn.btn-dribbble:not(:disabled):not(.disabled):active {
            background: #cc2e6b;
            border-color: #cc2e6b;
        }

        .btn.btn-dribbble:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(234, 76, 137, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(234, 76, 137, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(234, 76, 137, 0.4) !important;
        }

        .btn.btn-dribbble.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(234, 76, 137, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(234, 76, 137, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(234, 76, 137, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-dribbble:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-dribbble {
        background: none;
        border-color: #ea4c89;
        color: #e0427f;
        border-width: 1px;
    }

        .btn.btn-outline-dribbble:not(:disabled):not(.disabled):hover {
            background: #ea4c89;
            border-color: #ea4c89;
            color: white;
        }

        .btn.btn-outline-dribbble:not(:disabled):not(.disabled):focus, .btn.btn-outline-dribbble:not(:disabled):not(.disabled):active {
            background: #cc2e6b;
            border-color: #cc2e6b;
            color: white;
        }

        .btn.btn-outline-dribbble:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(234, 76, 137, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(234, 76, 137, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(234, 76, 137, 0.4);
        }

        .btn.btn-outline-dribbble.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(234, 76, 137, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(234, 76, 137, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(234, 76, 137, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-dribbble:hover {
            -webkit-animation: none;
        }

    .btn.btn-youtube {
        background: #cd201f;
        border-color: #cd201f;
        color: white;
    }

        .btn.btn-youtube:not(:disabled):not(.disabled):hover, .btn.btn-youtube:not(:disabled):not(.disabled):focus, .btn.btn-youtube:not(:disabled):not(.disabled):active {
            background: #af0201;
            border-color: #af0201;
        }

        .btn.btn-youtube:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.4) !important;
        }

        .btn.btn-youtube.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(205, 32, 31, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(205, 32, 31, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(205, 32, 31, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-youtube:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-youtube {
        background: none;
        border-color: #cd201f;
        color: #c31615;
        border-width: 1px;
    }

        .btn.btn-outline-youtube:not(:disabled):not(.disabled):hover {
            background: #cd201f;
            border-color: #cd201f;
            color: white;
        }

        .btn.btn-outline-youtube:not(:disabled):not(.disabled):focus, .btn.btn-outline-youtube:not(:disabled):not(.disabled):active {
            background: #af0201;
            border-color: #af0201;
            color: white;
        }

        .btn.btn-outline-youtube:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.4);
        }

        .btn.btn-outline-youtube.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(205, 32, 31, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(205, 32, 31, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(205, 32, 31, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-youtube:hover {
            -webkit-animation: none;
        }

    .btn.btn-github {
        background: #00405d;
        border-color: #00405d;
        color: white;
    }

        .btn.btn-github:not(:disabled):not(.disabled):hover, .btn.btn-github:not(:disabled):not(.disabled):focus, .btn.btn-github:not(:disabled):not(.disabled):active {
            background: #00223f;
            border-color: #00223f;
        }

        .btn.btn-github:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 64, 93, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(0, 64, 93, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(0, 64, 93, 0.4) !important;
        }

        .btn.btn-github.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 64, 93, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(0, 64, 93, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(0, 64, 93, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-github:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-github {
        background: none;
        border-color: #00405d;
        color: #003653;
        border-width: 1px;
    }

        .btn.btn-outline-github:not(:disabled):not(.disabled):hover {
            background: #00405d;
            border-color: #00405d;
            color: white;
        }

        .btn.btn-outline-github:not(:disabled):not(.disabled):focus, .btn.btn-outline-github:not(:disabled):not(.disabled):active {
            background: #00223f;
            border-color: #00223f;
            color: white;
        }

        .btn.btn-outline-github:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 64, 93, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(0, 64, 93, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(0, 64, 93, 0.4);
        }

        .btn.btn-outline-github.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 64, 93, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(0, 64, 93, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(0, 64, 93, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-github:hover {
            -webkit-animation: none;
        }

    .btn.btn-behance {
        background: #1769ff;
        border-color: #1769ff;
        color: white;
    }

        .btn.btn-behance:not(:disabled):not(.disabled):hover, .btn.btn-behance:not(:disabled):not(.disabled):focus, .btn.btn-behance:not(:disabled):not(.disabled):active {
            background: #004be1;
            border-color: #004be1;
        }

        .btn.btn-behance:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(23, 105, 255, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(23, 105, 255, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(23, 105, 255, 0.4) !important;
        }

        .btn.btn-behance.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(23, 105, 255, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(23, 105, 255, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(23, 105, 255, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-behance:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-behance {
        background: none;
        border-color: #1769ff;
        color: #0d5ff5;
        border-width: 1px;
    }

        .btn.btn-outline-behance:not(:disabled):not(.disabled):hover {
            background: #1769ff;
            border-color: #1769ff;
            color: white;
        }

        .btn.btn-outline-behance:not(:disabled):not(.disabled):focus, .btn.btn-outline-behance:not(:disabled):not(.disabled):active {
            background: #004be1;
            border-color: #004be1;
            color: white;
        }

        .btn.btn-outline-behance:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(23, 105, 255, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(23, 105, 255, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(23, 105, 255, 0.4);
        }

        .btn.btn-outline-behance.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(23, 105, 255, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(23, 105, 255, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(23, 105, 255, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-behance:hover {
            -webkit-animation: none;
        }

    .btn.btn-skype {
        background: #00aff0;
        border-color: #00aff0;
        color: white;
    }

        .btn.btn-skype:not(:disabled):not(.disabled):hover, .btn.btn-skype:not(:disabled):not(.disabled):focus, .btn.btn-skype:not(:disabled):not(.disabled):active {
            background: #0091d2;
            border-color: #0091d2;
        }

        .btn.btn-skype:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 175, 240, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(0, 175, 240, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(0, 175, 240, 0.4) !important;
        }

        .btn.btn-skype.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 175, 240, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(0, 175, 240, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(0, 175, 240, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-skype:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-skype {
        background: none;
        border-color: #00aff0;
        color: #00a5e6;
        border-width: 1px;
    }

        .btn.btn-outline-skype:not(:disabled):not(.disabled):hover {
            background: #00aff0;
            border-color: #00aff0;
            color: white;
        }

        .btn.btn-outline-skype:not(:disabled):not(.disabled):focus, .btn.btn-outline-skype:not(:disabled):not(.disabled):active {
            background: #0091d2;
            border-color: #0091d2;
            color: white;
        }

        .btn.btn-outline-skype:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 175, 240, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(0, 175, 240, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(0, 175, 240, 0.4);
        }

        .btn.btn-outline-skype.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 175, 240, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(0, 175, 240, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(0, 175, 240, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-skype:hover {
            -webkit-animation: none;
        }

    .btn.btn-yahoo {
        background: #410093;
        border-color: #410093;
        color: white;
    }

        .btn.btn-yahoo:not(:disabled):not(.disabled):hover, .btn.btn-yahoo:not(:disabled):not(.disabled):focus, .btn.btn-yahoo:not(:disabled):not(.disabled):active {
            background: #230075;
            border-color: #230075;
        }

        .btn.btn-yahoo:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(65, 0, 147, 0.4) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(65, 0, 147, 0.4) !important;
            box-shadow: 0 0 0 0.2rem rgba(65, 0, 147, 0.4) !important;
        }

        .btn.btn-yahoo.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(65, 0, 147, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(65, 0, 147, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(65, 0, 147, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-yahoo:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-yahoo {
        background: none;
        border-color: #410093;
        color: #370089;
        border-width: 1px;
    }

        .btn.btn-outline-yahoo:not(:disabled):not(.disabled):hover {
            background: #410093;
            border-color: #410093;
            color: white;
        }

        .btn.btn-outline-yahoo:not(:disabled):not(.disabled):focus, .btn.btn-outline-yahoo:not(:disabled):not(.disabled):active {
            background: #230075;
            border-color: #230075;
            color: white;
        }

        .btn.btn-outline-yahoo:not(:disabled):not(.disabled):focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(65, 0, 147, 0.4);
            -moz-box-shadow: 0 0 0 0.2rem rgba(65, 0, 147, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(65, 0, 147, 0.4);
        }

        .btn.btn-outline-yahoo.btn-pulse:not(:disabled):not(.disabled) {
            -webkit-box-shadow: 0 0 0 0 rgba(65, 0, 147, 0.9) !important;
            -moz-box-shadow: 0 0 0 0 rgba(65, 0, 147, 0.9) !important;
            box-shadow: 0 0 0 0 rgba(65, 0, 147, 0.9) !important;
            -webkit-animation: pulse 1.5s infinite !important;
        }

        .btn.btn-outline-yahoo:hover {
            -webkit-animation: none;
        }

    .btn.btn-apple, .btn.btn-google-play {
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
    }

        .btn.btn-apple img, .btn.btn-google-play img {
            width: 35px;
            margin-right: 10px;
        }

        .btn.btn-apple i, .btn.btn-google-play i {
            font-size: 40px;
            margin-right: 10px;
        }

        .btn.btn-apple > span, .btn.btn-google-play > span {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -moz-box-orient: vertical;
            -moz-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            text-align: left;
        }

            .btn.btn-apple > span span:nth-child(2), .btn.btn-google-play > span span:nth-child(2) {
                font-size: 20px;
                font-weight: 600;
                margin-top: 5px;
            }

        .btn.btn-apple:hover, .btn.btn-apple:active, .btn.btn-apple:focus, .btn.btn-google-play:hover, .btn.btn-google-play:active, .btn.btn-google-play:focus {
            background: #040507;
            color: white;
        }

    .btn.btn-apple {
        border: 1px solid #040507;
        color: #040507;
    }

    .btn.btn-google-play {
        background: #040507;
        color: white;
    }

        .btn.btn-google-play > span span:nth-child(1) {
            text-transform: uppercase;
            font-size: 12px;
        }

@-webkit-keyframes pulse {
    to {
        -webkit-box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
        box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
    }
}

@-moz-keyframes pulse {
    to {
        -moz-box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
        box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
    }
}

@-o-keyframes pulse {
    to {
        box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
    }
}

@keyframes pulse {
    to {
        -webkit-box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
        -moz-box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
        box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
    }
}

body {
    background-color: #ebebeb;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

    body:not(.form-membership) {
        overflow: hidden;
    }

.btn {
    border-color: transparent;
}

.btn-primary, a[href="#next"], a[href="#previous"] {
    background-color: #3db16b;
}

a {
    color: #007bff;
}

    a:hover, a:focus {
        text-decoration: none;
        outline: none;
        color: #1f934d;
    }

.form-control {
    font-size: 14px;
}

.page-loading {
    position: fixed;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    background-color: white;
    z-index: 999;
}

.btn-icon {
    margin-right: .5rem;
}

.list-group-item {
    background-color: inherit;
    border-color: #ebebeb;
}

.list-active-group-item {
    background-color: inherit;
    border-color: #ebebeb;
}

ul.list-inline .list-inline-item {
    margin-bottom: .5rem;
}

    ul.list-inline .list-inline-item:not(:last-child) {
        margin-right: 0;
    }

ul.list-inline:not(.social-links) .list-inline-item {
    margin-left: -0.5rem;
}

ul.list-inline.social-links .list-inline-item {
    margin-right: .5rem;
    margin-bottom: .6rem;
}

.files ul.list-inline {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto;
}

    .files ul.list-inline .list-inline-item {
        margin-left: 0;
        margin-right: .5rem;
    }

.connection-error svg {
    margin: 30px 0;
    height: 100px;
    width: 100%;
}

    .connection-error svg path, .connection-error svg circle, .connection-error svg polygon {
        fill: #ea4141;
    }

.form-control {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    .form-control:focus {
        border-color: transparent;
        -webkit-box-shadow: 0 0 0 0.05rem #3db16b;
        -moz-box-shadow: 0 0 0 0.05rem #3db16b;
        box-shadow: 0 0 0 0.05rem #3db16b;
    }

.custom-control-label {
    line-height: 25px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #3db16b;
    border-color: #3db16b;
}

.dropdown-menu {
    border-color: #ebebeb;
    -webkit-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px -10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px -10px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px -10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    .dropdown-menu .dropdown-item {
        font-size: 14px;
    }

        .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item.active {
            background-color: #ebebeb;
            color: black;
        }

figure.avatar {
    display: inline-block;
    margin-bottom: 0;
    height: 2.5rem;
    width: 2.5rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

    figure.avatar .avatar-title {
        color: rgba(255, 255, 255, 0.8);
        background: #d7d7d7;
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-transform: uppercase;
        font-size: 19px;
        font-weight: 600;
    }

    figure.avatar > a {
        width: 100%;
        height: 100%;
        display: block;
        -webkit-transition: color .3s;
        -o-transition: color .3s;
        -moz-transition: color .3s;
        transition: color .3s;
        color: #3db16b;
    }

        figure.avatar > a > img, figure.avatar > img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
        }


    figure.avatar .avatar-title-black {
        color: black;
        background: white;
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-transform: uppercase;
        font-size: 19px;
        font-weight: 600;
    }

    figure.avatar.avatar-sm {
        height: 1.5rem;
        width: 1.5rem;
    }

        figure.avatar.avatar-sm .avatar-title {
            font-size: 14px;
        }

        figure.avatar.avatar-sm.avatar-state-primary:before, figure.avatar.avatar-sm.avatar-state-success:before, figure.avatar.avatar-sm.avatar-state-danger:before, figure.avatar.avatar-sm.avatar-state-warning:before, figure.avatar.avatar-sm.avatar-state-info:before, figure.avatar.avatar-sm.avatar-state-secondary:before, figure.avatar.avatar-sm.avatar-state-light:before, figure.avatar.avatar-sm.avatar-state-dark:before {
            width: .8rem;
            height: .8rem;
        }

    figure.avatar.avatar-lg {
        height: 4rem;
        width: 4rem;
    }

        figure.avatar.avatar-lg .avatar-title {
            font-size: 29px;
        }

        figure.avatar.avatar-lg.avatar-state-primary:before, figure.avatar.avatar-lg.avatar-state-success:before, figure.avatar.avatar-lg.avatar-state-danger:before, figure.avatar.avatar-lg.avatar-state-warning:before, figure.avatar.avatar-lg.avatar-state-info:before, figure.avatar.avatar-lg.avatar-state-secondary:before, figure.avatar.avatar-lg.avatar-state-light:before, figure.avatar.avatar-lg.avatar-state-dark:before {
            width: 1.2rem;
            height: 1.2rem;
            right: -1px;
        }

    figure.avatar.avatar-xl {
        height: 6.3rem;
        width: 6.3rem;
    }

        figure.avatar.avatar-xl .avatar-title {
            font-size: 39px;
        }

        figure.avatar.avatar-xl.avatar-state-primary:before, figure.avatar.avatar-xl.avatar-state-success:before, figure.avatar.avatar-xl.avatar-state-danger:before, figure.avatar.avatar-xl.avatar-state-warning:before, figure.avatar.avatar-xl.avatar-state-info:before, figure.avatar.avatar-xl.avatar-state-secondary:before, figure.avatar.avatar-xl.avatar-state-light:before, figure.avatar.avatar-xl.avatar-state-dark:before {
            width: 1.2rem;
            height: 1.2rem;
            top: 2px;
            right: 7px;
        }

    figure.avatar.avatar-state-primary, figure.avatar.avatar-state-success, figure.avatar.avatar-state-danger, figure.avatar.avatar-state-warning, figure.avatar.avatar-state-info, figure.avatar.avatar-state-secondary, figure.avatar.avatar-state-light, figure.avatar.avatar-state-dark {
        position: relative;
    }

        figure.avatar.avatar-state-primary:before, figure.avatar.avatar-state-success:before, figure.avatar.avatar-state-danger:before, figure.avatar.avatar-state-warning:before, figure.avatar.avatar-state-info:before, figure.avatar.avatar-state-secondary:before, figure.avatar.avatar-state-light:before, figure.avatar.avatar-state-dark:before {
            content: "";
            position: absolute;
            display: block;
            width: 1rem;
            height: 1rem;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            top: -3px;
            right: -3px;
            border: 3px solid white;
        }

        figure.avatar.avatar-state-primary:before {
            background: #3db16b;
        }

        figure.avatar.avatar-state-success:before {
            background: #0abb87;
        }

        figure.avatar.avatar-state-danger:before {
            background: #ea4141;
        }

        figure.avatar.avatar-state-warning:before {
            background: #ff9d36;
        }

        figure.avatar.avatar-state-info:before {
            background: #00bcd4;
        }

        figure.avatar.avatar-state-secondary:before {
            background: dimgray;
        }

        figure.avatar.avatar-state-light:before {
            background: #e6e6e6;
        }

        figure.avatar.avatar-state-dark:before {
            background: #3a3f51;
        }

.avatar-group {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: 2.2rem;
}

    .avatar-group figure.avatar {
        margin-right: -1.2rem !important;
    }

        .avatar-group figure.avatar:last-child {
            margin-right: 0;
        }

        .avatar-group figure.avatar:hover {
            position: relative;
            z-index: 1;
        }

.modal-content {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    overflow: hidden;
}

    .modal-content .modal-header {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 20px 30px;
        background-color: whitesmoke;
        border-bottom: none;
    }

        .modal-content .modal-header .modal-title {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            line-height: 13px;
            font-weight: 600;
        }

            .modal-content .modal-header .modal-title i, .modal-content .modal-header .modal-title figure.avatar {
                margin-right: .7rem;
                font-size: 17px;
            }

            .modal-content .modal-header .modal-title + button {
                text-shadow: none;
                font-size: 14px;
                margin: 0;
                background-color: #e1e1e1;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                padding: 0;
                width: 30px;
                height: 30px;
            }

    .modal-content .modal-body {
        padding: 30px;
    }

    .modal-content .modal-footer {
        border-top: none;
        padding: 30px;
        padding-top: 0;
    }

body:not(.no-blur-effect).modal-open .layout {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

body:not(.no-blur-effect) .modal.fade .modal-dialog.modal-dialog-zoom {
    -webkit-transform: translate(0, 0) scale(0.5);
    -moz-transform: translate(0, 0) scale(0.5);
    -ms-transform: translate(0, 0) scale(0.5);
    -o-transform: translate(0, 0) scale(0.5);
    transform: translate(0, 0) scale(0.5);
}

body:not(.no-blur-effect) .modal.show .modal-dialog.modal-dialog-zoom {
    -webkit-transform: translate(0, 0) scale(1);
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -o-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
}

.call .modal-content {
    background: black;
    color: rgba(255, 255, 255, 0.6);
}

    .call .modal-content .modal-body {
        padding: 50px 0;
    }

.call .call-background {
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    background-size: cover !important;
    background-position: center !important;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
    opacity: .2;
}

    .call .call-background + div {
        position: relative;
        z-index: 1;
        text-align: center;
    }

        .call .call-background + div .action-button {
            margin-top: 3rem;
        }

            .call .call-background + div .action-button .btn {
                font-size: 26px;
                width: 70px;
                height: 70px;
                margin: 0 20px;
            }

nav.navigation {
    background: linear-gradient(180deg, #3a3f51 0%, #1d1f29 100%) !important;
}

    nav.navigation .nav-group {
        width: 70px;
    }

    nav.navigation ul {
        height: 100vh;
        height: -webkit-calc(var(--vh, 1vh) * 100);
        height: -moz-calc(var(--vh, 1vh) * 100);
        height: calc(var(--vh, 1vh) * 100);
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

        nav.navigation ul li {
            list-style: none;
        }

            nav.navigation ul li a {
                display: block;
                text-align: center;
                padding: 15px 0;
                color: #828282;
                position: relative;
                -webkit-transition: all .3s;
                -o-transition: all .3s;
                -moz-transition: all .3s;
                transition: all .3s;
            }

                nav.navigation ul li a.notifiy_badge:before {
                    content: '';
                    display: block;
                    width: 8px;
                    height: 8px;
                    background-color: #ff7373;
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    border-radius: 50%;
                    position: absolute;
                    top: 10px;
                    right: 10px;
                }

                nav.navigation ul li a.active {
                    background-color: #085d9b;
                }

                nav.navigation ul li a.logo {
                    margin-bottom: 1rem;
                    background-color: #2c2f3d;
                }

                    nav.navigation ul li a.logo svg path {
                        fill: rgba(255, 255, 255, 0.7);
                    }

                    nav.navigation ul li a.logo svg circle {
                        fill: rgba(255, 255, 255, 0.7);
                    }

                    nav.navigation ul li a.logo i {
                        font-size: 26px;
                    }

                    nav.navigation ul li a.logo:hover, nav.navigation ul li a.logo:focus {
                        background-color: #47bb75;
                    }

                nav.navigation ul li a:hover, nav.navigation ul li a:focus {
                    color: #3db16b;
                }

                nav.navigation ul li a i {
                    font-size: 19px;
                }

            nav.navigation ul li.brackets {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                -moz-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }

body.rtl {
    direction: rtl;
}

    body.rtl .btn-icon {
        margin-right: 0 !important;
        margin-left: .5rem;
    }

    body.rtl .mr-3.item-rtl {
        margin-right: 0 !important;
        margin-left: 1rem;
    }

    body.rtl ul.nav.nav-tabs {
        padding-right: 0;
    }

    body.rtl .files ul.list-inline, body.rtl ul.social-links {
        padding-right: 0;
    }

        body.rtl .files ul.list-inline li.list-inline-item, body.rtl ul.social-links li.list-inline-item {
            margin-right: 0;
            margin-left: .5rem;
        }

    body.rtl .modal .modal-content {
        text-align: right;
    }

        body.rtl .modal .modal-content .modal-header .modal-title i {
            margin-right: 0;
            margin-left: .7rem;
        }

    body.rtl .modal .modal-footer {
        -webkit-box-pack: end;
        -webkit-justify-content: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        justify-content: end;
    }

    body.rtl .input-group .input-group-prepend .input-group-text {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-border-top-left-radius: 0;
        -moz-border-radius-topleft: 0;
        border-top-left-radius: 0;
        -webkit-border-bottom-left-radius: 0;
        -moz-border-radius-bottomleft: 0;
        border-bottom-left-radius: 0;
    }

    body.rtl .input-group .form-control {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-border-top-right-radius: 0;
        -moz-border-radius-topright: 0;
        border-top-right-radius: 0;
        -webkit-border-bottom-right-radius: 0;
        -moz-border-radius-bottomright: 0;
        border-bottom-right-radius: 0;
    }

    body.rtl .custom-file-label::after {
        right: auto;
        left: 0;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        -webkit-border-top-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        border-top-left-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-bottom-left-radius: 5px;
    }

    body.rtl nav.navigation ul li a.notifiy_badge:before {
        left: 10px;
        right: auto !important;
    }

    body.rtl .sidebar-group .sidebar {
        margin-left: 30px;
        margin-right: 0 !important;
        text-align: right;
    }

        body.rtl .sidebar-group .sidebar > header ul.list-inline li.list-inline-item {
            margin-left: 0 !important;
            margin-right: .5rem !important;
        }

        body.rtl .sidebar-group .sidebar .list-group-item.open-chat:before {
            left: auto;
            right: 0;
        }

        body.rtl .sidebar-group .sidebar .list-active-group-item.active-chat:before {
            left: auto;
            right: 0;
        }

        body.rtl .sidebar-group .sidebar .list-group-item figure {
            margin-right: 0 !important;
            margin-left: 1rem;
        }

        body.rtl .sidebar-group .sidebar .list-group-item .avatar-group figure.avatar {
            margin-right: -2rem !important;
        }

        body.rtl .sidebar-group .sidebar .list-group-item .users-list-body {
            text-align: right;
        }

            body.rtl .sidebar-group .sidebar .list-group-item .users-list-body .users-list-action {
                right: auto !important;
                left: 0;
                -webkit-box-shadow: 8px 1px 10px 5px #fff !important;
                -moz-box-shadow: 8px 1px 10px 5px #fff !important;
                box-shadow: 8px 1px 10px 5px #fff !important;
            }


        body.rtl .sidebar-group .sidebar .list-active-group-item figure {
            margin-right: 0 !important;
            margin-left: 1rem;
        }

        body.rtl .sidebar-group .sidebar .list-active-group-item .avatar-group figure.avatar {
            margin-right: -2rem !important;
        }

        body.rtl .sidebar-group .sidebar .list-active-group-item .users-list-body {
            text-align: right;
        }

            body.rtl .sidebar-group .sidebar .list-active-group-item .users-list-body .users-list-action {
                right: auto !important;
                left: 0;
                -webkit-box-shadow: 8px 1px 10px 5px #fff !important;
                -moz-box-shadow: 8px 1px 10px 5px #fff !important;
                box-shadow: 8px 1px 10px 5px #fff !important;
            }

    body.rtl .list-group {
        padding-right: 0;
    }

    body.rtl .chat .chat-header .chat-header-user {
        text-align: right;
    }

        body.rtl .chat .chat-header .chat-header-user figure {
            margin-right: 0 !important;
            margin-left: 1rem;
        }

    body.rtl .chat .chat-header .chat-header-action .list-inline-item {
        margin-right: .5rem !important;
        margin-left: 0 !important;
    }

    body.rtl .chat .chat-body .messages .message-item {
        text-align: right;
    }

        body.rtl .chat .chat-body .messages .message-item ul {
            padding-right: 0 !important;
        }

        body.rtl .chat .chat-body .messages .message-item .message-content.message-file .file-icon {
            margin-right: 0 !important;
            margin-left: 1rem;
        }

        body.rtl .chat .chat-body .messages .message-item.outgoing-message {
            margin-left: 0 !important;
            margin-right: auto;
        }

    body.rtl .chat + .sidebar-group .sidebar {
        margin-left: 0 !important;
        margin-right: 30px !important;
    }

body.dark {
    background-color: #1d1f29 !important;
    color: whitesmoke;
}

    body.dark .text-muted {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    body.dark nav.navigation {
        background: linear-gradient(180deg, #3a3f51 0%, #1d1f29 100%) !important;
    }

        body.dark nav.navigation ul li a {
            color: rgba(255, 255, 255, 0.7);
        }

            body.dark nav.navigation ul li a:hover, body.dark nav.navigation ul li a:focus {
                background-color: #3db16b;
            }

    body.dark .layout .content .sidebar-group .sidebar {
        background: linear-gradient(135deg, rgba(26, 29, 41, 0.95) 0%, rgba(44, 47, 61, 0.9) 100%) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(102, 126, 234, 0.2) !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 
                    inset 0 1px 0 rgba(255, 255, 255, 0.1),
                    0 0 0 1px rgba(102, 126, 234, 0.1) !important;
        position: relative;
        overflow: hidden;
    }
    
    body.dark .layout .content .sidebar-group .sidebar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(102, 126, 234, 0.6) 50%, 
            transparent 100%);
        animation: tech-scan 3s ease-in-out infinite;
    }

        body.dark .layout .content .sidebar-group .sidebar .list-group-item .users-list-body p {
            color: rgba(255, 255, 255, 0.4);
        }

        body.dark .layout .content .sidebar-group .sidebar .list-group-item .users-list-body .users-list-action {
            background-color: #464852;
            -webkit-box-shadow: -8px 1px 10px 5px #464852;
            -moz-box-shadow: -8px 1px 10px 5px #464852;
            box-shadow: -8px 1px 10px 5px #464852;
        }

        body.dark .layout .content .sidebar-group .sidebar .list-active-group-item .users-list-body p {
            color: rgba(255, 255, 255, 0.4);
        }

        body.dark .layout .content .sidebar-group .sidebar .list-active-group-item .users-list-body .users-list-action {
            background-color: #464852;
            -webkit-box-shadow: -8px 1px 10px 5px #464852;
            -moz-box-shadow: -8px 1px 10px 5px #464852;
            box-shadow: -8px 1px 10px 5px #464852;
        }

        body.dark .layout .content .sidebar-group .sidebar > form input[type=text] {
            background-color: #5a5c66;
            color: rgba(255, 255, 255, 0.7);
        }

            body.dark .layout .content .sidebar-group .sidebar > form input[type=text]::-webkit-input-placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

            body.dark .layout .content .sidebar-group .sidebar > form input[type=text]::-moz-placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

            body.dark .layout .content .sidebar-group .sidebar > form input[type=text]::-ms-input-placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

            body.dark .layout .content .sidebar-group .sidebar > form input[type=text]::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

    body.dark .layout .content .chat .chat-header {
        border-bottom-color: #32343e;
    }

    body.dark .layout .content .chat .chat-body .messages .message-item .message-content {
        background-color: #464852;
    }

    body.dark .layout .content .chat .chat-body .messages .message-item.outgoing-message .message-content {
        background-color: rgba(61, 177, 107, 0.3);
    }

    body.dark .layout .content .chat .chat-footer {
        border-top-color: #32343e;
    }

        body.dark .layout .content .chat .chat-footer form {
            background-color: whitesmoke;
        }

            body.dark .layout .content .chat .chat-footer form input[type=text],
            body.dark .layout .content .chat .chat-footer form textarea {
                color: #ffffff !important;
            }

                body.dark .layout .content .chat .chat-footer form input[type=text]::-webkit-input-placeholder,
                body.dark .layout .content .chat .chat-footer form textarea::-webkit-input-placeholder {
                    color: rgba(255, 255, 255, 0.5);
                }

                body.dark .layout .content .chat .chat-footer form input[type=text]::-moz-placeholder,
                body.dark .layout .content .chat .chat-footer form textarea::-moz-placeholder {
                    color: rgba(255, 255, 255, 0.5);
                }

                body.dark .layout .content .chat .chat-footer form input[type=text]::-ms-input-placeholder,
                body.dark .layout .content .chat .chat-footer form textarea::-ms-input-placeholder {
                    color: rgba(255, 255, 255, 0.5);
                }

                body.dark .layout .content .chat .chat-footer form input[type=text]::placeholder,
                body.dark .layout .content .chat .chat-footer form textarea::placeholder {
                    color: rgba(255, 255, 255, 0.5);
                }

    body.dark.rtl .layout .content .sidebar-group .sidebar .list-group-item .users-list-body .users-list-action {
        -webkit-box-shadow: 8px 1px 10px 5px #464852 !important;
        -moz-box-shadow: 8px 1px 10px 5px #464852 !important;
        box-shadow: 8px 1px 10px 5px #464852 !important;
    }

    body.dark.rtl .layout .content .sidebar-group .sidebar .list-active-group-item .users-list-body .users-list-action {
        -webkit-box-shadow: 8px 1px 10px 5px #464852 !important;
        -moz-box-shadow: 8px 1px 10px 5px #464852 !important;
        box-shadow: 8px 1px 10px 5px #464852 !important;
    }

    body.dark .modal-content {
        background-color: #313542;
    }

        body.dark .modal-content .modal-header {
            background-color: #5a5c66;
        }

    body.dark .list-group-item {
        border-color: #5a5c66;
    }

    body.dark .list-active-group-item {
        border-color: #5a5c66;
    }

    body.dark .dropdown-menu {
        background-color: #5b5c66;
        border-color: transparent;
    }

        body.dark .dropdown-menu .dropdown-item {
            color: rgba(255, 255, 255, 0.7);
        }

            body.dark .dropdown-menu .dropdown-item:focus, body.dark .dropdown-menu .dropdown-item:hover, body.dark .dropdown-menu .dropdown-item:active, body.dark .dropdown-menu .dropdown-item.active {
                background-color: #464852;
            }

    body.dark input[type=text], body.dark textarea, body.dark select {
        background-color: #313139;
        color: rgba(255, 255, 255, 0.7);
        border-color: #000;
    }

        body.dark input[type=text]:focus, body.dark textarea:focus, body.dark select:focus {
            color: rgba(255, 255, 255, 0.7);
            background-color: #5a5c66;
            border-color: #aaacb6;
        }

        body.dark input[type=text]::-webkit-input-placeholder, body.dark textarea::-webkit-input-placeholder, body.dark select::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        body.dark input[type=text]::-moz-placeholder, body.dark textarea::-moz-placeholder, body.dark select::-moz-placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        body.dark input[type=text]::-ms-input-placeholder, body.dark textarea::-ms-input-placeholder, body.dark select::-ms-input-placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        body.dark input[type=text]::placeholder, body.dark textarea::placeholder, body.dark select::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

    body.dark .custom-control-label::before {
        background-color: #5a5c66;
        border-color: #6e707a;
    }

    body.dark .input-group-text {
        background-color: #464852;
        color: rgba(255, 255, 255, 0.7);
        border-color: #6e707a;
    }

    body.dark .nav-tabs .nav-link.active {
        border-color: #5b5b6e;
        border-bottom-color: #464852;
        background-color: #046db2 !important;
        color: rgba(255, 255, 255, 0.7);
    }

    body.dark .nav-tabs .nav-link:hover, body.dark .nav-tabs .nav-link:focus {
        --p: 100%;
        color: #fff !important;
        border-color: #5a5c66;
        border-bottom-color: #464852;
    }

    body.dark .nav-tabs {
        border-bottom-color: #5a5c66;
    }

    body.dark .custom-file-label {
        background-color: #5a5c66;
        border-color: #6e707a;
        color: rgba(255, 255, 255, 0.7);
    }

        body.dark .custom-file-label:after {
            background-color: #464852;
            color: rgba(255, 255, 255, 0.7);
        }

    body.dark .btn.btn-light {
        background-color: #52556a;
        border-color: transparent;
        color: rgba(255, 255, 255, 0.7);
    }

        body.dark .btn.btn-light:focus, body.dark .btn.btn-light:hover {
            border-color: transparent !important;
            background-color: #5a5c66 !important;
            color: rgba(255, 255, 255, 0.8) !important;
            -webkit-box-shadow: 0 0 0 0.2rem rgba(90, 92, 102, 0.6) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(90, 92, 102, 0.6) !important;
            box-shadow: 0 0 0 0.2rem rgba(90, 92, 102, 0.6) !important;
        }

    body.dark .btn.btn-light2 {
        background-color: #464852;
        border-color: transparent;
        color: rgba(255, 255, 255, 0.7);
    }

        body.dark .btn.btn-light2:focus, body.dark .btn.btn-light2:hover {
            border-color: transparent !important;
            background-color: #5a5c66 !important;
            color: rgba(255, 255, 255, 0.8) !important;
            -webkit-box-shadow: 0 0 0 0.2rem rgba(90, 92, 102, 0.6) !important;
            -moz-box-shadow: 0 0 0 0.2rem rgba(90, 92, 102, 0.6) !important;
            box-shadow: 0 0 0 0.2rem rgba(90, 92, 102, 0.6) !important;
        }

    body.dark figure.avatar.avatar-state-danger:before, body.dark figure.avatar.avatar-state-dark:before, body.dark figure.avatar.avatar-state-info:before, body.dark figure.avatar.avatar-state-light:before, body.dark figure.avatar.avatar-state-primary:before, body.dark figure.avatar.avatar-state-secondary:before, body.dark figure.avatar.avatar-state-success:before, body.dark figure.avatar.avatar-state-warning:before {
        border-color: #464852;
    }

body.form-membership {
    background: url(../../dist/media/img/robot-hd-wallpaper.png) #272935;
    background-attachment: inherit;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    padding: 3rem 0;
}

    body.form-membership .form-wrapper {
        background-color: rgb(39 41 53 / 73%);
        padding: 3rem;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        width: 430px;
        margin: 50px auto;
        text-align: center;
    }

        body.form-membership .form-wrapper .logo {
            background-color: rgb(39 41 53 / 73%);
            width: 100px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            height: 100px;
            text-align: center;
            margin-bottom: 2rem;
            margin-top: -100px;
            margin-left: auto;
            margin-right: auto;
        }

        body.form-membership .form-wrapper h5 {
            text-align: center;
            margin-bottom: 2rem;
        }

        body.form-membership .form-wrapper form .form-control {
            margin-bottom: 1.5rem;
        }

        body.form-membership .form-wrapper hr {
            margin: 2rem 0;
        }

@media screen and (max-width: 1200px) {
    body:not(.rtl) .sidebar-group {
        position: fixed;
        right: -50%;
        top: 0;
        bottom: 0;
        width: 30%;
        opacity: 0;
        -webkit-transition: all .2s;
        -o-transition: all .2s;
        -moz-transition: all .2s;
        transition: all .2s;
        -webkit-box-shadow: 25px 0px 30px 5px black;
        -moz-box-shadow: 25px 0px 30px 5px black;
        box-shadow: 25px 0px 30px 5px black;
        visibility: hidden;
    }

        body:not(.rtl) .sidebar-group .sidebar {
            width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            -webkit-border-radius: 0 !important;
            -moz-border-radius: 0 !important;
            border-radius: 0 !important;
        }

        body:not(.rtl) .sidebar-group.mobile-open {
            opacity: 1;
            right: 0;
            visibility: visible;
        }

    body.rtl .sidebar-group {
        position: fixed;
        left: -50%;
        top: 0;
        bottom: 0;
        opacity: 0;
        -webkit-transition: all .2s;
        -o-transition: all .2s;
        -moz-transition: all .2s;
        transition: all .2s;
        -webkit-box-shadow: -25px 0px 30px 5px black;
        -moz-box-shadow: -25px 0px 30px 5px black;
        box-shadow: -25px 0px 30px 5px black;
        visibility: hidden;
    }

        body.rtl .sidebar-group .sidebar {
            width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            -webkit-border-radius: 0 !important;
            -moz-border-radius: 0 !important;
            border-radius: 0 !important;
        }

        body.rtl .sidebar-group.mobile-open {
            opacity: 1;
            left: 0;
            visibility: visible;
        }

    body.rtl .chat + .sidebar-group .sidebar {
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 992px) {
    body:not(.rtl) .sidebar-group, body .sidebar-group {
        width: 45%;
    }
}

@media screen and (max-width: 768px) {
    body:not(.rtl) .sidebar-group, body .sidebar-group {
        width: 75%;
    }

        body:not(.rtl) .sidebar-group .sidebar .list-group-item .users-list-body h5, body .sidebar-group .sidebar .list-group-item .users-list-body h5 {
            font-size: 21px !important;
        }

        body:not(.rtl) .sidebar-group .sidebar .list-active-group-item .users-list-body h5, body .sidebar-group .sidebar .list-active-group-item .users-list-body h5 {
            font-size: 21px !important;
        }

    .layout .content {
        padding: 5px !important;
    }

        .layout .content .chat .chat-header {
            display: block !important;
            padding-bottom: 15px !important;
        }

            .layout .content .chat .chat-header .chat-header-user h5 {
                font-size: 19px !important;
            }

            .layout .content .chat .chat-header .chat-header-action {
                margin-top: 15px;
            }

        .layout .content .chat .chat-body .messages .message-item {
            max-width: 100% !important;
        }
}

@media screen and (max-width: 576px) {
    body:not(.rtl) .sidebar-group, body .sidebar-group {
        width: 100%;
    }

    body.form-membership {
        padding: 20px;
    }

        body.form-membership .form-wrapper {
            padding-right: 20px;
            padding-left: 20px;
            width: 100% !important;
            margin-bottom: 20px;
        }
}

.tab-content {
    padding-top: 30px;
    background: linear-gradient(135deg, #2c2f3a 0%, #3a3f51 100%) !important;
    border: 2px;
    border-radius: 5px;
    color: #e9ecef !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
}

/* GetAllEventList DataTable scroll fix */
.content.col-md-12 .tab-content .tab-pane .tab-content {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 250px) !important;
}

    .content.col-md-12 .tab-content .tab-pane .tab-content .container {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

.content.col-md-12 #eventlogs_wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

    .content.col-md-12 #eventlogs_wrapper .dataTables_scrollBody {
        overflow-y: auto !important;
        overflow-x: auto !important;
        max-height: calc(100vh - 300px) !important;
    }

.tab-content .form-item {
    margin-bottom: .8rem;
}

.tab-content-x {
    padding-top: 30px;
    background-color: #ffffff;
    border: 2px;
    border-radius: 5px;
    color: #464852;
}

    .tab-content-x .form-item {
        margin-bottom: .8rem;
    }

.layout {
    height: 100vh;
    height: -webkit-calc(var(--vh, 1vh) * 100);
    height: -moz-calc(var(--vh, 1vh) * 100);
    height: calc(var(--vh, 1vh) * 100);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

    .layout .content {
        padding: 5px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -moz-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        min-height: 0;
    }

        /* Dashboard için content scroll fix */
        .layout .content:has(.dashboard-modern) {
            overflow: visible !important;
            height: auto !important;
            max-height: none !important;
            padding: 0 !important;
            margin: 0 !important;
            position: static !important;
            display: block !important;
        }

        /* Dashboard-modern için özel padding/margin fix */
        .layout .content:has(.dashboard-modern),
        .content:has(.dashboard-modern) {
            padding-left: 0 !important;
            padding-right: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        .layout .content .sidebar-group {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -moz-box-orient: vertical;
            -moz-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-align-self: stretch;
            -ms-flex-item-align: stretch;
            align-self: stretch;
            min-height: 0;
            height: 100%;
        }

            .layout .content .sidebar-group .sidebar {
                margin-right: 30px;
                background: white;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                overflow: hidden;
                width: 330px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -webkit-flex-direction: column;
                -moz-box-orient: vertical;
                -moz-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                -moz-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                min-height: 0;
                height: 100%;
            }

                .layout .content .sidebar-group .sidebar:not(.active) {
                    display: none;
                }

                .layout .content .sidebar-group .sidebar > header {
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -moz-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    -moz-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: justify;
                    -webkit-justify-content: space-between;
                    -moz-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    padding: 20px;
                    height: 80px;
                    font-weight: 700;
                    -webkit-border-radius: 0;
                    -moz-border-radius: 0;
                    border-radius: 0;
                }

                    .layout .content .sidebar-group .sidebar > header > span {
                        font-size: 22px;
                    }

                    .layout .content .sidebar-group .sidebar > header ul {
                        margin-bottom: 0;
                    }

                        .layout .content .sidebar-group .sidebar > header ul li {
                            margin-bottom: 0;
                        }

                .layout .content .sidebar-group .sidebar > form {
                    padding: 10px 20px;
                }

                    .layout .content .sidebar-group .sidebar > form input[type="text"] {
                        -webkit-border-radius: 5px;
                        -moz-border-radius: 5px;
                        border-radius: 5px;
                        border: none;
                        height: auto;
                        padding: 10px 15px;
                        background-color: #ebebeb;
                    }

                        .layout .content .sidebar-group .sidebar > form input[type="text"]:focus {
                            -webkit-box-shadow: none;
                            -moz-box-shadow: none;
                            box-shadow: none;
                        }

                .layout .content .sidebar-group .sidebar .sidebar-body {
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    -moz-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    overflow: auto;
                }

                .layout .content .sidebar-group .sidebar .sidebar-body-wrapper {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    min-height: 0;
                    overflow: hidden;
                }

                .layout .content .sidebar-group .sidebar .sidebar-body {
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    -moz-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    overflow-y: auto;
                    overflow-x: hidden;
                    min-height: 0;
                }

                .layout .content .sidebar-group .sidebar .sidebar-body-2 {
                    background: linear-gradient(135deg, #2c2f3a 0%, #1a1d29 100%);
                    border-top: 1px solid rgba(102, 126, 234, 0.2);
                    padding: 12px 15px;
                    flex-shrink: 0;
                    text-align: center;
                    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
                    position: relative;
                    z-index: 10;
                }

            /* Professional Sidebar Toggle System */
            .layout .content .sidebar-group.le {
                position: relative !important;
                flex-shrink: 0 !important;
                width: 400px !important;
                opacity: 1 !important;
                visibility: visible !important;
                display: flex !important;
                transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), min-width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), max-width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), margin-right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease, visibility 0.3s ease;
                overflow: visible !important;
            }

                .layout .content .sidebar-group.le.collapsed {
                    width: 0 !important;
                    min-width: 0 !important;
                    max-width: 0 !important;
                    margin-right: 0 !important;
                    opacity: 0 !important;
                    visibility: hidden !important;
                    pointer-events: none !important;
                    overflow: visible !important; /* Buton görünür kalmalı */
                }
                
                /* Sidebar kapandığında buton sidebar dışında kalmalı */
                .layout .content .sidebar-group.le.collapsed .sidebar-edge-toggle {
                    pointer-events: auto !important;
                    overflow: visible !important;
                }

        .layout .content .chat {
            transition: flex 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), margin-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            flex: 1;
            min-width: 0;
            -webkit-align-self: stretch;
            -ms-flex-item-align: stretch;
            align-self: stretch;
            min-height: 0;
            height: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -moz-box-orient: vertical;
            -moz-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .layout .content .sidebar-group.le.collapsed ~ .chat,
        .layout .content .sidebar-group.le.collapsed + .chat {
            flex: 1 1 auto !important;
            width: auto !important;
            margin-left: 0 !important;
        }

/* Ince Dikey Toggle Butonu - Sidebar Edge (Açıkken) - Sidebar'a Yapışık */
.layout .content {
    position: relative;
}

/* Buton sidebar-group içindeyse */
.layout .content .sidebar-group.le .sidebar-edge-toggle {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 80px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.8) 100%);
    border: none;
    border-radius: 0 12px 12px 0;
    color: #ffffff;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 4px 0 12px rgba(102, 126, 234, 0.4), inset -2px 0 8px rgba(0, 0, 0, 0.2);
    padding: 0;
    overflow: visible;
}

/* Buton sidebar-group'dan önce veya sonra kardeş element olarak */
    .layout .content .sidebar-edge-toggle {
        position: absolute;
        left: 400px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 80px;
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border: none;
        border-radius: 0 12px 12px 0;
        color: #ffffff;
        cursor: pointer;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: 4px 0 12px rgba(102, 126, 234, 0.4), inset -2px 0 8px rgba(0, 0, 0, 0.2);
        padding: 0;
        overflow: visible;
    }


    .layout .content .sidebar-group.le .sidebar-edge-toggle::before,
    .layout .content .sidebar-edge-toggle::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s ease;
    }

    .layout .content .sidebar-group.le .sidebar-edge-toggle:hover::before,
    .layout .content .sidebar-edge-toggle:hover::before {
        left: 100%;
    }

    /* Buton sidebar-group içindeyse */
    .layout .content .sidebar-group.le .sidebar-edge-toggle:hover {
        width: 24px;
        right: -24px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 1) 0%, rgba(118, 75, 162, 0.95) 100%);
        box-shadow: 6px 0 20px rgba(102, 126, 234, 0.6), 0 0 30px rgba(102, 126, 234, 0.4), inset -2px 0 8px rgba(0, 0, 0, 0.2);
    }

    /* Buton sidebar-group'dan önce veya sonra kardeş element olarak */
    .layout .content .sidebar-edge-toggle:hover {
        width: 24px;
        left: 396px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 1) 0%, rgba(118, 75, 162, 0.95) 100%);
        box-shadow: 6px 0 20px rgba(102, 126, 234, 0.6), 0 0 30px rgba(102, 126, 234, 0.4), inset -2px 0 8px rgba(0, 0, 0, 0.2);
    }


    .layout .content .sidebar-group.le .sidebar-edge-toggle .toggle-edge-icon,
    .layout .content .sidebar-edge-toggle .toggle-edge-icon {
        font-size: 14px;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        z-index: 1;
    }

    .layout .content .sidebar-group.le .sidebar-edge-toggle:hover .toggle-edge-icon,
    .layout .content .sidebar-edge-toggle:hover .toggle-edge-icon {
        transform: translateX(-2px);
    }

/* Panel Kapandığında - Navigation Paneline Yapışık */
.sidebar-group.le.collapsed ~ .sidebar-edge-toggle,
.sidebar-edge-toggle.collapsed-state {
    position: fixed !important;
    left: 70px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 80px !important;
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%) !important;
    border-radius: 0 12px 12px 0 !important;
    z-index: 1001 !important;
    box-shadow: 4px 0 12px rgba(102, 126, 234, 0.5), inset -2px 0 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(102, 126, 234, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
    overflow: visible !important;
}

    .sidebar-edge-toggle.collapsed-state .toggle-edge-icon {
        transform: rotate(180deg) !important;
    }

    .sidebar-edge-toggle.collapsed-state:hover {
        width: 24px !important;
        left: 70px !important;
        background: linear-gradient(135deg, rgba(102, 126, 234, 1) 0%, rgba(118, 75, 162, 0.95) 100%) !important;
        box-shadow: 6px 0 20px rgba(102, 126, 234, 0.6), 0 0 30px rgba(102, 126, 234, 0.4), inset -2px 0 8px rgba(0, 0, 0, 0.2) !important;
    }

        .sidebar-edge-toggle.collapsed-state:hover .toggle-edge-icon {
            transform: rotate(180deg) translateX(2px) !important;
        }

.layout .content .sidebar-group .sidebar .list-group-item {
    padding: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
}

    .layout .content .sidebar-group .sidebar .list-group-item:before {
        content: '';
        position: absolute;
        display: block;
        width: 5px;
        background-color: #1f5e8a;
        opacity: 0;
        top: 0;
        bottom: 0;
        left: 0;
    }

    .layout .content .sidebar-group .sidebar .list-group-item.open-chat:before {
        opacity: 1;
    }

    .layout .content .sidebar-group .sidebar .list-group-item.open-chat .users-list-body p {
        font-weight: 600;
        color: #646464;
    }

    .layout .content .sidebar-group .sidebar .list-group-item figure {
        margin-right: 1rem;
    }

    .layout .content .sidebar-group .sidebar .list-group-item .users-list-body {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        position: relative;
        min-width: 0px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .layout .content .sidebar-group .sidebar .list-group-item .users-list-body h5 {
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: .2rem;
            line-height: 1;
        }

        .layout .content .sidebar-group .sidebar .list-group-item .users-list-body p {
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 0;
            color: #969696;
        }

        .layout .content .sidebar-group .sidebar .list-group-item .users-list-body .users-list-action {
            position: absolute;
            right: 0;
            top: 0;
            background: white;
            -webkit-box-shadow: -8px 1px 10px 5px #ffffff;
            -moz-box-shadow: -8px 1px 10px 5px #ffffff;
            box-shadow: -8px 1px 10px 5px #ffffff;
            bottom: 0;
            padding: 0 5px;
        }

            .layout .content .sidebar-group .sidebar .list-group-item .users-list-body .users-list-action [data-toggle="dropdown"] i {
                font-size: 18px;
            }

            .layout .content .sidebar-group .sidebar .list-group-item .users-list-body .users-list-action .new-message-count {
                width: 23px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                -moz-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                line-height: 0;
                font-size: 13px;
                height: 23px;
                background-color: #3db16b;
                color: white;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
            }

            .layout .content .sidebar-group .sidebar .list-group-item .users-list-body .users-list-action.action-toggle {
                display: none;
            }

    .layout .content .sidebar-group .sidebar .list-group-item:hover .users-list-action.action-toggle {
        display: block;
    }


.layout .content .sidebar-group .sidebar .list-active-group-item {
    padding: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
}

    .layout .content .sidebar-group .sidebar .list-active-group-item:before {
        content: '';
        position: absolute;
        display: block;
        width: 5px;
        background-color: #ffb700;
        opacity: 0;
        top: 0;
        bottom: 0;
        left: 0;
    }

    .layout .content .sidebar-group .sidebar .list-active-group-item.active-chat:before {
        opacity: 1;
    }

    .layout .content .sidebar-group .sidebar .list-active-group-item.active-chat .users-list-body p {
        font-weight: 600;
        color: #646464;
    }

    .layout .content .sidebar-group .sidebar .list-active-group-item figure {
        margin-right: 1rem;
    }

    .layout .content .sidebar-group .sidebar .list-active-group-item .users-list-body {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        position: relative;
        min-width: 0px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .layout .content .sidebar-group .sidebar .list-active-group-item .users-list-body h5 {
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: .2rem;
            line-height: 1;
        }

        .layout .content .sidebar-group .sidebar .list-active-group-item .users-list-body p {
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 0;
            color: #969696;
        }

        .layout .content .sidebar-group .sidebar .list-active-group-item .users-list-body .users-list-action {
            position: absolute;
            right: 0;
            top: 0;
            background: white;
            -webkit-box-shadow: -8px 1px 10px 5px #ffffff;
            -moz-box-shadow: -8px 1px 10px 5px #ffffff;
            box-shadow: -8px 1px 10px 5px #ffffff;
            bottom: 0;
            padding: 0 5px;
        }

            .layout .content .sidebar-group .sidebar .list-active-group-item .users-list-body .users-list-action [data-toggle="dropdown"] i {
                font-size: 18px;
            }

            .layout .content .sidebar-group .sidebar .list-active-group-item .users-list-body .users-list-action .new-message-count {
                width: 23px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                -moz-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                line-height: 0;
                font-size: 13px;
                height: 23px;
                background-color: #3db16b;
                color: white;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
            }

            .layout .content .sidebar-group .sidebar .list-active-group-item .users-list-body .users-list-action.action-toggle {
                display: none;
            }

    .layout .content .sidebar-group .sidebar .list-active-group-item:hover .users-list-action.action-toggle {
        display: block;
    }

.layout .content .chat {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: linear-gradient(135deg, rgb(29 31 41) 0%, rgb(37 42 63) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(61, 177, 107, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 0 1px rgba(61, 177, 107, 0.1) !important;
    position: relative;
    overflow: hidden;
    margin: 5px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.layout .content .chat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(61, 177, 107, 0.6) 50%, 
        transparent 100%);
    animation: tech-scan 3s ease-in-out infinite;
    z-index: 1;
}

.layout .content .chat::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(61, 177, 107, 0.1) 0%, transparent 70%);
    animation: tech-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

    .layout .content .chat .chat-header {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background: linear-gradient(135deg, rgb(47 84 77) 0%, rgb(29 31 41) 100%) !important;
        backdrop-filter: blur(10px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
        border-bottom: 1px solid rgba(61, 177, 107, 0.3) !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 2px 10px rgba(61, 177, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        position: relative;
        z-index: 10;
        border-bottom: 2px solid rgba(61, 177, 107, 0.2);
        padding-bottom: 20px;
    }

        .layout .content .chat .chat-header .chat-header-user {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

            .layout .content .chat .chat-header .chat-header-user figure {
                margin-right: 1rem;
            }

            .layout .content .chat .chat-header .chat-header-user h5 {
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 0;
                line-height: 1;
                color: #e9ecef;
            }

        .layout .content .chat .chat-header .chat-header-action ul {
            margin-bottom: 0;
        }

            .layout .content .chat .chat-header .chat-header-action ul > li > a {
                font-size: 16px;
                color: #e9ecef;
            }

                .layout .content .chat .chat-header .chat-header-action ul > li > a:hover {
                    color: rgb(18 167 101);
                }

    .layout .content .chat .chat-body {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin: 20px 0;
        background: linear-gradient(135deg, rgb(29 31 41) 0%, rgb(37 42 63) 100%);
    }

        .layout .content .chat .chat-body:not(.no-message) {
            overflow: auto;
        }

        .layout .content .chat .chat-body.no-message {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            .layout .content .chat .chat-body.no-message .no-message-container {
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                -moz-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -webkit-flex-direction: column;
                -moz-box-orient: vertical;
                -moz-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                height: 100%;
            }

                .layout .content .chat .chat-body.no-message .no-message-container i {
                    font-size: 7em;
                    opacity: .15;
                    margin-bottom: 15px;
                    color: rgb(18 167 101);
                }

                .layout .content .chat .chat-body.no-message .no-message-container p {
                    font-size: 16px;
                    color: rgba(233, 236, 239, 0.6);
                }

        .layout .content .chat .chat-body .messages {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -moz-box-orient: vertical;
            -moz-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: start;
            -webkit-align-items: flex-start;
            -moz-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
        }

            .layout .content .chat .chat-body .messages .message-item {
                max-width: 75%;
                margin-bottom: 20px;
            }

                .layout .content .chat .chat-body .messages .message-item .message-content {
                    background: linear-gradient(135deg, rgb(58 63 81) 0%, rgb(37 42 63) 100%);
                    color: #e9ecef;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                    padding: 10px 20px;
                    border: 1px solid rgba(61, 177, 107, 0.2);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                }

                    .layout .content .chat .chat-body .messages .message-item .message-content.message-file {
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: -moz-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -webkit-align-items: center;
                        -moz-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        word-break: break-word;
                    }

                        .layout .content .chat .chat-body .messages .message-item .message-content.message-file .file-icon {
                            font-size: 24px;
                            margin-right: 1rem;
                            color: rgb(18 167 101);
                        }

                        .layout .content .chat .chat-body .messages .message-item .message-content.message-file ul {
                            margin-top: 3px;
                            margin-bottom: 0;
                        }

                            .layout .content .chat .chat-body .messages .message-item .message-content.message-file ul li.list-inline-item {
                                margin-left: 0;
                                margin-right: .5rem;
                            }

                .layout .content .chat .chat-body .messages .message-item .message-action {
                    color: rgba(233, 236, 239, 0.6);
                    margin-top: 5px;
                    font-style: italic;
                    font-size: 12px;
                }

                    .layout .content .chat .chat-body .messages .message-item .message-action .ti-double-check:before, .layout .content .chat .chat-body .messages .message-item .message-action .ti-double-check:after {
                        content: "\e64c";
                        font-family: 'themify';
                    }

                    .layout .content .chat .chat-body .messages .message-item .message-action .ti-double-check:after {
                        margin-left: -4px;
                    }

                .layout .content .chat .chat-body .messages .message-item.outgoing-message {
                    margin-left: auto;
                }

                    .layout .content .chat .chat-body .messages .message-item.outgoing-message .message-content {
                        background: linear-gradient(135deg, rgb(41 58 69) 0%, rgb(69 157 119) 100%);
                        color: #ffffff;
                        border: 1px solid rgba(61, 177, 107, 0.4);
                        box-shadow: 0 2px 8px rgba(61, 177, 107, 0.3);
                    }

                    .layout .content .chat .chat-body .messages .message-item.outgoing-message .message-action {
                        text-align: right;
                    }

    .layout .content .chat .chat-footer {
        border-top: 2px solid rgba(61, 177, 107, 0.2);
        padding-top: 2px;
        background: linear-gradient(135deg, rgb(29 31 41) 0%, rgb(37 42 63) 100%);
    }

        .layout .content .chat .chat-footer form {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            padding: 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background: linear-gradient(135deg, rgb(58 63 81) 0%, rgb(37 42 63) 100%);
            border: 1px solid rgba(61, 177, 107, 0.2);
        }

            .layout .content .chat .chat-footer form .form-buttons {
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
            }

                .layout .content .chat .chat-footer form .form-buttons .btn {
                    margin-left: .5rem;
                }

            .layout .content .chat .chat-footer form input[type="text"] {
                border: none;
                background-color: inherit;
                color: #e9ecef;
            }

                .layout .content .chat .chat-footer form input[type="text"]::placeholder {
                    color: rgba(233, 236, 239, 0.5);
                }

                .layout .content .chat .chat-footer form input[type="text"]:focus {
                    -webkit-box-shadow: none;
                    -moz-box-shadow: none;
                    box-shadow: none;
                }

    .layout .content .chat + .sidebar-group {
        margin-right: 0px;
    }

        .layout .content .chat + .sidebar-group .sidebar {
            margin-left: 30px;
            margin-right: 0px;
        }



.dashboard-container .each {
    color: #e9ecef;
    display: block;
    width: 100%;
    min-height: 280px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(70, 75, 95, 0.95) 0%, rgba(58, 63, 81, 0.95) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(61, 177, 107, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(61, 177, 107, 0.2);
    text-align: center;
    padding: 30px;
    text-decoration: none;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

    .dashboard-container .each::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #3db16b 50%, transparent 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .dashboard-container .each:hover {
        border-color: rgba(61, 177, 107, 0.5);
        box-shadow: 0 12px 40px rgba(61, 177, 107, 0.4), 0 0 0 1px rgba(61, 177, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transform: translateY(-5px) scale(1.01);
    }

        .dashboard-container .each:hover::before {
            opacity: 1;
        }

    /* Highcharts container'ları için dark tema */
    .dashboard-container .each #KanallarOzeti,
    .dashboard-container .each #ProgramOzeti {
        background: transparent;
    }

/* Highcharts tooltip dark tema */
.highcharts-tooltip-box {
    fill: #3a3f51 !important;
    stroke: #5a6278 !important;
}

.highcharts-tooltip text {
    fill: #e9ecef !important;
}

.user-welcome,
.user-welcome.modern-welcome-card {
    text-align: center;
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.15) 0%, rgba(101, 217, 147, 0.15) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(61, 177, 107, 0.3) !important;
    box-shadow: 0 8px 32px rgba(61, 177, 107, 0.25), 0 0 0 1px rgba(61, 177, 107, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    position: relative;
    overflow: hidden;
}

    .user-welcome::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(61, 177, 107, 0.1) 0%, transparent 70%);
        animation: pulse-glow 3s ease-in-out infinite;
    }

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.user-welcome .avatar {
    background: #F7F7FC;
    border: solid 1px #E9E9E9;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    margin: -5px auto;
    font-weight: bolder;
    padding: 20px 0;
    text-align: center;
}

.welcome-head {
    text-align: center;
    margin: 20px auto;
}

    .welcome-head i {
        font-size: 50px;
    }

.welcome-stat {
    margin-top: 50px;
}

    .welcome-stat .col {
        padding: 0;
        font-size: 11px !important;
        text-align: center;
    }

        .welcome-stat .col .count {
            display: block;
            text-align: center;
            font-size: 30px !important;
        }

.dashboard-container .each-menu {
    border: 1px solid rgba(61, 177, 107, 0.25);
    border-radius: 14px;
    margin-bottom: 15px;
    text-align: center;
    padding: 28px 20px;
    color: #e9ecef;
    background: linear-gradient(135deg, rgba(44, 47, 58, 0.95) 0%, rgba(58, 63, 81, 0.95) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(61, 177, 107, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .dashboard-container .each-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(61, 177, 107, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .dashboard-container .each-menu:hover::before {
        left: 100%;
    }

    .dashboard-container .each-menu:hover {
        border-color: rgba(61, 177, 107, 0.5);
        box-shadow: 0 10px 32px rgba(61, 177, 107, 0.35), 0 0 0 1px rgba(61, 177, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transform: translateY(-4px) scale(1.02);
        background: linear-gradient(135deg, rgba(58, 63, 81, 0.98) 0%, rgba(70, 75, 95, 0.98) 100%);
    }

    .dashboard-container .each-menu i {
        font-size: 56px;
        margin-bottom: 16px;
        display: block;
        color: rgba(61, 177, 107, 0.8);
        transition: all 0.4s ease;
        position: relative;
        z-index: 1;
        text-shadow: 0 2px 8px rgba(61, 177, 107, 0.3);
    }

    .dashboard-container .each-menu:hover i {
        color: #3db16b;
        transform: scale(1.1) rotate(5deg);
        text-shadow: 0 4px 12px rgba(61, 177, 107, 0.5);
    }

    .dashboard-container .each-menu i.colored {
        color: #3db16b;
    }

    .dashboard-container .each-menu:hover i.colored {
        color: #65d993;
    }

    .dashboard-container .each-menu h6 {
        font-size: 18px;
        font-weight: 600;
        margin: 12px 0 8px 0;
        color: #e9ecef;
        position: relative;
        z-index: 1;
        transition: color 0.3s ease;
    }

    .dashboard-container .each-menu:hover h6 {
        color: #ffffff;
    }

    .dashboard-container .each-menu .info {
        display: block;
        color: rgba(61, 177, 107, 0.9);
        margin-bottom: 18px;
        font-size: 13px;
        font-weight: 500;
        position: relative;
        z-index: 1;
        transition: color 0.3s ease;
    }

    .dashboard-container .each-menu:hover .info {
        color: #3db16b;
    }

    .dashboard-container .each-menu .btn {
        position: relative;
        z-index: 1;
        transition: all 0.3s ease;
    }

        .dashboard-container .each-menu .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        }


.statistics-container .each {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    border: solid 2px #E2E2E2;
    position: relative;
    overflow: hidden;
}

@media(max-width: 800px) {
    .statistics-container .each {
        margin-bottom: 10px;
    }
}

.statistics-container .each .icon {
    position: absolute;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 40px;
    background: #E2E2E2;
    color: #000;
    border-radius: 100px;
    bottom: -25px;
    left: -17px;
}

    .statistics-container .each .icon i {
        font-size: 40px;
        color: grey;
        position: relative;
        top: 13px;
    }

.statistics-container .each .count {
    text-align: center;
    padding: 20px 0;
    color: rgba(0,0,0,0.6);
    font-weight: 600;
}

    .statistics-container .each .count span {
        display: block;
        color: #ffffff;
        font-size: 40px;
    }


.left-pane .compose-btn {
    background-color: #ff4d93;
    background-image: -webkit-linear-gradient(-315deg, #ff4d93 0%, #ff4d93 40%, #ff7512 60%, #ff7512 100%);
    background-image: linear-gradient(45deg, #ff4d93 0%, #ff4d93 40%, #ff7512 60%, #ff7512 100%);
    background-size: 500% 110%;
    background-position: 50%;
    border: 2px solid transparent;
    color: #ffffff !important;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    padding: 3px 0;
    text-align: center;
    margin: auto;
}

.right-pane {
    width: 100%;
    float: left;
    padding-left: 80px;
}

    .right-pane .inner-container {
        width: 100%;
        position: relative;
    }

        .right-pane .inner-container .inner-left-pane {
            width: 320px;
            border-right: solid 1px #F2F4F5;
            height: calc(100vh - 60px);
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
            overflow-x: hidden;
            background: #ffffff;
        }

        .right-pane .inner-container .inner-right-pane {
            padding-left: 320px;
            height: calc(100vh - 60px);
        }

    .right-pane .inner-container-sm .inner-left-pane {
        width: 250px;
    }

    .right-pane .inner-container-sm .inner-right-pane {
        padding-left: 250px;
    }


.achats {
    color: whitesmoke;
}

.liachick {
    background-color: #272935 !important;
}

/* Modern chat list için liachick override */
.modern-chat-list .list-group-item.liachick,
.modern-chat-list .achats .list-group-item.liachick {
    background: linear-gradient(135deg, rgba(66, 153, 225, 0.28) 0%, rgba(30, 64, 175, 0.18) 100%) !important;
    border-color: rgba(66, 153, 225, 0.5) !important;
    border-left: 3px solid #4299e1 !important;
    box-shadow: 0 8px 32px rgba(66, 153, 225, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.modern-chat-list .list-group-item.liachick::before,
.modern-chat-list .achats .list-group-item.liachick::before {
    opacity: 1 !important;
    background: linear-gradient(90deg, rgba(66, 153, 225, 0.8) 0%, rgba(30, 64, 175, 0.6) 100%) !important;
}

.achats:hover, achats:focus {
    background-color: #52556a !important;
    text-decoration: none !important;
    outline: none !important;
    color: white !important;
}

.achatsactive {
    background-color: lightslategray;
    text-decoration: none;
    outline: none;
    color: white;
}

.achats .ptag {
    color: #a2a3a5;
}

    .achats .ptag:hover {
        color: #3db16b !important;
    }

.close {
    float: right;
    font-size: 20px;
    font-weight: bold;
    line-height: 18px;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

    .close:hover {
        color: #000000;
        text-decoration: none;
        opacity: 0.4;
        filter: alpha(opacity=40);
        cursor: pointer;
    }

.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 18px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #c09853;
}

.alert-heading {
    color: inherit;
}

.alert .close {
    position: relative;
    top: -2px;
    right: -21px;
    line-height: 18px;
}

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
}

.alert-danger,
.alert-error {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
}

.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #3a87ad;
}

.alert-block {
    padding-top: 14px;
    padding-bottom: 14px;
}

    .alert-block > p,
    .alert-block > ul {
        margin-bottom: 0;
    }

    .alert-block p + p {
        margin-top: 5px;
    }


.nav-tabs .nav-link {
    background: linear-gradient(rgb(0 115 210) 0 0) var(--p, 0) / var(--p, 0) no-repeat !important;
    transition: .4s, background-position 0s;
    background: #00000008;
}

.nav-tabs .nav-link-sub {
    background: #00000008;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.smallx-column {
    float: left;
    position: relative;
    display: inline-block;
    width: 10%;
    padding: 0px 10px;
}


.small-column {
    float: left;
    position: relative;
    display: inline-block;
    width: 16.6666%;
    padding: 0px 10px;
}

.medium-column {
    float: left;
    position: relative;
    width: 25%;
    display: inline-block;
    padding: 0px 10px;
}

.large-column {
    float: left;
    display: inline-block;
    position: relative;
    width: 58.3333%;
    padding: 0px 10px;
}

    .large-column > label, .medium-column > label, .small-column > label {
        font-size: 14px;
        font-weight: 400 !important;
        margin-bottom: 3px;
    }

ul.odalar {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    width: 100%;
}

    ul.odalar > li.checkbox {
        display: inline-block;
        width: 50%;
        float: left;
    }

        ul.odalar > li.checkbox > label {
            font-size: 14px;
            font-weight: 500;
            position: relative;
        }

            ul.odalar > li.checkbox > label > span {
                font-size: 14px;
                font-weight: 300;
            }

.oda-slider {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    width: 100%;
}

    .oda-slider > .item {
        display: inline-block;
        width: 15%;
        padding: 5px;
    }

        .oda-slider > .item > .oda {
            background: white;
            border-radius: 8px;
            box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
            overflow: hidden;
            padding-bottom: 5px;
            display: inline-block;
            width: 100%;
        }

            .oda-slider > .item > .oda > .img {
                display: inline-block;
                width: 100%;
            }

                .oda-slider > .item > .oda > .img > img {
                    width: 100%;
                }

            .oda-slider > .item > .oda > .oda-adi {
                display: inline-block;
                width: 100%;
                margin-top: 5px;
                font-size: 14px;
                font-weight: 500;
                padding: 0px 10px;
                margin-bottom: 7px;
            }

            .oda-slider > .item > .oda > .oda-fiyat {
                font-size: 11px !important;
                font-weight: 300;
                padding: 0px 10px;
            }
/*
.modal-header {
    background: none;
    padding: 5px;
    border-bottom: none;
}

.text-mesaj {
    display: inline-block;
    width: 100%;
    float: left;
    margin-top: 10px;
}

    .text-mesaj > textarea {
        height: 120px;
    }

.tab-pane button.btn.btn-default {
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    margin: 10px;
    background: white;
    transition: all .3s;
}

    .tab-pane button.btn.btn-default:hover {
        transition: all .3s;
        background: #F98E3B;
    }*/

li.checkbox > label > span > i {
    font-size: 12px;
    text-decoration: line-through;
}


.message-center-red .oda-slider {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    width: 100%;
}

    .message-center-red .oda-slider > .item {
        display: inline-block;
        width: 25%;
        padding: 5px;
    }

        .message-center-red .oda-slider > .item > .oda {
            background: white;
            border-radius: 8px;
            box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
            overflow: hidden;
            padding-bottom: 5px;
            display: inline-block;
            width: 100%;
        }

            .message-center-red .oda-slider > .item > .oda > .img {
                display: inline-block;
                width: 100%;
            }

                .message-center-red .oda-slider > .item > .oda > .img > img {
                    width: 100%;
                }

            .message-center-red .oda-slider > .item > .oda > .oda-adi {
                display: inline-block;
                width: 100%;
                margin-top: 5px;
                font-size: 9px;
                font-weight: 500;
                padding: 0px 10px;
                margin-bottom: 7px;
            }

            .message-center-red .oda-slider > .item > .oda > .oda-fiyat {
                font-size: 9px !important;
                font-weight: 300;
                padding: 0px 10px;
            }

@media screen and (max-width: 992px) {
    .message-center-red .oda-slider > .item {
        display: inline-block;
        width: 25%;
        padding: 5px;
    }

    .message-content .oda-slider > .item {
        display: inline-block;
        width: 25%;
        padding: 5px;
    }

    .sidebar-group.mobile-open {
        z-index: 10;
    }
}

@media screen and (max-width: 1200px) {
    .message-center-red .oda-slider > .item {
        display: inline-block;
        width: 50%;
        padding: 5px;
    }

    .message-content .oda-slider > .item {
        display: inline-block;
        width: 50%;
        padding: 5px;
    }
}

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

    body {
        -moz-transform: scale(0.75, 0.75) !important; /* Moz-browsers */
        zoom: 0.75 !important; /* Other non-webkit browsers */
        zoom: 75% !important; /* Webkit browsers */
    }

    .modal-backdrop {
        width: 135vw;
        height: 135vh;
    }

    .layout {
        height: 135vh !important;
        height: -webkit-calc(var(--vh, 1vh) * 135) !important;
        height: -moz-calc(var(--vh, 1vh) * 135) !important;
        height: calc(var(--vh, 1vh) * 135) !important;
    }

    .message-center-red .oda-slider > .item {
        display: inline-block;
        width: 40%;
        padding: 5px;
    }

    .message-content .oda-slider > .item {
        display: inline-block;
        width: 40%;
        padding: 5px;
    }

    .sidebar-group.mobile-open {
        z-index: 10;
    }
}


@media screen and (max-width: 768px) {
    .message-center-red .oda-slider > .item {
        display: inline-block;
        width: 50%;
        padding: 5px;
    }

    .message-content .oda-slider > .item {
        display: inline-block;
        width: 50%;
        padding: 5px;
    }

    .sidebar-group.mobile-open {
        z-index: 10;
    }
}

@media screen and (max-width: 576px) {
    .message-center-red .oda-slider > .item {
        display: inline-block;
        width: 50%;
        padding: 5px;
    }

    .message-content .oda-slider > .item {
        display: inline-block;
        width: 50%;
        padding: 5px;
    }

    .sidebar-group.mobile-open {
        z-index: 10;
    }
}

/* typical phone screen resolution */
@media only screen and (max-width : 667px) {
    .message-center-red .oda-slider > .item {
        display: inline-block;
        width: 50%;
        padding: 5px;
    }

    .message-content .oda-slider > .item {
        display: inline-block;
        width: 50%;
        padding: 5px;
    }

    .sidebar-group.mobile-open {
        z-index: 10;
    }
}
/* landscape orientation */
@media only screen and (min-width : 375px) and (max-width : 667px) and (orientation : landscape) {
    .message-center-red .oda-slider > .item {
        display: inline-block;
        width: 100%;
        padding: 5px;
    }

    .message-content .oda-slider > .item {
        display: inline-block;
        width: 100%;
        padding: 5px;
    }

    .sidebar-group.mobile-open {
        z-index: 10;
    }
}
/* portrait orientation */
@media only screen and (min-width : 375px) and (max-width : 667px) and (orientation : portrait) {
    .message-center-red .oda-slider > .item {
        display: inline-block;
        width: 100%;
        padding: 5px;
    }

    .message-content .oda-slider > .item {
        display: inline-block;
        width: 100%;
        padding: 5px;
    }

    .sidebar-group.mobile-open {
        z-index: 10;
    }
}




/*
 width 
::-webkit-scrollbar {
    width: auto;
}

 Track 
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

 Handle 
::-webkit-scrollbar-thumb {
    background: #5a5c66;
}

     Handle on hover 
    ::-webkit-scrollbar-thumb:hover {
        background: #5a5c66;
    }*/



.tableTeam {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

    .tableTeam caption {
        font-size: 1.5em;
        margin: .5em 0 .75em;
    }

    .tableTeam tr {
        background-color: #6b6d7b;
        border: 1px solid #ddd;
        padding: .35em;
    }

    .tableTeam th,
    .tableTeam td {
        padding: .625em;
        text-align: center;
    }

    .tableTeam th {
        font-size: .85em;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

@media screen and (max-width: 600px) {
    .tableTeam {
        border: 0;
    }

        .tableTeam caption {
            font-size: 1.3em;
        }

        .tableTeam thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        .tableTeam tr {
            border-bottom: 3px solid #ddd;
            display: block;
            margin-bottom: .625em;
        }

        .tableTeam td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: right;
        }

            .tableTeam td::before {
                /*
    * aria-label has no advantage, it won't be read inside a .tableTeam
    content: attr(aria-label);
    */
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
            }

            .tableTeam td:last-child {
                border-bottom: 0;
            }
}

/* ============================================
   COMPREHENSIVE MODERNIZATION CSS
   Reports, Channels, BulkMessages, ReadyMessages, Posts, Chat
   ============================================ */

/* ============================================
   REPORTS PAGE MODERNIZATION
   ============================================ */

/* Reports Page Container */
.reports-page-container {
    background: #2c2f3a;
    min-height: 100vh;
    padding: 20px;
}

    .reports-page-container .container-fluid {
        max-width: 100%;
        padding: 0;
    }

/* Reports Header Section */
.reports-header-section {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    padding: 25px 30px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

    .reports-header-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: pulse 3s ease-in-out infinite;
    }

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.reports-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1;
}

    .reports-title i {
        font-size: 32px;
        opacity: 0.9;
        animation: iconFloat 2s ease-in-out infinite;
    }

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.reports-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1;
}

.reports-date-filter {
    display: flex;
    align-items: center;
}

.btn-date-picker {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .btn-date-picker:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .btn-date-picker i {
        font-size: 18px;
    }

.date-range-text {
    margin-right: 5px;
    font-size: 14px;
}

.date-range-value {
    font-weight: 600;
    font-size: 14px;
}

/* Reports Filters Section */
.reports-filters-section {
    background: #3a3f51;
    border-radius: 0;
    padding: 25px 30px;
    margin-top: 0;
    border: 1px solid #464852;
    border-top: none;
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.reports-filter-row {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

    .filter-group .filter-label {
        color: #e9ecef;
        font-weight: 600;
        margin-bottom: 12px;
        display: block;
        font-size: 14px;
    }

.reports-type-select {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
    border-radius: 8px;
    padding: 12px 15px;
    width: 100%;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .reports-type-select:focus {
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
        color: #ffffff;
        outline: none;
    }

    .reports-type-select option {
        background: #454b5f;
        color: #e9ecef;
        padding: 10px;
    }

.social-media-filters {
    flex: 2;
    min-width: 300px;
}

.social-media-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.checkbox-item {
    position: relative;
}

    .checkbox-item input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .checkbox-item .social-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        background: #454b5f;
        border: 2px solid #5a6278;
        border-radius: 8px;
        color: #e9ecef;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 500;
        font-size: 14px;
        min-height: 48px;
    }

        .checkbox-item .social-label:hover {
            background: #50566a;
            border-color: #3db16b;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

    .checkbox-item input[type="checkbox"]:checked + .social-label {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-color: #3db16b;
        color: white;
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
    }

    .checkbox-item .social-label i {
        font-size: 18px;
    }

    .checkbox-item .social-label.facebook {
        border-color: #3b5998;
    }

    .checkbox-item input[type="checkbox"]:checked + .social-label.facebook {
        background: #3b5998;
        border-color: #3b5998;
    }

    .checkbox-item .social-label.instagram {
        border-color: #e4405f;
    }

    .checkbox-item input[type="checkbox"]:checked + .social-label.instagram {
        background: linear-gradient(135deg, #fd5949 0%, #d6249f 70%, #285AEB 100%);
        border-color: #e4405f;
    }

    .checkbox-item .social-label.whatsapp {
        border-color: #25d366;
    }

    .checkbox-item input[type="checkbox"]:checked + .social-label.whatsapp {
        background: #25d366;
        border-color: #25d366;
    }

    .checkbox-item .social-label.whatsapp-business {
        border-color: #128c7e;
    }

    .checkbox-item input[type="checkbox"]:checked + .social-label.whatsapp-business {
        background: #128c7e;
        border-color: #128c7e;
    }

    .checkbox-item .social-label.telegram {
        border-color: #2AABEE;
    }

    .checkbox-item input[type="checkbox"]:checked + .social-label.telegram {
        background: #2AABEE;
        border-color: #2AABEE;
    }

    .checkbox-item .social-label.livedesk {
        border-color: #990000;
    }

    .checkbox-item input[type="checkbox"]:checked + .social-label.livedesk {
        background: #990000;
        border-color: #990000;
    }

/* Reports Tab Navigation */
.reports-tab-navigation {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
    border: 1px solid #464852;
    border-top: none;
    border-bottom: none;
    box-shadow: none;
    position: relative;
    overflow-x: auto;
}

    .reports-tab-navigation::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #3db16b 50%, transparent 100%);
        opacity: 0.3;
    }

.reports-tabs {
    border-bottom: none;
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    background: transparent;
}

    .reports-tabs .nav-item {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .reports-tabs .nav-link {
        color: #a8b2c1;
        border: none;
        border-bottom: 3px solid transparent;
        padding: 15px 20px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        position: relative;
        background: transparent;
    }

        .reports-tabs .nav-link i {
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        .reports-tabs .nav-link:hover {
            color: #e9ecef;
            background: rgba(61, 177, 107, 0.05);
            border-bottom-color: rgba(61, 177, 107, 0.5);
        }

            .reports-tabs .nav-link:hover i {
                transform: scale(1.1);
            }

        .reports-tabs .nav-link.active {
            color: #3db16b;
            background: rgba(61, 177, 107, 0.1);
            border-bottom-color: #3db16b;
            font-weight: 600;
        }

            .reports-tabs .nav-link.active i {
                color: #3db16b;
                transform: scale(1.15);
            }

/* Reports Tab Content */
.reports-tab-content {
    background: #3a3f51;
    border-radius: 0 0 12px 12px;
    padding: 30px;
    margin-top: 0;
    border: 1px solid #464852;
    border-top: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    min-height: 500px;
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reports-content-card {
    background: #454b5f;
    border-radius: 12px;
    padding: 25px;
    border: 1px solid #5a6278;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

    .reports-content-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
        transform: translateY(-2px);
    }

    .reports-content-card .card-body {
        padding: 0;
        background: transparent;
        border: none;
    }

    /* Highcharts Container Styling */
    .reports-content-card .highcharts-container {
        background: transparent !important;
    }

    .reports-content-card .highcharts-title {
        color: #e9ecef !important;
        font-weight: 600 !important;
    }

    .reports-content-card .highcharts-axis-labels text {
        fill: #a8b2c1 !important;
    }

    .reports-content-card .highcharts-legend-item text {
        fill: #e9ecef !important;
    }

    .reports-content-card .highcharts-tooltip {
        background: #454b5f !important;
        border: 1px solid #5a6278 !important;
        color: #e9ecef !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }

        .reports-content-card .highcharts-tooltip text {
            fill: #e9ecef !important;
        }

    /* Tables in Reports */
    .reports-content-card table {
        width: 100%;
        border-collapse: collapse;
        background: transparent;
    }

        .reports-content-card table thead {
            background: #3a3f51;
        }

            .reports-content-card table thead th {
                color: #e9ecef;
                font-weight: 600;
                padding: 15px;
                border-bottom: 2px solid #5a6278;
                text-align: left;
            }

        .reports-content-card table tbody tr {
            border-bottom: 1px solid #5a6278;
            transition: all 0.3s ease;
        }

            .reports-content-card table tbody tr:hover {
                background: rgba(61, 177, 107, 0.05);
            }

        .reports-content-card table tbody td {
            color: #e9ecef;
            padding: 12px 15px;
        }

/* Reports Responsive */
@media (max-width: 1200px) {
    .reports-filter-row {
        flex-direction: column;
        gap: 20px;
    }

    .filter-group,
    .social-media-filters {
        width: 100%;
    }

    .social-media-checkboxes {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 768px) {
    .reports-header-section {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
        padding: 20px;
    }

    .reports-title {
        font-size: 24px;
    }

    .reports-filters-section {
        padding: 20px;
    }

    .reports-tab-content {
        padding: 20px;
    }

    .reports-tabs .nav-link {
        padding: 12px 15px;
        font-size: 13px;
    }

        .reports-tabs .nav-link span {
            display: none;
        }

    .social-media-checkboxes {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   CHANNELS PAGE MODERNIZATION
   ============================================ */

/* Channels Tab Navigation */
.channels-tab-navigation {
    background: transparent;
    border-bottom: 2px solid #464852;
    padding: 0;
    box-shadow: none;
    position: relative;
    overflow-x: auto;
}

    .channels-tab-navigation::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #3db16b 50%, transparent 100%);
        opacity: 0.3;
    }

    .channels-tab-navigation .nav-tabs {
        border-bottom: none;
        display: flex;
        flex-wrap: nowrap;
        padding: 0;
        margin: 0;
        background: transparent;
    }

        .channels-tab-navigation .nav-tabs .nav-item {
            margin-bottom: 0;
            flex-shrink: 0;
        }

        .channels-tab-navigation .nav-tabs .nav-link {
            color: #a8b2c1;
            border: none;
            border-bottom: 3px solid transparent;
            padding: 15px 20px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            position: relative;
            background: transparent;
        }

            .channels-tab-navigation .nav-tabs .nav-link i {
                font-size: 18px;
                transition: transform 0.3s ease;
            }

            .channels-tab-navigation .nav-tabs .nav-link:hover {
                color: #e9ecef;
                background: rgba(61, 177, 107, 0.05);
                border-bottom-color: rgba(61, 177, 107, 0.5);
            }

                .channels-tab-navigation .nav-tabs .nav-link:hover i {
                    transform: scale(1.1);
                }

            .channels-tab-navigation .nav-tabs .nav-link.active {
                color: #3db16b;
                background: rgba(61, 177, 107, 0.1);
                border-bottom-color: #3db16b;
                font-weight: 600;
            }

                .channels-tab-navigation .nav-tabs .nav-link.active i {
                    color: #3db16b;
                    transform: scale(1.15);
                }

/* Channels Modal Input Styling */
.channels-input-white,
.channels-input-white.form-control,
.channels-input-white input,
.channels-input-white textarea,
.channels-input-white select,
.channels-modal-wrapper .modal-body table td .form-control {
    background: #454b5f !important;
    border: 1px solid #5a6278 !important;
    color: #ffffff !important;
}

    .channels-input-white::placeholder,
    .channels-input-white.form-control::placeholder,
    .channels-input-white input::placeholder,
    .channels-input-white textarea::placeholder,
    .channels-input-white select::placeholder,
    .channels-modal-wrapper .modal-body table td .form-control::placeholder {
        color: #ffffff !important;
    }

    .channels-input-white:focus,
    .channels-input-white.form-control:focus,
    .channels-input-white input:focus,
    .channels-input-white textarea:focus,
    .channels-input-white select:focus,
    .channels-modal-wrapper .modal-body table td .form-control:focus {
        color: #ffffff !important;
        border-color: #3db16b !important;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1) !important;
    }

/* Card Text Styling */
.card {
    color: #212529 !important;
}

    .card *:not(.instagram-side):not(.instagram-side *) {
        color: #9a9da1 !important;
    }

    .card h1,
    .card h2,
    .card h3,
    .card h4,
    .card h5,
    .card h6 {
        color: #212529 !important;
    }

    .card p,
    .card span,
    .card label,
    .card div {
        color: #212529 !important;
    }

    .card .form-control,
    .card input,
    .card textarea,
    .card select {
        color: #212529 !important;
    }

/* sm-account-card için koyu renk */
.sm-account-card {
    color: #212529 !important;
}

    .sm-account-card *:not(.instagram-side):not(.instagram-side *) {
        color: #212529 !important;
    }

    .sm-account-card .content-side {
        color: #212529 !important;
    }

        .sm-account-card .content-side * {
            color: #212529 !important;
        }

    .sm-account-card .main-label {
        color: #212529 !important;
    }

    .sm-account-card .instagram-name {
        color: #212529 !important;
    }

    .sm-account-card .arrow {
        color: #212529 !important;
    }

    .sm-account-card .facebook {
        color: #212529 !important;
    }

    /* Instagram side beyaz kalmalı (gradient arka plan var) */
    .sm-account-card .instagram-side {
        color: #ffffff !important;
    }

        .sm-account-card .instagram-side * {
            color: #ffffff !important;
        }

/* ============================================
   READYMESSAGES PAGE MODERNIZATION
   ============================================ */

/* ReadyMessages Header Section */
.ready-messages-header-section {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    padding: 25px 30px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ready-messages-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

    .ready-messages-title i {
        font-size: 32px;
    }

.btn-add-message {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .btn-add-message:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

/* ReadyMessages Table */
.ready-messages-table-container {
    background: #3a3f51;
    border-radius: 0 0 12px 12px;
    padding: 25px;
    border: 1px solid #464852;
    border-top: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    overflow: visible;
}

    .ready-messages-table-container .dataTables_wrapper {
        display: block !important;
        visibility: visible !important;
        overflow: visible !important;
        width: 100%;
    }

        .ready-messages-table-container .dataTables_wrapper .dataTables_length {
            display: block !important;
            visibility: visible !important;
            margin-bottom: 15px;
        }

        .ready-messages-table-container .dataTables_wrapper .dataTables_filter {
            display: block !important;
            visibility: visible !important;
            margin-bottom: 15px;
        }

        .ready-messages-table-container .dataTables_wrapper .dataTables_paginate {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            margin-top: 20px;
            justify-content: center;
            align-items: center;
            gap: 5px;
            float: none !important;
        }

            .ready-messages-table-container .dataTables_wrapper .dataTables_paginate .paginate_button {
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

        .ready-messages-table-container .dataTables_wrapper .dataTables_info {
            display: block !important;
            visibility: visible !important;
            color: #e9ecef;
            padding: 10px 0;
            margin-top: 15px;
            float: none !important;
            text-align: center;
        }

.ready-messages-table {
    width: 100%;
    background: #454b5f;
    border-radius: 8px;
    overflow: hidden;
}

    .ready-messages-table thead {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    }

        .ready-messages-table thead th {
            color: white;
            font-weight: 600;
            padding: 15px;
            border: none;
            text-align: left;
        }

    .ready-messages-table tbody tr {
        background: #3a3f51;
        border-bottom: 1px solid #464852;
        transition: all 0.3s ease;
    }

        .ready-messages-table tbody tr:hover {
            background: #454b5f;
            transform: translateX(5px);
        }

    .ready-messages-table tbody td {
        padding: 15px;
        color: #e9ecef;
        border: none;
    }

/* ReadyMessages Modal Input Styling */
.readymessages-input-white {
    background: #454b5f !important;
    border: 1px solid #5a6278 !important;
    color: #ffffff !important;
}

    .readymessages-input-white::placeholder {
        color: #a8b2c1 !important;
    }

    .readymessages-input-white:focus {
        color: #ffffff !important;
        border-color: #3db16b !important;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1) !important;
    }

.readymessages-modal-wrapper .modal-body .form-control {
    background: #454b5f !important;
    border: 1px solid #5a6278 !important;
    color: #ffffff !important;
}

    .readymessages-modal-wrapper .modal-body .form-control::placeholder {
        color: #a8b2c1 !important;
    }

    .readymessages-modal-wrapper .modal-body .form-control:focus {
        color: #ffffff !important;
        border-color: #3db16b !important;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1) !important;
    }

/* ============================================
   BULKMESSAGES PAGE MODERNIZATION
   ============================================ */

/* BulkMessages Header Section */
.bulkmessages-header-section {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    padding: 25px 30px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bulkmessages-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

    .bulkmessages-title i {
        font-size: 32px;
    }

/* BulkMessages Tab Navigation */
.bulkmessages-tab-navigation {
    background: transparent;
    border-bottom: 2px solid #464852;
    padding: 0;
    box-shadow: none;
    position: relative;
    overflow-x: auto;
}

    .bulkmessages-tab-navigation::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #3db16b 50%, transparent 100%);
        opacity: 0.3;
    }

    .bulkmessages-tab-navigation .nav-tabs {
        border-bottom: none;
        display: flex;
        flex-wrap: nowrap;
        padding: 0;
        margin: 0;
        background: transparent;
    }

        .bulkmessages-tab-navigation .nav-tabs .nav-item {
            margin-bottom: 0;
            flex-shrink: 0;
        }

        .bulkmessages-tab-navigation .nav-tabs .nav-link {
            color: #a8b2c1;
            border: none;
            border-bottom: 3px solid transparent;
            padding: 15px 20px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            position: relative;
            background: transparent;
        }

            .bulkmessages-tab-navigation .nav-tabs .nav-link i {
                font-size: 18px;
                transition: transform 0.3s ease;
            }

            .bulkmessages-tab-navigation .nav-tabs .nav-link:hover {
                color: #e9ecef;
                background: rgba(61, 177, 107, 0.05);
                border-bottom-color: rgba(61, 177, 107, 0.5);
            }

                .bulkmessages-tab-navigation .nav-tabs .nav-link:hover i {
                    transform: scale(1.1);
                }

            .bulkmessages-tab-navigation .nav-tabs .nav-link.active {
                color: #3db16b;
                background: rgba(61, 177, 107, 0.1);
                border-bottom-color: #3db16b;
                font-weight: 600;
            }

                .bulkmessages-tab-navigation .nav-tabs .nav-link.active i {
                    color: #3db16b;
                    transform: scale(1.15);
                }

/* BulkMessages Content Card */
.bulkmessages-content-card {
    background: #3a3f51;
    border-radius: 0 0 12px 12px;
    padding: 25px;
    border: 1px solid #464852;
    border-top: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.bulkmessages-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.bulkmessages-page-title {
    color: #e9ecef;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .bulkmessages-page-title i {
        color: #3db16b;
    }

.bulkmessages-card-actions {
    display: flex;
    gap: 10px;
}

.bulkmessages-table-container {
    background: #454b5f;
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
}

.bulkmessages-form-container {
    background: #454b5f;
    border-radius: 8px;
    padding: 25px;
    border: 1px solid #5a6278;
}

.bulkmessages-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

    .bulkmessages-toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.bulkmessages-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #5a6278;
    transition: .4s;
    border-radius: 24px;
}

    .bulkmessages-toggle-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

.bulkmessages-toggle-switch input:checked + .bulkmessages-toggle-slider {
    background-color: #3db16b;
}

    .bulkmessages-toggle-switch input:checked + .bulkmessages-toggle-slider:before {
        transform: translateX(26px);
    }

.bulkmessages-poll-status-card {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.bulkmessages-survey-card {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.bulkmessages-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #5a6278;
}

.bulkmessages-section-title {
    color: #e9ecef;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.bulkmessages-scrollable-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

    .bulkmessages-scrollable-list::-webkit-scrollbar {
        width: 6px;
    }

    .bulkmessages-scrollable-list::-webkit-scrollbar-track {
        background: #3a3f51;
    }

    .bulkmessages-scrollable-list::-webkit-scrollbar-thumb {
        background: #5a6278;
        border-radius: 3px;
    }

        .bulkmessages-scrollable-list::-webkit-scrollbar-thumb:hover {
            background: #3db16b;
        }

/* ============================================
   POSTS PAGE MODERNIZATION
   ============================================ */

/* Posts Header Section */
.posts-header-section {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    padding: 25px 30px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

    .posts-header-section h2 {
        color: white;
        font-size: 28px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .posts-header-section .btn-date-picker {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 12px 20px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

        .posts-header-section .btn-date-picker:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

/* Posts SmartWizard */
.posts-smartwizard .sw-toolbar {
    background: #3a3f51;
    border-radius: 0 0 12px 12px;
    padding: 15px;
    border-top: 1px solid #464852;
}

.posts-smartwizard .sw-btn {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .posts-smartwizard .sw-btn:hover {
        background: #3db16b;
        border-color: #3db16b;
        color: white;
    }

.posts-smartwizard .sw-btn-next,
.posts-smartwizard .sw-btn-finish {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    color: white;
}

.posts-smartwizard .sw-btn-prev {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
}

.posts-smartwizard .sw-toolbar .sw-btn-group {
    display: flex;
    gap: 10px;
}

.posts-smartwizard .form-group label {
    color: #e9ecef;
    font-weight: 500;
    margin-bottom: 8px;
}

.posts-smartwizard .form-control {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
    border-radius: 8px;
    padding: 12px 15px;
}

    .posts-smartwizard .form-control::placeholder {
        color: #a8b2c1;
    }

    .posts-smartwizard .form-control:focus {
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
        color: #ffffff;
    }

.posts-smartwizard .btn-group .btn {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .posts-smartwizard .btn-group .btn.active {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-color: #3db16b;
        color: white;
    }

    .posts-smartwizard .btn-group .btn:hover {
        background: #50566a;
        border-color: #3db16b;
    }

.posts-smartwizard .custom-control-label {
    color: #e9ecef;
}

.posts-smartwizard .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #3db16b;
    border-color: #3db16b;
}

.posts-smartwizard .isotope .grid-item {
    background: #454b5f;
    border: 2px solid #5a6278;
    border-radius: 8px;
    padding: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .posts-smartwizard .isotope .grid-item:hover {
        border-color: #3db16b;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
    }

    .posts-smartwizard .isotope .grid-item.selected {
        border-color: #3db16b;
        background: rgba(61, 177, 107, 0.1);
    }

    .posts-smartwizard .isotope .grid-item img {
        border-radius: 8px;
    }

    .posts-smartwizard .isotope .grid-item i {
        color: #3db16b;
        font-size: 24px;
    }

.posts-smartwizard .isotope .send.buttons {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .posts-smartwizard .isotope .send.buttons.selected {
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
    }

/* Posts Wizard Container */
.posts-wizard-container .form-group {
    margin-bottom: 20px;
}

    .posts-wizard-container .form-group label {
        color: #e9ecef;
        font-weight: 500;
        margin-bottom: 8px;
    }

.posts-wizard-container .form-control {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
    border-radius: 8px;
    padding: 12px 15px;
}

.posts-wizard-container textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.posts-wizard-container input.form-control,
.posts-wizard-container select.form-control {
    height: auto;
}

.posts-wizard-container .form-control::placeholder {
    color: #a8b2c1;
}

.posts-wizard-container .form-control:focus {
    border-color: #3db16b;
    box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
    color: #ffffff;
}

.posts-wizard-container .input-group-text {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
    border-radius: 8px 0 0 8px;
}

.posts-wizard-container .input-group .form-control {
    border-radius: 0 8px 8px 0;
}

    .posts-wizard-container .input-group .form-control:focus {
        border-color: #3db16b;
    }

.posts-wizard-container .btn-group .btn {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .posts-wizard-container .btn-group .btn.active {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-color: #3db16b;
        color: white;
    }

    .posts-wizard-container .btn-group .btn:hover {
        background: #50566a;
        border-color: #3db16b;
    }

.posts-wizard-container .custom-control-label {
    color: #e9ecef;
}

.posts-wizard-container .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #3db16b;
    border-color: #3db16b;
}

/* ============================================
   CHAT MODERNIZATION
   ============================================ */

/* Chat Tab Navigation */
.chat-tab-navigation {
    background: transparent;
    border-bottom: 2px solid #464852;
    padding: 0;
    box-shadow: none;
    position: relative;
    overflow-x: auto;
}

    .chat-tab-navigation::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #3db16b 50%, transparent 100%);
        opacity: 0.3;
    }

    .chat-tab-navigation .nav-tabs {
        border-bottom: none;
        display: flex;
        flex-wrap: nowrap;
        padding: 0;
        margin: 0;
        background: transparent;
    }

    .chat-tab-navigation .nav-item {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .chat-tab-navigation .nav-link {
        color: #a8b2c1;
        border: none;
        border-bottom: 3px solid transparent;
        padding: 15px 20px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        position: relative;
        background: transparent;
    }

        .chat-tab-navigation .nav-link i {
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        .chat-tab-navigation .nav-link:hover {
            color: #e9ecef;
            background: rgba(61, 177, 107, 0.05);
            border-bottom-color: rgba(61, 177, 107, 0.5);
        }

            .chat-tab-navigation .nav-link:hover i {
                transform: scale(1.1);
            }

        .chat-tab-navigation .nav-link.active {
            color: #3db16b;
            background: rgba(61, 177, 107, 0.1);
            border-bottom-color: #3db16b;
            font-weight: 600;
        }

            .chat-tab-navigation .nav-link.active i {
                color: #3db16b;
                transform: scale(1.15);
            }

/* Modern Textarea */
.modern-textarea {
    background: #454b5f !important;
    border: 1px solid #5a6278 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 15px !important;
    resize: vertical;
    min-height: 120px;
    font-size: 14px;
    line-height: 1.6;
}

    .modern-textarea::placeholder {
        color: #a8b2c1 !important;
    }

    .modern-textarea:focus {
        border-color: #3db16b !important;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1) !important;
        color: #ffffff !important;
        outline: none;
    }

/* Modern Buttons */
.modern-buttons {
    display: flex;
    gap: 10px;
    padding: 15px;
    flex-wrap: wrap;
}

    .modern-buttons .button-row {
        display: flex;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    .modern-buttons .btn-action {
        background: #454b5f;
        border: 1px solid #5a6278;
        color: #e9ecef;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        justify-content: center;
    }

        .modern-buttons .btn-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

    .modern-buttons .btn-warning {
        background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
        border: none;
        color: white;
    }

    .modern-buttons .btn-info {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        border: none;
        color: white;
    }

    .modern-buttons .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border: none;
        color: white;
    }

    .modern-buttons .btn-success.btn-send {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border: none;
        color: white;
        font-weight: 600;
    }

/* Modern Search Input */
.modern-search-input {
    background: #454b5f !important;
    border: 1px solid #5a6278 !important;
    color: #e9ecef !important;
    border-radius: 8px !important;
    padding: 12px 40px 12px 15px !important;
    width: 100%;
    transition: all 0.3s ease;
}

    .modern-search-input::placeholder {
        color: #a8b2c1 !important;
    }

    .modern-search-input:focus {
        border-color: #3db16b !important;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1) !important;
        color: #ffffff !important;
    }

.search-input-wrapper {
    position: relative;
    margin-bottom: 15px;
}

    .search-input-wrapper .search-icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #a8b2c1;
        pointer-events: none;
        z-index: 1;
    }

/* Chat Tab Content */
.chat-tab-content {
    background: linear-gradient(135deg, #2c2f3a 0%, #3a3f51 100%) !important;
    border-radius: 0 0 12px 12px;
    padding: 20px !important;
    min-height: 200px;
    max-height: 300px;
    overflow-y: auto;
}

    .chat-tab-content::-webkit-scrollbar {
        width: 6px;
    }

    .chat-tab-content::-webkit-scrollbar-track {
        background: #2c2f3a;
        border-radius: 3px;
    }

    .chat-tab-content::-webkit-scrollbar-thumb {
        background: #3db16b;
        border-radius: 3px;
    }

        .chat-tab-content::-webkit-scrollbar-thumb:hover {
            background: #65d993;
        }

/* Modern Upload Area */
.modern-upload-area {
    background: #454b5f;
    border: 2px dashed #5a6278;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .modern-upload-area:hover {
        border-color: #3db16b;
        background: rgba(61, 177, 107, 0.05);
    }

/* Modern Media List */
.modern-media-list {
    background: #454b5f;
    border-radius: 12px;
    padding: 15px;
    max-height: 180px;
    overflow-y: auto;
}

    .modern-media-list::-webkit-scrollbar {
        width: 6px;
    }

    .modern-media-list::-webkit-scrollbar-track {
        background: #2c2f3a;
        border-radius: 3px;
    }

    .modern-media-list::-webkit-scrollbar-thumb {
        background: #3db16b;
        border-radius: 3px;
    }

/* Modern Filter Panel */
.modern-filter-panel {
    background: #454b5f;
    border-radius: 12px;
    padding: 15px;
    border: 1px solid #5a6278;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

    .modern-filter-panel h4 {
        color: #e9ecef;
        margin-bottom: 15px;
        font-weight: 600;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Form Buttons */
.form-buttons {
    display: flex;
    gap: 10px;
    padding: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .form-buttons .button-row {
        display: flex;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    .form-buttons .btn-floating {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 20px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

        .form-buttons .btn-floating:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 6px 16px rgba(0,0,0,0.3);
        }

/* ============================================
   MODERN TAB NAVIGATION (GENERAL)
   ============================================ */

.modern-tab-navigation {
    background: transparent;
    border-bottom: 2px solid #464852;
    padding: 0;
    box-shadow: none;
    position: relative;
    overflow-x: auto;
}

    .modern-tab-navigation::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #3db16b 50%, transparent 100%);
        opacity: 0.3;
    }

    .modern-tab-navigation .nav-tabs {
        border-bottom: none;
        display: flex;
        flex-wrap: nowrap;
        padding: 0;
        margin: 0;
        background: transparent;
    }

    .modern-tab-navigation .nav-item {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .modern-tab-navigation .nav-link {
        color: #a8b2c1;
        border: none;
        border-bottom: 3px solid transparent;
        padding: 15px 20px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        position: relative;
        background: transparent;
    }

        .modern-tab-navigation .nav-link i {
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        .modern-tab-navigation .nav-link:hover {
            color: #e9ecef;
            background: rgba(61, 177, 107, 0.05);
            border-bottom-color: rgba(61, 177, 107, 0.5);
        }

            .modern-tab-navigation .nav-link:hover i {
                transform: scale(1.1);
            }

        .modern-tab-navigation .nav-link.active {
            color: #3db16b;
            background: rgba(61, 177, 107, 0.1);
            border-bottom-color: #3db16b;
            font-weight: 600;
        }

            .modern-tab-navigation .nav-link.active i {
                color: #3db16b;
                transform: scale(1.15);
            }

    /* Tab Navigation Scrollbar */
    .modern-tab-navigation::-webkit-scrollbar,
    .reports-tab-navigation::-webkit-scrollbar,
    .channels-tab-navigation::-webkit-scrollbar,
    .bulkmessages-tab-navigation::-webkit-scrollbar,
    .chat-tab-navigation::-webkit-scrollbar {
        height: 4px;
    }

    .modern-tab-navigation::-webkit-scrollbar-track,
    .reports-tab-navigation::-webkit-scrollbar-track,
    .channels-tab-navigation::-webkit-scrollbar-track,
    .bulkmessages-tab-navigation::-webkit-scrollbar-track,
    .chat-tab-navigation::-webkit-scrollbar-track {
        background: #2c2f3a;
    }

    .modern-tab-navigation::-webkit-scrollbar-thumb,
    .reports-tab-navigation::-webkit-scrollbar-thumb,
    .channels-tab-navigation::-webkit-scrollbar-thumb,
    .bulkmessages-tab-navigation::-webkit-scrollbar-thumb,
    .chat-tab-navigation::-webkit-scrollbar-thumb {
        background: #3db16b;
        border-radius: 2px;
    }

        .modern-tab-navigation::-webkit-scrollbar-thumb:hover,
        .reports-tab-navigation::-webkit-scrollbar-thumb:hover,
        .channels-tab-navigation::-webkit-scrollbar-thumb:hover,
        .bulkmessages-tab-navigation::-webkit-scrollbar-thumb:hover,
        .chat-tab-navigation::-webkit-scrollbar-thumb:hover {
            background: #65d993;
        }

/* ============================================
   SIDEBAR GROUP MODERNIZATION
   ============================================ */

body.dark .layout .content .sidebar-group .sidebar {
    background: #3a3f51 !important;
}

/* ============================================
   MODAL INPUT STYLING
   ============================================ */

.modal[id^="edit_"] .modal-body .form-control,
.modal#newMessage .modal-body .form-control {
    color: #c6c7c8 !important;
}

/* ============================================
   NAVIGATION GRADIENT
   ============================================ */

.layout .navigation,
nav.navigation {
    background: linear-gradient(180deg, #3a3f51 0%, #1d1f29 100%) !important;
}

/* ============================================
   BULKMESSAGES SUB-PAGES ADDITIONAL STYLES
   ============================================ */

/* BulkMessages Toolbar Actions */
.bulkmessages-toolbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .bulkmessages-toolbar-actions .btn {
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        border: none;
    }

    .bulkmessages-toolbar-actions .btn-download {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
    }

        .bulkmessages-toolbar-actions .btn-download:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
        }

    .bulkmessages-toolbar-actions .btn-submit {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .bulkmessages-toolbar-actions .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        }

        .bulkmessages-toolbar-actions .btn-submit:disabled {
            background: #5a6278;
            color: #a8b2c1;
            cursor: not-allowed;
            opacity: 0.6;
        }

    .bulkmessages-toolbar-actions .btn-filter {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .bulkmessages-toolbar-actions .btn-filter:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        }

    .bulkmessages-toolbar-actions .btn-action-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .bulkmessages-toolbar-actions .btn-action-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        }

    .bulkmessages-toolbar-actions .btn-action-danger {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: white;
    }

        .bulkmessages-toolbar-actions .btn-action-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
        }

    .bulkmessages-toolbar-actions .btn-action-warning {
        background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
        color: white;
    }

        .bulkmessages-toolbar-actions .btn-action-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
        }

    .bulkmessages-toolbar-actions .btn-action-info {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
    }

        .bulkmessages-toolbar-actions .btn-action-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
        }

/* BulkMessages Form Section */
.bulkmessages-form-section {
    background: #454b5f;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #5a6278;
}

    .bulkmessages-form-section .form-group {
        margin-bottom: 20px;
    }

        .bulkmessages-form-section .form-group label {
            color: #e9ecef;
            font-weight: 500;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .bulkmessages-form-section .form-group label i {
                color: #3db16b;
            }

    .bulkmessages-form-section .form-control {
        background: #3a3f51;
        border: 1px solid #5a6278;
        color: #e9ecef;
        border-radius: 8px;
        padding: 12px 15px;
    }

        .bulkmessages-form-section .form-control:focus {
            border-color: #3db16b;
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
            color: #ffffff;
        }

        .bulkmessages-form-section .form-control option {
            background: #454b5f;
            color: #e9ecef;
        }

.bulkmessages-subtitle {
    color: #e9ecef;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #5a6278;
}

/* BulkMessages List Group */
.bulkmessages-list-group {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 500px;
    overflow-y: auto;
}

    .bulkmessages-list-group::-webkit-scrollbar {
        width: 6px;
    }

    .bulkmessages-list-group::-webkit-scrollbar-track {
        background: #3a3f51;
    }

    .bulkmessages-list-group::-webkit-scrollbar-thumb {
        background: #5a6278;
        border-radius: 3px;
    }

        .bulkmessages-list-group::-webkit-scrollbar-thumb:hover {
            background: #3db16b;
        }

    .bulkmessages-list-group li {
        background: #3a3f51;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 12px 15px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #e9ecef;
    }

        .bulkmessages-list-group li:hover {
            background: #454b5f;
            border-color: #3db16b;
            transform: translateX(5px);
        }

        .bulkmessages-list-group li.selected {
            background: rgba(61, 177, 107, 0.2);
            border-color: #3db16b;
        }

/* BulkMessages Survey List (PollList) */
.bulkmessages-survey-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.survey-item {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

    .survey-item:hover {
        border-color: #3db16b;
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.2);
        transform: translateY(-2px);
    }

.survey-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

    .survey-details h5 {
        color: #e9ecef;
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }

    .survey-details span {
        color: #a8b2c1;
        font-size: 14px;
    }

.survey-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

    .survey-actions .btn {
        padding: 8px 16px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
    }

    .survey-actions .btn-edit {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .survey-actions .btn-edit:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        }

    .survey-actions .btn-delete {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: white;
    }

        .survey-actions .btn-delete:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
        }

/* BulkMessages Pagination */
.bulkmessages-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

    .bulkmessages-pagination li {
        margin: 0;
    }

        .bulkmessages-pagination li a,
        .bulkmessages-pagination li span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            height: 40px;
            padding: 8px 12px;
            background: #454b5f;
            border: 1px solid #5a6278;
            border-radius: 8px;
            color: #e9ecef;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
        }

            .bulkmessages-pagination li a:hover {
                background: #50566a;
                border-color: #3db16b;
                color: #ffffff;
                transform: translateY(-2px);
            }

        .bulkmessages-pagination li.active a,
        .bulkmessages-pagination li.active span {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            border-color: #3db16b;
            color: white;
            font-weight: 600;
        }

        .bulkmessages-pagination li.disabled a,
        .bulkmessages-pagination li.disabled span {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

/* BulkMessages Survey Card (PollAdd) */
.survey-card {
    background: #454b5f;
    border: 2px solid #5a6278;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

    .survey-card:hover {
        border-color: #3db16b;
        box-shadow: 0 4px 16px rgba(61, 177, 107, 0.2);
    }

    .survey-card .editable-title {
        background: transparent;
        border: none;
        border-bottom: 2px solid #3db16b;
        color: #e9ecef;
        font-size: 20px;
        font-weight: 600;
        padding: 8px 0;
        width: 100%;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }

        .survey-card .editable-title:focus {
            outline: none;
            border-bottom-color: #65d993;
            color: #ffffff;
        }

        .survey-card .editable-title::placeholder {
            color: #a8b2c1;
        }

.choices-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.choice-container {
    background: #3a3f51;
    border: 1px solid #5a6278;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
}

    .choice-container:hover {
        border-color: #3db16b;
        background: #454b5f;
    }

    .choice-container input[type="text"] {
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 6px;
        padding: 10px 15px;
        color: #e9ecef;
        width: 100%;
        margin-bottom: 10px;
    }

        .choice-container input[type="text"]:focus {
            border-color: #3db16b;
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
            color: #ffffff;
            outline: none;
        }

.sub-response-container {
    margin-top: 15px;
    padding-left: 20px;
    border-left: 3px solid #3db16b;
}

.response-type {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

    .response-type select {
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 6px;
        padding: 8px 12px;
        color: #e9ecef;
        flex: 1;
    }

        .response-type select:focus {
            border-color: #3db16b;
            outline: none;
        }

.response-details {
    background: #3a3f51;
    border-radius: 6px;
    padding: 10px;
    margin-top: 10px;
}

.btn-custom {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .btn-custom:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
    }

    .btn-custom.btn-danger {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    }

        .btn-custom.btn-danger:hover {
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
        }

/* BulkMessages Filter Form (PollStatus) */
.bulkmessages-filter-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .bulkmessages-filter-form select,
    .bulkmessages-filter-form input {
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 10px 15px;
        color: #e9ecef;
        min-width: 150px;
    }

        .bulkmessages-filter-form select:focus,
        .bulkmessages-filter-form input:focus {
            border-color: #3db16b;
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
            color: #ffffff;
            outline: none;
        }

/* BulkMessages Surveys Container (PollStatus) */
.bulkmessages-surveys-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.bulkmessages-detail-card {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

    .bulkmessages-detail-card:hover {
        border-color: #3db16b;
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.2);
        transform: translateY(-2px);
    }

.bulkmessages-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #5a6278;
}

    .bulkmessages-detail-header h5 {
        color: #e9ecef;
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }

    .bulkmessages-detail-header span {
        color: #a8b2c1;
        font-size: 14px;
    }

.bulkmessages-detail-body {
    color: #e9ecef;
}

    .bulkmessages-detail-body p {
        margin-bottom: 10px;
        color: #c6c7c8;
    }

    .bulkmessages-detail-body strong {
        color: #e9ecef;
        font-weight: 600;
    }

/* BulkMessages Table Styles */
.bulkmessages-table-container {
    background: #454b5f;
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
}

    .bulkmessages-table-container table {
        width: 100%;
        border-collapse: collapse;
        background: transparent;
    }

        .bulkmessages-table-container table thead {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        }

            .bulkmessages-table-container table thead th {
                color: white;
                font-weight: 600;
                padding: 15px;
                border: none;
                text-align: left;
            }

        .bulkmessages-table-container table tbody tr {
            background: #3a3f51;
            border-bottom: 1px solid #464852;
            transition: all 0.3s ease;
        }

            .bulkmessages-table-container table tbody tr:hover {
                background: #454b5f;
                transform: translateX(5px);
            }

        .bulkmessages-table-container table tbody td {
            padding: 12px 15px;
            color: #e9ecef;
            border: none;
        }

.bulkmessages-link {
    color: #3db16b;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

    .bulkmessages-link:hover {
        color: #65d993;
        text-decoration: underline;
    }

.bulkmessages-table-container table tbody .btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
}

.bulkmessages-table-container table tbody .btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
}

    .bulkmessages-table-container table tbody .btn-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    }

/* BulkMessages DataTable Styles */
.bulkmessages-datatable-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 15px;
    background: #454b5f;
    border-radius: 8px;
}

.bulkmessages-datatable-search {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .bulkmessages-datatable-search input {
        background: #3a3f51;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 10px 15px;
        color: #e9ecef;
        min-width: 250px;
    }

        .bulkmessages-datatable-search input:focus {
            border-color: #3db16b;
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
            color: #ffffff;
            outline: none;
        }

.bulkmessages-datatable-info {
    color: #e9ecef;
    font-size: 14px;
}

.bulkmessages-datatable-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 15px;
    background: #454b5f;
    border-radius: 8px;
}

/* BulkMessages Poll Choices */
.bulkmessages-poll-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

    .bulkmessages-poll-choices .choice-item {
        background: #3a3f51;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .bulkmessages-poll-choices .choice-item:hover {
            border-color: #3db16b;
            background: #454b5f;
        }

        .bulkmessages-poll-choices .choice-item input {
            flex: 1;
            background: #454b5f;
            border: 1px solid #5a6278;
            border-radius: 6px;
            padding: 8px 12px;
            color: #e9ecef;
        }

            .bulkmessages-poll-choices .choice-item input:focus {
                border-color: #3db16b;
                outline: none;
            }

/* BulkMessages Empty State */
.bulkmessages-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #a8b2c1;
}

    .bulkmessages-empty-state i {
        font-size: 64px;
        color: #5a6278;
        margin-bottom: 20px;
    }

    .bulkmessages-empty-state h3 {
        color: #e9ecef;
        font-size: 24px;
        margin-bottom: 10px;
    }

    .bulkmessages-empty-state p {
        color: #a8b2c1;
        font-size: 16px;
    }

/* BulkMessages Grid */
.bulkmessages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.bulkmessages-card {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .bulkmessages-card:hover {
        border-color: #3db16b;
        box-shadow: 0 4px 16px rgba(61, 177, 107, 0.2);
        transform: translateY(-2px);
    }

.bulkmessages-card-header {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .bulkmessages-card-header i {
        font-size: 24px;
        color: white;
    }

    .bulkmessages-card-header h5 {
        color: white;
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        flex: 1;
    }

.bulkmessages-card-body {
    padding: 20px;
}

.bulkmessages-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .bulkmessages-card-actions .btn {
        flex: 1;
        min-width: 120px;
        padding: 10px 15px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .bulkmessages-card-actions .btn-edit {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .bulkmessages-card-actions .btn-edit:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        }

    .bulkmessages-card-actions .btn-remove {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: white;
    }

        .bulkmessages-card-actions .btn-remove:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
        }

/* Responsive Design */
@media (max-width: 1200px) {
    .bulkmessages-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .bulkmessages-toolbar {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .bulkmessages-toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }

        .bulkmessages-toolbar-actions .btn {
            flex: 1;
            min-width: 0;
        }

    .bulkmessages-grid {
        grid-template-columns: 1fr;
    }

    .bulkmessages-filter-form {
        flex-direction: column;
        width: 100%;
    }

        .bulkmessages-filter-form select,
        .bulkmessages-filter-form input {
            width: 100%;
        }

    .bulkmessages-datatable-header,
    .bulkmessages-datatable-footer {
        flex-direction: column;
        gap: 15px;
    }

    .bulkmessages-datatable-search {
        width: 100%;
    }

        .bulkmessages-datatable-search input {
            width: 100%;
        }
}

/* ============================================
   BULKMESSAGES ADDITIONAL SUB-PAGE STYLES
   ============================================ */

/* Back Button */
.btn-back {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .btn-back:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
        color: white;
        text-decoration: none;
    }

    .btn-back i {
        font-size: 16px;
    }

/* Card Survey Styles (PollEdit) */
.card.survey-card {
    background: #454b5f;
    border: 2px solid #5a6278;
    border-radius: 12px;
    padding: 0;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

    .card.survey-card:hover {
        border-color: #3db16b;
        box-shadow: 0 4px 16px rgba(61, 177, 107, 0.2);
    }

    .card.survey-card .card-body {
        padding: 25px;
        background: transparent;
    }

    .card.survey-card .card-title {
        color: #e9ecef;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #5a6278;
    }

/* Form Control Small */
.form-control-sm {
    background: #3a3f51;
    border: 1px solid #5a6278;
    border-radius: 6px;
    padding: 8px 12px;
    color: #e9ecef;
    font-size: 14px;
}

    .form-control-sm:focus {
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
        color: #ffffff;
        outline: none;
        background: #454b5f;
    }

/* Outline Buttons */
.btn-outline-primary {
    background: transparent;
    border: 2px solid #3db16b;
    color: #3db16b;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .btn-outline-primary:hover {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-color: #3db16b;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
    }

.btn-outline-danger {
    background: transparent;
    border: 2px solid #e74c3c;
    color: #e74c3c;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .btn-outline-danger:hover {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        border-color: #e74c3c;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    }

.btn-outline-secondary {
    background: transparent;
    border: 2px solid #6c757d;
    color: #6c757d;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .btn-outline-secondary:hover {
        background: #6c757d;
        border-color: #6c757d;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
    }

/* Choice Buttons */
.add-choice,
.delete-choice {
    margin-top: 10px;
    margin-right: 5px;
}

    .add-choice i,
    .delete-choice i {
        margin-right: 5px;
    }

/* Number List Add Specific Styles */
.bulkmessages-form-section .form-label {
    color: #e9ecef;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.bulkmessages-form-section .form-control {
    background: #3a3f51;
    border: 1px solid #5a6278;
    color: #e9ecef;
    border-radius: 8px;
    padding: 12px 15px;
    transition: all 0.3s ease;
}

    .bulkmessages-form-section .form-control:focus {
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
        color: #ffffff;
        background: #454b5f;
        outline: none;
    }

    .bulkmessages-form-section .form-control:disabled {
        background: #2c2f3a;
        border-color: #464852;
        color: #a8b2c1;
        cursor: not-allowed;
    }

.bulkmessages-form-section datalist {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 8px;
}

    .bulkmessages-form-section datalist option {
        background: #454b5f;
        color: #e9ecef;
        padding: 10px;
    }

/* Work Detail Specific Styles */
.bulkmessages-detail-card .form-group {
    margin-bottom: 20px;
}

    .bulkmessages-detail-card .form-group label {
        color: #a8b2c1;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 8px;
        display: block;
    }

    .bulkmessages-detail-card .form-group input[type="text"],
    .bulkmessages-detail-card .form-group textarea {
        background: #3a3f51;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 12px 15px;
        color: #e9ecef;
        width: 100%;
    }

        .bulkmessages-detail-card .form-group input[type="text"]:disabled,
        .bulkmessages-detail-card .form-group textarea:disabled {
            background: #2c2f3a;
            border-color: #464852;
            color: #a8b2c1;
            cursor: not-allowed;
        }

.bulkmessages-detail-header i {
    color: #3db16b;
    font-size: 20px;
    margin-right: 10px;
}

/* Poll Edit Container */
#edit-survey-container {
    min-height: 400px;
}

    #edit-survey-container .card {
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 12px;
        margin-bottom: 20px;
    }

        #edit-survey-container .card .form-group {
            margin-bottom: 15px;
        }

            #edit-survey-container .card .form-group label {
                color: #e9ecef;
                font-weight: 500;
                margin-bottom: 8px;
                display: block;
            }

            #edit-survey-container .card .form-group input[type="text"],
            #edit-survey-container .card .form-group input[type="hidden"] {
                background: #3a3f51;
                border: 1px solid #5a6278;
                border-radius: 8px;
                padding: 10px 15px;
                color: #e9ecef;
                width: 100%;
            }

                #edit-survey-container .card .form-group input[type="text"]:focus {
                    border-color: #3db16b;
                    box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
                    color: #ffffff;
                    background: #454b5f;
                    outline: none;
                }

/* Choice ID Hidden Input */
.choice-id {
    display: none;
}

/* Sub Response Container in Edit Mode */
#edit-survey-container .sub-response-container {
    margin-top: 15px;
    padding-left: 20px;
    border-left: 3px solid #3db16b;
    padding-top: 10px;
}

/* Poll Status Modal Styles */
#choiceModal .modal-content {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
}

#choiceModal .modal-header {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 20px;
}

#choiceModal .modal-title {
    color: white;
    font-weight: 600;
    font-size: 20px;
}

#choiceModal .modal-header .close {
    color: white;
    opacity: 0.9;
    font-size: 28px;
    font-weight: 300;
    text-shadow: none;
}

    #choiceModal .modal-header .close:hover {
        opacity: 1;
        color: white;
    }

#choiceModal .modal-body {
    background: #454b5f;
    color: #e9ecef;
    padding: 25px;
}

    #choiceModal .modal-body h6 {
        color: #e9ecef;
        font-weight: 600;
        margin-bottom: 15px;
    }

    #choiceModal .modal-body label {
        color: #e9ecef;
        font-weight: 500;
        margin-left: 8px;
    }

    #choiceModal .modal-body input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #3db16b;
    }

    #choiceModal .modal-body .list-group {
        max-height: 300px;
        overflow-y: auto;
        margin-top: 15px;
        background: #3a3f51;
        border-radius: 8px;
        padding: 10px;
    }

        #choiceModal .modal-body .list-group::-webkit-scrollbar {
            width: 6px;
        }

        #choiceModal .modal-body .list-group::-webkit-scrollbar-track {
            background: #2c2f3a;
        }

        #choiceModal .modal-body .list-group::-webkit-scrollbar-thumb {
            background: #3db16b;
            border-radius: 3px;
        }

    #choiceModal .modal-body .list-group-item {
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 6px;
        padding: 10px 15px;
        margin-bottom: 8px;
        color: #e9ecef;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        #choiceModal .modal-body .list-group-item:hover {
            background: #50566a;
            border-color: #3db16b;
        }

    #choiceModal .modal-body input[type="text"] {
        background: #3a3f51;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 12px 15px;
        color: #e9ecef;
        width: 100%;
        margin-top: 15px;
    }

        #choiceModal .modal-body input[type="text"]:focus {
            border-color: #3db16b;
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
            color: #ffffff;
            background: #454b5f;
            outline: none;
        }

        #choiceModal .modal-body input[type="text"]::placeholder {
            color: #a8b2c1;
        }

    #choiceModal .modal-body .btn {
        margin-top: 15px;
        margin-right: 10px;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
    }

    #choiceModal .modal-body .btn-secondary {
        background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
        color: white;
    }

        #choiceModal .modal-body .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
        }

    #choiceModal .modal-body .btn-warning {
        background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
        color: white;
    }

        #choiceModal .modal-body .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
        }

/* Poll Status Survey Cards */
.bulkmessages-surveys-container .bulkmessages-detail-card {
    margin-bottom: 20px;
}

    .bulkmessages-surveys-container .bulkmessages-detail-card .bulkmessages-detail-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .bulkmessages-surveys-container .bulkmessages-detail-card .bulkmessages-detail-header i {
            color: #3db16b;
            font-size: 24px;
        }

    .bulkmessages-surveys-container .bulkmessages-detail-card .bulkmessages-detail-body p {
        margin-bottom: 12px;
        line-height: 1.6;
    }

    .bulkmessages-surveys-container .bulkmessages-detail-card .bulkmessages-detail-body strong {
        color: #3db16b;
        font-weight: 600;
    }

/* Account Group Specific Styles */
.bulkmessages-form-section .row {
    margin: 0;
}

.bulkmessages-form-section .col-4 {
    padding: 0 15px;
}

.bulkmessages-form-section h6.bulkmessages-subtitle {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    color: white;
    padding: 12px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    text-align: center;
    font-weight: 600;
}

/* DataTable Custom Styles for WorkDetail */
.bulkmessages-table-container table#table_id {
    width: 100%;
}

    .bulkmessages-table-container table#table_id thead th {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
        font-weight: 600;
        padding: 15px;
        border: none;
        text-align: left;
    }

    .bulkmessages-table-container table#table_id tbody tr {
        background: #3a3f51;
        border-bottom: 1px solid #464852;
        transition: all 0.3s ease;
    }

        .bulkmessages-table-container table#table_id tbody tr:hover {
            background: #454b5f;
            transform: translateX(5px);
        }

    .bulkmessages-table-container table#table_id tbody td {
        padding: 12px 15px;
        color: #e9ecef;
        border: none;
    }

/* DataTable Wrapper Styles */
.dataTables_wrapper {
    color: #e9ecef;
}

    .dataTables_wrapper .dataTables_filter input {
        background: #3a3f51;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 10px 15px;
        color: #e9ecef;
        margin-left: 10px;
    }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: #3db16b;
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
            color: #ffffff;
            background: #454b5f;
            outline: none;
        }

    .dataTables_wrapper .dataTables_length select {
        background: #3a3f51;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 8px 12px;
        color: #e9ecef;
        margin: 0 10px;
    }

        .dataTables_wrapper .dataTables_length select:focus {
            border-color: #3db16b;
            outline: none;
        }

    .dataTables_wrapper .dataTables_info {
        color: #e9ecef;
        padding: 10px 0;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: #454b5f;
        border: 1px solid #5a6278;
        color: #e9ecef;
        padding: 8px 12px;
        margin: 0 2px;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #50566a;
            border-color: #3db16b;
            color: white;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            border-color: #3db16b;
            color: white;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

/* Margin Utilities */
.mt-3 {
    margin-top: 1rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

/* Additional Button Styles */
.btn-sm {
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 6px;
}

.btn-warning.btn-sm {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    border: none;
    color: white;
}

    .btn-warning.btn-sm:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
    }

.btn-danger.btn-sm {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: none;
    color: white;
}

    .btn-danger.btn-sm:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    }

/* Delete Poll Button */
.delete-poll {
    cursor: pointer;
}

/* Edit Survey Button */
.edit-survey-btn {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .edit-survey-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
    }

/* Responsive Adjustments for Sub-pages */
@media (max-width: 768px) {
    .bulkmessages-form-section .col-4 {
        width: 100%;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .bulkmessages-detail-card {
        margin-bottom: 20px;
    }

    #edit-survey-container .card {
        padding: 15px;
    }

    .btn-back {
        width: 100%;
        justify-content: center;
    }

    .bulkmessages-toolbar-actions {
        flex-direction: column;
        width: 100%;
    }

        .bulkmessages-toolbar-actions .btn {
            width: 100%;
        }
}

/* ============================================
   MEDIALIST PAGE MODERNIZATION
   ============================================ */

/* Media Tab Pane */
.media-tab-pane {
    padding: 20px 0;
}

.media-row {
    margin: 0;
}

/* Modern Sidebar */
.modern-sidebar {
    background: #3a3f51;
    border-radius: 12px;
    border: 1px solid #464852;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    padding: 20px;
    border-bottom: 2px solid #464852;
}

    .sidebar-header h5 {
        color: white;
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 15px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .sidebar-header h5 i {
            font-size: 20px;
        }

    .sidebar-header .btn {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 8px 15px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.3s ease;
        font-size: 13px;
    }

        .sidebar-header .btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

.sidebar-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

    .sidebar-content::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-content::-webkit-scrollbar-track {
        background: #2c2f3a;
    }

    .sidebar-content::-webkit-scrollbar-thumb {
        background: #3db16b;
        border-radius: 3px;
    }

        .sidebar-content::-webkit-scrollbar-thumb:hover {
            background: #65d993;
        }

/* Modern Folder List */
.modern-folder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.folder-item {
    margin-bottom: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .folder-item.empty {
        padding: 15px;
        text-align: center;
        color: #a8b2c1;
        font-style: italic;
    }

.folder-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .folder-item-content:hover {
        background: #50566a;
        border-color: #3db16b;
        transform: translateX(5px);
    }

.folder-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e9ecef;
    text-decoration: none;
    flex: 1;
    transition: all 0.3s ease;
}

    .folder-link:hover {
        color: #3db16b;
        text-decoration: none;
    }

    .folder-link i {
        font-size: 18px;
        color: #3db16b;
    }

.folder-name {
    font-weight: 500;
    font-size: 14px;
}

.folder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.folder-toggle {
    background: transparent;
    border: none;
    color: #a8b2c1;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .folder-toggle:hover {
        background: rgba(61, 177, 107, 0.1);
        color: #3db16b;
    }

    .folder-toggle i {
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .folder-toggle.active i {
        transform: rotate(90deg);
    }

.folder-delete {
    color: #e74c3c;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .folder-delete:hover {
        background: rgba(231, 76, 60, 0.1);
        color: #c0392b;
        text-decoration: none;
        transform: scale(1.1);
    }

    .folder-delete i {
        font-size: 14px;
    }

/* Subfolder List */
.subfolder-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 20px;
    border-left: 2px solid #3db16b;
    padding-left: 15px;
    transition: all 0.3s ease;
}

.subfolder-list-hidden {
    display: none;
}

.subfolder-item {
    margin-bottom: 6px;
}

    .subfolder-item .folder-item-content {
        background: #3a3f51;
        padding: 10px 12px;
    }

    .subfolder-item .folder-link i {
        font-size: 16px;
        color: #65d993;
    }

/* Upload Section */
.upload-section {
    margin-bottom: 20px;
}

    .upload-section .btn-upload {
        margin-bottom: 10px;
        padding: 12px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: none;
    }

        .upload-section .btn-upload i {
            font-size: 16px;
        }

    .upload-section .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .upload-section .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        }

    .upload-section .btn-success {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .upload-section .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        }

.file-input-hidden {
    display: none;
}

/* Folder Actions Section */
.folder-actions-section {
    margin-bottom: 20px;
}

    .folder-actions-section .btn {
        padding: 12px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: none;
    }

    .folder-actions-section .btn-warning {
        background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
        color: white;
    }

        .folder-actions-section .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
        }

/* Subfolders Section */
.subfolders-section {
    margin-bottom: 20px;
}

    .subfolders-section .section-title {
        color: #e9ecef;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid #5a6278;
    }

        .subfolders-section .section-title i {
            color: #3db16b;
        }

/* Back Section */
.back-section {
    margin-top: 20px;
}

    .back-section .btn {
        margin-bottom: 10px;
        padding: 12px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
    }

    .back-section .btn-secondary {
        background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
        color: white;
        border: none;
    }

        .back-section .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
            color: white;
            text-decoration: none;
        }

    .back-section .btn-outline-secondary {
        background: transparent;
        border: 2px solid #6c757d;
        color: #6c757d;
    }

        .back-section .btn-outline-secondary:hover {
            background: #6c757d;
            color: white;
            text-decoration: none;
        }

/* HR Line Dashed */
.hr-line-dashed {
    border-top: 1px dashed #5a6278;
    margin: 20px 0;
}

/* Media Content Area */
.media-content-area {
    background: #3a3f51;
    border-radius: 12px;
    border: 1px solid #464852;
    padding: 25px;
    min-height: 600px;
}

.media-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #464852;
}

.toolbar-left {
    flex: 1;
}

    .toolbar-left .page-title {
        color: #e9ecef;
        font-size: 24px;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .toolbar-left .page-title i {
            color: #3db16b;
            font-size: 28px;
        }

.toolbar-right {
    display: flex;
    align-items: center;
}

.search-box {
    position: relative;
    min-width: 300px;
}

    .search-box input {
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 12px 40px 12px 15px;
        color: #e9ecef;
        width: 100%;
        transition: all 0.3s ease;
    }

        .search-box input:focus {
            border-color: #3db16b;
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
            color: #ffffff;
            background: #50566a;
            outline: none;
        }

        .search-box input::placeholder {
            color: #a8b2c1;
        }

    .search-box i {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #a8b2c1;
        pointer-events: none;
    }

/* Media Grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.media-card {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .media-card:hover {
        border-color: #3db16b;
        box-shadow: 0 8px 24px rgba(61, 177, 107, 0.3);
        transform: translateY(-5px);
    }

.media-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.media-link {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.media-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 75%;
    background: #2c2f3a;
    overflow: hidden;
}

    .media-thumbnail img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.media-card:hover .media-thumbnail img {
    transform: scale(1.1);
}

.media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.media-card:hover .media-overlay {
    opacity: 1;
}

.media-overlay i {
    color: white;
    font-size: 48px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.media-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(5px);
}

.video-badge {
    background: rgba(231, 76, 60, 0.9);
}

.image-badge {
    background: rgba(61, 177, 107, 0.9);
}

.media-info {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #3a3f51;
}

.media-name {
    color: #e9ecef;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    color: #a8b2c1;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .action-btn:hover {
        background: rgba(231, 76, 60, 0.1);
        color: #e74c3c;
        text-decoration: none;
        transform: scale(1.1);
    }

.delete-btn i {
    font-size: 16px;
}

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #a8b2c1;
}

    .empty-state i {
        font-size: 64px;
        color: #5a6278;
        margin-bottom: 20px;
        display: block;
    }

    .empty-state p {
        color: #e9ecef;
        font-size: 18px;
        margin: 0;
    }

/* Media Modal Styles */
.media-modal-divider {
    height: 1px;
    background: #5a6278;
    margin: 20px 0;
}

.media-modal-channels-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

    .media-modal-channels-list::-webkit-scrollbar {
        width: 6px;
    }

    .media-modal-channels-list::-webkit-scrollbar-track {
        background: #3a3f51;
    }

    .media-modal-channels-list::-webkit-scrollbar-thumb {
        background: #3db16b;
        border-radius: 3px;
    }

        .media-modal-channels-list::-webkit-scrollbar-thumb:hover {
            background: #65d993;
        }

/* Responsive Design */
@media (max-width: 1200px) {
    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .modern-sidebar {
        margin-bottom: 20px;
    }

    .media-content-area {
        padding: 15px;
    }

    .media-toolbar {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .toolbar-right {
        width: 100%;
    }

    .search-box {
        width: 100%;
        min-width: 0;
    }

    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .sidebar-content {
        padding: 15px;
    }

    .upload-section .btn-upload,
    .folder-actions-section .btn,
    .back-section .btn {
        font-size: 13px;
        padding: 10px;
    }
}

/* Account Type Badge */
.account-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 5px;
    background: rgba(61, 177, 107, 0.2);
    color: #3db16b;
    border: 1px solid rgba(61, 177, 107, 0.3);
}

/* Custom Switch Styles for Media Modal */
.media-modal-channels-list .custom-control {
    margin-bottom: 12px;
    padding: 10px;
    background: #454b5f;
    border-radius: 8px;
    border: 1px solid #5a6278;
    transition: all 0.3s ease;
}

    .media-modal-channels-list .custom-control:hover {
        background: #50566a;
        border-color: #3db16b;
    }

.media-modal-channels-list .custom-control-label {
    color: #e9ecef;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .media-modal-channels-list .custom-control-label b {
        color: #ffffff;
        font-weight: 600;
    }

.media-modal-channels-list .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #3db16b;
    border-color: #3db16b;
}

.media-modal-channels-list .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.25);
}

.media-modal-channels-list .custom-control-label i {
    font-size: 18px;
    color: #3db16b;
}

/* Text Muted */
.text-muted {
    color: #a8b2c1 !important;
}

/* ============================================
   POSTS PAGE COMPREHENSIVE STYLES (ADDITIONAL)
   ============================================ */

/* Posts Title */
.posts-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

    .posts-title i {
        font-size: 32px;
        opacity: 0.9;
    }

/* Posts Wizard Container */
.posts-wizard-container {
    background: #3a3f51;
    border-radius: 0 0 12px 12px;
    padding: 25px;
    border: 1px solid #464852;
    border-top: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    min-height: 500px;
}

    .posts-wizard-container .sw-container {
        background: transparent;
    }

    .posts-wizard-container .sw-theme-arrows > ul.step-anchor {
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 25px;
    }

        .posts-wizard-container .sw-theme-arrows > ul.step-anchor > li {
            margin-right: 20px;
        }

            .posts-wizard-container .sw-theme-arrows > ul.step-anchor > li > a {
                color: #a8b2c1;
                background: transparent;
                border: none;
                padding: 12px 20px;
                border-radius: 8px;
                transition: all 0.3s ease;
            }

                .posts-wizard-container .sw-theme-arrows > ul.step-anchor > li > a:hover {
                    color: white;
                    background: rgba(61, 177, 107, 0.1);
                }

            .posts-wizard-container .sw-theme-arrows > ul.step-anchor > li.active > a {
                color: white;
                background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
                box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
            }

            .posts-wizard-container .sw-theme-arrows > ul.step-anchor > li.done > a {
                color: #3db16b;
                background: rgba(61, 177, 107, 0.1);
            }

                .posts-wizard-container .sw-theme-arrows > ul.step-anchor > li.done > a::after {
                    border-left-color: rgba(61, 177, 107, 0.1);
                }

            .posts-wizard-container .sw-theme-arrows > ul.step-anchor > li.active > a::after {
                border-left-color: #3db16b;
            }

    /* Posts Form Groups */
    .posts-wizard-container .form-group {
        margin-bottom: 25px;
    }

        .posts-wizard-container .form-group label {
            color: #e9ecef;
            font-weight: 500;
            margin-bottom: 10px;
            display: block;
            font-size: 14px;
        }

    .posts-wizard-container textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }

    .posts-wizard-container .input-group {
        margin-bottom: 15px;
    }

    .posts-wizard-container .input-group-text {
        background: #454b5f;
        border: 1px solid #5a6278;
        color: #a8b2c1;
        border-right: none;
    }

        .posts-wizard-container .input-group-text.transparent {
            background: transparent;
            border-color: #5a6278;
        }

    .posts-wizard-container .input-group .form-control {
        border-left: none;
    }

        .posts-wizard-container .input-group .form-control:focus + .input-group-text,
        .posts-wizard-container .input-group .form-control:focus ~ .input-group-text {
            border-color: #3db16b;
        }

/* Post Time Schedule */
.post-time-schedule {
    background: #454b5f;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #5a6278;
    margin-top: 15px;
}

    .post-time-schedule label {
        color: #e9ecef;
        font-weight: 500;
        margin-bottom: 15px;
        display: block;
    }

    .post-time-schedule .row {
        margin: 0;
    }

    .post-time-schedule .col {
        padding: 0 10px;
    }

    .post-time-schedule .input-group {
        margin-bottom: 0;
    }

/* Isotope Filters */
.posts-wizard-container .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0;
    list-style: none;
}

    .posts-wizard-container .filters li {
        margin: 0;
    }

    .posts-wizard-container .filters .btn {
        background: #454b5f;
        border: 1px solid #5a6278;
        color: #e9ecef;
        padding: 8px 16px;
        border-radius: 8px;
        transition: all 0.3s ease;
        font-size: 13px;
    }

        .posts-wizard-container .filters .btn:hover,
        .posts-wizard-container .filters .btn.active {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            border-color: #3db16b;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
        }

.posts-wizard-container .send.buttons {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
    cursor: pointer;
}

    .posts-wizard-container .send.buttons:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(61, 177, 107, 0.4);
    }

    .posts-wizard-container .send.buttons:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Isotope Grid */
.posts-wizard-container .isotope {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

    .posts-wizard-container .isotope .grid-item {
        background: #454b5f;
        border: 2px solid #5a6278;
        border-radius: 8px;
        padding: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 125px;
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .posts-wizard-container .isotope .grid-item:hover {
            border-color: #3db16b;
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(61, 177, 107, 0.3);
        }

        .posts-wizard-container .isotope .grid-item.selected {
            border-color: #3db16b;
            background: rgba(61, 177, 107, 0.2);
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.3);
        }

        .posts-wizard-container .isotope .grid-item .imgs {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }

        .posts-wizard-container .isotope .grid-item i {
            position: absolute;
            top: 8px;
            right: 8px;
            color: #3db16b;
            font-size: 20px;
            background: rgba(0, 0, 0, 0.5);
            padding: 5px;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .posts-wizard-container .isotope .grid-item.selected i {
            color: white;
            background: #3db16b;
        }

/* Custom Checkbox Styling */
.posts-wizard-container .custom-control {
    padding-left: 2rem;
    margin-bottom: 15px;
}

.posts-wizard-container .custom-control-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
}

.posts-wizard-container .custom-control-label {
    color: #e9ecef;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .posts-wizard-container .custom-control-label::before {
        background-color: #454b5f;
        border: 2px solid #5a6278;
        border-radius: 4px;
        width: 1.25rem;
        height: 1.25rem;
        top: 0.125rem;
        left: -2rem;
    }

.posts-wizard-container .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #3db16b;
    border-color: #3db16b;
}

.posts-wizard-container .custom-control-label i {
    color: #3db16b;
    font-size: 16px;
}

.posts-wizard-container .custom-control-input:checked ~ .custom-control-label i {
    color: #3db16b;
}

/* Post Preview Section */
.posts-wizard-container .post-preview {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
    padding: 25px;
    margin-top: 20px;
}

    .posts-wizard-container .post-preview .post-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #5a6278;
    }

        .posts-wizard-container .post-preview .post-header img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid #3db16b;
        }

        .posts-wizard-container .post-preview .post-header h4 {
            color: #e9ecef;
            margin: 0;
            font-size: 18px;
        }

        .posts-wizard-container .post-preview .post-header a {
            color: #a8b2c1;
            font-size: 14px;
            text-decoration: none;
        }

    .posts-wizard-container .post-preview .post-body {
        color: #e9ecef;
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

        .posts-wizard-container .post-preview .post-body img {
            max-width: 100%;
            border-radius: 8px;
            margin-top: 15px;
        }

    .posts-wizard-container .post-preview .post-footer {
        border-top: 1px solid #5a6278;
        padding-top: 15px;
    }

        .posts-wizard-container .post-preview .post-footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 20px;
        }

            .posts-wizard-container .post-preview .post-footer ul li a {
                color: #a8b2c1;
                text-decoration: none;
                transition: color 0.3s ease;
            }

                .posts-wizard-container .post-preview .post-footer ul li a:hover {
                    color: #3db16b;
                }

/* Border Bottom Gray */
.border-bottom.border-gray {
    border-bottom: 1px solid #5a6278 !important;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #e9ecef;
}

/* Datepicker and Clockpicker Styling */
.datepicker-input,
.posts-wizard-container .clockpicker input {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
    border-radius: 8px;
    padding: 12px 15px;
}

    .datepicker-input:focus,
    .posts-wizard-container .clockpicker input:focus {
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
        color: #ffffff;
    }

    .datepicker-input::placeholder,
    .posts-wizard-container .clockpicker input::placeholder {
        color: #a8b2c1;
    }

/* Select Styling */
.posts-wizard-container select.form-control {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
    border-radius: 8px;
    padding: 12px 15px;
    cursor: pointer;
}

    .posts-wizard-container select.form-control:focus {
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
        color: #ffffff;
    }

    .posts-wizard-container select.form-control option {
        background: #454b5f;
        color: #e9ecef;
    }

/* Posts Responsive */
@media (max-width: 768px) {
    .posts-header-section {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
        padding: 20px;
    }

    .posts-title {
        font-size: 24px;
    }

    .posts-wizard-container {
        padding: 15px;
    }

        .posts-wizard-container .sw-theme-arrows > ul.step-anchor {
            flex-direction: column;
            gap: 10px;
        }

            .posts-wizard-container .sw-theme-arrows > ul.step-anchor > li {
                margin-right: 0;
                width: 100%;
            }

        .posts-wizard-container .isotope .grid-item {
            width: 100px;
            height: 100px;
        }

    .post-time-schedule .row {
        flex-direction: column;
    }

    .post-time-schedule .col {
        padding: 0;
        margin-bottom: 15px;
    }
}

/* FullCalendar Dark Theme Overrides for Posts */
.posts-calendar-container .fc {
    background: #3a3f51;
    border: 1px solid #464852;
    border-radius: 12px;
    padding: 20px;
}

.posts-calendar-container .fc-header-toolbar {
    background: #454b5f;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #5a6278;
}

.posts-calendar-container .fc-button {
    background: #454b5f;
    border: 1px solid #5a6278;
    color: #e9ecef;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .posts-calendar-container .fc-button:hover {
        background: #3db16b;
        border-color: #3db16b;
        color: white;
    }

.posts-calendar-container .fc-button-primary:not(:disabled):active,
.posts-calendar-container .fc-button-primary:not(:disabled).fc-button-active {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-color: #3db16b;
    color: white;
}

.posts-calendar-container .fc-toolbar-title {
    color: #e9ecef;
    font-weight: 600;
    font-size: 24px;
}

.posts-calendar-container .fc-daygrid-day {
    background: #454b5f;
    border-color: #5a6278;
}

    .posts-calendar-container .fc-daygrid-day:hover {
        background: #50566a;
    }

.posts-calendar-container .fc-daygrid-day-number {
    color: #e9ecef;
}

.posts-calendar-container .fc-day-today {
    background: rgba(61, 177, 107, 0.1) !important;
}

    .posts-calendar-container .fc-day-today .fc-daygrid-day-number {
        color: #3db16b;
        font-weight: 600;
    }

.posts-calendar-container .fc-event {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
}

.posts-calendar-container .fc-event-title {
    color: white;
    font-weight: 500;
}

.posts-calendar-container .fc-col-header-cell {
    background: #3a3f51;
    border-color: #5a6278;
}

.posts-calendar-container .fc-col-header-cell-cushion {
    color: #a8b2c1;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
}

/* Panel Default Styling for Post Preview */
.posts-wizard-container .panel-default {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.posts-wizard-container .panel-body {
    padding: 25px;
    background: #454b5f;
    border-radius: 12px;
}

.posts-wizard-container .post-heading {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #5a6278;
}

    .posts-wizard-container .post-heading .media {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .posts-wizard-container .post-heading .media-body {
        flex: 1;
    }

    .posts-wizard-container .post-heading .media-heading {
        color: #e9ecef;
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 5px 0;
    }

    .posts-wizard-container .post-heading .anchor-username {
        text-decoration: none;
        color: #3db16b;
    }

        .posts-wizard-container .post-heading .anchor-username:hover {
            color: #65d993;
        }

    .posts-wizard-container .post-heading .anchor-time {
        color: #a8b2c1;
        font-size: 13px;
        text-decoration: none;
    }

        .posts-wizard-container .post-heading .anchor-time:hover {
            color: #e9ecef;
        }

.posts-wizard-container .post-body {
    color: #e9ecef;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

    .posts-wizard-container .post-body p {
        margin: 0;
        color: #e9ecef;
    }

    .posts-wizard-container .post-body img {
        max-width: 100%;
        border-radius: 8px;
        margin-top: 15px;
    }

.posts-wizard-container .post-footer {
    border-top: 1px solid #5a6278;
    padding-top: 15px;
    margin-top: 20px;
}

    .posts-wizard-container .post-footer hr {
        border-color: #5a6278;
        margin-bottom: 15px;
    }

.posts-wizard-container .post-footer-option ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

    .posts-wizard-container .post-footer-option ul li {
        margin: 0;
    }

        .posts-wizard-container .post-footer-option ul li a {
            color: #a8b2c1;
            text-decoration: none;
            transition: color 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

            .posts-wizard-container .post-footer-option ul li a:hover {
                color: #3db16b;
            }

            .posts-wizard-container .post-footer-option ul li a i {
                font-size: 16px;
            }

.posts-wizard-container .post-footer-comment-wrapper {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #5a6278;
}

/* ============================================
   CHANNELS PAGE COMPREHENSIVE STYLES
   ============================================ */

/* Channels Header Section */
.channels-header-section {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    padding: 25px 30px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.channels-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

    .channels-title i {
        font-size: 32px;
        opacity: 0.9;
    }

/* Channels Content Card */
.channels-content-card {
    background: #3a3f51;
    border-radius: 0 0 12px 12px;
    padding: 25px;
    border: 1px solid #464852;
    border-top: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    min-height: 500px;
}

.modern-tab-content {
    padding: 0;
}

    .modern-tab-content .tab-pane {
        animation: fadeInUp 0.5s ease;
    }

/* Channels Toolbar */
.channels-toolbar {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    align-items: center;
}

.channels-add-button {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
}

    .channels-add-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(61, 177, 107, 0.4);
        color: white;
    }

    .channels-add-button i {
        font-size: 16px;
    }

/* Channels Grid */
.channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Channels Card */
.channels-card {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

    .channels-card:hover {
        border-color: #3db16b;
        box-shadow: 0 8px 24px rgba(61, 177, 107, 0.3);
        transform: translateY(-5px);
    }

.channels-card-header {
    position: relative;
    background: linear-gradient(135deg, #2c2f3a 0%, #3a3f51 100%);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.channels-card-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #3db16b;
    box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
    transition: all 0.3s ease;
}

.channels-card:hover .channels-card-avatar {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(61, 177, 107, 0.4);
}

.channels-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channels-card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
}

.facebook-badge {
    background: linear-gradient(135deg, #3b5998 0%, #2d4373 100%);
}

.whatsapp-badge {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.telegram-badge {
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
}

.instagram-badge {
    background: linear-gradient(135deg, #fd5949 0%, #d6249f 70%, #285AEB 100%);
}

.livedesk-badge {
    background: linear-gradient(135deg, #990000 0%, #660000 100%);
}

.santral-badge {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
}

.channels-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.channels-card-title {
    color: #e9ecef;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channels-card-type {
    color: #a8b2c1;
    font-size: 13px;
    text-transform: uppercase;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.channels-card-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.channels-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin: 0;
}

    .channels-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.channels-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #5a6278;
    transition: .4s;
    border-radius: 24px;
}

    .channels-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

.channels-switch input:checked + .channels-slider {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
}

    .channels-switch input:checked + .channels-slider:before {
        transform: translateX(26px);
    }

.channels-switch input:focus + .channels-slider {
    box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
}

.channels-status-text {
    color: #e9ecef;
    font-size: 14px;
    font-weight: 500;
}

.channels-card-footer {
    padding: 15px 20px;
    background: #3a3f51;
    border-top: 1px solid #5a6278;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.channels-btn-edit,
.channels-btn-remove {
    flex: 1;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
}

.channels-btn-edit {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    color: white;
}

    .channels-btn-edit:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        color: white;
    }

.channels-btn-remove {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
}

    .channels-btn-remove:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
        color: white;
    }

    .channels-btn-edit i,
    .channels-btn-remove i {
        font-size: 16px;
    }

/* Channels Empty State */
.channels-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #a8b2c1;
}

    .channels-empty-state i {
        font-size: 64px;
        color: #5a6278;
        margin-bottom: 20px;
        display: block;
    }

    .channels-empty-state h3 {
        color: #e9ecef;
        font-size: 24px;
        margin-bottom: 10px;
    }

    .channels-empty-state p {
        color: #a8b2c1;
        font-size: 16px;
        margin: 0;
    }

/* Channels Modal Wrapper */
.channels-modal-wrapper .modal-content {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
}

.channels-modal-wrapper .modal-header {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 20px 25px;
}

.channels-modal-wrapper .modal-title {
    color: white;
    font-weight: 600;
    font-size: 20px;
}

.channels-modal-wrapper .modal-header .close {
    color: white;
    opacity: 0.9;
    font-size: 28px;
    font-weight: 300;
    text-shadow: none;
}

    .channels-modal-wrapper .modal-header .close:hover {
        opacity: 1;
        color: white;
    }

.channels-modal-wrapper .modal-body {
    background: #313543;
    color: #e9ecef;
    padding: 25px;
}

.channels-modal-wrapper .modal-footer {
    background: #3a3f51;
    border-top: 1px solid #5a6278;
    border-radius: 0 0 12px 12px;
    padding: 15px 25px;
}

    .channels-modal-wrapper .modal-footer .btn {
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
    }

    .channels-modal-wrapper .modal-footer .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .channels-modal-wrapper .modal-footer .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
            color: white;
        }

    .channels-modal-wrapper .modal-footer .btn-secondary {
        background: #6c757d;
        color: white;
    }

        .channels-modal-wrapper .modal-footer .btn-secondary:hover {
            background: #5a6268;
            color: white;
        }

/* Channels Responsive */
@media (max-width: 1200px) {
    .channels-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .channels-header-section {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
        padding: 20px;
    }

    .channels-title {
        font-size: 24px;
    }

    .channels-content-card {
        padding: 15px;
    }

    .channels-toolbar {
        flex-direction: column;
        width: 100%;
    }

    .channels-add-button {
        width: 100%;
        justify-content: center;
    }

    .channels-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .channels-card-footer {
        flex-direction: column;
    }

    .channels-btn-edit,
    .channels-btn-remove {
        width: 100%;
    }
}

/* ============================================
   BULKMESSAGES POLLEDIT, BULKSETTINGS, SENDER CSS
   ============================================ */

/* PollEdit Specific Styles */
#edit-survey-container {
    min-height: 400px;
    padding: 20px;
}

    #edit-survey-container .card {
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }

    #edit-survey-container .card-body {
        padding: 25px;
    }

    #edit-survey-container .card-title.editable-title {
        background: transparent;
        border: none;
        border-bottom: 2px solid #3db16b;
        color: #e9ecef;
        font-size: 20px;
        font-weight: 600;
        padding: 8px 0;
        width: 100%;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }

        #edit-survey-container .card-title.editable-title:focus {
            outline: none;
            border-bottom-color: #65d993;
            color: #ffffff;
        }

        #edit-survey-container .card-title.editable-title::placeholder {
            color: #a8b2c1;
        }

    #edit-survey-container .form-group {
        margin-bottom: 15px;
    }

        #edit-survey-container .form-group label {
            color: #e9ecef;
            font-weight: 500;
            margin-bottom: 8px;
            display: block;
        }

    #edit-survey-container .form-control,
    #edit-survey-container .form-control-sm {
        background: #3a3f51;
        border: 1px solid #5a6278;
        border-radius: 8px;
        padding: 10px 15px;
        color: #e9ecef;
        width: 100%;
    }

        #edit-survey-container .form-control:focus,
        #edit-survey-container .form-control-sm:focus {
            border-color: #3db16b;
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
            color: #ffffff;
            background: #454b5f;
            outline: none;
        }

    #edit-survey-container .btn-custom {
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        margin-top: 10px;
    }

    #edit-survey-container .btn-outline-primary {
        background: transparent;
        border: 1px solid #3db16b;
        color: #3db16b;
    }

        #edit-survey-container .btn-outline-primary:hover {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
        }

    #edit-survey-container .btn-outline-danger {
        background: transparent;
        border: 1px solid #e74c3c;
        color: #e74c3c;
    }

        #edit-survey-container .btn-outline-danger:hover {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
        }

/* BulkSettings Specific Styles */
.bulkmessages-form-section {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
}

.bulkmessages-section-title {
    color: #e9ecef;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #3db16b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bulkmessages-subtitle {
    color: #a8b2c1;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
}

.bulkmessages-form-section .form-group {
    margin-bottom: 20px;
}

    .bulkmessages-form-section .form-group label {
        color: #e9ecef;
        font-weight: 500;
        margin-bottom: 8px;
        display: block;
    }

.bulkmessages-form-section .form-control {
    background: #3a3f51;
    border: 1px solid #5a6278;
    border-radius: 8px;
    padding: 12px 15px;
    color: #e9ecef;
}

    .bulkmessages-form-section .form-control:focus {
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
        color: #ffffff;
        background: #454b5f;
        outline: none;
    }

.bulkmessages-form-section .form-check {
    margin-bottom: 20px;
}

.bulkmessages-form-section .form-check-label {
    color: #e9ecef;
    cursor: pointer;
}

.bulkmessages-form-section .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0.25rem;
    cursor: pointer;
}

    .bulkmessages-form-section .form-check-input:checked {
        background-color: #3db16b;
        border-color: #3db16b;
    }

.bulkmessages-form-footer {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #5a6278;
}

    .bulkmessages-form-footer .btn-submit {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        margin-right: 10px;
    }

        .bulkmessages-form-footer .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
            color: white;
        }

    .bulkmessages-form-footer .btn-back {
        background: #6c757d;
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

        .bulkmessages-form-footer .btn-back:hover {
            background: #5a6268;
            color: white;
        }

.btn-action-primary {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 100%;
    margin-bottom: 10px;
}

    .btn-action-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        color: white;
    }

.btn-action-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 100%;
}

    .btn-action-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
        color: white;
    }

/* Sender Page Specific Styles */
.bulkmessages-form-container .row {
    margin-bottom: 20px;
}

.bulkmessages-form-container .form-group i {
    color: #3db16b;
    margin-right: 8px;
    font-size: 16px;
}

.bulkmessages-form-container .form-group label {
    color: #e9ecef;
    font-weight: 500;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.bulkmessages-form-container select.form-control option {
    background: #454b5f;
    color: #e9ecef;
}

    .bulkmessages-form-container select.form-control option:disabled {
        background: #3a3f51;
        color: #a8b2c1;
        font-weight: 600;
    }

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #5a6278;
    transition: .4s;
    border-radius: 34px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .slider {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
}

    input:checked + .slider:before {
        transform: translateX(26px);
    }

/* ============================================
   PROJECT-WIDE MODAL MODERNIZATION
   ============================================ */

.modal {
    z-index: 1050;
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1040;
}

.modal-dialog {
    margin: 30px auto;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 60px);
}

.modal-content {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-bottom: none;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    color: white;
    font-weight: 600;
    font-size: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header .close {
    color: white;
    opacity: 0.9;
    font-size: 28px;
    font-weight: 300;
    text-shadow: none;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .modal-header .close:hover {
        opacity: 1;
        color: white;
        transform: rotate(90deg);
    }

.modal-body {
    background: #454b5f;
    color: #e9ecef;
    padding: 25px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

    .modal-body::-webkit-scrollbar {
        width: 8px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: #3a3f51;
        border-radius: 4px;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background: #3db16b;
        border-radius: 4px;
    }

        .modal-body::-webkit-scrollbar-thumb:hover {
            background: #65d993;
        }

.modal-footer {
    background: #3a3f51;
    border-top: 1px solid #5a6278;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

    .modal-footer .btn {
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
    }

    .modal-footer .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .modal-footer .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
            color: white;
        }

    .modal-footer .btn-secondary {
        background: #6c757d;
        color: white;
    }

        .modal-footer .btn-secondary:hover {
            background: #5a6268;
            color: white;
        }

    .modal-footer .btn-danger {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: white;
    }

        .modal-footer .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
            color: white;
        }

    .modal-footer .btn-success {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .modal-footer .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
            color: white;
        }

    .modal-footer .btn-info {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
    }

        .modal-footer .btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
            color: white;
        }

/* Modal Sizes */
.modal-lg .modal-content {
    max-width: 900px;
}

.modal-xl .modal-content {
    max-width: 1200px;
}

.modal-sm .modal-content {
    max-width: 400px;
}

/* ============================================
   PROJECT-WIDE TAB NAVIGATION MODERNIZATION (RESTORED PREVIOUS VERSION)
   ============================================ */

/* Modern Tab Navigation - Previous Beautiful Version */
.modern-tab-navigation {
    background: transparent;
    border-bottom: 2px solid #464852;
    padding: 0;
    box-shadow: none;
    position: relative;
    overflow-x: auto;
}

.bulkmessages-tab-navigation,
.channels-tab-navigation,
.reports-tab-navigation,
.chat-tab-navigation {
    background: transparent;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    padding: 0;
    box-shadow: none;
    position: relative;
    overflow-x: auto;
}

    .modern-tab-navigation::after,
    .bulkmessages-tab-navigation::after,
    .channels-tab-navigation::after,
    .reports-tab-navigation::after,
    .chat-tab-navigation::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
        opacity: 0.8;
    }

    .modern-tab-navigation .nav-tabs,
    .bulkmessages-tab-navigation .nav-tabs,
    .channels-tab-navigation .nav-tabs,
    .reports-tab-navigation .nav-tabs,
    .chat-tab-navigation .nav-tabs {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
    }

        .modern-tab-navigation .nav-tabs .nav-item,
        .bulkmessages-tab-navigation .nav-tabs .nav-item,
        .channels-tab-navigation .nav-tabs .nav-item,
        .reports-tab-navigation .nav-tabs .nav-item,
        .chat-tab-navigation .nav-tabs .nav-item {
            flex-shrink: 0;
        }

        .modern-tab-navigation .nav-tabs .nav-link,
        .bulkmessages-tab-navigation .nav-tabs .nav-link,
        .channels-tab-navigation .nav-tabs .nav-link,
        .reports-tab-navigation .nav-tabs .nav-link,
        .chat-tab-navigation .nav-tabs .nav-link {
            color: rgba(255, 255, 255, 0.8);
            padding: 15px 20px;
            min-height: 52px;
            border: none;
            border-bottom: 3px solid transparent;
            background: transparent;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 500;
            text-transform: uppercase;
            font-size: 13px;
            letter-spacing: 0.5px;
            position: relative;
            white-space: nowrap;
        }

            .modern-tab-navigation .nav-tabs .nav-link i,
            .bulkmessages-tab-navigation .nav-tabs .nav-link i,
            .channels-tab-navigation .nav-tabs .nav-link i,
            .reports-tab-navigation .nav-tabs .nav-link i,
            .chat-tab-navigation .nav-tabs .nav-link i {
                font-size: 18px;
                transition: all 0.3s ease;
            }

            .modern-tab-navigation .nav-tabs .nav-link:hover,
            .bulkmessages-tab-navigation .nav-tabs .nav-link:hover,
            .channels-tab-navigation .nav-tabs .nav-link:hover,
            .reports-tab-navigation .nav-tabs .nav-link:hover,
            .chat-tab-navigation .nav-tabs .nav-link:hover {
                color: white;
                background: rgba(255, 255, 255, 0.15);
                border-bottom-color: rgba(255, 255, 255, 0.5);
            }

                .modern-tab-navigation .nav-tabs .nav-link:hover i,
                .bulkmessages-tab-navigation .nav-tabs .nav-link:hover i,
                .channels-tab-navigation .nav-tabs .nav-link:hover i,
                .reports-tab-navigation .nav-tabs .nav-link:hover i,
                .chat-tab-navigation .nav-tabs .nav-link:hover i {
                    transform: scale(1.1);
                }

            .modern-tab-navigation .nav-tabs .nav-link.active,
            .bulkmessages-tab-navigation .nav-tabs .nav-link.active,
            .channels-tab-navigation .nav-tabs .nav-link.active,
            .reports-tab-navigation .nav-tabs .nav-link.active,
            .chat-tab-navigation .nav-tabs .nav-link.active {
                color: white;
                background: rgba(255, 255, 255, 0.25);
                backdrop-filter: blur(10px);
                border-color: transparent;
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
                border-bottom-color: white;
                font-weight: 600;
            }

                .modern-tab-navigation .nav-tabs .nav-link.active i,
                .bulkmessages-tab-navigation .nav-tabs .nav-link.active i,
                .channels-tab-navigation .nav-tabs .nav-link.active i,
                .reports-tab-navigation .nav-tabs .nav-link.active i,
                .chat-tab-navigation .nav-tabs .nav-link.active i {
                    transform: scale(1.1);
                    color: white;
                }

                .modern-tab-navigation .nav-tabs .nav-link.active::before,
                .bulkmessages-tab-navigation .nav-tabs .nav-link.active::before,
                .channels-tab-navigation .nav-tabs .nav-link.active::before,
                .reports-tab-navigation .nav-tabs .nav-link.active::before,
                .chat-tab-navigation .nav-tabs .nav-link.active::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 2px;
                    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
                    z-index: 1;
                }

                .modern-tab-navigation .nav-tabs .nav-link.active::after,
                .bulkmessages-tab-navigation .nav-tabs .nav-link.active::after,
                .channels-tab-navigation .nav-tabs .nav-link.active::after,
                .reports-tab-navigation .nav-tabs .nav-link.active::after,
                .chat-tab-navigation .nav-tabs .nav-link.active::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    right: 0;
                    height: 3px;
                    background: white;
                    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
                    z-index: 1;
                }

                .modern-tab-navigation .nav-tabs .nav-link.active:hover,
                .bulkmessages-tab-navigation .nav-tabs .nav-link.active:hover,
                .channels-tab-navigation .nav-tabs .nav-link.active:hover,
                .reports-tab-navigation .nav-tabs .nav-link.active:hover,
                .chat-tab-navigation .nav-tabs .nav-link.active:hover {
                    color: white;
                    background: rgba(255, 255, 255, 0.3);
                    border-color: transparent;
                }

                    .modern-tab-navigation .nav-tabs .nav-link.active:hover i,
                    .bulkmessages-tab-navigation .nav-tabs .nav-link.active:hover i,
                    .channels-tab-navigation .nav-tabs .nav-link.active:hover i,
                    .reports-tab-navigation .nav-tabs .nav-link.active:hover i,
                    .chat-tab-navigation .nav-tabs .nav-link.active:hover i {
                        transform: scale(1.15);
                    }

    .modern-tab-navigation::-webkit-scrollbar,
    .bulkmessages-tab-navigation::-webkit-scrollbar,
    .channels-tab-navigation::-webkit-scrollbar,
    .reports-tab-navigation::-webkit-scrollbar,
    .chat-tab-navigation::-webkit-scrollbar {
        height: 6px;
    }

    .modern-tab-navigation::-webkit-scrollbar-track,
    .bulkmessages-tab-navigation::-webkit-scrollbar-track,
    .channels-tab-navigation::-webkit-scrollbar-track,
    .reports-tab-navigation::-webkit-scrollbar-track,
    .chat-tab-navigation::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .modern-tab-navigation::-webkit-scrollbar-thumb,
    .bulkmessages-tab-navigation::-webkit-scrollbar-thumb,
    .channels-tab-navigation::-webkit-scrollbar-thumb,
    .reports-tab-navigation::-webkit-scrollbar-thumb,
    .chat-tab-navigation::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
    }

        .modern-tab-navigation::-webkit-scrollbar-thumb:hover,
        .bulkmessages-tab-navigation::-webkit-scrollbar-thumb:hover,
        .channels-tab-navigation::-webkit-scrollbar-thumb:hover,
        .reports-tab-navigation::-webkit-scrollbar-thumb:hover,
        .chat-tab-navigation::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

/* General nav-tabs for modals and other uses */
.nav-tabs {
    border-bottom: 2px solid #464852;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    background: transparent;
    position: relative;
}

    .nav-tabs::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, #3db16b 50%, transparent 100%);
        opacity: 0.3;
    }

    .nav-tabs .nav-item {
        margin-right: 5px;
        flex-shrink: 0;
    }

    .nav-tabs .nav-link {
        color: #a8b2c1;
        padding: 15px 20px;
        border: none;
        border-bottom: 3px solid transparent;
        background: transparent;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        font-size: 14px;
    }

        .nav-tabs .nav-link:hover {
            color: white;
            border-bottom-color: #3db16b;
        }

        .nav-tabs .nav-link.active {
            color: #3db16b;
            background: rgba(61, 177, 107, 0.1);
            border-bottom-color: #3db16b;
            font-weight: 600;
        }

            .nav-tabs .nav-link.active i {
                color: #3db16b;
                transform: scale(1.15);
            }

/* ============================================
   PROJECT-WIDE TAB CONTENT DARK THEME
   ============================================ */

.tab-content {
    background: #3a3f51;
    border: 1px solid #464852;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 25px;
    min-height: 400px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    color: #e9ecef;
}

    /* Tab-content içindeki SmartWizard için özel kural - min-height ve padding kaldırılmalı */
    .tab-content #smartwizard {
        min-height: auto !important;
        padding: 0 !important;
        margin: 10px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

        /* CRITICAL: Tab-content içindeki SmartWizard adımları için özel kural */
        /* JavaScript'in .hide() ve .show() metodları çalışabilmeli */
        .tab-content .tab-pane.step-content,
        .tab-content #smartwizard .tab-pane.step-content,
        .tab-content #smartwizard .step-content.tab-pane,
        .tab-content #smartwizard div[id^="adim-"].tab-pane.step-content,
        .tab-content #smartwizard #adim-1.tab-pane.step-content,
        .tab-content #smartwizard #adim-2.tab-pane.step-content,
        .tab-content #smartwizard #adim-3.tab-pane.step-content,
        .tab-content #smartwizard #adim-4.tab-pane.step-content {
            /* JavaScript'in .hide() ve .show() metodları çalışabilmeli */
            /* CSS display kuralları JavaScript'i engellememeli - hiçbir display kuralı yok */
            /* Sadece renk ayarları */
            color: #e9ecef;
        }

        /* CRITICAL: Tab-content içindeki SmartWizard adımları görünürlük yönetimi */
        .tab-content #smartwizard #adim-1:not([style*="display: block"]):not([style*="display:block"]),
        .tab-content #smartwizard #adim-2:not([style*="display: block"]):not([style*="display:block"]),
        .tab-content #smartwizard #adim-3:not([style*="display: block"]):not([style*="display:block"]),
        .tab-content #smartwizard #adim-4:not([style*="display: block"]):not([style*="display:block"]) {
            display: none !important;
        }

        .tab-content #smartwizard #adim-1[style*="display: block"],
        .tab-content #smartwizard #adim-1[style*="display:block"],
        .tab-content #smartwizard #adim-2[style*="display: block"],
        .tab-content #smartwizard #adim-2[style*="display:block"],
        .tab-content #smartwizard #adim-3[style*="display: block"],
        .tab-content #smartwizard #adim-3[style*="display:block"],
        .tab-content #smartwizard #adim-4[style*="display: block"],
        .tab-content #smartwizard #adim-4[style*="display:block"] {
            display: block !important;
        }

    /* Tab-content içindeki elementler için renk - SmartWizard hariç */
    .tab-content > *:not(#smartwizard),
    .tab-content > *:not(#smartwizard) * {
        color: #fff;
    }

    .tab-content label:not(#smartwizard label):not(#smartwizard *) {
        color: #e9ecef !important;
    }

    .tab-content input:not(#smartwizard input):not(#smartwizard *),
    .tab-content textarea:not(#smartwizard textarea):not(#smartwizard *),
    .tab-content select:not(#smartwizard select):not(#smartwizard *) {
        color: #ffffff !important;
        background-color: #454b5f !important;
    }

/* SmartWizard içindeki elementler için renk ayarları */
#smartwizard,
#smartwizard * {
    color: #e9ecef;
}

    #smartwizard label {
        color: #e9ecef !important;
    }

    #smartwizard input,
    #smartwizard textarea,
    #smartwizard select {
        color: #e9ecef !important;
    }

    /* tab-pane kuralları - Kopya projedeki gibi basit tutuldu, SmartWizard etkilenmez */

    /* CRITICAL: SmartWizard adımları JavaScript tarafından tab-pane.step-content class'ı ekleniyor */
    /* JavaScript'in .hide() ve .show() metodları çalışabilmeli - CSS müdahale etmemeli */
    /* SmartWizard adımları için hiçbir display kuralı yok - JavaScript görünürlüğü yönetir */
    .tab-pane.step-content,
    #smartwizard .tab-pane.step-content,
    #smartwizard .step-content.tab-pane,
    #smartwizard div[id^="adim-"].tab-pane.step-content,
    #smartwizard #adim-1.tab-pane.step-content,
    #smartwizard #adim-2.tab-pane.step-content,
    #smartwizard #adim-3.tab-pane.step-content,
    #smartwizard #adim-4.tab-pane.step-content {
        /* JavaScript'in .hide() ve .show() metodları çalışabilmeli */
        /* CSS display kuralları JavaScript'i engellememeli - hiçbir display kuralı yok */
        /* Sadece renk ayarları */
        color: #e9ecef;
    }

/* SmartWizard tamamen tab-pane kurallarından muaf - JavaScript görünürlük yönetimine müdahale etmiyoruz */
#smartwizard {
    /* SmartWizard container görünür olmalı */
}

    #smartwizard .sw-container,
    #smartwizard .sw-main,
    #smartwizard .step-content {
        /* SmartWizard container'ları görünür olmalı - JavaScript görünürlüğü yönetir */
    }

        /* SmartWizard step-content tab-pane değil, bu yüzden tab-pane kurallarından muaf tutulmalı */
        /* NOT: SmartWizard JavaScript ile görünürlüğü yönetir, biz sadece tab-pane kurallarının etkilememesini sağlıyoruz */
        #smartwizard .step-content,
        #smartwizard .sw-container .sw-main .step-content,
        .sw-theme-arrows .step-content,
        .sw-theme-arrows .sw-container .sw-main .step-content {
            /* tab-pane kurallarından muaf - SmartWizard kendi görünürlük mantığını kullanır */
            /* display değeri SmartWizard JavaScript tarafından yönetilir - biz müdahale etmiyoruz */
        }

            /* SmartWizard step-content içindeki adım divleri de tab-pane değil */
            /* NOT: JavaScript görünürlüğü yönetir, biz sadece renk ayarları yapıyoruz */
            #smartwizard .step-content div[id^="adim-"],
            #smartwizard .step-content #adim-1,
            #smartwizard .step-content #adim-2,
            #smartwizard .step-content #adim-3,
            #smartwizard .step-content #adim-4,
            #smartwizard div[id^="adim-"],
            #smartwizard #adim-1,
            #smartwizard #adim-2,
            #smartwizard #adim-3,
            #smartwizard #adim-4,
            .sw-theme-arrows .step-content div[id^="adim-"],
            .sw-theme-arrows .step-content #adim-1,
            .sw-theme-arrows .step-content #adim-2,
            .sw-theme-arrows .step-content #adim-3,
            .sw-theme-arrows .step-content #adim-4 {
                /* tab-pane kurallarından muaf - SmartWizard kendi görünürlük mantığını kullanır */
                /* display değeri SmartWizard JavaScript tarafından yönetilir */
                color: #e9ecef !important;
            }

        /* SmartWizard adımları tab-pane değil, bu yüzden tab-pane kurallarından muaf tutulmalı */
        /* SmartWizard kendi görünürlük mantığını kullanır - JavaScript ile display yönetir */
        /* Biz sadece renk ve stil ayarlarını yapıyoruz, görünürlüğe müdahale etmiyoruz */
        #smartwizard .sw-container .sw-main .step-content,
        .sw-theme-arrows .sw-container .sw-main .step-content {
            color: #e9ecef !important;
            /* display ve visibility SmartWizard JavaScript tarafından yönetilir */
        }

        /* SmartWizard adım içeriği için renk ayarları */
        #smartwizard div[id^="adim-"],
        #smartwizard #adim-1,
        #smartwizard #adim-2,
        #smartwizard #adim-3,
        #smartwizard #adim-4,
        #smartwizard .sw-container .sw-main div[id^="adim-"],
        #smartwizard .sw-container .sw-main #adim-1,
        #smartwizard .sw-container .sw-main #adim-2,
        #smartwizard .sw-container .sw-main #adim-3,
        #smartwizard .sw-container .sw-main #adim-4,
        .sw-theme-arrows .sw-container .sw-main div[id^="adim-"],
        .sw-theme-arrows .sw-container .sw-main #adim-1,
        .sw-theme-arrows .sw-container .sw-main #adim-2,
        .sw-theme-arrows .sw-container .sw-main #adim-3,
        .sw-theme-arrows .sw-container .sw-main #adim-4 {
            color: #e9ecef !important;
        }

            /* SmartWizard adımları içindeki elemanlar için renk ayarları */
            #smartwizard div[id^="adim-"] *,
            #smartwizard #adim-1 *,
            #smartwizard #adim-2 *,
            #smartwizard #adim-3 *,
            #smartwizard #adim-4 *,
            #smartwizard .sw-container .sw-main .sw-step-content *,
            #smartwizard .sw-container .sw-main div[id^="adim-"] * {
                color: #e9ecef !important;
            }

            #smartwizard div[id^="adim-"] label,
            #smartwizard #adim-1 label,
            #smartwizard #adim-2 label,
            #smartwizard #adim-3 label,
            #smartwizard #adim-4 label,
            #smartwizard .sw-container .sw-main .sw-step-content label,
            #smartwizard .sw-container .sw-main div[id^="adim-"] label {
                color: #e9ecef !important;
            }

            #smartwizard div[id^="adim-"] input,
            #smartwizard div[id^="adim-"] textarea,
            #smartwizard div[id^="adim-"] select,
            #smartwizard #adim-1 input,
            #smartwizard #adim-1 textarea,
            #smartwizard #adim-1 select,
            #smartwizard #adim-2 input,
            #smartwizard #adim-2 textarea,
            #smartwizard #adim-2 select,
            #smartwizard #adim-3 input,
            #smartwizard #adim-3 textarea,
            #smartwizard #adim-3 select,
            #smartwizard #adim-4 input,
            #smartwizard #adim-4 textarea,
            #smartwizard #adim-4 select,
            #smartwizard .sw-container .sw-main .sw-step-content input,
            #smartwizard .sw-container .sw-main .sw-step-content textarea,
            #smartwizard .sw-container .sw-main .sw-step-content select,
            #smartwizard .sw-container .sw-main div[id^="adim-"] input,
            #smartwizard .sw-container .sw-main div[id^="adim-"] textarea,
            #smartwizard .sw-container .sw-main div[id^="adim-"] select {
                color: #e9ecef !important;
            }

/* SmartWizard step-content için stil ayarları */
.sw-theme-arrows .step-content {
    padding: 0 10px !important;
    background-color: transparent !important;
    text-align: left !important;
    color: #e9ecef !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

    /* SmartWizard step-content içindeki adım divleri - görünürlük SmartWizard tarafından yönetilir */
    .sw-theme-arrows .step-content div[id^="adim-"],
    .sw-theme-arrows .step-content #adim-1,
    .sw-theme-arrows .step-content #adim-2,
    .sw-theme-arrows .step-content #adim-3,
    .sw-theme-arrows .step-content #adim-4 {
        color: #e9ecef !important;
        /* display ve visibility SmartWizard JavaScript tarafından yönetilir */
    }

/* CRITICAL FIX: Tab-content içindeki SmartWizard için tab-pane kurallarını devre dışı bırak */
/* Tab-pane kuralları SmartWizard'ı etkilemez - JavaScript görünürlüğü yönetir */

/* SmartWizard görünürlüğü JavaScript tarafından yönetilir - CSS müdahale etmemeli */

/* Modal içindeki tab-content için özel stil - etiketler kısmı için yazılar görünür olmalı */
.modal .tab-content {
    background: #454b5f;
    color: #e9ecef;
}

    .modal .tab-content * {
        color: #e9ecef !important;
    }

    .modal .tab-content label {
        color: #e9ecef !important;
    }

    .modal .tab-content input,
    .modal .tab-content textarea,
    .modal .tab-content select {
        color: #e9ecef !important;
    }

    .modal .tab-content .form-control {
        color: #e9ecef !important;
    }

    .modal .tab-content h6 {
        color: #e9ecef !important;
    }

    .modal .tab-content hr {
        border-color: #5a6278;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-tab-content {
    background: #3a3f51;
    border: 1px solid #464852;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 25px;
    min-height: 400px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    color: #e9ecef;
}

    .modern-tab-content * {
        color: #e9ecef;
    }

    .modern-tab-content .tab-pane:not(#smartwizard):not(#smartwizard *):not(.sw-theme-arrows):not(.sw-theme-arrows *):not(.step-content) {
        display: none;
        animation: fadeInUp 0.5s ease;
        color: #e9ecef;
    }

    .modern-tab-content .tab-pane:not(#smartwizard):not(#smartwizard *):not(.sw-theme-arrows):not(.sw-theme-arrows *) * {
        color: #e9ecef;
    }

    .modern-tab-content .tab-pane.active:not(#smartwizard):not(#smartwizard *):not(.sw-theme-arrows):not(.sw-theme-arrows *):not(.step-content):not([id^="adim-"]),
    .modern-tab-content .tab-pane.show:not(#smartwizard):not(#smartwizard *):not(.sw-theme-arrows):not(.sw-theme-arrows *):not(.step-content):not([id^="adim-"]) {
        display: block;
    }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Kanal Düzenle Modal Tab Content Fix */
.modal .tab-content {
    min-height: auto;
    padding: 20px;
}

    .modal .tab-content .tab-pane:not(#smartwizard):not(#smartwizard *):not(.sw-theme-arrows):not(.sw-theme-arrows *):not(.step-content) {
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .modal .tab-content .tab-pane.show:not(#smartwizard):not(#smartwizard *):not(.sw-theme-arrows):not(.sw-theme-arrows *):not(.step-content):not([id^="adim-"]),
    .modal .tab-content .tab-pane.active:not(#smartwizard):not(#smartwizard *):not(.sw-theme-arrows):not(.sw-theme-arrows *):not(.step-content):not([id^="adim-"]),
    .modal .tab-content .tab-pane.show.active:not(#smartwizard):not(#smartwizard *):not(.sw-theme-arrows):not(.sw-theme-arrows *):not(.step-content):not([id^="adim-"]),
    .channels-modal-wrapper .tab-content .tab-pane.show.active:not(#smartwizard):not(#smartwizard *):not(.sw-theme-arrows):not(.sw-theme-arrows *):not(.step-content):not([id^="adim-"]),
    .channels-modal-wrapper .tab-content .tab-pane[id*="genelBilgiler"].show.active:not(#smartwizard):not(#smartwizard *):not(.sw-theme-arrows):not(.sw-theme-arrows *):not(.step-content):not([id^="adim-"]) {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

/* Channels modal için özel tab-pane görünürlüğü */
.channels-modal-wrapper .tab-content .tab-pane.show.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.channels-modal-wrapper .tab-content .tab-pane:not(.show):not(.active) {
    display: none !important;
}

.modal .tab-content .tab-pane:not(.show):not(.active) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ensure form elements are visible in modal tabs */
.modal .tab-content .tab-pane.show.active .form-group,
.modal .tab-content .tab-pane.show.active .form-control,
.modal .tab-content .tab-pane.show.active label,
.modal .tab-content .tab-pane.show.active input,
.modal .tab-content .tab-pane.show.active textarea,
.modal .tab-content .tab-pane.show.active select {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   DASHBOARD/HOME PAGE MODERNIZATION - TECHNOLOGICAL
   ============================================ */

.dashboard-container {
    padding: 20px;
    background: transparent !important;
    min-height: 100vh;
}

    /* Dashboard container içindeki elementler için renk düzeltmesi - user-welcome hariç */
    .dashboard-container > *:not(.user-welcome),
    .dashboard-container .row > *:not(.user-welcome),
    .dashboard-container .each:not(.user-welcome),
    .dashboard-container .each-menu {
        color: #e9ecef !important;
    }

        .dashboard-container h5:not(.user-welcome h5),
        .dashboard-container h6:not(.user-welcome h6),
        .dashboard-container p:not(.user-welcome p),
        .dashboard-container span:not(.user-welcome span),
        .dashboard-container label:not(.user-welcome label),
        .dashboard-container .each h5,
        .dashboard-container .each h6,
        .dashboard-container .each p,
        .dashboard-container .each-menu h5,
        .dashboard-container .each-menu h6,
        .dashboard-container .each-menu p {
            color: #9b9b9b !important;
        }

    .dashboard-container .row:first-child {
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

        .dashboard-container .row:first-child > [class*="col-md-"] {
            display: flex;
            flex-direction: column;
        }

            .dashboard-container .row:first-child > [class*="col-md-"] > .each {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

    /* Dashboard menu grid row'unu Bootstrap grid sistemine göre düzenle */
    .dashboard-container .row.mt-3.dashboard-menu-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-right: -6px !important;
        margin-left: -6px !important;
        margin-bottom: 0;
    }

        .dashboard-container .row.mt-3.dashboard-menu-grid > [class*="col-md-"],
        .dashboard-container .row.mt-3.dashboard-menu-grid > [class*="col-sm-"] {
            position: relative;
            padding-right: 6px !important;
            padding-left: 6px !important;
            display: block;
        }

        .dashboard-container .row.mt-3.dashboard-menu-grid > .col-md-3 {
            flex: 0 0 20% !important;
            max-width: 20% !important;
            width: 20% !important;
        }

    .dashboard-container .row.mt-3:not(.dashboard-menu-grid) > .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
        width: 25%;
    }

    .dashboard-container .row.mt-3.dashboard-menu-grid > .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

@media (max-width: 992px) {
    .dashboard-container .row.mt-3.dashboard-menu-grid > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    .dashboard-container .row.mt-3.dashboard-menu-grid > .col-md-3,
    .dashboard-container .row.mt-3.dashboard-menu-grid > .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.dashboard-container .row.mt-3 > [class*="col-md-"] > .each-menu,
.dashboard-container .row.mt-3 > [class*="col-md-"] > .modern-menu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.user-welcome,
.user-welcome.modern-welcome-card {
    background: linear-gradient(135deg, #2e313d 0%, #3a415a 100%) !important;
    border-radius: 12px;
    padding: 10px !important;
    text-align: center;
    box-shadow: 0 8px 24px rgba(61, 177, 107, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden !important;
    height: 283px !important;
    min-height: 283px !important;
    max-height: 283px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
}


    .user-welcome:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(61, 177, 107, 0.4);
    }

    .user-welcome .avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 18px;
        font-size: 28px;
        font-weight: 700;
        color: #222531;
        border: 3px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        position: relative;
        z-index: 1;
        transition: all 0.3s ease;
    }

    .user-welcome:hover .avatar {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    }

    .user-welcome h5 {
        color: white;
        font-weight: 600;
        margin-bottom: 12px;
        font-size: 18px;
        position: relative;
        z-index: 1;
    }

    .user-welcome p {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 13px;
        margin: 10px 0;
        position: relative;
        z-index: 1;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
    }

    .user-welcome select,
    .user-welcome #ChangeUser,
    .user-welcome #languageSelect {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        width: 100% !important;
        position: relative;
        z-index: 1;
    }

        /* Selectbox dropdown menüsü için dark theme */
        .user-welcome select option,
        .user-welcome #ChangeUser option,
        .user-welcome #languageSelect option {
            background: #3a3f51 !important;
            color: #e9ecef !important;
            padding: 8px 12px !important;
        }

            .user-welcome select option:hover,
            .user-welcome #ChangeUser option:hover,
            .user-welcome #languageSelect option:hover {
                background: #454b5f !important;
                color: white !important;
            }

            .user-welcome select option:checked,
            .user-welcome #ChangeUser option:checked,
            .user-welcome #languageSelect option:checked {
                background: #3db16b !important;
                color: white !important;
            }

    .user-welcome .form-group {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 2px 0 0 0 !important;
        position: relative;
        z-index: 1;
        width: 100%;
        padding: 0;
    }

        .user-welcome .form-group.input-group-lg {
            margin: 2px 0 0 0 !important;
        }

    .user-welcome .btn {
        margin: 6px;
        background: rgb(30, 33, 45);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.4);
        color: white;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
        font-weight: 500;
        padding: 10px 20px;
        border-radius: 10px;
    }

        .user-welcome .btn:hover {
            margin: 6px;
            background: rgb(30, 33, 45);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.4);
            color: white;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
            font-weight: 500;
            padding: 10px 20px;
            border-radius: 10px;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

.each {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    height: 100%;
}

.dashboard-container .row > .col-md-3,
.dashboard-container .row > .col-md-4,
.dashboard-container .row > .col-md-5 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

    .dashboard-container .row > .col-md-3 > .each.user-welcome,
    .dashboard-container .row > .col-md-3 > .each:not(.user-welcome),
    .dashboard-container .row > .col-md-5 > .each,
    .dashboard-container .row > .col-md-4 > .each {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
    }

.each:hover {
    border-color: #3db16b;
    box-shadow: 0 6px 20px rgba(61, 177, 107, 0.3);
    transform: translateY(-3px);
}

.each-menu {
    background: linear-gradient(135deg, #2c2f3a 0%, #3a3f51 100%);
    border: 1px solid rgba(61, 177, 107, 0.3);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 160px;
    z-index: 1;
}

    .each-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #3db16b 0%, #65d993 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .each-menu:hover::before {
        transform: scaleX(1);
    }

    .each-menu:hover {
        border-color: rgba(61, 177, 107, 0.6);
        box-shadow: 0 10px 30px rgba(61, 177, 107, 0.4);
        transform: translateY(-5px) scale(1.02);
        background: linear-gradient(135deg, #353849 0%, #424758 100%);
    }

    .each-menu i {
        font-size: 18px;
        color: #3db16b;
        margin-bottom: 8px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(61, 177, 107, 0.15);
        border-radius: 8px;
        border: 1px solid rgba(61, 177, 107, 0.3);
        flex-shrink: 0;
        position: relative;
        z-index: 2;
    }

    .each-menu:hover i {
        transform: scale(1.08);
        color: white;
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-color: transparent;
        box-shadow: 0 3px 10px rgba(61, 177, 107, 0.4);
    }

    .each-menu i.colored {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        border: none;
        position: relative;
        z-index: 2;
    }

    .each-menu:hover i.colored {
        -webkit-text-fill-color: white;
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        -webkit-background-clip: border-box;
        background-clip: border-box;
    }

    .each-menu h6 {
        color: #e9ecef;
        font-size: 13px;
        font-weight: 600;
        margin: 0 0 6px 0;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    .each-menu .info {
        color: #a8b2c1;
        font-size: 10px;
        margin-bottom: 10px;
        display: block;
        line-height: 1.3;
        flex-grow: 1;
        min-height: 28px;
        max-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        position: relative;
        z-index: 2;
    }

    .each-menu .btn {
        background: rgba(61, 177, 107, 0.1);
        border: 1px solid rgba(61, 177, 107, 0.4);
        color: #3db16b;
        padding: 6px 10px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        font-size: 10px;
        flex-shrink: 0;
        margin-top: auto;
        position: relative;
        z-index: 2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

        .each-menu .btn i {
            flex-shrink: 0;
            font-size: 10px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 3px;
        }

        .each-menu .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(61, 177, 107, 0.4);
            color: white;
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            border-color: transparent;
        }

    .each-menu .btn-outline-dark {
        background: rgba(61, 177, 107, 0.1);
        border: 1px solid rgba(61, 177, 107, 0.4);
        color: #3db16b;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 10px;
        margin-top: auto;
        position: relative;
        z-index: 2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

        .each-menu .btn-outline-dark i {
            flex-shrink: 0;
            font-size: 10px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 3px;
        }

        .each-menu .btn-outline-dark:hover {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            border-color: transparent;
            color: white;
            box-shadow: 0 3px 10px rgba(61, 177, 107, 0.4);
            transform: translateY(-1px);
        }

/* ============================================
   BULKMESSAGES NUMBERLIST BUTTON STYLES
   ============================================ */

.bulkmessages-toolbar-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

    .bulkmessages-toolbar-actions .btn {
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }

    .bulkmessages-toolbar-actions .btn-download {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
    }

        .bulkmessages-toolbar-actions .btn-download:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
            color: white;
        }

    .bulkmessages-toolbar-actions .btn-add-message {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
    }

        .bulkmessages-toolbar-actions .btn-add-message:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
            color: white;
        }

.bulkmessages-card-actions .btn-action-primary {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
}

    .bulkmessages-card-actions .btn-action-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        color: white;
    }

.bulkmessages-card-actions .btn-action-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
}

    .bulkmessages-card-actions .btn-action-warning:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
        color: white;
    }

.bulkmessages-card-actions .btn-action-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
}

    .bulkmessages-card-actions .btn-action-info:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
        color: white;
    }

.bulkmessages-card-actions .btn-edit {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
}

    .bulkmessages-card-actions .btn-edit:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        color: white;
    }

.bulkmessages-card-actions .btn-remove {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
}

    .bulkmessages-card-actions .btn-remove:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
        color: white;
    }

/* Dashboard Responsive */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 15px;
    }

    .user-welcome {
        padding: 20px;
    }

    .dashboard-menu-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }

    .each-menu {
        padding: 14px;
        min-height: 140px;
    }

        .each-menu i {
            font-size: 24px;
            width: 40px;
            height: 40px;
        }

        .each-menu h6 {
            font-size: 12px;
        }

        .each-menu .info {
            font-size: 10px;
        }

    .modern-menu-card {
        padding: 14px;
        min-height: 140px;
    }

    .menu-icon-wrapper {
        width: 40px;
        height: 40px;
    }

        .menu-icon-wrapper i {
            font-size: 18px;
        }

    .modern-menu-card h6 {
        font-size: 12px;
    }

    .modern-menu-card .info {
        font-size: 10px;
    }
}

/* ============================================
   MODERN DASHBOARD STYLES
   ============================================ */

.modern-dashboard {
    background: linear-gradient(135deg, #1a1d29 0%, #2c2f3a 100%);
    padding: 30px;
    min-height: 100vh;
}

/* Dashboard Container - Üst boşluğu azalt */
.dashboard-container {
    padding-top: 5px !important;
    margin-top: 0 !important;
}

.content .dashboard-container {
    padding-top: 5px !important;
    margin-top: 0 !important;
}

.content > .dashboard-container {
    padding-top: 5px !important;
    margin-top: 0 !important;
}

/* Content wrapper üst boşluğu azalt */
.content {
    padding-top: 5px !important;
}

.layout .content {
    padding-top: 5px !important;
}

/* ============================================
   GENEL SELECTBOX FİX - Proje Genelinde
   Yazıların tam görünmesi için düzenlemeler
   ============================================ */

/* Tüm select elementleri için genel fix */
select.form-control,
select,
.form-control[type="select"] {
    color: #e9ecef !important;
    background-color: #454b5f !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    display: inline-block !important;
}

    /* Select içindeki text'in tam görünmesi için */
    select.form-control:not([multiple]),
    select:not([multiple]) {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    /* Multiple selectbox'lar için scroll düzeltmesi */
    select.form-control[multiple],
    select[multiple] {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 200px !important;
        min-height: 120px !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    /* Option elementleri */
    select.form-control option {
        background-color: #454b5f !important;
        color: #e9ecef !important;
        padding: 10px 15px !important;
        line-height: 1.5 !important;
        height: auto !important;
        min-height: 2rem !important;
    }

        select.form-control option:hover,
        select.form-control option:focus {
            background-color: #5a6278 !important;
            color: white !important;
        }

        select.form-control option:checked,
        select.form-control option:selected {
            background-color: #3db16b !important;
            color: white !important;
        }

    /* Select açıkken görünürlük */
    select.form-control:focus,
    select:focus {
        color: #e9ecef !important;
        background-color: #454b5f !important;
        line-height: 1.5 !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

        select.form-control:focus option {
            background-color: #454b5f !important;
            color: #e9ecef !important;
        }

    /* Webkit için özel düzenlemeler */
    select.form-control::-webkit-select,
    select::-webkit-select {
        color: #e9ecef !important;
        line-height: 1.5 !important;
    }

    /* Firefox için özel düzenlemeler */
    select.form-control::-moz-selection,
    select::-moz-selection {
        color: #e9ecef !important;
        background-color: #454b5f !important;
    }

    /* IE/Edge için */
    select.form-control::-ms-value {
        color: #e9ecef !important;
        background-color: #454b5f !important;
        line-height: 1.5 !important;
        padding: 0.5rem 0.75rem !important;
    }

/* Input group içindeki select'ler */
.input-group select.form-control {
    line-height: 1.5 !important;
    height: auto !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Form group içindeki select'ler */
.form-group select.form-control {
    line-height: 1.5 !important;
    height: auto !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* ============================================
   LOGIN PAGE - Modern Tech Professional Design
   Video arka plana dokunulmamıştır
   Minimalist, teknolojik ve profesyonel
   ============================================ */

/* Form Wrapper - Clean Glassmorphism */
body.form-membership .form-wrapper {
    background: rgba(26, 29, 41, 0.85) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(61, 177, 107, 0.2) !important;
    border-radius: 20px !important;
    padding: 3rem 2.5rem !important;
    width: 460px !important;
    margin: 50px auto !important;
    text-align: left !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 8px 25px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

    body.form-membership .form-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, rgba(61, 177, 107, 0.6), transparent);
        opacity: 0.6;
    }

    body.form-membership .form-wrapper:hover {
        transform: translateY(-3px);
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), 0 12px 35px rgba(61, 177, 107, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(61, 177, 107, 0.4) !important;
    }

/* Logo - Clean & Modern */
body.form-membership .form-wrapper {
    padding-top: 5rem !important;
    position: relative !important;
    z-index: 1 !important;
}

    body.form-membership .form-wrapper .logo {
        background: rgba(61, 177, 107, 0.15) !important;
        backdrop-filter: blur(15px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
        width: 100px !important;
        height: 100px !important;
        border-radius: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: -110px auto 2rem auto !important;
        border: 2px solid rgba(61, 177, 107, 0.4) !important;
        box-shadow: 0 10px 30px rgba(61, 177, 107, 0.3), 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
        position: relative !important;
        z-index: 1001 !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

        body.form-membership .form-wrapper .logo::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.6s ease;
        }

    body.form-membership .form-wrapper:hover .logo::before {
        left: 100%;
    }

    body.form-membership .form-wrapper:hover .logo {
        transform: translateY(-5px);
        box-shadow: 0 12px 35px rgba(61, 177, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(61, 177, 107, 0.5) !important;
    }

    body.form-membership .form-wrapper .logo img {
        position: relative;
        z-index: 1;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
        transition: all 0.3s ease;
    }

    body.form-membership .form-wrapper:hover .logo img {
        filter: drop-shadow(0 4px 12px rgba(61, 177, 107, 0.3));
    }

/* Login Header */
.login-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(61, 177, 107, 0.2);
}

.login-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.5px !important;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-weight: 400;
}

/* Form Title (Fallback) */
body.form-membership .form-wrapper h5 {
    text-align: center !important;
    margin-bottom: 2rem !important;
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Input Labels */
.input-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

/* Form Controls - Clean Modern Inputs */
body.form-membership .form-wrapper form .form-control,
body.form-membership .form-wrapper form .login-input,
body.form-membership .form-wrapper form input[type="email"],
body.form-membership .form-wrapper form input[type="password"] {
    background: rgba(44, 47, 61, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(61, 177, 107, 0.2) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    margin-bottom: 1.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    width: 100% !important;
}

/* Select için özel düzenlemeler - Yazıların tam görünmesi için */
body.form-membership .form-wrapper form .login-select,
body.form-membership .form-wrapper form select {
    background: rgba(44, 47, 61, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(61, 177, 107, 0.2) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    margin-bottom: 1.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    width: 100% !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: calc(1.5em + 1.75rem + 3px) !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

body.form-membership .form-wrapper form .form-control::placeholder,
body.form-membership .form-wrapper form .login-input::placeholder,
body.form-membership .form-wrapper form input[type="email"]::placeholder,
body.form-membership .form-wrapper form input[type="password"]::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.form-membership .form-wrapper form .form-control:focus,
body.form-membership .form-wrapper form .login-input:focus,
body.form-membership .form-wrapper form input[type="email"]:focus,
body.form-membership .form-wrapper form input[type="password"]:focus,
body.form-membership .form-wrapper form .login-select:focus,
body.form-membership .form-wrapper form select:focus {
    background: rgba(58, 63, 81, 0.8) !important;
    border-color: #3db16b !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.15), 0 4px 12px rgba(61, 177, 107, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
    transform: translateY(-1px);
}

body.form-membership .form-wrapper form .login-select,
body.form-membership .form-wrapper form select {
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 18px !important;
    padding-right: 45px !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: calc(1.5em + 0.875rem + 3px) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Login Selectbox - Görünürlük Fix - İlk bakışta okunabilir olmalı */
body.form-membership .form-wrapper form .login-select,
body.form-membership .form-wrapper form select {
    color: #ffffff !important;
    background-color: rgba(44, 47, 61, 0.6) !important;
}

    /* Select içindeki text için - tüm durumlar */
    body.form-membership .form-wrapper form .login-select,
    body.form-membership .form-wrapper form select,
    body.form-membership .form-wrapper form .login-select:not(:focus),
    body.form-membership .form-wrapper form select:not(:focus),
    body.form-membership .form-wrapper form .login-select:focus,
    body.form-membership .form-wrapper form select:focus {
        color: #ffffff !important;
    }

        /* Webkit için */
        body.form-membership .form-wrapper form .login-select::-webkit-select,
        body.form-membership .form-wrapper form select::-webkit-select {
            color: #ffffff !important;
        }

        /* Firefox için */
        body.form-membership .form-wrapper form .login-select::-moz-selection,
        body.form-membership .form-wrapper form select::-moz-selection {
            color: #ffffff !important;
            background-color: rgba(44, 47, 61, 0.6) !important;
        }

        body.form-membership .form-wrapper form .login-select option,
        body.form-membership .form-wrapper form select option {
            background: #3a3f51 !important;
            color: #ffffff !important;
            padding: 12px 15px !important;
        }

            body.form-membership .form-wrapper form .login-select option:hover,
            body.form-membership .form-wrapper form select option:hover,
            body.form-membership .form-wrapper form .login-select option:focus,
            body.form-membership .form-wrapper form select option:focus {
                background: #454b5f !important;
                color: #ffffff !important;
            }

            body.form-membership .form-wrapper form .login-select option:checked,
            body.form-membership .form-wrapper form select option:checked {
                background: #3db16b !important;
                color: #ffffff !important;
            }

        /* Select açıkken de görünür olmalı */
        body.form-membership .form-wrapper form .login-select:focus,
        body.form-membership .form-wrapper form select:focus {
            color: #ffffff !important;
            background-color: rgba(58, 63, 81, 0.8) !important;
        }

        body.form-membership .form-wrapper form .login-select:not(:focus),
        body.form-membership .form-wrapper form select:not(:focus) {
            color: #ffffff !important;
        }

/* Custom Checkbox - Modern */
body.form-membership .form-wrapper form .custom-control.custom-checkbox {
    margin-bottom: 1.5rem;
}

body.form-membership .form-wrapper form .custom-control-input {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(61, 177, 107, 0.3);
    border-radius: 6px;
    background: rgba(44, 47, 61, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}

    body.form-membership .form-wrapper form .custom-control-input:checked {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.2);
    }

body.form-membership .form-wrapper form .custom-control-label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px;
    cursor: pointer;
    margin-left: 8px;
    user-select: none;
}

/* Login Options */
.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 15px;
}

.social-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.social-link {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 16px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(61, 177, 107, 0.1);
    border: 1px solid rgba(61, 177, 107, 0.2);
}

    .social-link:hover {
        color: #ffffff !important;
        background: rgba(61, 177, 107, 0.2);
        border-color: rgba(61, 177, 107, 0.4);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.2);
    }

/* Submit Button - Professional */
body.form-membership .form-wrapper form .btn-primary,
body.form-membership .form-wrapper form .login-submit-btn,
body.form-membership .form-wrapper form button[type="submit"] {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%) !important;
    border: none !important;
    color: white !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(61, 177, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.login-submit-btn .btn-text {
    flex: 1;
    text-align: center;
}

.login-submit-btn .btn-icon {
    transition: transform 0.3s ease;
}

body.form-membership .form-wrapper form .btn-primary::before,
body.form-membership .form-wrapper form .login-submit-btn::before,
body.form-membership .form-wrapper form button[type="submit"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
}

body.form-membership .form-wrapper form .btn-primary:hover::before,
body.form-membership .form-wrapper form .login-submit-btn:hover::before,
body.form-membership .form-wrapper form button[type="submit"]:hover::before {
    left: 100%;
}

body.form-membership .form-wrapper form .btn-primary:hover,
body.form-membership .form-wrapper form .login-submit-btn:hover,
body.form-membership .form-wrapper form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(61, 177, 107, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    background: linear-gradient(135deg, #65d993 0%, #3db16b 100%) !important;
}

.login-submit-btn:hover .btn-icon {
    transform: translateX(4px);
}

body.form-membership .form-wrapper form .btn-primary:active,
body.form-membership .form-wrapper form .login-submit-btn:active,
body.form-membership .form-wrapper form button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3) !important;
}

/* Alert Messages */
body.form-membership .form-wrapper .alert,
.login-alert {
    background: rgba(229, 62, 62, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(229, 62, 62, 0.3);
    border-radius: 12px;
    color: #fca5a5;
    padding: 12px 18px;
    margin-bottom: 1.5rem;
    font-size: 14px;
}

/* Login Language */
.login-language {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(61, 177, 107, 0.2);
}

/* Login Footer */
.login-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(61, 177, 107, 0.2);
    text-align: center;
}

.brand-logo {
    margin-bottom: 1.5rem;
}

    .brand-logo img {
        width: 150px;
        height: auto;
        transition: all 0.3s ease;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
    }

        .brand-logo img:hover {
            transform: translateY(-3px);
            filter: drop-shadow(0 4px 12px rgba(61, 177, 107, 0.3));
        }

.app-stores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.app-store-link {
    display: inline-block;
    transition: all 0.3s ease;
}

    .app-store-link img {
        width: 120px;
        height: 36px;
        transition: all 0.3s ease;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
    }

    .app-store-link:hover img {
        transform: translateY(-2px);
        filter: drop-shadow(0 4px 10px rgba(61, 177, 107, 0.3));
    }

/* Responsive */
@media (max-width: 768px) {
    body.form-membership .form-wrapper {
        width: 90% !important;
        max-width: 420px !important;
        padding: 2.5rem 2rem !important;
        margin: 30px auto !important;
    }

        body.form-membership .form-wrapper .logo {
            width: 90px !important;
            height: 90px !important;
            margin: -100px auto 2rem auto !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

    .login-title {
        font-size: 24px !important;
    }

    .login-subtitle {
        font-size: 13px;
    }

    .login-options {
        flex-direction: column;
        align-items: flex-start;
    }

    .social-links {
        width: 100%;
        justify-content: flex-end;
    }
}

.modern-welcome-card:not(.user-welcome) {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.modern-welcome-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3db16b 0%, #65d993 50%, #3db16b 100%);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.modern-welcome-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(61, 177, 107, 0.2);
}

.welcome-header {
    text-align: center;
    margin-bottom: 0 !important;
    flex-shrink: 0;
    flex-grow: 0;
}

.user-welcome .welcome-header {
    margin-bottom: 0 !important;
    padding-bottom: 4px;
}

.modern-avatar,
.user-welcome .modern-avatar,
.user-welcome .avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 4px !important;
    font-size: 20px !important;
    font-weight: 700;
    color: #222531 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border: 2px solid rgba(255,255,255,0.3) !important;
    flex-shrink: 0;
}

.welcome-name {
    color: white !important;
    font-size: 14px !important;
    font-weight: 600;
    margin: 2px 0 !important;
    flex-shrink: 0;
    line-height: 1.3;
}

.user-welcome .welcome-name {
    color: white !important;
    font-size: 13px !important;
    margin: 2px 0 !important;
}

.user-welcome h5.welcome-name {
    margin-bottom: 4px !important;
}

.welcome-label {
    font-weight: 300;
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    display: block;
    margin-bottom: 1px !important;
    line-height: 1.2;
}

.welcome-user {
    font-weight: 600;
    font-size: 12px !important;
    color: white !important;
    line-height: 1.3;
}

.welcome-actions {
    margin: 4px 0 !important;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
}

.user-welcome .welcome-actions {
    margin: 2px 0 !important;
}

.btn-modern,
.user-welcome .btn-modern,
.user-welcome select.btn-modern,
.user-welcome #ChangeUser.btn-modern {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 5px;
    font-weight: 500;
    font-size: 10px !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    width: 100%;
    margin: 0;
    line-height: 1.3;
    height: auto;
    min-height: auto;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 12px !important;
    padding-right: 24px !important;
}

    .user-welcome select.btn-modern option,
    .user-welcome #ChangeUser option,
    .user-welcome #languageSelect option {
        background: #3a3f51 !important;
        color: #e9ecef !important;
        padding: 8px 12px !important;
    }

    /* Selectbox açıldığında dropdown menüsü için */
    .user-welcome select.btn-modern:focus option,
    .user-welcome #ChangeUser:focus option,
    .user-welcome #languageSelect:focus option {
        background: #3a3f51 !important;
        color: #e9ecef !important;
    }

    .user-welcome select.btn-modern option:hover,
    .user-welcome #ChangeUser option:hover,
    .user-welcome #languageSelect option:hover {
        background: #454b5f !important;
        color: white !important;
    }

    .user-welcome select.btn-modern option:checked,
    .user-welcome #ChangeUser option:checked,
    .user-welcome #languageSelect option:checked {
        background: #3db16b !important;
        color: white !important;
    }

    .user-welcome select.btn-modern:focus,
    .user-welcome #ChangeUser:focus,
    .user-welcome #languageSelect:focus {
        background: rgba(255, 255, 255, 0.25) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
        outline: none !important;
        color: white !important;
    }

    .btn-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4);
        color: white;
    }

.welcome-info {
    margin-top: 2px !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
}

.user-welcome .welcome-info {
    margin-top: 2px !important;
    padding-top: 3px !important;
}

.welcome-selects-wrapper {
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
    align-items: center;
}

    .welcome-selects-wrapper select {
        flex: 1;
        min-width: 0;
    }

.server-info {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 10px !important;
    margin-bottom: 4px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.2;
}

.user-welcome .server-info {
    margin-bottom: 3px !important;
}

.server-info i {
    font-size: 9px;
}

.server-info strong {
    color: white !important;
    font-weight: 600;
}

.language-select,
.user-welcome .language-select,
.user-welcome #languageSelect {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    border-radius: 5px;
    padding: 4px 24px 4px 8px !important;
    font-size: 10px !important;
    margin: 0 !important;
    line-height: 1.3;
    height: auto;
    min-height: auto;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 12px !important;
}

    .user-welcome #languageSelect option {
        background: #3a3f51 !important;
        color: #e9ecef !important;
        padding: 8px !important;
    }

    .user-welcome #languageSelect:focus {
        background: rgba(255, 255, 255, 0.25) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
        outline: none !important;
        color: white !important;
    }

    .language-select:focus {
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.1);
        outline: none;
    }

.dashboard-menu-grid {
    margin-top: 20px;
    display: block;
    max-width: 100%;
}

.row.mt-3.dashboard-menu-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -6px !important;
    margin-left: -6px !important;
}

    .row.mt-3.dashboard-menu-grid > .col-md-3 {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        width: 20% !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    .row.mt-3.dashboard-menu-grid > .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

@media (max-width: 992px) {
    .dashboard-menu-grid .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    .dashboard-menu-grid .col-md-3,
    .dashboard-menu-grid .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.modern-menu-card {
    background: linear-gradient(135deg, #2c2f3a 0%, #3a3f51 100%);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(61, 177, 107, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 160px;
    z-index: 1;
}

    .modern-menu-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #3db16b 0%, #65d993 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .modern-menu-card:hover::before {
        transform: scaleX(1);
    }

    .modern-menu-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 10px 30px rgba(61, 177, 107, 0.4);
        border-color: rgba(61, 177, 107, 0.6);
        background: linear-gradient(135deg, #353849 0%, #424758 100%);
    }

.menu-icon-wrapper {
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    background: rgba(61, 177, 107, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(61, 177, 107, 0.3);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.modern-menu-card:hover .menu-icon-wrapper {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    transform: scale(1.08);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
}

.menu-icon-wrapper i {
    font-size: 18px;
    color: #3db16b;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-menu-card:hover .menu-icon-wrapper i {
    color: white;
    transform: scale(1.1);
}

.modern-menu-card h6 {
    color: #e9ecef;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.modern-menu-card .info {
    color: #a8b2c1;
    font-size: 10px;
    display: block;
    margin-bottom: 10px;
    line-height: 1.3;
    flex-grow: 1;
    min-height: 28px;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    position: relative;
    z-index: 2;
}

.btn-modern-outline {
    background: rgba(61, 177, 107, 0.1);
    border: 1px solid rgba(61, 177, 107, 0.4);
    color: #3db16b;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 10px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
    position: relative;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

    .btn-modern-outline i {
        flex-shrink: 0;
        font-size: 10px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 3px;
    }

    .btn-modern-outline:hover {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-color: transparent;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(61, 177, 107, 0.4);
    }

    .btn-modern-outline i {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 12px;
    }

    .btn-modern-outline:hover i {
        transform: translateX(2px);
    }

@media (max-width: 768px) {
    .modern-dashboard {
        padding: 15px;
    }

    .dashboard-menu-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }

    .each-menu,
    .modern-menu-card {
        padding: 14px;
        min-width: 150px;
    }

        .each-menu i {
            font-size: 20px;
            width: 44px;
            height: 44px;
        }

        .each-menu h6 {
            font-size: 13px;
        }

        .each-menu .info {
            font-size: 10px;
        }

    .menu-icon-wrapper {
        width: 44px;
        height: 44px;
    }

        .menu-icon-wrapper i {
            font-size: 20px;
        }

    .modern-menu-card h6 {
        font-size: 13px;
    }

    .modern-menu-card .info {
        font-size: 10px;
    }

    .btn-modern-outline,
    .each-menu .btn,
    .each-menu .btn-outline-dark {
        padding: 6px 12px;
        font-size: 10px;
    }
}

/* ============================================
   NMESSAGES INDEX CLASSES
   ============================================ */

.holds-the-iframe {
    background: url(iframe.gif) center center no-repeat;
}

.isHidden {
    display: none;
}

.isNoHidden {
    display: block;
}

.buttonXS {
    width: 100%;
    display: block;
}

.dflex {
    display: flex !important;
}

.message-contents {
    width: 100% !important;
    border-radius: 5px;
    padding: 10px 20px;
}

.message-item {
    width: -webkit-fill-available;
    word-break: break-all;
}

.message-center {
    margin-left: 25%;
    margin-right: 25%;
    text-align: center;
}

.message-center-red {
    background-color: indianred !important;
    color: white;
}

.message-center-gray {
    background-color: #444444 !important;
    color: #bbbbbb;
    font-size: 11px;
}

.ptagi {
    color: #ff8383 !important;
}

.ptagw {
    color: #00e676 !important;
}

.ptagwb {
    color: #00e676 !important;
}

.ptagwTg {
    color: #2AABEE !important;
}

.ptagwLd {
    color: #990000 !important;
}

.ptagwTl {
    color: #990342 !important;
}

.systemMessage {
    display: none;
}

.context-menu-list {
    box-shadow: none;
    border: 1px solid #f3f3f3;
}

/* ============================================
   CHANNELS INDEX CLASSES
   ============================================ */

.card.card-dark-text {
    color: #212529 !important;
}

    .card.card-dark-text *:not(.instagram-side):not(.instagram-side *) {
        color: #212529 !important;
    }

.sm-account-card {
    display: flex;
    align-items: center;
    border-radius: 14px;
    background: #23272f;
    color: #212529 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    margin-bottom: 16px;
    border: 2px solid transparent;
    transition: border 0.18s;
}

    .sm-account-card.sm-account-card-dark-text {
        color: #212529 !important;
    }

        .sm-account-card.sm-account-card-dark-text *:not(.instagram-side):not(.instagram-side *) {
            color: #212529 !important;
        }

    .sm-account-card.active {
        border-color: #35b37a;
    }

.instagram-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    background: linear-gradient(135deg, #fd5949 0%, #d6249f 70%, #285AEB 100%);
    border-radius: 14px 0 0 14px;
    min-width: 78px;
    height: 100%;
    color: #fff;
    font-size: 1.2em;
    font-weight: 600;
    letter-spacing: 0.03em;
}

    .instagram-side .fa-instagram {
        font-size: 1.9em;
        margin-bottom: 7px;
        background: radial-gradient(circle at 33% 100%, #fec564 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
        border-radius: 50%;
        padding: 4px;
    }

.instagram-name {
    font-size: 1em;
    text-align: center;
    word-break: break-all;
    font-weight: 500;
    color: #212529 !important;
}

.content-side {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    padding: 12px 22px;
    color: #212529 !important;
}

    .content-side input[type="checkbox"] {
        width: 20px;
        height: 20px;
        accent-color: #35b37a;
        margin-right: 10px;
    }

.main-label {
    font-weight: 600;
    font-size: 1.08em;
    color: #212529 !important;
}

.arrow {
    margin-left: 8px;
    color: #888ba2;
    font-size: 1.05em;
}

.facebook {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #3b5998;
    font-weight: 500;
    font-size: 1em;
}

    .facebook .fa-facebook {
        font-size: 1.15em;
    }

/* Switch/Toggle Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #3db16b;
}

    input:checked + .slider:before {
        transform: translateX(26px);
    }

.slider.round {
    border-radius: 24px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/* Form Label Styles */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #e9ecef;
}

    .form-label.d-block {
        display: block;
    }

/* JSON Edit Button Wrapper */
#jsonEditBtnWrapper {
    margin-bottom: 15px;
}

#jsonEditBtn {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    #jsonEditBtn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
    }

/* WhatsApp Badge */
.whatsapp-badge {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

/* Telegram Badge */
.telegram-badge {
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
}

/* Instagram Badge */
.instagram-badge {
    background: linear-gradient(135deg, #fd5949 0%, #d6249f 70%, #285AEB 100%);
}

/* LiveDesk Badge */
.livedesk-badge {
    background: linear-gradient(135deg, #990000 0%, #cc0000 100%);
}

/* Santral Badge */
.santral-badge {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
}

/* Additional context menu styles */
.context-menu-list {
    position: absolute;
    display: inline-block;
    min-width: 13em;
    max-width: 26em;
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 8px;
    padding: 0.25em 0;
    margin: 0.3em;
    color: #e9ecef;
    font-family: inherit;
    font-size: 1em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    list-style-type: none;
}

.context-menu-item {
    position: relative;
    display: block;
    padding: 0.5em 1em;
    color: #e9ecef;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

    .context-menu-item:hover,
    .context-menu-list .context-menu-item.context-menu-hover {
        background: rgba(61, 177, 107, 0.1);
        color: #3db16b;
    }

.context-menu-list .context-menu-item.context-menu-disabled {
    color: #a8b2c1;
    cursor: default;
    opacity: 0.5;
}

    .context-menu-list .context-menu-item.context-menu-disabled:hover {
        background: transparent;
        color: #a8b2c1;
    }

.context-menu-separator {
    height: 1px;
    background: #5a6278;
    margin: 0.35em 0;
    padding: 0;
}

/* Option style for select elements */
option-style {
    background-color: #454b5f !important;
    color: #e9ecef !important;
    border-color: #5a6278 !important;
}

    option-style:focus {
        color: rgba(233, 236, 239, 0.7) !important;
        background-color: #5a6278 !important;
        border-color: #3db16b !important;
    }

.check-success .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #3db16b;
    border-color: #3db16b;
}

/* ============================================
   CRITICAL FIX: POSTS SMARTWIZARD GÖRÜNÜRLÜK SORUNU
   Tab-pane kuralları SmartWizard'ı etkilememeli
   JavaScript görünürlüğü yönetir, CSS müdahale etmemeli
   ============================================ */

/* SmartWizard adımları için sadece renk ayarları - görünürlük JavaScript tarafından yönetilir */
#smartwizard div[id^="adim-"],
#smartwizard #adim-1,
#smartwizard #adim-2,
#smartwizard #adim-3,
#smartwizard #adim-4 {
    color: #e9ecef !important;
    /* Display JavaScript tarafından yönetilir - CSS müdahale etmemeli */
}

    /* CRITICAL: SmartWizard adımları başlangıçta gizli olmalı */
    #smartwizard #adim-1:not([style*="display: block"]):not([style*="display:block"]),
    #smartwizard #adim-2:not([style*="display: block"]):not([style*="display:block"]),
    #smartwizard #adim-3:not([style*="display: block"]):not([style*="display:block"]),
    #smartwizard #adim-4:not([style*="display: block"]):not([style*="display:block"]) {
        display: none !important;
    }

    /* JavaScript .show() ile gösterilen adımlar görünür olmalı */
    #smartwizard #adim-1[style*="display: block"],
    #smartwizard #adim-1[style*="display:block"],
    #smartwizard #adim-2[style*="display: block"],
    #smartwizard #adim-2[style*="display:block"],
    #smartwizard #adim-3[style*="display: block"],
    #smartwizard #adim-3[style*="display:block"],
    #smartwizard #adim-4[style*="display: block"],
    #smartwizard #adim-4[style*="display:block"] {
        display: block !important;
    }

/* ============================================
   POSTS PAGE COMPLETE MODERNIZATION
   Profesyonel ve teknolojik tasarım
   ============================================ */

/* Posts Page Container */
.posts-page-container {
    padding: 20px;
    background: #1d1f29;
    min-height: 100vh;
}

/* Posts Header Section */
.posts-header-section {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    padding: 25px 30px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    box-shadow: 0 4px 20px rgba(61, 177, 107, 0.3);
}

    .posts-header-section .nav-tabs {
        border: none;
        display: flex;
        gap: 10px;
    }

        .posts-header-section .nav-tabs .nav-item {
            margin: 0;
        }

        .posts-header-section .nav-tabs .nav-link {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.9);
            padding: 12px 24px;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-weight: 500;
            backdrop-filter: blur(10px);
        }

            .posts-header-section .nav-tabs .nav-link:hover {
                background: rgba(255, 255, 255, 0.25);
                color: white;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            }

            .posts-header-section .nav-tabs .nav-link.active {
                background: rgba(255, 255, 255, 0.95);
                color: #3db16b;
                font-weight: 600;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }

            .posts-header-section .nav-tabs .nav-link i {
                margin-right: 8px;
                font-size: 16px;
            }

/* SmartWizard Modern Styling */
#smartwizard {
    background: transparent;
    padding: 0;
    margin: 0;
}

    #smartwizard .sw-container {
        background: transparent;
    }

    /* SmartWizard Navigation Steps */
    #smartwizard .sw-theme-arrows > ul.step-anchor {
        background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
        border: 1px solid #5a6278;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

        #smartwizard .sw-theme-arrows > ul.step-anchor > li {
            flex: 1;
            margin-right: 15px;
            position: relative;
        }

            #smartwizard .sw-theme-arrows > ul.step-anchor > li:last-child {
                margin-right: 0;
            }

            #smartwizard .sw-theme-arrows > ul.step-anchor > li > a {
                background: transparent;
                border: 2px solid #5a6278;
                color: #a8b2c1;
                padding: 15px 20px;
                border-radius: 10px;
                transition: all 0.3s ease;
                display: block;
                text-align: center;
                font-weight: 500;
                position: relative;
                overflow: hidden;
            }

                #smartwizard .sw-theme-arrows > ul.step-anchor > li > a::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, transparent, rgba(61, 177, 107, 0.2), transparent);
                    transition: left 0.5s ease;
                }

                #smartwizard .sw-theme-arrows > ul.step-anchor > li > a:hover::before {
                    left: 100%;
                }

                #smartwizard .sw-theme-arrows > ul.step-anchor > li > a:hover {
                    border-color: #3db16b;
                    color: #e9ecef;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
                }

            #smartwizard .sw-theme-arrows > ul.step-anchor > li.active > a {
                background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
                border-color: #3db16b;
                color: white;
                font-weight: 600;
                box-shadow: 0 4px 15px rgba(61, 177, 107, 0.4);
            }

            #smartwizard .sw-theme-arrows > ul.step-anchor > li.done > a {
                background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
                border-color: #48bb78;
                color: white;
            }

            #smartwizard .sw-theme-arrows > ul.step-anchor > li > a small {
                display: block;
                font-size: 11px;
                margin-top: 5px;
                opacity: 0.8;
            }

    /* SmartWizard Step Content */
    #smartwizard .step-content {
        background: transparent;
        padding: 30px;
        border-radius: 12px;
        min-height: 400px;
    }

        #smartwizard .step-content h5 {
            color: #e9ecef;
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #5a6278;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            #smartwizard .step-content h5::before {
                content: '';
                width: 4px;
                height: 24px;
                background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
                border-radius: 2px;
            }

/* Step 1: Post Type Selection */
#adim-1 .btn-group {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

    #adim-1 .btn-group .btn {
        flex: 1;
        min-width: 120px;
        background: #454b5f;
        border: 2px solid #5a6278;
        color: #e9ecef;
        padding: 15px 25px;
        border-radius: 10px;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

        #adim-1 .btn-group .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(61, 177, 107, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }

        #adim-1 .btn-group .btn:hover::before {
            width: 300px;
            height: 300px;
        }

        #adim-1 .btn-group .btn:hover {
            border-color: #3db16b;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4);
        }

        #adim-1 .btn-group .btn.active {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            border-color: #3db16b;
            color: white;
            box-shadow: 0 6px 20px rgba(61, 177, 107, 0.5);
        }

/* Form Groups */
#smartwizard .form-group {
    margin-bottom: 25px;
}

    #smartwizard .form-group label {
        color: #e9ecef;
        font-weight: 500;
        margin-bottom: 10px;
        display: block;
        font-size: 14px;
    }

#smartwizard .form-control {
    background: #454b5f;
    border: 2px solid #5a6278;
    color: #e9ecef;
    border-radius: 10px;
    padding: 12px 18px;
    transition: all 0.3s ease;
    font-size: 14px;
}

    #smartwizard .form-control:focus {
        background: #4a5062;
        border-color: #3db16b;
        color: white;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.15);
        outline: none;
    }

    #smartwizard .form-control::placeholder {
        color: #a8b2c1;
    }

#smartwizard textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Step 2: Channel Selection */
#adim-2 .row {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

#adim-2 .col-md-5 {
    flex: 1;
    min-width: 300px;
    background: #3a3f51;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #464852;
}

#adim-2 .custom-control {
    padding: 15px;
    margin-bottom: 12px;
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

    #adim-2 .custom-control:hover {
        background: #4a5062;
        border-color: #3db16b;
        transform: translateX(5px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.2);
    }

#adim-2 .custom-control-input:checked ~ .custom-control-label {
    color: #e9ecef;
    font-weight: 500;
}

    #adim-2 .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #3db16b;
        border-color: #3db16b;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.2);
    }

#adim-2 .custom-control-label {
    color: #a8b2c1;
    cursor: pointer;
    padding-left: 5px;
}

    #adim-2 .custom-control-label i {
        margin-left: 8px;
        font-size: 16px;
        color: #3db16b;
    }

/* Step 3: Scheduling */
#adim-3 .btn-group {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

    #adim-3 .btn-group .btn {
        flex: 1;
        min-width: 140px;
        background: #454b5f;
        border: 2px solid #5a6278;
        color: #e9ecef;
        padding: 12px 20px;
        border-radius: 10px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

        #adim-3 .btn-group .btn:hover {
            border-color: #3db16b;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
        }

        #adim-3 .btn-group .btn.active {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            border-color: #3db16b;
            color: white;
            box-shadow: 0 4px 15px rgba(61, 177, 107, 0.4);
        }

#adim-3 .post-time-schedule {
    background: #3a3f51;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #464852;
    margin-top: 20px;
}

#adim-3 .input-group {
    margin-bottom: 15px;
}

#adim-3 .input-group-text {
    background: #454b5f;
    border: 2px solid #5a6278;
    border-right: none;
    color: #3db16b;
    border-radius: 10px 0 0 10px;
}

#adim-3 .input-group .form-control {
    border-left: none;
    border-radius: 0 10px 10px 0;
}

    #adim-3 .input-group .form-control:focus + .input-group-text,
    #adim-3 .input-group .form-control:focus ~ .input-group-text {
        border-color: #3db16b;
    }

#adim-3 select.form-control {
    background: #454b5f;
    border: 2px solid #5a6278;
    color: #e9ecef;
    border-radius: 10px;
    padding: 12px 18px;
}

    #adim-3 select.form-control:focus {
        border-color: #3db16b;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.15);
    }

/* Step 4: Review */
#adim-4 .panel {
    background: #3a3f51;
    border: 1px solid #464852;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

#adim-4 .panel-body {
    padding: 25px;
    background: #454b5f;
}

#adim-4 .post-heading {
    margin-bottom: 20px;
}

#adim-4 .media-heading {
    color: #e9ecef;
    font-weight: 600;
    margin-bottom: 5px;
}

#adim-4 .anchor-time {
    color: #a8b2c1;
    font-size: 13px;
}

#adim-4 .post-body {
    margin: 20px 0;
    color: #e9ecef;
    line-height: 1.6;
}

#adim-4 .post-footer {
    border-top: 1px solid #5a6278;
    padding-top: 15px;
    margin-top: 20px;
}

#adim-4 .post-footer-option ul {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#adim-4 .post-footer-option li a {
    color: #a8b2c1;
    text-decoration: none;
    transition: color 0.3s ease;
}

    #adim-4 .post-footer-option li a:hover {
        color: #3db16b;
    }

/* Media Gallery */
#PicturesMain {
    background: #3a3f51;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #464852;
    margin-top: 20px;
}

    #PicturesMain .filters {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        padding: 0;
        list-style: none;
    }

        #PicturesMain .filters li {
            margin: 0;
        }

        #PicturesMain .filters .btn {
            background: #454b5f;
            border: 2px solid #5a6278;
            color: #e9ecef;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-size: 13px;
        }

            #PicturesMain .filters .btn:hover {
                background: #3db16b;
                border-color: #3db16b;
                color: white;
                transform: translateY(-2px);
            }

    #PicturesMain .send.buttons {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        border: none;
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
        float: right;
    }

        #PicturesMain .send.buttons:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(72, 187, 120, 0.4);
        }

        #PicturesMain .send.buttons:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        #PicturesMain .send.buttons.selected {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        }

#container {
    margin: 20px 0;
}

.grid-item {
    background: #454b5f;
    border: 2px solid #5a6278;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

    .grid-item:hover {
        border-color: #3db16b;
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(61, 177, 107, 0.3);
    }

    .grid-item.selected {
        border-color: #3db16b;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.3);
    }

        .grid-item.selected::after {
            content: '✓';
            position: absolute;
            top: 10px;
            right: 10px;
            background: #3db16b;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
            z-index: 10;
        }

    .grid-item .imgs {
        width: 100%;
        height: auto;
        display: block;
    }

    .grid-item i {
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: #3db16b;
        font-size: 18px;
        background: rgba(0, 0, 0, 0.6);
        padding: 5px;
        border-radius: 4px;
    }

.isotope-pager {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

    .isotope-pager .pager {
        background: #454b5f;
        border: 2px solid #5a6278;
        color: #e9ecef;
        padding: 8px 16px;
        border-radius: 8px;
        transition: all 0.3s ease;
        text-decoration: none;
        min-width: 40px;
        text-align: center;
    }

        .isotope-pager .pager:hover {
            background: #3db16b;
            border-color: #3db16b;
            color: white;
            transform: translateY(-2px);
        }

/* SmartWizard Toolbar */
#smartwizard .sw-toolbar {
    background: #3a3f51;
    border-top: 1px solid #464852;
    padding: 20px;
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

#smartwizard .sw-btn-group {
    display: flex;
    gap: 12px;
}

#smartwizard .sw-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

#smartwizard .sw-btn-prev {
    background: #454b5f;
    color: #e9ecef;
    border: 2px solid #5a6278;
}

    #smartwizard .sw-btn-prev:hover:not(.disabled) {
        background: #5a6278;
        color: white;
        transform: translateX(-3px);
    }

#smartwizard .sw-btn-next {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    color: white;
}

    #smartwizard .sw-btn-next:hover:not(.disabled) {
        transform: translateX(3px);
        box-shadow: 0 4px 15px rgba(61, 177, 107, 0.4);
    }

#smartwizard .sw-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#smartwizard .btnComplate {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

    #smartwizard .btnComplate:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
    }

#smartwizard .btnReset {
    background: #e53e3e;
    color: white;
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

    #smartwizard .btnReset:hover {
        background: #c53030;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(229, 62, 62, 0.4);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .posts-header-section .nav-tabs {
        flex-direction: column;
    }

        .posts-header-section .nav-tabs .nav-link {
            width: 100%;
        }

    #smartwizard .sw-theme-arrows > ul.step-anchor {
        flex-direction: column;
        gap: 10px;
    }

        #smartwizard .sw-theme-arrows > ul.step-anchor > li {
            margin-right: 0;
        }

    #adim-2 .row {
        flex-direction: column;
    }

    #adim-2 .col-md-5 {
        width: 100%;
    }

    #smartwizard .sw-toolbar {
        flex-direction: column;
    }

    #smartwizard .sw-btn-group {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   MANAGE TEAM PAGE MODERNIZATION
   Teknolojik, kullanışlı ve profesyonel tasarım
   ============================================ */

/* Team Management Header */
/* Manage Team Container */
.manage-team-container {
    background: linear-gradient(135deg, #1a1d29 0%, #2c2f3a 100%);
    padding: 30px;
    border-radius: 12px;
    min-height: 100vh;
    color: #e9ecef;
    width: 100% !important;
    box-sizing: border-box;
    display: block !important;
    float: none !important;
    clear: both !important;
}

.content.col-md-12.manage-team-container {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
}

/* Manage Team Header Section - MySettings tarzı */
.manage-team-header-section {
    margin-bottom: 35px;
    width: 100%;
    display: block;
    clear: both;
    float: none;
}

.manage-team-title-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 40px 50px;
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(61, 177, 107, 0.3);
    margin-bottom: 30px;
    width: 100% !important;
    min-height: 150px;
    box-sizing: border-box;
    clear: both !important;
    float: none !important;
    position: relative;
}

.manage-team-icon-circle {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

    .manage-team-icon-circle i {
        font-size: 42px;
        color: white;
    }

.manage-team-title-content {
    flex: 1;
    min-width: 0;
}

.manage-team-main-title {
    color: white;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
}

.manage-team-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

/* Team Management Content */
.manage-team-content {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: 400px;
    width: 100% !important;
    display: block !important;
    clear: both !important;
    float: none !important;
}

.manage-team-container .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    display: block !important;
    clear: both !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

    .manage-team-container .container-fluid.container-fixed-lg {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        clear: both !important;
        display: block !important;
    }

/* Add Member Button */
.manage-team-content .btn-info {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3);
}

    .manage-team-content .btn-info:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4);
    }

    .manage-team-content .btn-info i {
        margin-right: 8px;
    }

/* Team Tabs (Aktif/Pasif) */
.manage-team-content .tabbable .nav-tabs {
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 20px;
    display: inline-flex;
}

    .manage-team-content .tabbable .nav-tabs .nav-link {
        background: transparent;
        border: none;
        color: #a8b2c1;
        padding: 10px 20px;
        border-radius: 8px;
        transition: all 0.3s ease;
        margin-right: 5px;
    }

        .manage-team-content .tabbable .nav-tabs .nav-link:hover {
            background: rgba(61, 177, 107, 0.1);
            color: #e9ecef;
        }

        .manage-team-content .tabbable .nav-tabs .nav-link.active {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            color: white;
            font-weight: 500;
        }

/* Team Table */
.tableTeam {
    width: 100%;
    background: #3a3f51 !important;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #464852;
}

    .tableTeam.modern-table {
        background: #3a3f51 !important;
    }

    .tableTeam thead {
        background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%) !important;
    }

        .tableTeam thead th {
            color: #e9ecef !important;
            font-weight: 600;
            padding: 15px;
            border-bottom: 2px solid #5a6278;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.5px;
            background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%) !important;
        }

    .tableTeam tbody {
        background: #3a3f51 !important;
    }

        .tableTeam tbody tr {
            background: #3a3f51 !important;
            border-bottom: 1px solid #464852;
            transition: all 0.3s ease;
        }

            .tableTeam tbody tr:hover {
                background: #454b5f !important;
                transform: scale(1.01);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }

        .tableTeam tbody td {
            color: #e9ecef !important;
            padding: 15px;
            vertical-align: middle;
            background: transparent !important;
        }

        .tableTeam tbody tr[style*="background:#2520213d"] {
            opacity: 0.6;
            background: #2520213d !important;
        }

            .tableTeam tbody tr[style*="background:#2520213d"] td {
                color: #a8b2c1 !important;
            }

/* DataTable Override for Dark Theme */
.dataTables_wrapper .dataTables_scrollBody {
    background: #3a3f51 !important;
}

    .dataTables_wrapper .dataTables_scrollBody table {
        background: #3a3f51 !important;
    }

        .dataTables_wrapper .dataTables_scrollBody table tbody tr {
            background: #3a3f51 !important;
        }

            .dataTables_wrapper .dataTables_scrollBody table tbody tr td {
                color: #e9ecef !important;
                background: transparent !important;
            }

.dataTables_wrapper table.dataTable {
    background: #3a3f51 !important;
}

    .dataTables_wrapper table.dataTable thead th {
        background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%) !important;
        color: #e9ecef !important;
    }

    .dataTables_wrapper table.dataTable tbody tr {
        background: #3a3f51 !important;
    }

        .dataTables_wrapper table.dataTable tbody tr td {
            color: #e9ecef !important;
            background: transparent !important;
        }

.dataTables_wrapper .dataTables_scrollBody table thead {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%) !important;
}

    .dataTables_wrapper .dataTables_scrollBody table thead th {
        background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%) !important;
        color: #e9ecef !important;
    }

.dataTables_wrapper .dataTables_scrollBody table tbody {
    background: #3a3f51 !important;
}

    .dataTables_wrapper .dataTables_scrollBody table tbody tr:hover {
        background: #454b5f !important;
    }

/* Team Action Buttons */
.btn-success1 {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 13px;
    margin-left: 10px;
}

    .btn-success1:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
        color: white;
    }

.btn-danger1 {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 13px;
    margin-left: 10px;
}

    .btn-danger1:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(229, 62, 62, 0.4);
        color: white;
    }

/* Custom Switch Modern Styling */
.custom-switch-md {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

    .custom-switch-md .custom-control {
        position: relative;
        padding-left: 0;
        display: inline-block;
        min-height: 26px;
    }

    .custom-switch-md .custom-control-input {
        position: absolute;
        z-index: 1;
        opacity: 0;
        width: 50px;
        height: 26px;
        left: 0;
        top: 0;
        cursor: pointer;
    }

    .custom-switch-md .custom-control-label {
        cursor: pointer;
        position: relative;
        display: block;
        width: 50px;
        height: 26px;
        margin: 0;
        padding: 0;
        min-height: 26px;
    }

        .custom-switch-md .custom-control-label::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 26px;
            background: #5a6278;
            border: 2px solid #5a6278;
            border-radius: 13px;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .custom-switch-md .custom-control-label::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            transition: all 0.3s ease;
            pointer-events: none;
        }

    .custom-switch-md .custom-control-input:checked ~ .custom-control-label::before {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        border-color: #48bb78;
    }

    .custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
        left: 27px;
        transform: none;
    }

    .custom-switch-md .custom-control-input:focus ~ .custom-control-label::before {
        box-shadow: 0 0 0 4px rgba(72, 187, 120, 0.25);
    }

/* Status Icons */
.tableTeam .fa-check {
    color: #48bb78;
    font-size: 20px;
}

.tableTeam .fa-ban {
    color: #e53e3e;
    font-size: 20px;
}

/* DataTable Modern Styling */
.dataTables_wrapper {
    background: #3a3f51;
    border-radius: 12px;
    padding: 20px;
}

    .dataTables_wrapper .dataTables_filter input {
        background: #454b5f;
        border: 2px solid #5a6278;
        color: #e9ecef;
        border-radius: 8px;
        padding: 8px 15px;
        margin-left: 10px;
    }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: #3db16b;
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.15);
            outline: none;
        }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: #454b5f;
        border: 1px solid #5a6278;
        color: #e9ecef !important;
        padding: 8px 12px;
        margin: 0 2px;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #3db16b;
            border-color: #3db16b;
            color: white !important;
            transform: translateY(-2px);
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            border-color: #3db16b;
            color: white !important;
        }

/* ============================================
   MANAGE MEMBER PAGE MODERNIZATION
   Teknolojik, kullanışlı ve profesyonel tasarım
   ============================================ */

/* Member Management Header */
.manage-member-header {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    padding: 25px 30px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    box-shadow: 0 4px 20px rgba(61, 177, 107, 0.3);
}

    .manage-member-header .nav-tabs {
        border: none;
    }

        .manage-member-header .nav-tabs .nav-link {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.9);
            padding: 12px 24px;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-weight: 500;
            backdrop-filter: blur(10px);
        }

            .manage-member-header .nav-tabs .nav-link:hover {
                background: rgba(255, 255, 255, 0.25);
                color: white;
                transform: translateY(-2px);
            }

            .manage-member-header .nav-tabs .nav-link.active {
                background: rgba(255, 255, 255, 0.95);
                color: #3db16b;
                font-weight: 600;
            }

            .manage-member-header .nav-tabs .nav-link i {
                margin-right: 8px;
                font-size: 16px;
            }

/* Member Content */
.manage-member-content {
    background: #3a3f51;
    border: 1px solid #464852;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 25px;
    min-height: 400px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

    /* Member Cards */
    .manage-member-content .card {
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        margin-bottom: 25px;
    }

        .manage-member-content .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

    .manage-member-content .card-header {
        background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
        border-bottom: 2px solid #5a6278;
        padding: 20px;
        border-radius: 12px 12px 0 0;
    }

        .manage-member-content .card-header h5 {
            color: #e9ecef;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            .manage-member-content .card-header h5 i {
                color: #3db16b;
                font-size: 20px;
            }

    .manage-member-content .card-body {
        padding: 25px;
        background: #3a3f51;
        border-radius: 0 0 12px 12px;
    }

    /* Avatar */
    .manage-member-content .avatar {
        width: 150px;
        height: 150px;
        border: 3px solid #3db16b;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3);
        margin: 0 auto;
    }

    .manage-member-content .avatar-title-black {
        color: white;
        font-size: 48px;
        font-weight: 700;
        text-transform: uppercase;
    }

    /* Member Form */
    .manage-member-content .form-group {
        margin-bottom: 20px;
    }

        .manage-member-content .form-group label {
            color: #e9ecef !important;
            font-weight: 500;
            margin-bottom: 8px;
            display: block;
            font-size: 14px;
        }

    .manage-member-content .form-control {
        background: #454b5f;
        border: 2px solid #5a6278;
        color: #e9ecef !important;
        border-radius: 10px;
        padding: 12px 18px;
        transition: all 0.3s ease;
        font-size: 14px;
    }

        .manage-member-content .form-control:focus {
            background: #4a5062;
            border-color: #3db16b;
            color: white !important;
            box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.15);
            outline: none;
        }

        .manage-member-content .form-control::placeholder {
            color: #a8b2c1;
        }

    .manage-member-content input[type="checkbox"].form-control {
        width: 24px;
        height: 24px;
        cursor: pointer;
        accent-color: #3db16b;
    }

    /* Member Buttons */
    .manage-member-content .btn-success {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        border: none;
        color: white;
        padding: 12px 30px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
    }

        .manage-member-content .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
        }

        .manage-member-content .btn-success i {
            margin-right: 8px;
        }

    /* Permissions Section */
    .manage-member-content .custom-checkbox {
        padding: 15px;
        margin-bottom: 12px;
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .manage-member-content .custom-checkbox:hover {
            background: #4a5062;
            border-color: #3db16b;
            transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.2);
        }

        .manage-member-content .custom-checkbox .custom-control-input:checked ~ .custom-control-label {
            color: #e9ecef;
            font-weight: 500;
        }

            .manage-member-content .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
                background-color: #3db16b;
                border-color: #3db16b;
                box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.2);
            }

        .manage-member-content .custom-checkbox .custom-control-label {
            color: #e9ecef !important;
            cursor: pointer;
            padding-left: 5px;
            font-size: 14px;
        }

    /* Member Card Body Text Colors */
    .manage-member-content .card-body {
        color: #e9ecef !important;
    }

        .manage-member-content .card-body * {
            color: #e9ecef !important;
        }

        .manage-member-content .card-body label {
            color: #e9ecef !important;
        }

        .manage-member-content .card-body input,
        .manage-member-content .card-body textarea,
        .manage-member-content .card-body select {
            color: #e9ecef !important;
        }

        .manage-member-content .card-body .form-group label {
            color: #e9ecef !important;
        }

    /* Channels Section - Compact and Professional */
    .manage-member-content #CksList_Chk_Member {
        background: #3a3f51;
        padding: 20px;
        border-radius: 12px;
        border: 1px solid #464852;
        margin-top: 15px;
        max-height: 500px;
        overflow-y: auto;
        overflow-x: hidden;
    }

        /* Custom Scrollbar for Channels */
        .manage-member-content #CksList_Chk_Member::-webkit-scrollbar {
            width: 8px;
        }

        .manage-member-content #CksList_Chk_Member::-webkit-scrollbar-track {
            background: #3a3f51;
            border-radius: 4px;
        }

        .manage-member-content #CksList_Chk_Member::-webkit-scrollbar-thumb {
            background: #3db16b;
            border-radius: 4px;
        }

            .manage-member-content #CksList_Chk_Member::-webkit-scrollbar-thumb:hover {
                background: #65d993;
            }

    .manage-member-content .checkbox.check-success {
        padding: 10px 15px;
        margin-bottom: 8px;
        background: #454b5f;
        border: 1px solid #5a6278;
        border-radius: 8px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        min-height: 45px;
    }

        .manage-member-content .checkbox.check-success:hover {
            background: #4a5062;
            border-color: #3db16b;
            transform: translateX(3px);
            box-shadow: 0 2px 8px rgba(61, 177, 107, 0.2);
        }

        .manage-member-content .checkbox.check-success .custom-control {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 0;
            position: relative;
            min-height: 20px;
        }

        .manage-member-content .checkbox.check-success .custom-control-input {
            position: absolute;
            z-index: 3;
            opacity: 0;
            width: 20px;
            height: 20px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            margin: 0;
            cursor: pointer;
        }

        .manage-member-content .checkbox.check-success .custom-control-label {
            color: #e9ecef !important;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            flex: 1;
            margin: 0;
            padding-left: 30px;
            position: relative;
            min-height: 20px;
        }

            .manage-member-content .checkbox.check-success .custom-control-label::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                background-color: #5a6278;
                border-color: #5a6278;
                width: 20px;
                height: 20px;
                border: 2px solid #5a6278;
                border-radius: 4px;
                z-index: 1;
                pointer-events: none;
            }

            .manage-member-content .checkbox.check-success .custom-control-label::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 4px;
                transform: translateY(-50%);
                width: 12px;
                height: 12px;
                background: white;
                border-radius: 2px;
                z-index: 2;
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.15s ease-in-out;
            }

        .manage-member-content .checkbox.check-success .custom-control-input:checked ~ .custom-control-label::before {
            background-color: #3db16b;
            border-color: #3db16b;
        }

        .manage-member-content .checkbox.check-success .custom-control-input:checked ~ .custom-control-label::after {
            opacity: 1;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 10px;
        }

        .manage-member-content .checkbox.check-success .custom-control-input:checked ~ .custom-control-label::before {
            background-color: #3db16b;
            border-color: #3db16b;
        }

        .manage-member-content .checkbox.check-success .custom-control-label b {
            color: #e9ecef !important;
            margin-right: 8px;
            font-weight: 600;
            font-size: 14px;
        }

        .manage-member-content .checkbox.check-success .custom-control-label span {
            color: #a8b2c1 !important;
            font-size: 11px;
            margin-left: 8px;
            background: #3a3f51;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .manage-member-content .checkbox.check-success .custom-control-label i {
            margin-left: 10px;
            color: #3db16b;
            font-size: 18px;
            flex-shrink: 0;
        }

    /* Channels Grid Layout - More Compact */
    .manage-member-content #CksList_Chk_Member .row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 10px;
        margin: 0;
    }

    .manage-member-content #CksList_Chk_Member .col-md-5 {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .manage-member-content .custom-switch {
        margin-bottom: 15px;
        padding: 12px 15px;
        background: #454b5f;
        border-radius: 8px;
        border: 1px solid #5a6278;
        display: flex;
        align-items: center;
    }

        .manage-member-content .custom-switch .custom-control-label {
            color: #e9ecef !important;
            font-weight: 600;
            cursor: pointer;
            margin-left: 10px;
        }

        .manage-member-content .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
            background-color: #3db16b;
            border-color: #3db16b;
        }

    /* Divider */
    .manage-member-content .row[style*="border-bottom"] {
        border-bottom: 2px solid #5a6278 !important;
        margin: 15px 0;
    }

/* Team Modal Modern Styling */
#newTeam .modal-content {
    background: #3a3f51;
    border: 1px solid #464852;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

#newTeam .modal-header {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-bottom: 2px solid #5a6278;
    border-radius: 12px 12px 0 0;
    padding: 20px 25px;
}

    #newTeam .modal-header .modal-title {
        color: white;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #newTeam .modal-header .close {
        color: white;
        opacity: 0.9;
        font-size: 28px;
        transition: opacity 0.3s ease;
    }

        #newTeam .modal-header .close:hover {
            opacity: 1;
        }

#newTeam .modal-body .form-group label {
    color: #e9ecef;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
}

#newTeam .modal-body .form-control {
    background: #454b5f;
    border: 2px solid #5a6278;
    color: #e9ecef;
    border-radius: 10px;
    padding: 12px 18px;
    transition: all 0.3s ease;
    font-size: 14px;
}

    #newTeam .modal-body .form-control:focus {
        background: #4a5062;
        border-color: #3db16b;
        color: white;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.15);
        outline: none;
    }

    #newTeam .modal-body .form-control::placeholder {
        color: #a8b2c1;
    }

#newTeam .modal-body .custom-switch {
    padding: 10px 0;
}

    #newTeam .modal-body .custom-switch .custom-control-label {
        color: #e9ecef;
        font-weight: 500;
        cursor: pointer;
    }

    #newTeam .modal-body .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #3db16b;
        border-color: #3db16b;
    }

#newTeam .modal-body .custom-checkbox {
    padding: 12px;
    margin-bottom: 10px;
    background: #454b5f;
    border: 1px solid #5a6278;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    #newTeam .modal-body .custom-checkbox:hover {
        background: #4a5062;
        border-color: #3db16b;
    }

    #newTeam .modal-body .custom-checkbox .custom-control-label {
        color: #e9ecef;
        cursor: pointer;
    }

    #newTeam .modal-body .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #3db16b;
        border-color: #3db16b;
    }

#newTeam .modal-footer {
    background: #3a3f51;
    border-top: 1px solid #464852;
    padding: 20px 25px;
    border-radius: 0 0 12px 12px;
}

    #newTeam .modal-footer .btn-secondary {
        background: #5a6278;
        border: none;
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

        #newTeam .modal-footer .btn-secondary:hover {
            background: #6a7280;
            transform: translateY(-2px);
        }

    #newTeam .modal-footer .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border: none;
        color: white;
        padding: 10px 30px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        #newTeam .modal-footer .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(61, 177, 107, 0.4);
        }

/* Responsive Design */
@media (max-width: 768px) {
    .manage-team-header .nav-tabs,
    .manage-member-header .nav-tabs {
        flex-direction: column;
    }

    .manage-team-content .tabbable .nav-tabs {
        flex-direction: column;
        width: 100%;
    }

    .manage-member-content .card-body .row {
        flex-direction: column;
    }

    .manage-member-content .avatar {
        margin-bottom: 20px;
    }

    .manage-member-content #CksList_Chk_Member .row {
        flex-direction: column;
    }

    .manage-member-content #CksList_Chk_Member .col-md-5 {
        width: 100%;
        margin-bottom: 15px;
    }

    .tableTeam {
        font-size: 12px;
    }

        .tableTeam thead th,
        .tableTeam tbody td {
            padding: 10px 8px;
        }
}

/* ============================================
   MYSETTINGS PAGE MODERNIZATION
   Teknolojik, kullanışlı ve profesyonel tasarım
   ============================================ */

/* MySettings Container */
.mysettings-container {
    background: linear-gradient(135deg, #1a1d29 0%, #2c2f3a 100%);
    padding: 30px;
    border-radius: 12px;
    min-height: 100vh;
    color: #e9ecef;
    width: 100% !important;
    box-sizing: border-box;
    display: block !important;
    float: none !important;
    clear: both !important;
}

.content.col-md-12.mysettings-container {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
}

.mysettings-container .content {
    color: #e9ecef !important;
}

/* MySettings Header Section - Livescreen tarzı */
.mysettings-header-section {
    margin-bottom: 35px;
    width: 100%;
    display: block;
    clear: both;
    float: none;
}

.mysettings-title-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 40px 50px;
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(61, 177, 107, 0.3);
    margin-bottom: 30px;
    width: 100% !important;
    min-height: 150px;
    box-sizing: border-box;
    clear: both !important;
    float: none !important;
    position: relative;
}

.mysettings-icon-circle {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

    .mysettings-icon-circle i {
        font-size: 42px;
        color: white;
    }

.mysettings-title-content {
    flex: 1;
    min-width: 0;
}

.mysettings-main-title {
    color: white;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
}

.mysettings-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

/* MySettings Cards - Equal Height */
.mysettings-container .row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    clear: both;
    float: none;
}

    .mysettings-container .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
        padding: 0 15px;
        float: none;
    }

.mysettings-container .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    display: block !important;
    clear: both !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

    .mysettings-container .container-fluid.container-fixed-lg {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        clear: both !important;
        display: block !important;
    }

    .mysettings-container .container-fluid.container-fixed-lg {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        clear: both !important;
    }

.mysettings-container .card {
    background: linear-gradient(135deg, #2c2f3d 0%, #1f222d 100%) !important;
    border: 1px solid rgba(61, 177, 107, 0.3);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(61, 177, 107, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 30px;
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

    .mysettings-container .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #3db16b 0%, #65d993 50%, #3db16b 100%);
        background-size: 200% 100%;
        animation: shimmer 3s ease-in-out infinite;
        z-index: 1;
    }

@keyframes shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.mysettings-container .card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mysettings-container .card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 60px rgba(61, 177, 107, 0.4), 0 0 0 1px rgba(61, 177, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(61, 177, 107, 0.6);
}

.mysettings-container .card-header {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-bottom: none;
    padding: 25px 30px;
    border-radius: 20px 20px 0 0;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

    .mysettings-container .card-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
        pointer-events: none;
    }

    .mysettings-container .card-header::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: pulse 4s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.mysettings-container .card-title {
    color: white;
    font-weight: 700;
    font-size: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

    .mysettings-container .card-title i {
        font-size: 24px;
        color: white;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        transition: transform 0.3s ease;
    }

.mysettings-container .card:hover .card-title i {
    transform: scale(1.1) rotate(5deg);
}

.mysettings-container .card-body {
    background: linear-gradient(180deg, #2c2f3d 0%, #1f222d 100%);
    padding: 30px;
    color: #e9ecef !important;
    border-radius: 0 0 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

    .mysettings-container .card-body::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(61, 177, 107, 0.3) 50%, transparent 100%);
    }

    .mysettings-container .card-body * {
        color: #e9ecef !important;
    }

    /* MySettings Card Body içindeki form-group'ları düzenle */
    .mysettings-container .card-body .form-group:last-child {
        margin-top: auto;
        margin-bottom: 0;
    }

    .mysettings-container .card-body .row.text-center {
        margin-top: auto;
    }

.mysettings-container .card-footer {
    background: linear-gradient(180deg, #1f222d 0%, #2c2f3d 100%);
    border-top: 1px solid rgba(61, 177, 107, 0.2);
    padding: 20px 30px;
    border-radius: 0 0 20px 20px;
}

/* MySettings Tables */
.mysettings-container .table {
    background: transparent;
    color: #e9ecef !important;
    margin-bottom: 0;
}

    .mysettings-container .table tbody tr {
        border-bottom: 1px solid rgba(61, 177, 107, 0.1);
        transition: all 0.3s ease;
        position: relative;
    }

        .mysettings-container .table tbody tr::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #3db16b 0%, #65d993 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .mysettings-container .table tbody tr:hover {
            background: linear-gradient(90deg, rgba(61, 177, 107, 0.1) 0%, rgba(101, 217, 147, 0.05) 100%);
            transform: translateX(5px);
        }

            .mysettings-container .table tbody tr:hover::before {
                opacity: 1;
            }

    .mysettings-container .table td {
        color: #e9ecef !important;
        padding: 12px 15px;
        vertical-align: middle;
    }

        .mysettings-container .table td.text-right {
            color: #a8b2c1 !important;
            font-weight: 600;
            width: 200px;
            font-size: 14px;
        }

        .mysettings-container .table td b {
            color: #e9ecef !important;
            word-break: break-all;
        }

/* MySettings Form Elements */
.mysettings-container .form-group {
    margin-bottom: 20px;
}

    .mysettings-container .form-group label {
        color: #e9ecef !important;
        font-weight: 500;
        margin-bottom: 8px;
        display: block;
        font-size: 14px;
    }

.mysettings-container .form-control {
    background: linear-gradient(135deg, #1f222d 0%, #2c2f3d 100%);
    border: 2px solid rgba(61, 177, 107, 0.2);
    color: #e9ecef !important;
    border-radius: 12px;
    padding: 14px 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

    .mysettings-container .form-control:focus {
        background: linear-gradient(135deg, #2c2f3d 0%, #3a3f51 100%);
        border-color: #3db16b;
        color: white !important;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(61, 177, 107, 0.3);
        outline: none;
        transform: translateY(-1px);
    }

    .mysettings-container .form-control::placeholder {
        color: #a8b2c1;
    }

.mysettings-container select.form-control {
    background: #2c2f3d;
    color: #e9ecef !important;
    cursor: pointer;
    border: 2px solid #5a6278;
}

    .mysettings-container select.form-control:focus {
        background: #4a5062;
        border-color: #3db16b;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.15);
    }

    .mysettings-container select.form-control option {
        background: #2c2f3d;
        color: #e9ecef;
        padding: 10px;
    }

/* MySettings Radio Buttons */
.mysettings-container .radio {
    margin-bottom: 15px;
}

    .mysettings-container .radio input[type="radio"] {
        margin-right: 10px;
        cursor: pointer;
        accent-color: #3db16b;
        width: 18px;
        height: 18px;
    }

    .mysettings-container .radio label {
        color: #e9ecef !important;
        cursor: pointer;
        font-weight: 400;
        margin-left: 5px;
    }

    .mysettings-container .radio.radio-success input[type="radio"]:checked + label {
        color: #3db16b !important;
        font-weight: 500;
    }

/* MySettings Buttons */
.mysettings-container .btn-facebook {
    background: linear-gradient(135deg, #4267B2 0%, #365899 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(66, 103, 178, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .mysettings-container .btn-facebook::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .mysettings-container .btn-facebook:hover::before {
        left: 100%;
    }

    .mysettings-container .btn-facebook:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 10px 30px rgba(66, 103, 178, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
        color: white;
    }

    .mysettings-container .btn-facebook i {
        font-size: 20px;
    }

.mysettings-container .btn-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    border: none;
    color: white;
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .mysettings-container .btn-success::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .mysettings-container .btn-success:hover::before {
        left: 100%;
    }

    .mysettings-container .btn-success:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 10px 30px rgba(72, 187, 120, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
        color: white;
    }

    .mysettings-container .btn-success i {
        margin-right: 8px;
    }

.mysettings-container .btn-danger {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}

    .mysettings-container .btn-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(229, 62, 62, 0.4);
        color: white;
    }

/* MySettings Tags */
.mysettings-container .tags {
    margin-top: 10px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.1) 0%, rgba(101, 217, 147, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(61, 177, 107, 0.2);
    backdrop-filter: blur(10px);
}

    .mysettings-container .tags b {
        color: #e9ecef !important;
        font-weight: 600;
    }

    .mysettings-container .tags .tag {
        color: #3db16b !important;
        text-decoration: none;
        margin: 0 5px;
        padding: 4px 8px;
        background: rgba(61, 177, 107, 0.1);
        border-radius: 4px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .mysettings-container .tags .tag:hover {
            background: rgba(61, 177, 107, 0.2);
            color: #65d993 !important;
        }

/* MySettings Row Layout */
.mysettings-container .row.text-center {
    margin-top: 20px;
}

    .mysettings-container .row.text-center p {
        color: #e9ecef !important;
        margin-bottom: 15px;
        font-size: 14px;
    }

/* MySettings Modals */
.mysettings-container .modal-content {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    border: 1px solid #5a6278;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.mysettings-container .modal-header {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    padding: 20px 25px;
    position: relative;
    overflow: hidden;
}

    .mysettings-container .modal-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
        pointer-events: none;
    }

    .mysettings-container .modal-header .modal-title {
        color: white;
        font-weight: 600;
    }

    .mysettings-container .modal-header .close {
        color: white;
        opacity: 0.9;
        font-size: 28px;
    }

.mysettings-container .modal-body {
    background: #3a3f51;
    padding: 25px;
    color: #e9ecef !important;
}

    .mysettings-container .modal-body * {
        color: #e9ecef !important;
    }

    .mysettings-container .modal-body label {
        color: #e9ecef !important;
    }

.mysettings-container .modal-footer {
    background: #3a3f51;
    border-top: 1px solid #464852;
    padding: 20px 25px;
    border-radius: 0 0 16px 16px;
}

    .mysettings-container .modal-footer .btn-info {
        background: #5a6278;
        border: none;
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
    }

        .mysettings-container .modal-footer .btn-info:hover {
            background: #6a7280;
        }

    .mysettings-container .modal-footer .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border: none;
        color: white;
        padding: 10px 30px;
        border-radius: 8px;
        font-weight: 600;
    }

        .mysettings-container .modal-footer .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(61, 177, 107, 0.4);
        }

/* MySettings Instagram Icons */
.mysettings-container .fa-instagram,
.mysettings-container .fa-plus {
    color: #3db16b !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .mysettings-container .fa-instagram:hover,
    .mysettings-container .fa-plus:hover {
        color: #65d993 !important;
        transform: scale(1.1);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .mysettings-container {
        padding: 15px;
    }

        .mysettings-container .card {
            margin-bottom: 20px;
            min-height: auto;
        }

        .mysettings-container .table td.text-right {
            width: auto;
            display: block;
            text-align: left !important;
            padding-bottom: 5px;
        }

        .mysettings-container .table td {
            display: block;
            padding-top: 5px;
        }
}

/* ============================================
   MEDIALIST TAB-CONTENT COLOR OVERRIDE
   Medialist sayfaları için özel renk ayarı (#d3d3d5)
   ============================================ */

/* Medialist sayfaları için tab-content renk override - En spesifik selector */
.content.col-md-12 .container-fluid.container-fixed-lg .modern-tab-navigation + .tab-content > *:not(#smartwizard),
.content.col-md-12 .container-fluid.container-fixed-lg .modern-tab-navigation + .tab-content > *:not(#smartwizard) * {
    color: #d3d3d5 !important;
}

/* Medialist media-row içindeki tab-content için */
.media-row .tab-content > *:not(#smartwizard),
.media-row .tab-content > *:not(#smartwizard) *,
.media-tab-pane .tab-content > *:not(#smartwizard),
.media-tab-pane .tab-content > *:not(#smartwizard) * {
    color: #d3d3d5 !important;
}

/* Medialist tab-pane içindeki tüm elemanlar için */
.tab-pane.media-tab-pane > *:not(#smartwizard),
.tab-pane.media-tab-pane > *:not(#smartwizard) *,
.tab-pane#media > *:not(#smartwizard),
.tab-pane#media > *:not(#smartwizard) * {
    color: #d3d3d5 !important;
}

/* ============================================
   CONTACTS PAGE MODERNIZATION
   Contacts Index ve Edit sayfaları için CSS
   ============================================ */

/* Contacts Index - Modern Sidebar */
.contacts-container .modern-sidebar {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #5a6278;
}

.contacts-container .sidebar-header {
    padding: 20px 25px;
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    color: white;
    border-bottom: 2px solid #5a6278;
}

    .contacts-container .sidebar-header h5 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: white;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .contacts-container .sidebar-header h5 i {
            font-size: 20px;
        }

.contacts-container .sidebar-content {
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    background: #3a3f51;
}

    .contacts-container .sidebar-content::-webkit-scrollbar {
        width: 8px;
    }

    .contacts-container .sidebar-content::-webkit-scrollbar-track {
        background: #454b5f;
        border-radius: 4px;
    }

    .contacts-container .sidebar-content::-webkit-scrollbar-thumb {
        background: #3db16b;
        border-radius: 4px;
    }

        .contacts-container .sidebar-content::-webkit-scrollbar-thumb:hover {
            background: #65d993;
        }

.contacts-container .filter-section {
    margin-bottom: 20px;
}

.contacts-container .filter-label {
    display: block;
    font-weight: 600;
    color: #e9ecef !important;
    margin-bottom: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .contacts-container .filter-label i {
        color: #3db16b;
        font-size: 16px;
    }

.contacts-container .form-control {
    background: #454b5f;
    border: 2px solid #5a6278;
    color: #e9ecef !important;
    border-radius: 10px;
    padding: 12px 18px;
    transition: all 0.3s ease;
    font-size: 14px;
}

    .contacts-container .form-control:focus {
        background: #4a5062;
        border-color: #3db16b;
        color: white !important;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.15);
        outline: none;
    }

    .contacts-container .form-control::placeholder {
        color: #a8b2c1;
    }

.contacts-container select.form-control {
    background: #454b5f;
    color: #e9ecef !important;
    cursor: pointer;
}

    .contacts-container select.form-control option {
        background: #454b5f;
        color: #e9ecef;
    }

.contacts-container .input-group-append .btn {
    background: #5a6278;
    border: 2px solid #5a6278;
    border-left: none;
    color: #e9ecef;
    border-radius: 0 10px 10px 0;
    transition: all 0.3s ease;
}

    .contacts-container .input-group-append .btn:hover {
        background: #3db16b;
        border-color: #3db16b;
        color: white;
    }

.contacts-container .filter-actions {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid #5a6278;
}

    .contacts-container .filter-actions .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3);
        width: 100%;
    }

        .contacts-container .filter-actions .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4);
        }

/* Contacts Index - Modern Content Area */
.contacts-container .modern-content-area {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 25px;
    border: 1px solid #5a6278;
}

.contacts-container .content-header {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #5a6278;
}

.contacts-container .page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #e9ecef;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .contacts-container .page-title i {
        color: #3db16b;
        font-size: 26px;
    }

.contacts-container .table-responsive {
    border-radius: 10px;
    overflow: hidden;
}

.contacts-container .table thead th {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    color: white;
    font-weight: 600;
    border: none;
    padding: 15px;
    text-align: left;
}

.contacts-container .table tbody tr {
    transition: all 0.2s ease;
    background: #3a3f51;
    border-bottom: 1px solid #464852;
}

    .contacts-container .table tbody tr:hover {
        background: #454b5f;
        transform: translateX(3px);
    }

.contacts-container .table tbody td {
    padding: 15px;
    vertical-align: middle;
    color: #e9ecef !important;
}

    .contacts-container .table tbody td a {
        color: #3db16b !important;
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .contacts-container .table tbody td a:hover {
            color: #65d993 !important;
            text-decoration: underline;
        }

/* Contacts Edit Page Modernization */
.contacts-edit-container {
    background: #3a3f51;
    padding: 25px;
    border-radius: 12px;
    min-height: 100vh;
}

    .contacts-edit-container .tab-content {
        background: transparent;
        color: #e9ecef !important;
    }

    .contacts-edit-container .container-fluid {
        background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
        border-radius: 12px;
        padding: 25px;
        border: 1px solid #5a6278;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .contacts-edit-container .row {
        margin-bottom: 20px;
    }

    .contacts-edit-container .btn {
        padding: 12px 24px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-right: 10px;
    }

    .contacts-edit-container .btn-danger {
        background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
    }

        .contacts-edit-container .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(229, 62, 62, 0.4);
            color: white;
        }

    .contacts-edit-container .btn-info {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
    }

        .contacts-edit-container .btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(66, 153, 225, 0.4);
            color: white;
        }

    .contacts-edit-container .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3);
    }

        .contacts-edit-container .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4);
            color: white;
        }

    .contacts-edit-container .btn-success {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
    }

        .contacts-edit-container .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
            color: white;
        }

    .contacts-edit-container .form-group {
        margin-bottom: 20px;
    }

        .contacts-edit-container .form-group label {
            color: #e9ecef !important;
            font-weight: 500;
            margin-bottom: 8px;
            display: block;
            font-size: 14px;
        }

    .contacts-edit-container .form-control {
        background: #454b5f;
        border: 2px solid #5a6278;
        color: #e9ecef !important;
        border-radius: 10px;
        padding: 12px 18px;
        transition: all 0.3s ease;
        font-size: 14px;
    }

        .contacts-edit-container .form-control:focus {
            background: #4a5062;
            border-color: #3db16b;
            color: white !important;
            box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.15);
            outline: none;
        }

        .contacts-edit-container .form-control[readonly] {
            background: #3a3f51;
            opacity: 0.7;
            cursor: not-allowed;
        }

        .contacts-edit-container .form-control::placeholder {
            color: #a8b2c1;
        }

    .contacts-edit-container select.form-control {
        background: #454b5f;
        color: #e9ecef !important;
        cursor: pointer;
    }

        .contacts-edit-container select.form-control option {
            background: #454b5f;
            color: #e9ecef;
        }

    .contacts-edit-container textarea.form-control {
        min-height: 100px;
        resize: vertical;
    }

    .contacts-edit-container hr {
        border-color: #5a6278;
        margin: 25px 0;
    }

    .contacts-edit-container .border-left {
        border-left: 2px solid #5a6278 !important;
        padding-left: 30px;
    }

    .contacts-edit-container input[type="checkbox"] {
        width: 20px;
        height: 20px;
        accent-color: #3db16b;
        cursor: pointer;
    }

    /* Contacts Edit Modals */
    .contacts-edit-container .modal-content {
        background: #3a3f51;
        border: 1px solid #464852;
        border-radius: 12px;
    }

    .contacts-edit-container .modal-header {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-bottom: 2px solid #5a6278;
        border-radius: 12px 12px 0 0;
        padding: 20px 25px;
    }

        .contacts-edit-container .modal-header .modal-title {
            color: white;
            font-weight: 600;
        }

        .contacts-edit-container .modal-header .close {
            color: white;
            opacity: 0.9;
            font-size: 28px;
        }

    .contacts-edit-container .modal-body {
        background: #3a3f51;
        padding: 25px;
        color: #e9ecef !important;
        max-height: 80vh;
        overflow-y: auto;
    }

        .contacts-edit-container .modal-body .table-responsive {
            background: transparent;
            border-radius: 8px;
        }

            .contacts-edit-container .modal-body .table-responsive::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }

            .contacts-edit-container .modal-body .table-responsive::-webkit-scrollbar-track {
                background: #454b5f;
                border-radius: 4px;
            }

            .contacts-edit-container .modal-body .table-responsive::-webkit-scrollbar-thumb {
                background: #3db16b;
                border-radius: 4px;
            }

                .contacts-edit-container .modal-body .table-responsive::-webkit-scrollbar-thumb:hover {
                    background: #65d993;
                }

        .contacts-edit-container .modal-body .table {
            background: transparent;
            color: #e9ecef !important;
            margin-bottom: 0;
            min-width: 100%;
        }

            .contacts-edit-container .modal-body .table thead th {
                background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
                color: white;
                border: none;
                padding: 12px;
                position: sticky;
                top: 0;
                z-index: 10;
                white-space: nowrap;
            }

            .contacts-edit-container .modal-body .table tbody tr {
                background: #3a3f51;
                border-bottom: 1px solid #464852;
            }

                .contacts-edit-container .modal-body .table tbody tr:hover {
                    background: #454b5f;
                }

            .contacts-edit-container .modal-body .table tbody td {
                color: #e9ecef !important;
                padding: 12px;
                white-space: nowrap;
            }

    .contacts-edit-container .modal-footer {
        background: #3a3f51;
        border-top: 1px solid #464852;
        padding: 15px 25px;
        border-radius: 0 0 12px 12px;
    }

        .contacts-edit-container .modal-footer .btn-secondary {
            background: #5a6278;
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
        }

            .contacts-edit-container .modal-footer .btn-secondary:hover {
                background: #6a7280;
            }

/* Responsive Design */
@media (max-width: 768px) {
    .contacts-container .modern-sidebar {
        margin-bottom: 20px;
    }

    .contacts-container .sidebar-content {
        max-height: none;
    }

    .contacts-edit-container .border-left {
        border-left: none !important;
        border-top: 2px solid #5a6278;
        padding-left: 0;
        padding-top: 30px;
        margin-top: 30px;
    }
}

/* ============================================
   ASSISTANTS PAGE MODERNIZATION
   Teknolojik, profesyonel ve kullanışlı tasarım
   ============================================ */

/* Assistants Container */
.assistants-container {
    background: #3a3f51;
    padding: 25px;
    border-radius: 12px;
    min-height: 100vh;
}

    .assistants-container .content {
        color: #e9ecef !important;
    }

    /* Assistants Tab Navigation */
    .assistants-container .nav-tabs {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-radius: 12px 12px 0 0;
        padding: 15px 20px;
        border: none;
        margin-bottom: 0;
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

        .assistants-container .nav-tabs::-webkit-scrollbar {
            height: 6px;
        }

        .assistants-container .nav-tabs::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }

        .assistants-container .nav-tabs::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }

        .assistants-container .nav-tabs .nav-item {
            margin-right: 10px;
        }

        .assistants-container .nav-tabs .nav-link {
            color: rgba(255, 255, 255, 0.8);
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            background: rgba(255, 255, 255, 0.1);
        }

            .assistants-container .nav-tabs .nav-link i {
                font-size: 16px;
            }

            .assistants-container .nav-tabs .nav-link:hover {
                background: rgba(255, 255, 255, 0.2);
                color: white;
                transform: translateY(-2px);
            }

            .assistants-container .nav-tabs .nav-link.active {
                background: rgba(255, 255, 255, 0.25);
                color: white;
                backdrop-filter: blur(10px);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }

    /* Assistants Tab Content */
    .assistants-container .tab-content {
        background: linear-gradient(135deg, #2c2f3a 0%, #3a3f51 100%);
        border-radius: 0 0 12px 12px;
        padding: 25px;
        color: #e9ecef !important;
        border: 1px solid #5a6278;
        border-top: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

        .assistants-container .tab-content * {
            color: #e9ecef !important;
        }

    /* Assistants Tables */
    .assistants-container .table,
    .assistants-container .modern-table {
        background: transparent;
        color: #e9ecef !important;
        margin-bottom: 0;
    }

        .assistants-container .table thead th,
        .assistants-container .modern-table thead th {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            color: white;
            font-weight: 600;
            border: none;
            padding: 15px;
            text-align: left;
        }

        .assistants-container .table tbody tr,
        .assistants-container .modern-table tbody tr {
            background: #3a3f51;
            border-bottom: 1px solid #464852;
            transition: all 0.2s ease;
        }

            .assistants-container .table tbody tr:hover,
            .assistants-container .modern-table tbody tr:hover {
                background: #454b5f;
                transform: translateX(3px);
            }

        .assistants-container .table tbody td,
        .assistants-container .modern-table tbody td {
            color: #e9ecef !important;
            padding: 15px;
            vertical-align: middle;
        }

            .assistants-container .table tbody td i,
            .assistants-container .modern-table tbody td i {
                color: #3db16b;
                margin-right: 8px;
            }

            .assistants-container .table tbody td a,
            .assistants-container .modern-table tbody td a {
                color: #3db16b !important;
                text-decoration: none;
                transition: all 0.3s ease;
            }

                .assistants-container .table tbody td a:hover,
                .assistants-container .modern-table tbody td a:hover {
                    color: #65d993 !important;
                    text-decoration: underline;
                }

    /* Assistants Cards */
    .assistants-container .card {
        background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
        border: 1px solid #5a6278;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 25px;
        transition: all 0.3s ease;
    }

        .assistants-container .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
        }

        .assistants-container .card h5 {
            color: #e9ecef !important;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #5a6278;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            .assistants-container .card h5 i {
                color: #3db16b;
                font-size: 20px;
            }

    /* Assistants Form Elements */
    .assistants-container .form-group {
        margin-bottom: 20px;
    }

        .assistants-container .form-group label {
            color: #e9ecef !important;
            font-weight: 500;
            margin-bottom: 8px;
            display: block;
            font-size: 14px;
        }

    .assistants-container .form-control {
        background: #454b5f;
        border: 2px solid #5a6278;
        color: #e9ecef !important;
        border-radius: 10px;
        padding: 12px 18px;
        transition: all 0.3s ease;
        font-size: 14px;
    }

        .assistants-container .form-control:focus {
            background: #4a5062;
            border-color: #3db16b;
            color: white !important;
            box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.15);
            outline: none;
        }

        .assistants-container .form-control::placeholder {
            color: #a8b2c1;
        }

    .assistants-container select.form-control {
        background: #454b5f;
        color: #e9ecef !important;
        cursor: pointer;
    }

        .assistants-container select.form-control option {
            background: #454b5f;
            color: #e9ecef;
        }

    .assistants-container .form-check {
        margin-bottom: 15px;
        padding: 12px;
        background: #454b5f;
        border-radius: 8px;
        border: 1px solid #5a6278;
    }

    .assistants-container .form-check-input {
        width: 18px;
        height: 18px;
        accent-color: #3db16b;
        cursor: pointer;
        margin-right: 10px;
    }

    .assistants-container .form-check-label {
        color: #e9ecef !important;
        cursor: pointer;
        font-weight: 400;
    }

    /* Assistants Buttons */
    .assistants-container .btn {
        padding: 12px 24px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .assistants-container .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3);
    }

        .assistants-container .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4);
            color: white;
        }

    .assistants-container .btn-success {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
    }

        .assistants-container .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
            color: white;
        }

    .assistants-container .btn-danger {
        background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
    }

        .assistants-container .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(229, 62, 62, 0.4);
            color: white;
        }

    .assistants-container .btn-dark {
        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(74, 85, 104, 0.3);
    }

        .assistants-container .btn-dark:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(74, 85, 104, 0.4);
            color: white;
        }

    .assistants-container .btn-sm {
        padding: 8px 16px;
        font-size: 13px;
    }

    .assistants-container .btn-lg {
        padding: 16px 32px;
        font-size: 18px;
    }

/* Assistants Edit Page */
.assistants-edit-container {
    background: #3a3f51;
    padding: 25px;
    border-radius: 12px;
    min-height: 100vh;
    position: fixed !important;
    top: 0 !important;
    left: 70px !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 100vh !important;
    height: 100vh !important;
    z-index: 1000 !important;
}

/* Assistants Edit sayfası için body/html scroll fix */
body:has(.assistants-edit-container),
html:has(.assistants-edit-container),
body .assistants-edit-container ~ *,
html .assistants-edit-container ~ * {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100vh !important;
}

.assistants-edit-container .content {
    color: #e9ecef !important;
}

.assistants-edit-container .page-header {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 12px;
    border: 1px solid #5a6278;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

    .assistants-edit-container .page-header h2 {
        color: #e9ecef !important;
        font-size: 28px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
    }

        .assistants-edit-container .page-header h2 i {
            color: #3db16b;
            font-size: 30px;
        }

.assistants-edit-container .btn-group-header {
    display: flex;
    gap: 12px;
    align-items: center;
}

.assistants-edit-container .section-card {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    border: 1px solid #5a6278;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

    .assistants-edit-container .section-card:hover {
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
    }

.assistants-edit-container .section-header {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-bottom: 2px solid #5a6278;
    color: white;
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

    .assistants-edit-container .section-header:hover {
        background: linear-gradient(135deg, #65d993 0%, #3db16b 100%);
    }

    .assistants-edit-container .section-header h5 {
        margin: 0;
        font-weight: 600;
        color: white !important;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .assistants-edit-container .section-header h5 i {
            color: white;
            font-size: 20px;
        }

    .assistants-edit-container .section-header i.fa-chevron-down,
    .assistants-edit-container .section-header i.fa-chevron-up {
        color: white;
        font-size: 16px;
    }

.assistants-edit-container .section-body {
    padding: 25px;
    background: #3a3f51;
    color: #e9ecef !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
}

    .assistants-edit-container .section-body * {
        color: #e9ecef !important;
    }

.assistants-edit-container .badge-provider {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    backdrop-filter: blur(10px);
}

.assistants-edit-container .provider-panel {
    display: none;
    padding: 20px;
    background: #454b5f;
    border-radius: 10px;
    margin-top: 15px;
    border-left: 4px solid #3db16b;
}

    .assistants-edit-container .provider-panel.active {
        display: block;
    }

    .assistants-edit-container .provider-panel h6 {
        color: #e9ecef !important;
        font-weight: 600;
        margin-bottom: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .assistants-edit-container .provider-panel h6 i {
            color: #3db16b;
            font-size: 18px;
        }

.assistants-edit-container .json-toggle {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    background: #3db16b;
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    transition: all 0.3s ease;
}

    .assistants-edit-container .json-toggle:hover {
        background: #65d993;
        transform: translateY(-2px);
    }

.assistants-edit-container .json-textarea {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    background: #2c2f3a;
    color: #e9ecef !important;
    border: 2px solid #5a6278;
    border-radius: 8px;
    padding: 15px;
}

.assistants-edit-container .alert {
    background: #454b5f;
    border: 1px solid #3db16b;
    border-radius: 8px;
    color: #e9ecef !important;
    padding: 15px;
}

.assistants-edit-container .alert-info {
    background: rgba(61, 177, 107, 0.1);
    border-color: #3db16b;
}

    .assistants-edit-container .alert-info i {
        color: #3db16b;
    }

.assistants-edit-container .alert small {
    color: #e9ecef !important;
}

/* Assistants Edit Form Elements */
.assistants-edit-container .form-group {
    margin-bottom: 20px;
}

    .assistants-edit-container .form-group label {
        color: #e9ecef !important;
        font-weight: 500;
        margin-bottom: 8px;
        display: block;
        font-size: 14px;
    }

        .assistants-edit-container .form-group label i {
            color: #3db16b;
            margin-right: 8px;
        }

.assistants-edit-container .form-control {
    background: #454b5f;
    border: 2px solid #5a6278;
    color: #e9ecef !important;
    border-radius: 10px;
    padding: 12px 18px;
    transition: all 0.3s ease;
    font-size: 14px;
}

    .assistants-edit-container .form-control:focus {
        background: #4a5062;
        border-color: #3db16b;
        color: white !important;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.15);
        outline: none;
    }

    .assistants-edit-container .form-control::placeholder {
        color: #a8b2c1;
    }

.assistants-edit-container select.form-control {
    background: #454b5f;
    color: #e9ecef !important;
    cursor: pointer;
}

    .assistants-edit-container select.form-control[multiple],
    .assistants-edit-container select[multiple],
    .assistants-edit-container select[multiple][size],
    .assistants-edit-container select.form-control[multiple][size] {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 200px !important;
        min-height: 120px !important;
        height: auto !important;
        resize: none !important;
        display: block !important;
        width: 100% !important;
        padding: 0.375rem 0.75rem !important;
        line-height: 1.5 !important;
    }

        /* Selectbox size attribute override - özellikle size="8" için */
        .assistants-edit-container select.form-control[multiple][size="8"],
        .assistants-edit-container select[multiple][size="8"],
        .assistants-edit-container select[multiple][size],
        .assistants-edit-container select.form-control[multiple][size] {
            height: auto !important;
            max-height: 200px !important;
            overflow-y: auto !important;
            min-height: 120px !important;
        }

    .assistants-edit-container select.form-control option {
        background: #454b5f;
        color: #e9ecef;
    }

.assistants-edit-container textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.assistants-edit-container .form-check {
    margin-bottom: 15px;
    padding: 12px 15px;
    background: #454b5f;
    border-radius: 8px;
    border: 1px solid #5a6278;
    display: flex;
    align-items: center;
}

.assistants-edit-container .form-check-input {
    width: 20px;
    height: 20px;
    accent-color: #3db16b;
    cursor: pointer;
    margin-right: 12px;
}

.assistants-edit-container .form-check-label {
    color: #e9ecef !important;
    cursor: pointer;
    font-weight: 400;
    margin: 0;
}

.assistants-edit-container .form-text {
    color: #a8b2c1 !important;
    font-size: 12px;
    margin-top: 5px;
}

.assistants-edit-container .text-muted {
    color: #a8b2c1 !important;
}

/* Assistants Edit Buttons */
.assistants-edit-container .btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.assistants-edit-container .btn-danger {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
}

    .assistants-edit-container .btn-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(229, 62, 62, 0.4);
        color: white;
    }

.assistants-edit-container .btn-primary {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3);
}

    .assistants-edit-container .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4);
        color: white;
    }

.assistants-edit-container .btn-outline-info {
    background: transparent;
    border: 2px solid #3db16b;
    color: #3db16b;
}

    .assistants-edit-container .btn-outline-info:hover {
        background: #3db16b;
        color: white;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .assistants-container .nav-tabs {
        flex-wrap: wrap;
    }

        .assistants-container .nav-tabs .nav-link {
            font-size: 13px;
            padding: 10px 15px;
        }

    .assistants-edit-container .section-header h5 {
        font-size: 16px;
    }

    .assistants-edit-container .page-header {
        flex-direction: column;
        gap: 15px;
    }

    .assistants-edit-container .btn-group-header {
        flex-direction: column;
        width: 100%;
    }

        .assistants-edit-container .btn-group-header .btn {
            width: 100%;
        }
}

/* ============================================
   EXTENSIONS, SANTRAL LIVESCREEN, TAGS, ARTIFICIALRULES
   Modernizasyon - Teknolojik, profesyonel ve kullanışlı tasarım
   ============================================ */

/* Extensions, Tags, ArtificialRules Container */
.extensions-container,
.tags-container,
.artificialrules-container {
    background: #3a3f51;
    padding: 25px;
    border-radius: 12px;
    min-height: 100vh;
}

    .extensions-container .content,
    .tags-container .content,
    .artificialrules-container .content {
        color: #e9ecef !important;
    }

    /* Extensions, Tags, ArtificialRules Tab Navigation */
    .extensions-container .nav-tabs,
    .tags-container .nav-tabs,
    .artificialrules-container .nav-tabs {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-radius: 12px 12px 0 0;
        padding: 15px 20px;
        border: none;
        margin-bottom: 0;
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

        .extensions-container .nav-tabs::-webkit-scrollbar,
        .tags-container .nav-tabs::-webkit-scrollbar,
        .artificialrules-container .nav-tabs::-webkit-scrollbar {
            height: 6px;
        }

        .extensions-container .nav-tabs::-webkit-scrollbar-track,
        .tags-container .nav-tabs::-webkit-scrollbar-track,
        .artificialrules-container .nav-tabs::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }

        .extensions-container .nav-tabs::-webkit-scrollbar-thumb,
        .tags-container .nav-tabs::-webkit-scrollbar-thumb,
        .artificialrules-container .nav-tabs::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }

        .extensions-container .nav-tabs .nav-item,
        .tags-container .nav-tabs .nav-item,
        .artificialrules-container .nav-tabs .nav-item {
            margin-right: 10px;
        }

        .extensions-container .nav-tabs .nav-link,
        .tags-container .nav-tabs .nav-link,
        .artificialrules-container .nav-tabs .nav-link {
            color: rgba(255, 255, 255, 0.8);
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            background: rgba(255, 255, 255, 0.1);
        }

            .extensions-container .nav-tabs .nav-link i,
            .tags-container .nav-tabs .nav-link i,
            .artificialrules-container .nav-tabs .nav-link i {
                font-size: 16px;
            }

            .extensions-container .nav-tabs .nav-link:hover,
            .tags-container .nav-tabs .nav-link:hover,
            .artificialrules-container .nav-tabs .nav-link:hover {
                background: rgba(255, 255, 255, 0.2);
                color: white;
                transform: translateY(-2px);
            }

            .extensions-container .nav-tabs .nav-link.active,
            .tags-container .nav-tabs .nav-link.active,
            .artificialrules-container .nav-tabs .nav-link.active {
                background: rgba(255, 255, 255, 0.25);
                color: white;
                backdrop-filter: blur(10px);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }

    /* Extensions, Tags, ArtificialRules Tab Content */
    .extensions-container .tab-content,
    .tags-container .tab-content,
    .artificialrules-container .tab-content {
        background: linear-gradient(135deg, #2c2f3a 0%, #3a3f51 100%);
        border-radius: 0 0 12px 12px;
        padding: 25px;
        color: #e9ecef !important;
        border: 1px solid #5a6278;
        border-top: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

        .extensions-container .tab-content *,
        .tags-container .tab-content *,
        .artificialrules-container .tab-content * {
            color: #e9ecef !important;
        }

    /* Extensions, Tags, ArtificialRules Tables */
    .extensions-container .table,
    .tags-container .table,
    .artificialrules-container .table,
    .extensions-container .modern-table,
    .tags-container .modern-table,
    .artificialrules-container .modern-table {
        background: transparent;
        color: #e9ecef !important;
        margin-bottom: 0;
    }

        .extensions-container .table thead th,
        .tags-container .table thead th,
        .artificialrules-container .table thead th,
        .extensions-container .modern-table thead th,
        .tags-container .modern-table thead th,
        .artificialrules-container .modern-table thead th {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            color: white;
            font-weight: 600;
            border: none;
            padding: 15px;
            text-align: left;
        }

        .extensions-container .table tbody tr,
        .tags-container .table tbody tr,
        .artificialrules-container .table tbody tr,
        .extensions-container .modern-table tbody tr,
        .tags-container .modern-table tbody tr,
        .artificialrules-container .modern-table tbody tr {
            background: #3a3f51;
            border-bottom: 1px solid #464852;
            transition: all 0.2s ease;
        }

            .extensions-container .table tbody tr:hover,
            .tags-container .table tbody tr:hover,
            .artificialrules-container .table tbody tr:hover,
            .extensions-container .modern-table tbody tr:hover,
            .tags-container .modern-table tbody tr:hover,
            .artificialrules-container .modern-table tbody tr:hover {
                background: #454b5f;
                transform: translateX(3px);
            }

        .extensions-container .table tbody td,
        .tags-container .table tbody td,
        .artificialrules-container .table tbody td,
        .extensions-container .modern-table tbody td,
        .tags-container .modern-table tbody td,
        .artificialrules-container .modern-table tbody td {
            color: #e9ecef !important;
            padding: 15px;
            vertical-align: middle;
        }

            .extensions-container .table tbody td i,
            .tags-container .table tbody td i,
            .artificialrules-container .table tbody td i,
            .extensions-container .modern-table tbody td i,
            .tags-container .modern-table tbody td i,
            .artificialrules-container .modern-table tbody td i {
                color: #3db16b;
                margin-right: 8px;
            }

            .extensions-container .table tbody td a,
            .tags-container .table tbody td a,
            .artificialrules-container .table tbody td a,
            .extensions-container .modern-table tbody td a,
            .tags-container .modern-table tbody td a,
            .artificialrules-container .modern-table tbody td a {
                color: #3db16b !important;
                text-decoration: none;
                transition: all 0.3s ease;
            }

                .extensions-container .table tbody td a:hover,
                .tags-container .table tbody td a:hover,
                .artificialrules-container .table tbody td a:hover,
                .extensions-container .modern-table tbody td a:hover,
                .tags-container .modern-table tbody td a:hover,
                .artificialrules-container .modern-table tbody td a:hover {
                    color: #65d993 !important;
                    text-decoration: underline;
                }

    /* Extensions, Tags, ArtificialRules Buttons */
    .extensions-container .btn,
    .tags-container .btn,
    .artificialrules-container .btn {
        padding: 12px 24px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-right: 10px;
    }

    .extensions-container .btn-info,
    .tags-container .btn-info,
    .artificialrules-container .btn-info {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
    }

        .extensions-container .btn-info:hover,
        .tags-container .btn-info:hover,
        .artificialrules-container .btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(66, 153, 225, 0.4);
            color: white;
        }

    .extensions-container .btn-dark,
    .tags-container .btn-dark,
    .artificialrules-container .btn-dark {
        background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(74, 85, 104, 0.3);
    }

        .extensions-container .btn-dark:hover,
        .tags-container .btn-dark:hover,
        .artificialrules-container .btn-dark:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(74, 85, 104, 0.4);
            color: white;
        }

    .extensions-container .btn-danger,
    .tags-container .btn-danger,
    .artificialrules-container .btn-danger {
        background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
    }

        .extensions-container .btn-danger:hover,
        .tags-container .btn-danger:hover,
        .artificialrules-container .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(229, 62, 62, 0.4);
            color: white;
        }

    .extensions-container .btn-primary,
    .tags-container .btn-primary,
    .artificialrules-container .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3);
    }

        .extensions-container .btn-primary:hover,
        .tags-container .btn-primary:hover,
        .artificialrules-container .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4);
            color: white;
        }

    .extensions-container .btn-sm {
        padding: 8px 16px;
        font-size: 13px;
    }

    .tags-container .btn-sm,
    .artificialrules-container .btn-sm {
        padding: 8px 16px;
        font-size: 13px;
    }

    /* Extensions, Tags, ArtificialRules Modals */
    .extensions-container .modal-content,
    .tags-container .modal-content,
    .artificialrules-container .modal-content {
        background: #3a3f51;
        border: 1px solid #464852;
        border-radius: 12px;
    }

    .extensions-container .modal-header,
    .tags-container .modal-header,
    .artificialrules-container .modal-header {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border-bottom: 2px solid #5a6278;
        border-radius: 12px 12px 0 0;
        padding: 20px 25px;
    }

        .extensions-container .modal-header .modal-title,
        .tags-container .modal-header .modal-title,
        .artificialrules-container .modal-header .modal-title {
            color: white;
            font-weight: 600;
        }

        .extensions-container .modal-header .close,
        .tags-container .modal-header .close,
        .artificialrules-container .modal-header .close {
            color: white;
            opacity: 0.9;
            font-size: 28px;
        }

    .extensions-container .modal-body,
    .tags-container .modal-body,
    .artificialrules-container .modal-body {
        background: #3a3f51;
        padding: 25px;
        color: #e9ecef !important;
    }

        .extensions-container .modal-body *,
        .tags-container .modal-body *,
        .artificialrules-container .modal-body * {
            color: #e9ecef !important;
        }

        .extensions-container .modal-body .form-group,
        .tags-container .modal-body .form-group,
        .artificialrules-container .modal-body .form-group {
            margin-bottom: 20px;
        }

        .extensions-container .modal-body label,
        .tags-container .modal-body label,
        .artificialrules-container .modal-body label {
            color: #e9ecef !important;
            font-weight: 500;
            margin-bottom: 8px;
            display: block;
            font-size: 14px;
        }

        .extensions-container .modal-body .form-control,
        .tags-container .modal-body .form-control,
        .artificialrules-container .modal-body .form-control {
            background: #454b5f;
            border: 2px solid #5a6278;
            color: #e9ecef !important;
            border-radius: 10px;
            padding: 12px 18px;
            transition: all 0.3s ease;
            font-size: 14px;
        }

            .extensions-container .modal-body .form-control:focus,
            .tags-container .modal-body .form-control:focus,
            .artificialrules-container .modal-body .form-control:focus {
                background: #4a5062;
                border-color: #3db16b;
                color: white !important;
                box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.15);
                outline: none;
            }

        .extensions-container .modal-body select.form-control,
        .tags-container .modal-body select.form-control,
        .artificialrules-container .modal-body select.form-control {
            background: #454b5f;
            color: #e9ecef !important;
            cursor: pointer;
        }

            .extensions-container .modal-body select.form-control option,
            .tags-container .modal-body select.form-control option,
            .artificialrules-container .modal-body select.form-control option {
                background: #454b5f;
                color: #e9ecef;
            }

        .extensions-container .modal-body textarea.form-control,
        .tags-container .modal-body textarea.form-control,
        .artificialrules-container .modal-body textarea.form-control {
            min-height: 100px;
            resize: vertical;
        }

    .extensions-container .modal-footer,
    .tags-container .modal-footer,
    .artificialrules-container .modal-footer {
        background: #3a3f51;
        border-top: 1px solid #464852;
        padding: 15px 25px;
        border-radius: 0 0 12px 12px;
    }

        .extensions-container .modal-footer .btn,
        .tags-container .modal-footer .btn,
        .artificialrules-container .modal-footer .btn {
            margin-right: 10px;
        }

    /* Tags specific - Tag color display */
    .tags-container .table tbody td i.fa-tags,
    .tags-container .modern-table tbody td i.fa-tags {
        font-size: 18px;
        margin-right: 10px;
    }

/* Santral Livescreen Container */
.santral-livescreen-container {
    background: #3a3f51;
    padding: 25px;
    border-radius: 12px;
    min-height: 100vh;
}

    .santral-livescreen-container .tab-content {
        background: transparent;
        color: #e9ecef !important;
    }

    .santral-livescreen-container .container {
        background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
        border-radius: 12px;
        padding: 25px;
        border: 1px solid #5a6278;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        margin-bottom: 20px;
    }

    .santral-livescreen-container h2 {
        color: #e9ecef !important;
        font-weight: 600;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #5a6278;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .santral-livescreen-container h2 i {
            color: #3db16b;
            font-size: 28px;
        }

    .santral-livescreen-container h5 {
        color: #e9ecef !important;
        font-weight: 600;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #5a6278;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .santral-livescreen-container h5 i {
            color: #3db16b;
            font-size: 20px;
        }

    .santral-livescreen-container hr {
        border-color: #5a6278;
        margin: 20px 0;
    }

    .santral-livescreen-container .table,
    .santral-livescreen-container .modern-table {
        background: transparent;
        color: #e9ecef !important;
        margin-bottom: 0;
    }

        .santral-livescreen-container .table thead th,
        .santral-livescreen-container .modern-table thead th {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            color: white;
            font-weight: 600;
            border: none;
            padding: 15px;
            text-align: left;
        }

        .santral-livescreen-container .table tbody tr,
        .santral-livescreen-container .modern-table tbody tr {
            background: #3a3f51;
            border-bottom: 1px solid #464852;
            transition: all 0.2s ease;
        }

            .santral-livescreen-container .table tbody tr:hover,
            .santral-livescreen-container .modern-table tbody tr:hover {
                background: #454b5f;
            }

        .santral-livescreen-container .table tbody td,
        .santral-livescreen-container .modern-table tbody td {
            color: #e9ecef !important;
            padding: 15px;
            vertical-align: middle;
            border-radius: 10px;
            margin: 5px;
        }

            .santral-livescreen-container .table tbody td strong,
            .santral-livescreen-container .modern-table tbody td strong {
                color: #000 !important;
                font-size: 16px;
                display: block;
                margin-bottom: 5px;
            }

            .santral-livescreen-container .table tbody td[style*="background-color"],
            .santral-livescreen-container .modern-table tbody td[style*="background-color"] {
                border: 2px solid rgba(255, 255, 255, 0.2);
                transition: all 0.3s ease;
            }

                .santral-livescreen-container .table tbody td[style*="background-color"]:hover,
                .santral-livescreen-container .modern-table tbody td[style*="background-color"]:hover {
                    transform: scale(1.05);
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
                }

            .santral-livescreen-container .table tbody td a,
            .santral-livescreen-container .modern-table tbody td a {
                color: #e53e3e !important;
                text-decoration: none;
                transition: all 0.3s ease;
            }

                .santral-livescreen-container .table tbody td a:hover,
                .santral-livescreen-container .modern-table tbody td a:hover {
                    color: #c53030 !important;
                    text-decoration: underline;
                }

            .santral-livescreen-container .table tbody td i,
            .santral-livescreen-container .modern-table tbody td i {
                color: #3db16b;
                margin-right: 8px;
            }

/* Responsive Design */
@media (max-width: 768px) {
    .extensions-container .nav-tabs,
    .tags-container .nav-tabs,
    .artificialrules-container .nav-tabs {
        flex-wrap: wrap;
    }

        .extensions-container .nav-tabs .nav-link,
        .tags-container .nav-tabs .nav-link,
        .artificialrules-container .nav-tabs .nav-link {
            font-size: 13px;
            padding: 10px 15px;
        }

    .santral-livescreen-container .tab-content {
        flex-direction: column;
    }

        .santral-livescreen-container .tab-content.col-sm-9,
        .santral-livescreen-container .tab-content.col-sm-3 {
            width: 100% !important;
            margin-left: 0 !important;
        }
}

/* ============================================
   SANTRAL LIVESCREEN - Teknolojik ve Profesyonel Tasarım
   ============================================ */

.santral-livescreen-modern {
    background: linear-gradient(135deg, #1a1d29 0%, #2c2f3a 100%);
    min-height: 100vh;
    width: 100% !important;
    position: relative !important;
    top: 0;
    left: 0 !important;
    right: 0;
    margin: 0 !important;
    padding: 30px;
    color: #e9ecef;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.livescreen-header-section {
    margin-bottom: 30px;
}

.livescreen-title-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 25px;
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(61, 177, 107, 0.3);
}

.livescreen-icon-circle {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

    .livescreen-icon-circle i {
        font-size: 36px;
        color: white;
    }

.livescreen-title-content {
    flex: 1;
}

.livescreen-main-title {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.livescreen-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin: 0;
    font-weight: 400;
}

.livescreen-stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.stat-card {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #5a6278;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }

.stat-card-danger {
    border-left: 4px solid #e53e3e;
}

.stat-card-info {
    border-left: 4px solid #4299e1;
}

.stat-card-warning {
    border-left: 4px solid #ed8936;
}

.stat-card-success {
    border-left: 4px solid #48bb78;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.stat-card-danger .stat-icon {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
}

.stat-card-info .stat-icon {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}

.stat-card-warning .stat-icon {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}

.stat-card-success .stat-icon {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #e9ecef;
    line-height: 1.2;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 13px;
    color: #a8b2c1;
    font-weight: 500;
}

.livescreen-content-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 25px;
}

.livescreen-main-panel {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #5a6278;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #5a6278;
}

    .panel-header h3 {
        color: #e9ecef;
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .panel-header h3 i {
            color: #3db16b;
            font-size: 24px;
        }

.panel-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(72, 187, 120, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #48bb78;
    color: #48bb78;
    font-size: 13px;
    font-weight: 600;
}

.badge-pulse {
    width: 8px;
    height: 8px;
    background: #48bb78;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.livescreen-grid-container {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}

    .livescreen-grid-container::-webkit-scrollbar {
        width: 8px;
    }

    .livescreen-grid-container::-webkit-scrollbar-track {
        background: #3a3f51;
        border-radius: 4px;
    }

    .livescreen-grid-container::-webkit-scrollbar-thumb {
        background: #3db16b;
        border-radius: 4px;
    }

        .livescreen-grid-container::-webkit-scrollbar-thumb:hover {
            background: #65d993;
        }

.livescreen-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.status-card {
    background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
    border-radius: 12px;
    padding: 20px;
    border: 2px solid;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    color: white;
}

    /* Müsait durumu - Yeşil */
    .status-card[data-status="AVAILABLE"], .status-card.status-available {
        background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%) !important;
        border-color: #4caf50 !important;
        color: white !important;
    }

    /* Konuşuyor durumu - Kırmızı */
    .status-card[data-status="TALKING"],
    .status-card.status-talking {
        background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%) !important;
        border-color: #f44336 !important;
        color: white !important;
    }

    /* İşlem yapıyor durumu - Sarı */
    .status-card[data-status="SS_DND"],
    .status-card.status-dnd {
        background: linear-gradient(135deg, #ffeb3b 0%, #fbc02d 100%) !important;
        border-color: #ffeb3b !important;
        color: #1a1d29 !important;
    }

    /* Çevrimdışı durumu - Gri */
    .status-card[data-status="UNREGISTERED"],
    .status-card.status-offline {
        background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%) !important;
        border-color: #9e9e9e !important;
        color: white !important;
    }

    .status-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: inherit;
        opacity: 0.8;
    }

    .status-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    }

.status-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.status-badge {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
}

    .status-badge .badge-pulse {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }

.status-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* DND durumunda zaman rengi koyu */
.status-card.status-dnd .status-time,
.status-card[data-status="SS_DND"] .status-time {
    color: rgba(26, 29, 41, 0.8) !important;
}

.status-card-body {
    text-align: center;
    margin-bottom: 15px;
}

.status-user-name {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

/* DND durumunda yazı rengi koyu */
.status-card.status-dnd .status-user-name,
.status-card[data-status="SS_DND"] .status-user-name {
    color: #1a1d29 !important;
}

.status-user-status {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

/* DND durumunda durum yazısı rengi koyu */
.status-card.status-dnd .status-user-status,
.status-card[data-status="SS_DND"] .status-user-status {
    color: rgba(26, 29, 41, 0.9) !important;
}

.status-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
}

/* DND durumunda footer rengi koyu */
.status-card.status-dnd .status-card-footer,
.status-card[data-status="SS_DND"] .status-card-footer {
    border-top-color: rgba(26, 29, 41, 0.2) !important;
    color: rgba(26, 29, 41, 0.8) !important;
}

.status-indicator {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.9);
    animation: pulse 2s infinite;
}

/* DND durumunda indicator rengi koyu */
.status-card.status-dnd .status-indicator,
.status-card[data-status="SS_DND"] .status-indicator {
    color: #1a1d29 !important;
}

.livescreen-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-panel {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #5a6278;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.sidebar-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #5a6278;
}

    .sidebar-header h4 {
        color: #e9ecef;
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .sidebar-header h4 i {
            color: #3db16b;
            font-size: 20px;
        }

.sidebar-content {
    color: #e9ecef;
}

.status-legend {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(61, 177, 107, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(61, 177, 107, 0.2);
    transition: all 0.3s ease;
}

    .legend-item:hover {
        background: rgba(61, 177, 107, 0.2);
        transform: translateX(5px);
    }

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.legend-item span {
    color: #e9ecef;
    font-size: 14px;
    font-weight: 500;
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    color: white;
}

.action-btn-danger {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
}

    .action-btn-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(229, 62, 62, 0.4);
        color: white;
    }

.action-btn i {
    font-size: 18px;
}

.action-btn span {
    flex: 1;
    text-align: left;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .livescreen-content-grid {
        grid-template-columns: 1fr;
    }

    .livescreen-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .livescreen-title-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .livescreen-stats-cards {
        grid-template-columns: 1fr;
    }

    .livescreen-status-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* ============================================
   KACANCAGRILAR - Modernizasyon
   ============================================ */

.kacancagrilar-container {
    background: linear-gradient(135deg, #1a1d29 0%, #2c2f3a 100%);
    min-height: 100vh;
    /*width: calc(100vw - 70px);*/
    position: fixed !important;
    top: 0 !important;
    left: 70px !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 30px !important;
    color: #e9ecef;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 1000 !important;
}

/* KacanCagrilar sayfası için body/html scroll fix */
body:has(.kacancagrilar-container),
html:has(.kacancagrilar-container),
body .kacancagrilar-container ~ *,
html .kacancagrilar-container ~ * {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100vh !important;
}

.kacancagrilar-header-section {
    margin-bottom: 30px;
}

.kacancagrilar-title-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 25px;
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(229, 62, 62, 0.3);
}

.kacancagrilar-icon-circle {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

    .kacancagrilar-icon-circle i {
        font-size: 36px;
        color: white;
    }

.kacancagrilar-title-content {
    flex: 1;
}

.kacancagrilar-main-title {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.kacancagrilar-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin: 0;
    font-weight: 400;
}

.kacancagrilar-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.summary-card {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    border: 1px solid #5a6278;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-left: 4px solid #e53e3e;
    transition: all 0.3s ease;
}

    .summary-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }

    .summary-card i {
        font-size: 36px;
        color: #e53e3e;
        margin-bottom: 15px;
    }

.summary-value {
    font-size: 36px;
    font-weight: 700;
    color: #e9ecef;
    margin-bottom: 8px;
}

.summary-label {
    font-size: 14px;
    color: #a8b2c1;
    font-weight: 500;
}

.kacancagrilar-content-card {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #5a6278;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

    .kacancagrilar-content-card .table-responsive {
        border-radius: 12px;
        overflow-x: auto !important;
        overflow-y: auto !important;
        max-height: 70vh !important;
        position: relative !important;
    }

    .kacancagrilar-content-card .modern-table {
        background: transparent;
        color: #e9ecef !important;
        margin-bottom: 0;
    }

        .kacancagrilar-content-card .modern-table thead th {
            background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
            color: white;
            font-weight: 600;
            border: none;
            padding: 15px;
            text-align: left;
            white-space: nowrap;
        }

        .kacancagrilar-content-card .modern-table tbody tr {
            background: #3a3f51;
            border-bottom: 1px solid #464852;
            transition: all 0.2s ease;
        }

            .kacancagrilar-content-card .modern-table tbody tr:hover {
                background: #454b5f;
                transform: translateX(3px);
            }

        .kacancagrilar-content-card .modern-table tbody td {
            color: #e9ecef !important;
            padding: 15px;
            vertical-align: middle;
            white-space: nowrap;
        }

    .kacancagrilar-content-card .table-responsive::-webkit-scrollbar {
        height: 8px;
    }

    .kacancagrilar-content-card .table-responsive::-webkit-scrollbar-track {
        background: #3a3f51;
        border-radius: 4px;
    }

    .kacancagrilar-content-card .table-responsive::-webkit-scrollbar-thumb {
        background: #e53e3e;
        border-radius: 4px;
    }

        .kacancagrilar-content-card .table-responsive::-webkit-scrollbar-thumb:hover {
            background: #c53030;
        }

@media (max-width: 768px) {
    .kacancagrilar-title-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .kacancagrilar-stats-summary {
        grid-template-columns: 1fr;
    }
}

/* KacanCagrilar Filtreleme Bölümü */
.kacancagrilar-filters-section {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.kacancagrilar-filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kacancagrilar-filter-label {
    color: #e9ecef;
    font-weight: 500;
    font-size: 14px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .kacancagrilar-filter-label i {
        color: #3db16b;
    }

.kacancagrilar-filter-select {
    background: #2c2f3d;
    border: 1px solid #5a6278;
    color: #e9ecef;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    min-width: 180px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .kacancagrilar-filter-select:focus {
        outline: none;
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.25);
    }

.kacancagrilar-custom-date-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.kacancagrilar-date-input {
    background: #2c2f3d;
    border: 1px solid #5a6278;
    color: #e9ecef;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .kacancagrilar-date-input:focus {
        outline: none;
        border-color: #3db16b;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.25);
    }

.kacancagrilar-action-buttons {
    display: flex;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}

.kacancagrilar-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: white;
}

    .kacancagrilar-btn i {
        font-size: 16px;
    }

.kacancagrilar-btn-primary {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
}

    .kacancagrilar-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
    }

.kacancagrilar-btn-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

    .kacancagrilar-btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
    }

.kacancagrilar-btn-info {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}

    .kacancagrilar-btn-info:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(66, 153, 225, 0.4);
    }

.kacancagrilar-checkbox,
.kacancagrilar-row-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3db16b;
}

@media (max-width: 768px) {
    .kacancagrilar-filters-section {
        flex-direction: column;
        align-items: stretch;
    }

    .kacancagrilar-action-buttons {
        margin-left: 0;
        width: 100%;
    }

    .kacancagrilar-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   MANAGE TEAM - Tab Content Color Override
   ============================================ */
.manage-team-container .tab-content > *:not(#smartwizard),
.manage-team-container .tab-content > *:not(#smartwizard) * {
    color: #e9ecef !important;
}

.manage-team-container .tab-content label:not(#smartwizard label):not(#smartwizard *) {
    color: #e9ecef !important;
}

.manage-team-container .tab-content p,
.manage-team-container .tab-content span,
.manage-team-container .tab-content div,
.manage-team-container .tab-content td,
.manage-team-container .tab-content th {
    color: #e9ecef !important;
}

.manage-team-container .tab-content .tableTeam {
    color: #e9ecef !important;
}

    .manage-team-container .tab-content .tableTeam th,
    .manage-team-container .tab-content .tableTeam td {
        color: #e9ecef !important;
    }

/* ============================================
   NMESSAGES - Modern Chat Interface
   ============================================ */

/* Sidebar Modernization */
.sidebar-group.le {
    background: linear-gradient(135deg, #1a1d29 0%, #2c2f3a 100%);
    border-radius: 0;
}

.sidebar-group .sidebar {
    background: linear-gradient(135deg, rgba(26, 29, 41, 0.95) 0%, rgba(44, 47, 61, 0.9) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(102, 126, 234, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 0 1px rgba(102, 126, 234, 0.1),
                0 0 40px rgba(102, 126, 234, 0.1) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sidebar-group .sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(102, 126, 234, 0.6) 50%, 
        transparent 100%);
    animation: tech-scan 3s ease-in-out infinite;
    z-index: 1;
}

.sidebar-group .sidebar::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
    animation: tech-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

/* NMessages Sidebar Genişlik Artırma */
.sidebar-group.le .sidebar#chats,
.sidebar-group.le .sidebar.active {
    width: 370px !important;
    min-width: 370px !important;
    max-width: 370px !important;
}

.sidebar-group .sidebar > header {
    background: linear-gradient(135deg, rgb(58 63 81) 0%, rgb(29 31 41) 100%) !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2) !important;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: relative;
    z-index: 2;
}

.sidebar-group .sidebar > header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(102, 126, 234, 0.8) 50%, 
        transparent 100%);
    animation: tech-scan 3s ease-in-out infinite;
}

    .sidebar-group .sidebar > header ul.list-inline {
        margin: 0;
        padding: 0;
    }

/* Tech Sidebar Header */
.tech-sidebar-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.3);
    padding: 12px 15px !important;
    position: relative;
    overflow: hidden;
}

    .tech-sidebar-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
        animation: tech-scan 3s infinite;
    }

@keyframes tech-scan {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}


.sidebar-group .sidebar > header .form-control,
.tech-select {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.15) 100%);
    border: 1px solid rgba(102, 126, 234, 0.4);
    color: #ffffff;
    border-radius: 10px;
    padding: 8px 15px;
    backdrop-filter: blur(15px);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-weight: 500;
}

    .sidebar-group .sidebar > header .form-control:focus,
    .tech-select:focus {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.35) 0%, rgba(118, 75, 162, 0.25) 100%);
        border-color: #667eea;
        color: #ffffff;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.3), 0 4px 16px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        outline: none;
        transform: translateY(-1px);
    }

.sidebar-group .sidebar > header .btn-light {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.2) 100%);
    border: 1px solid rgba(102, 126, 234, 0.4);
    color: #ffffff;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(15px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

    .sidebar-group .sidebar > header .btn-light::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    .sidebar-group .sidebar > header .btn-light:hover::before {
        left: 100%;
    }

    .sidebar-group .sidebar > header .btn-light:hover {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(118, 75, 162, 0.3) 100%);
        border-color: rgba(102, 126, 234, 0.6);
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5), 0 0 30px rgba(102, 126, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

/* Tech Modern Search Wrapper */
.modern-search-wrapper {
    padding: 15px;
    background: linear-gradient(135deg, rgb(37 42 63) 0%, rgb(68 177 111) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
}

    .modern-search-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
        animation: tech-pulse 4s infinite;
    }

@keyframes tech-pulse {
    0%, 100% {
        left: -100%;
        opacity: 0;
    }

    50% {
        left: 0%;
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

.search-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 18px;
    color: rgba(102, 126, 234, 0.7);
    font-size: 16px;
    z-index: 2;
    pointer-events: none;
    transition: all 0.35s ease;
    filter: drop-shadow(0 0 4px rgba(102, 126, 234, 0.5));
}

.modern-search-input {
    padding-left: 50px !important;
    background: linear-gradient(135deg, rgba(31, 34, 45, 0.9) 0%, rgba(44, 47, 61, 0.8) 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
    color: #e9ecef;
    border-radius: 12px;
    padding: 14px 20px 14px 50px !important;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(102, 126, 234, 0.2);
    width: 100%;
    backdrop-filter: blur(20px);
    position: relative;
}

    .modern-search-input::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 12px;
        padding: 2px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.5), rgba(118, 75, 162, 0.5));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.35s ease;
    }

    .modern-search-input:focus {
        background: linear-gradient(135deg, rgba(44, 47, 61, 0.95) 0%, rgba(58, 63, 81, 0.9) 100%);
        border-color: #667eea;
        color: #ffffff;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.3), 0 4px 20px rgba(102, 126, 234, 0.4), inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 30px rgba(102, 126, 234, 0.2);
        outline: none;
        transform: translateY(-2px);
    }

        .modern-search-input:focus::before {
            opacity: 1;
        }

        .modern-search-input:focus + .search-icon,
        .search-input-container:focus-within .search-icon {
            color: #667eea;
            transform: scale(1.1);
            filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.8));
        }

    .modern-search-input::placeholder {
        color: rgba(168, 178, 193, 0.6);
        transition: opacity 0.3s ease;
    }

    .modern-search-input:focus::placeholder {
        opacity: 0.5;
    }

/* Sidebar Filters Panel */
.chats-filters-panel.modern-filters-panel {
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.1) 0%, rgba(101, 217, 147, 0.05) 100%);
    border: 1px solid rgba(61, 177, 107, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin: 10px;
    backdrop-filter: blur(10px);
}

.filters-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(61, 177, 107, 0.2);
}

.filters-icon {
    color: #3db16b;
    font-size: 20px;
}

.filters-header h4 {
    color: #e9ecef;
    font-weight: 600;
    margin: 0;
    font-size: 18px;
}

.chats-filters-panel.modern-filters-panel .form-control {
    background: linear-gradient(135deg, #1f222d 0%, #2c2f3d 100%);
    border: 2px solid rgba(61, 177, 107, 0.2);
    color: #e9ecef;
    border-radius: 10px;
    padding: 10px 15px;
}

    .chats-filters-panel.modern-filters-panel .form-control:focus {
        background: linear-gradient(135deg, #2c2f3d 0%, #3a3f51 100%);
        border-color: #3db16b;
        color: white;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.2);
    }

.chats-filters-panel.modern-filters-panel .btn {
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chats-filters-panel.modern-filters-panel .btn-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);
}

.chats-filters-panel.modern-filters-panel .btn-info {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
}

.chats-filters-panel.modern-filters-panel .btn-danger {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}

.chats-filters-panel.modern-filters-panel .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.filters-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    gap: 10px;
}

.filters-actions-right {
    display: flex;
    gap: 10px;
}

/* Chat List Items */
.sidebar-body .list-group-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(61, 177, 107, 0.1);
    padding: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

    .sidebar-body .list-group-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, #3db16b 0%, #65d993 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar-body .list-group-item:hover {
        background: linear-gradient(90deg, rgba(61, 177, 107, 0.1) 0%, rgba(101, 217, 147, 0.05) 100%);
        transform: translateX(5px);
    }

        .sidebar-body .list-group-item:hover::before {
            opacity: 1;
        }

    .sidebar-body .list-group-item.active-chat {
        background: linear-gradient(90deg, rgba(61, 177, 107, 0.2) 0%, rgba(101, 217, 147, 0.1) 100%);
        border-left: 3px solid #3db16b;
    }

        .sidebar-body .list-group-item.active-chat::before {
            opacity: 1;
        }

/* Enterprise Chat List - Professional & Corporate Design */
.modern-chat-list {
    padding: 0;
    margin: 0;
}

    .modern-chat-list .list-group-item {
        border-radius: 12px;
        margin: 6px 10px;
        padding: 18px 16px;
        background: linear-gradient(135deg, rgb(58 63 81) 0%, rgb(29 31 41) 100%);
        border: 1px solid rgba(66, 153, 225, 0.12);
        backdrop-filter: blur(20px) saturate(180%);
        transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

        .modern-chat-list .list-group-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, rgba(66, 153, 225, 0.5) 50%, transparent 100%);
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .modern-chat-list .list-group-item:hover,
        .modern-chat-list .achats:hover .list-group-item {
            background: linear-gradient(135deg, rgba(66, 153, 225, 0.18) 0%, rgba(30, 64, 175, 0.12) 100%);
            border-color: rgba(66, 153, 225, 0.35);
            transform: translateX(6px) translateY(-2px);
            box-shadow: 0 8px 24px rgba(66, 153, 225, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);
        }

            .modern-chat-list .list-group-item:hover::before,
            .modern-chat-list .achats:hover .list-group-item::before {
                opacity: 1;
            }

        .modern-chat-list .list-group-item.active-chat,
        .modern-chat-list .list-group-item.open-chat,
        .modern-chat-list .achats .list-group-item.active-chat,
        .modern-chat-list .achats .list-group-item.open-chat {
            background: linear-gradient(135deg, rgb(41 58 69) 0%, rgb(69 157 119) 100%) !important;
            border-color: rgb(45 77 73) !important;
            border-left: 3px solid #2c4c47 !important;
            box-shadow: 0 8px 32px rgb(64 140 111), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
        }

            .modern-chat-list .list-group-item.active-chat::before,
            .modern-chat-list .list-group-item.open-chat::before,
            .modern-chat-list .achats .list-group-item.active-chat::before,
            .modern-chat-list .achats .list-group-item.open-chat::before {
                opacity: 1 !important;
                background: linear-gradient(90deg, rgba(66, 153, 225, 0.8) 0%, rgba(30, 64, 175, 0.6) 100%) !important;
            }

        .modern-chat-list .list-group-item figure.avatar {
            position: relative;
            margin-right: 14px;
            flex-shrink: 0;
        }

            .modern-chat-list .list-group-item figure.avatar::after {
                content: '';
                position: absolute;
                bottom: 2px;
                right: 2px;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: #48bb78;
                border: 2px solid #1a202c;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .modern-chat-list .list-group-item figure.avatar img,
            .modern-chat-list .list-group-item figure.avatar .avatar-title-black {
                width: 52px;
                height: 52px;
                border-radius: 50%;
                border: 2.5px solid rgba(66, 153, 225, 0.25);
                transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                object-fit: cover;
            }

        .modern-chat-list .list-group-item:hover figure.avatar img,
        .modern-chat-list .list-group-item:hover figure.avatar .avatar-title-black,
        .modern-chat-list .achats:hover .list-group-item figure.avatar img,
        .modern-chat-list .achats:hover .list-group-item figure.avatar .avatar-title-black {
            border-color: rgba(66, 153, 225, 0.6);
            transform: scale(1.08);
            box-shadow: 0 6px 16px rgba(66, 153, 225, 0.4);
        }

        .modern-chat-list .list-group-item.active-chat figure.avatar img,
        .modern-chat-list .list-group-item.active-chat figure.avatar .avatar-title-black,
        .modern-chat-list .list-group-item.open-chat figure.avatar img,
        .modern-chat-list .list-group-item.open-chat figure.avatar .avatar-title-black,
        .modern-chat-list .achats .list-group-item.active-chat figure.avatar img,
        .modern-chat-list .achats .list-group-item.active-chat figure.avatar .avatar-title-black,
        .modern-chat-list .achats .list-group-item.open-chat figure.avatar img,
        .modern-chat-list .achats .list-group-item.open-chat figure.avatar .avatar-title-black,
        .modern-chat-list .list-group-item.liachick figure.avatar img,
        .modern-chat-list .list-group-item.liachick figure.avatar .avatar-title-black,
        .modern-chat-list .achats .list-group-item.liachick figure.avatar img,
        .modern-chat-list .achats .list-group-item.liachick figure.avatar .avatar-title-black {
            border-color: rgba(66, 153, 225, 0.8) !important;
            box-shadow: 0 6px 20px rgba(66, 153, 225, 0.5) !important;
        }

        .modern-chat-list .list-group-item .users-list-body {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

            .modern-chat-list .list-group-item .users-list-body h5 {
                font-size: 15px;
                font-weight: 600;
                color: #e2e8f0;
                margin: 0 0 6px 0;
                letter-spacing: 0.2px;
                line-height: 1.4;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            }

                .modern-chat-list .list-group-item .users-list-body h5 i.fa-tags {
                    font-size: 14px;
                    margin-left: 8px;
                    opacity: 0.9;
                }

            .modern-chat-list .list-group-item .users-list-body p,
            .modern-chat-list .list-group-item .users-list-body div {
                font-size: 13px;
                color: #a0aec0;
                margin: 0;
                line-height: 1.5;
                display: flex;
                align-items: center;
                gap: 6px;
                font-weight: 400;
            }

                .modern-chat-list .list-group-item .users-list-body div i {
                    font-size: 12px;
                    opacity: 0.8;
                    width: 14px;
                    text-align: center;
                }

        .modern-chat-list .list-group-item.active-chat .users-list-body h5,
        .modern-chat-list .list-group-item.open-chat .users-list-body h5 {
            color: #ffffff;
            font-weight: 700;
        }

        .modern-chat-list .list-group-item.active-chat .users-list-body p,
        .modern-chat-list .list-group-item.active-chat .users-list-body div,
        .modern-chat-list .list-group-item.open-chat .users-list-body p,
        .modern-chat-list .list-group-item.open-chat .users-list-body div {
            color: #cbd5e0;
        }

/* Enterprise Pagination - Professional Corporate Design */
.modern-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 0 10px;
    background: linear-gradient(180deg, rgba(26, 32, 44, 0.95) 0%, rgba(20, 25, 35, 0.98) 100%);
    border-top: 1px solid rgba(66, 153, 225, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
}

.modern-pagination-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

.modern-pagination {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

    .modern-pagination .page-item {
        margin: 0;
        position: relative;
    }

    .modern-pagination .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 14px;
        background: linear-gradient(135deg, rgba(66, 153, 225, 0.12) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(66, 153, 225, 0.2);
        color: #cbd5e0;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        backdrop-filter: blur(10px);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        letter-spacing: 0.3px;
        position: relative;
        overflow: hidden;
    }

        .modern-pagination .page-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .modern-pagination .page-link:hover::before {
            left: 100%;
        }

        .modern-pagination .page-link:hover {
            background: linear-gradient(135deg, rgba(66, 153, 225, 0.25) 0%, rgba(30, 64, 175, 0.18) 100%);
            border-color: rgba(66, 153, 225, 0.4);
            color: #ffffff;
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 6px 20px rgba(66, 153, 225, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
        }

    .modern-pagination .page-item.active .page-link {
        background: linear-gradient(135deg, #4299e1 0%, #1e40af 100%);
        border-color: #4299e1;
        color: #ffffff;
        box-shadow: 0 6px 24px rgba(66, 153, 225, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        font-weight: 700;
        transform: scale(1.08);
    }

        .modern-pagination .page-item.active .page-link::before {
            display: none;
        }

    .modern-pagination .page-item.disabled .page-link {
        background: rgba(66, 153, 225, 0.05);
        border-color: rgba(66, 153, 225, 0.1);
        color: #718096;
        cursor: not-allowed;
        opacity: 0.4;
        pointer-events: none;
    }

        .modern-pagination .page-item.disabled .page-link:hover {
            transform: none;
            box-shadow: none;
        }

    .modern-pagination .page-link i {
        font-size: 13px;
        font-weight: 600;
    }

/* Enterprise Scrollbar Styling - Professional Design */
.sidebar-body::-webkit-scrollbar {
    width: 8px;
}

.sidebar-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin: 4px 0;
}

.sidebar-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(66, 153, 225, 0.6) 0%, rgba(30, 64, 175, 0.8) 100%);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.3s ease;
}

    .sidebar-body::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(66, 153, 225, 0.8) 0%, rgba(30, 64, 175, 1) 100%);
        background-clip: padding-box;
    }

.sidebar-body {
    scrollbar-width: thin;
    scrollbar-color: rgb(18 167 101) rgba(255, 255, 255, 0.03);
}

/* Chat Area Modernization */
.chat {
    background: linear-gradient(135deg, rgba(26, 29, 41, 0.95) 0%, rgba(44, 47, 61, 0.9) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(102, 126, 234, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 0 1px rgba(102, 126, 234, 0.1),
                0 0 40px rgba(102, 126, 234, 0.1) !important;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin: 5px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(102, 126, 234, 0.6) 50%, 
        transparent 100%);
    animation: tech-scan 3s ease-in-out infinite;
    z-index: 1;
}

.chat::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
    animation: tech-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

.chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.3) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        transparent 100%);
    animation: tech-scan 3s ease-in-out infinite;
}

    .chat-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
        pointer-events: none;
    }

.chat-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.chat-header-toggle {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
    cursor: pointer !important;
}

    .chat-header-toggle:hover {
        background: rgba(255, 255, 255, 0.25) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        color: white !important;
    }

    /* Header gizlendiğinde butonun header background rengiyle aynı olması */
    .chat-header-toggle.header-hidden-state {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        margin: 5px 10px 0px 10px !important;
    }

    /* Header gizlendiğinde chat-body'nin üst padding'ini azalt */
    .chat.header-hidden .chat-body {
        padding-top: 5px !important;
    }

    .chat-header-toggle.header-hidden-state:hover {
        background: linear-gradient(135deg, #7a8ef0 0%, #8a5fb8 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
    }

.chat-header-user {
    color: white;
    font-weight: 600;
    font-size: 18px;
    position: relative;
    z-index: 1;
    flex: 1;
}

.chat-header-action {
    display: flex;
    gap: 8px;
    position: relative;
    z-index: 1;
}

/* Chat header gizlendiğinde */
.chat-header.collapsed {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-bottom: none !important;
    opacity: 0 !important;
    transform: translateY(-100%) !important;
}

.chat-header.collapsed .chat-header-left,
.chat-header.collapsed .chat-header-action {
    display: none !important;
}

/* Chat header gizlendiğinde chat body yukarıya genişler */
.chat-header.collapsed + .chat-body {
    margin-top: 0 !important;
    padding-top: 60px !important;
    position: relative;
}

/* Floating toggle butonu için icon - header gizlendiğinde chat body'nin üstünde görünür */
.chat-header.collapsed + .chat-body .chat-header-restore-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%) !important;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 18px;
    pointer-events: auto;
}

/* Mesajlar restore butonunun altında kalmalı - messages container scroll edilebilir ama buton sabit */
.chat-header.collapsed + .chat-body .messages {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 0;
    overflow-y: auto;
}

.chat-header.collapsed + .chat-body .chat-header-restore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #65d993 0%, #3db16b 100%) !important;
}

    .chat-header-action .btn {
        background: rgba(61, 177, 107, 0.2);
        border: 1px solid rgba(61, 177, 107, 0.3);
        color: #e9ecef;
        border-radius: 8px;
        padding: 8px 12px;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

        .chat-header-action .btn:hover {
            background: rgba(61, 177, 107, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
            color: #ffffff;
            border-color: rgba(61, 177, 107, 0.5);
        }

    .chat-header-action .btn-success {
        background: rgba(61, 177, 107, 0.8);
        border-color: rgba(61, 177, 107, 0.9);
    }

        .chat-header-action .btn-success:hover {
            background: rgba(61, 177, 107, 1);
        }

/* Chat Body */
.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: transparent !important;
    position: relative;
    z-index: 1;
}

    .chat-body .messages {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

/* Chat Footer - Takeover Section */
.chat-footer#takeovered {
    background: linear-gradient(135deg, rgba(44, 47, 61, 0.95) 0%, rgba(31, 34, 45, 0.9) 100%) !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    border-top: 2px solid rgba(102, 126, 234, 0.3) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(102, 126, 234, 0.1) !important;
    padding: 0;
    position: relative;
    z-index: 10;
}

.takeover-header-indicator {
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.2) 0%, rgba(101, 217, 147, 0.1) 100%);
    border-bottom: 2px solid rgba(61, 177, 107, 0.3);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.takeover-indicator-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(61, 177, 107, 0.4);
    flex-shrink: 0;
}

    .takeover-indicator-icon i {
        color: white;
        font-size: 20px;
    }

.takeover-indicator-text {
    flex: 1;
    min-width: 0;
}

.takeover-title {
    display: block;
    color: #3db16b;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
}

.takeover-subtitle {
    display: block;
    color: #a8b2c1;
    font-size: 13px;
}

.chat-footer#takeovered .nav-tabs {
    background: linear-gradient(135deg, #454b5f 0%, #3a3f51 100%);
    border-bottom: 2px solid rgba(61, 177, 107, 0.3);
    padding: 12px 15px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .chat-footer#takeovered .nav-tabs .nav-item {
        margin: 0;
    }

    .chat-footer#takeovered .nav-tabs .nav-link {
        background: rgba(61, 177, 107, 0.1);
        border: 1px solid rgba(61, 177, 107, 0.2);
        color: #a8b2c1;
        padding: 10px 18px;
        border-radius: 10px;
        transition: all 0.3s ease;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .chat-footer#takeovered .nav-tabs .nav-link:hover {
            background: rgba(61, 177, 107, 0.2);
            color: #e9ecef;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3);
        }

        .chat-footer#takeovered .nav-tabs .nav-link.active {
            background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
            color: white;
            border-color: #3db16b;
            box-shadow: 0 4px 15px rgba(61, 177, 107, 0.4);
        }

        .chat-footer#takeovered .nav-tabs .nav-link i {
            font-size: 16px;
        }

        .chat-footer#takeovered .nav-tabs .nav-link span {
            font-size: 14px;
        }

    .chat-footer#takeovered .nav-tabs #_NOTAKEOVER {
        background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
        border-radius: 10px;
        margin-left: auto;
    }

        .chat-footer#takeovered .nav-tabs #_NOTAKEOVER .nav-link {
            background: transparent !important;
            border: none !important;
            color: white !important;
            font-weight: 600;
        }

            .chat-footer#takeovered .nav-tabs #_NOTAKEOVER .nav-link:hover {
                background: rgba(255, 255, 255, 0.1) !important;
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(229, 62, 62, 0.4);
                color: white !important;
            }

/* Tab Content - Takeover */
.chat-footer#takeovered #tab-content {
    background: linear-gradient(135deg, #2c2f3d 0%, #1f222d 100%);
    padding: 20px;
    border-radius: 0;
    min-height: 250px;
    max-height: 400px;
    overflow-y: auto;
}

    .chat-footer#takeovered #tab-content .form-control {
        background: linear-gradient(135deg, #1f222d 0%, #2c2f3d 100%);
        border: 2px solid rgba(61, 177, 107, 0.2);
        color: #ffffff !important;
        border-radius: 12px;
        padding: 12px 18px;
        transition: all 0.3s ease;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    }

        .chat-footer#takeovered #tab-content .form-control:focus {
            background: linear-gradient(135deg, #2c2f3d 0%, #3a3f51 100%);
            border-color: #3db16b;
            color: #ffffff !important;
            box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2);
            outline: none;
        }

    .chat-footer#takeovered #tab-content textarea {
        min-height: 150px;
        resize: vertical;
    }

    .chat-footer#takeovered #tab-content .form-buttons {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        flex-wrap: wrap;
    }

    .chat-footer#takeovered #tab-content .btn-floating {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
        border: none;
        color: white;
        border-radius: 12px;
        padding: 12px 20px;
        font-weight: 500;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .chat-footer#takeovered #tab-content .btn-floating:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4);
            color: white;
        }

    .chat-footer#takeovered #tab-content .btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    }

    .chat-footer#takeovered #tab-content .btn-warning {
        background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
    }

    .chat-footer#takeovered #tab-content .btn-info {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    }

/* Modern Message Form */
.modern-message-form {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start;
}

.message-textarea-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

.modern-textarea {
    background: linear-gradient(135deg, #1f222d 0%, #2c2f3d 100%);
    border: 2px solid rgba(61, 177, 107, 0.2);
    color: #e9ecef;
    border-radius: 12px;
    padding: 15px 18px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    resize: vertical;
    min-height: 120px;
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    width: 100%;
}

    .modern-textarea:focus {
        background: linear-gradient(135deg, #2c2f3d 0%, #3a3f51 100%);
        border-color: #3db16b;
        color: white;
        box-shadow: 0 0 0 4px rgba(61, 177, 107, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2);
        outline: none;
    }

    .modern-textarea::placeholder {
        color: #a8b2c1;
    }

.modern-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    width: auto;
    min-width: 200px;
}

.action-buttons-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.modern-action-btn {
    flex: 1;
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border: none;
    color: white;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

    .modern-action-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4);
        color: white;
    }

    .modern-action-btn.btn-warning {
        background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
        box-shadow: 0 4px 15px rgba(237, 137, 54, 0.3);
    }

        .modern-action-btn.btn-warning:hover {
            box-shadow: 0 6px 20px rgba(237, 137, 54, 0.4);
        }

    .modern-action-btn.btn-info {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
    }

        .modern-action-btn.btn-info:hover {
            box-shadow: 0 6px 20px rgba(66, 153, 225, 0.4);
        }

    .modern-action-btn.btn-send {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);
    }

        .modern-action-btn.btn-send:hover {
            box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);
        }

    .modern-action-btn .btn-label {
        font-size: 14px;
        font-weight: 500;
    }

    .modern-action-btn i {
        font-size: 16px;
    }

/* Scrollbar Styling for Chat */
.chat-body::-webkit-scrollbar,
.chat-footer#takeovered #tab-content::-webkit-scrollbar {
    width: 8px;
}

.chat-body::-webkit-scrollbar-track,
.chat-footer#takeovered #tab-content::-webkit-scrollbar-track {
    background: rgba(61, 177, 107, 0.1);
    border-radius: 10px;
}

.chat-body::-webkit-scrollbar-thumb,
.chat-footer#takeovered #tab-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-radius: 10px;
}

    .chat-body::-webkit-scrollbar-thumb:hover,
    .chat-footer#takeovered #tab-content::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #65d993 0%, #3db16b 100%);
    }

/* Responsive */
@media (max-width: 768px) {
    .modern-message-form {
        flex-direction: column;
    }

    .message-textarea-wrapper {
        width: 100%;
    }

    .modern-action-buttons {
        width: 100%;
        min-width: 100%;
    }

    .action-buttons-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .modern-action-btn {
        flex: 1;
        min-width: calc(50% - 6px);
    }

    .chat-footer#takeovered .nav-tabs {
        flex-direction: column;
    }

        .chat-footer#takeovered .nav-tabs #_NOTAKEOVER {
            margin-left: 0;
            width: 100%;
        }

    .chat-footer#takeovered #tab-content .form-buttons {
        flex-direction: column;
    }
}

/* NMessages - Selectbox Dropdown Dark Theme Fix */
.sidebar-group.le .sidebar > header #listSelect,
.sidebar-group.le .sidebar > header select.form-control {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

    .sidebar-group.le .sidebar > header #listSelect option,
    .sidebar-group.le .sidebar > header select.form-control option {
        background: #3a3f51 !important;
        color: #e9ecef !important;
        padding: 8px 12px !important;
    }

        .sidebar-group.le .sidebar > header #listSelect option:hover,
        .sidebar-group.le .sidebar > header select.form-control option:hover {
            background: #454b5f !important;
            color: white !important;
        }

        .sidebar-group.le .sidebar > header #listSelect option:checked,
        .sidebar-group.le .sidebar > header select.form-control option:checked,
        .sidebar-group.le .sidebar > header #listSelect option:focus,
        .sidebar-group.le .sidebar > header select.form-control option:focus {
            background: #3db16b !important;
            color: white !important;
        }

    /* Selectbox açıldığında dropdown menüsü için */
    .sidebar-group.le .sidebar > header #listSelect:focus,
    .sidebar-group.le .sidebar > header select.form-control:focus {
        background: rgba(255, 255, 255, 0.25) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
        color: white !important;
    }

/* ============================================
   NMESSAGES - Chat Messages Modernization
   Sadece müşteri ve temsilci mesajları için
   Sistem mesajlarına dokunulmamıştır
   ============================================ */

/* Müşteri Mesajları (Gelen Mesajlar) - Modern ve Teknolojik */
.layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) {
    margin-left: 0 !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

    .layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) .message-content {
        background: linear-gradient(135deg, #3a3f51 0%, #454b5f 100%) !important;
        border: 1px solid rgba(61, 177, 107, 0.3) !important;
        color: #e9ecef !important;
        border-radius: 18px 18px 18px 4px !important;
        padding: 14px 18px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(61, 177, 107, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        position: relative !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        backdrop-filter: blur(10px) !important;
        max-width: 75% !important;
        word-wrap: break-word !important;
    }

        .layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) .message-content:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(61, 177, 107, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
            transform: translateY(-2px) !important;
            border-color: rgba(61, 177, 107, 0.5) !important;
        }

        .layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) .message-content::before {
            content: '' !important;
            position: absolute !important;
            left: -8px !important;
            bottom: 12px !important;
            width: 0 !important;
            height: 0 !important;
            border-style: solid !important;
            border-width: 8px 8px 0 0 !important;
            border-color: #3a3f51 transparent transparent transparent !important;
        }

/* Temsilci Mesajları (Giden Mesajlar) - Modern ve Teknolojik */
.layout .content .chat .chat-body .messages .message-item.outgoing-message {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

    .layout .content .chat .chat-body .messages .message-item.outgoing-message .message-content {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%) !important;
        border: 1px solid rgba(61, 177, 107, 0.4) !important;
        color: white !important;
        border-radius: 18px 18px 4px 18px !important;
        padding: 14px 18px !important;
        box-shadow: 0 4px 18px rgba(61, 177, 107, 0.35), 0 2px 8px rgba(101, 217, 147, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        position: relative !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        backdrop-filter: blur(10px) !important;
        max-width: 75% !important;
        word-wrap: break-word !important;
    }

        .layout .content .chat .chat-body .messages .message-item.outgoing-message .message-content:hover {
            box-shadow: 0 6px 25px rgba(61, 177, 107, 0.45), 0 4px 12px rgba(101, 217, 147, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
            transform: translateY(-2px) !important;
            border-color: rgba(61, 177, 107, 0.6) !important;
        }

        .layout .content .chat .chat-body .messages .message-item.outgoing-message .message-content::before {
            content: '' !important;
            position: absolute !important;
            right: -8px !important;
            bottom: 12px !important;
            width: 0 !important;
            height: 0 !important;
            border-style: solid !important;
            border-width: 8px 0 0 8px !important;
            border-color: #3db16b transparent transparent transparent !important;
        }

/* Mesaj Zamanı ve Durum - Modern Stil */
.layout .content .chat .chat-body .messages .message-item:not(.systemMessage) .message-action {
    color: #a8b2c1 !important;
    font-size: 11px !important;
    margin-top: 6px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 4px !important;
}

.layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) .message-action {
    text-align: left !important;
    justify-content: flex-start !important;
}

.layout .content .chat .chat-body .messages .message-item.outgoing-message .message-action {
    text-align: right !important;
    justify-content: flex-end !important;
}

.layout .content .chat .chat-body .messages .message-item:not(.systemMessage) .message-action i {
    font-size: 12px !important;
    opacity: 0.7 !important;
}

/* Mesaj İçeriği Linkleri - Modern Stil */
.layout .content .chat .chat-body .messages .message-item:not(.systemMessage) .message-content a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: right !important;
    margin-left: 5px !important;
    position: relative !important;
    z-index: 10 !important;
}

.layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) .message-content a {
    color: #3db16b !important;
}

.layout .content .chat .chat-body .messages .message-item:not(.systemMessage) .message-content a:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.05) !important;
}

.layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) .message-content a:hover {
    color: #65d993 !important;
    background: rgba(61, 177, 107, 0.15) !important;
}

/* Reply butonu özel stil */
.layout .content .chat .chat-body .messages .message-item:not(.systemMessage) .message-content a[data-toggle="modal"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: right !important;
    margin-left: 5px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) .message-content a[data-toggle="modal"] {
    color: #3db16b !important;
}

.layout .content .chat .chat-body .messages .message-item:not(.systemMessage) .message-content a[data-toggle="modal"]:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
}

.layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) .message-content a[data-toggle="modal"]:hover {
    color: #65d993 !important;
    background: rgba(61, 177, 107, 0.2) !important;
}

/* Reply icon özel stil */
.layout .content .chat .chat-body .messages .message-item:not(.systemMessage) .message-content a .fa-reply {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   ÇEVRİMDIŞI SOHBET BUTONU - Modern & Tech
   ============================================ */

/* Çevrimdışı Sohbet Tab Butonu */
#OfflineChatTab {
    height: 177px !important;
    width: 40px !important;
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.15) 0%, rgba(101, 217, 147, 0.1) 100%) !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    border: 2px solid rgba(61, 177, 107, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    writing-mode: vertical-lr !important;
    text-align: center !important;
    padding: 10px 5px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(61, 177, 107, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 20px rgba(61, 177, 107, 0.1) !important;
    margin-top: 17% !important;
    position: absolute !important;
    cursor: pointer !important;
    z-index: 100 !important;
    user-select: none !important;
    margin-left: -44px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    overflow: hidden !important;
}

    #OfflineChatTab::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: all 0.6s ease;
        transform: rotate(45deg);
    }

    #OfflineChatTab:hover {
        background: linear-gradient(135deg, rgba(61, 177, 107, 0.25) 0%, rgba(101, 217, 147, 0.2) 100%) !important;
        border-color: rgba(61, 177, 107, 0.5) !important;
        color: #ffffff !important;
        transform: translateX(-5px);
        box-shadow: 0 12px 35px rgba(61, 177, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 30px rgba(61, 177, 107, 0.2) !important;
        width: 45px !important;
    }

        #OfflineChatTab:hover::before {
            top: 100%;
            left: 100%;
        }

    #OfflineChatTab:active {
        transform: translateX(-3px);
        box-shadow: 0 6px 20px rgba(61, 177, 107, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

/* Çevrimdışı Sohbet Panel - Varsayılan olarak gizli */
#OfflineChat_RealTime {
    margin-top: 8.4% !important;
    position: fixed !important;
    margin-left: -365px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(20px) !important;
    pointer-events: none !important;
    z-index: 999 !important;
}

    /* JavaScript ile display: block olduğunda görünür */
    #OfflineChat_RealTime[style*="display: block"],
    #OfflineChat_RealTime[style*="display:block"],
    #OfflineChat_RealTime[style*="display: block;"],
    #OfflineChat_RealTime[style*="display:block;"] {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    /* JavaScript ile display: none olduğunda gizli */
    #OfflineChat_RealTime[style*="display: none"],
    #OfflineChat_RealTime[style*="display:none"],
    #OfflineChat_RealTime[style*="display: none;"],
    #OfflineChat_RealTime[style*="display:none;"] {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(20px) !important;
        pointer-events: none !important;
    }

/* Çevrimdışı Sohbet Listesi */
#OfflineChatuserChatList {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: width 0.3s ease !important;
}

    #OfflineChatuserChatList[style*="display: block"],
    #OfflineChatuserChatList[style*="display:block"] {
        display: block !important;
    }

    #OfflineChatuserChatList[style*="display: none"],
    #OfflineChatuserChatList[style*="display:none"] {
        display: none !important;
    }

#OfflineChat_RealTime .sidebar-group.le .sidebar {
    background: rgba(26, 29, 41, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(61, 177, 107, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 8px 25px rgba(61, 177, 107, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Çevrimdışı Sohbet Header */
.offline-chat-header {
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.15) 0%, rgba(101, 217, 147, 0.1) 100%) !important;
    border-bottom: 1px solid rgba(61, 177, 107, 0.2) !important;
    padding: 15px 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-radius: 16px 16px 0 0 !important;
}

.offline-chat-title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Kapat Butonu */
.offline-chat-close-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    backdrop-filter: blur(10px) !important;
}

    .offline-chat-close-btn:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
        color: #ffffff !important;
        transform: rotate(90deg) scale(1.1) !important;
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15) !important;
    }

    .offline-chat-close-btn:active {
        transform: rotate(90deg) scale(0.95) !important;
        box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1) !important;
    }

    .offline-chat-close-btn i {
        transition: transform 0.3s ease !important;
    }

/* ============================================
   Phone/Customer Page Modernization
   ============================================ */

/* Page Container */
body.light .layout {
    background: linear-gradient(135deg, #1a1d29 0%, #252836 50%, #1a1d29 100%) !important;
    min-height: 100vh !important;
    padding: 20px !important;
}

    /* Header Section */
    body.light .layout .col-md-12 {
        max-width: 1400px !important;
        margin: 0 auto !important;
    }

    body.light .layout .tabbable {
        background: rgba(26, 29, 41, 0.95) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-radius: 20px !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 8px 25px rgba(61, 177, 107, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        padding: 25px !important;
        border: 1px solid rgba(61, 177, 107, 0.2) !important;
        overflow: hidden !important;
    }

    /* Modern Tab Navigation */
    body.light .layout .nav-tabs {
        border-bottom: 2px solid rgba(61, 177, 107, 0.2) !important;
        margin-bottom: 30px !important;
        padding: 0 !important;
        display: flex !important;
        gap: 10px !important;
    }

        body.light .layout .nav-tabs .nav-item {
            margin-bottom: 0 !important;
        }

        body.light .layout .nav-tabs .nav-link {
            background: rgba(44, 47, 61, 0.6) !important;
            border: 1px solid rgba(61, 177, 107, 0.2) !important;
            border-radius: 12px 12px 0 0 !important;
            color: rgba(255, 255, 255, 0.7) !important;
            padding: 15px 25px !important;
            font-weight: 600 !important;
            font-size: 15px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            position: relative !important;
            overflow: hidden !important;
            margin-right: 0 !important;
            border-bottom: none !important;
        }

            body.light .layout .nav-tabs .nav-link::before {
                content: '' !important;
                position: absolute !important;
                top: 0 !important;
                left: -100% !important;
                width: 100% !important;
                height: 100% !important;
                background: linear-gradient(90deg, transparent, rgba(61, 177, 107, 0.3), transparent) !important;
                transition: left 0.5s ease !important;
            }

            body.light .layout .nav-tabs .nav-link:hover::before {
                left: 100% !important;
            }

            body.light .layout .nav-tabs .nav-link:hover {
                background: rgba(61, 177, 107, 0.15) !important;
                border-color: rgba(61, 177, 107, 0.4) !important;
                color: #ffffff !important;
                transform: translateY(-2px) !important;
                box-shadow: 0 4px 12px rgba(61, 177, 107, 0.2) !important;
            }

            body.light .layout .nav-tabs .nav-link.active {
                background: linear-gradient(135deg, rgba(61, 177, 107, 0.25) 0%, rgba(101, 217, 147, 0.2) 100%) !important;
                border-color: rgba(61, 177, 107, 0.5) !important;
                color: #ffffff !important;
                box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
            }

                body.light .layout .nav-tabs .nav-link.active::after {
                    content: '' !important;
                    position: absolute !important;
                    bottom: -2px !important;
                    left: 0 !important;
                    width: 100% !important;
                    height: 3px !important;
                    background: linear-gradient(90deg, rgba(61, 177, 107, 0.8), rgba(101, 217, 147, 0.8)) !important;
                    border-radius: 3px 3px 0 0 !important;
                }

    /* Tab Content */
    body.light .layout .tab-content {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.light .layout .tab-pane {
        animation: fadeInUp 0.4s ease-out !important;
    }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Inner Tab Navigation (Pills) */
body.light .layout .nav-pills {
    background: rgba(44, 47, 61, 0.4) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    margin-bottom: 25px !important;
    display: inline-flex !important;
    border: 1px solid rgba(61, 177, 107, 0.2) !important;
}

    body.light .layout .nav-pills .nav-item {
        margin: 0 5px !important;
    }

    body.light .layout .nav-pills .nav-link {
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 10px 20px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
    }

        body.light .layout .nav-pills .nav-link:hover {
            background: rgba(61, 177, 107, 0.15) !important;
            color: #ffffff !important;
            transform: translateY(-1px) !important;
        }

        body.light .layout .nav-pills .nav-link.active {
            background: linear-gradient(135deg, rgba(61, 177, 107, 0.3) 0%, rgba(101, 217, 147, 0.25) 100%) !important;
            color: #ffffff !important;
            box-shadow: 0 2px 8px rgba(61, 177, 107, 0.3) !important;
        }

/* Form Groups */
body.light .layout .form-group {
    margin-bottom: 20px !important;
}

    body.light .layout .form-group label {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
        display: block !important;
        letter-spacing: 0.3px !important;
    }

/* Form Controls */
body.light .layout .form-control {
    background: rgba(44, 47, 61, 0.6) !important;
    border: 1px solid rgba(61, 177, 107, 0.2) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    min-height: 48px !important;
}

    body.light .layout .form-control:focus {
        background: rgba(44, 47, 61, 0.8) !important;
        border-color: rgba(61, 177, 107, 0.6) !important;
        color: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.15), 0 4px 12px rgba(61, 177, 107, 0.2) !important;
        outline: none !important;
    }

    body.light .layout .form-control::placeholder {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    body.light .layout .form-control[readonly] {
        background: rgba(58, 85, 117, 0.6) !important;
        border-color: rgba(61, 177, 107, 0.3) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        cursor: not-allowed !important;
    }

/* Select Dropdowns */
body.light .layout select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

    body.light .layout select.form-control option {
        background: #2c2f3d !important;
        color: #ffffff !important;
        padding: 10px !important;
    }

/* Textareas */
body.light .layout textarea.form-control {
    min-height: 100px !important;
    resize: vertical !important;
    font-family: inherit !important;
}

/* Buttons */
body.light .layout .modal-footer {
    border-top: 1px solid rgba(61, 177, 107, 0.2) !important;
    padding: 20px 0 0 0 !important;
    margin-top: 30px !important;
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-end !important;
}

body.light .layout .btn {
    border-radius: 10px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
}

    body.light .layout .btn::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 0 !important;
        height: 0 !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translate(-50%, -50%) !important;
        transition: width 0.6s, height 0.6s !important;
    }

    body.light .layout .btn:hover::before {
        width: 300px !important;
        height: 300px !important;
    }

body.light .layout .btn-info {
    background: rgba(61, 177, 107, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

    body.light .layout .btn-info:hover {
        background: rgba(61, 177, 107, 0.3) !important;
        color: #ffffff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.3) !important;
    }

body.light .layout .btn-primary {
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.8) 0%, rgba(101, 217, 147, 0.8) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3) !important;
}

    body.light .layout .btn-primary:hover {
        background: linear-gradient(135deg, rgba(61, 177, 107, 1) 0%, rgba(101, 217, 147, 1) 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4) !important;
    }

body.light .layout .btn:active {
    transform: translateY(0) !important;
}

/* Table Styling */
body.light .layout #infologs {
    background: rgba(44, 47, 61, 0.4) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

    body.light .layout #infologs thead {
        background: linear-gradient(135deg, rgba(61, 177, 107, 0.2) 0%, rgba(101, 217, 147, 0.15) 100%) !important;
    }

        body.light .layout #infologs thead th {
            color: #ffffff !important;
            font-weight: 600 !important;
            padding: 15px !important;
            border-bottom: 2px solid rgba(61, 177, 107, 0.3) !important;
        }

    body.light .layout #infologs tbody td {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid rgba(61, 177, 107, 0.1) !important;
    }

    body.light .layout #infologs tbody tr:hover {
        background: rgba(61, 177, 107, 0.1) !important;
    }

/* Price Query Form */
body.light .layout #form-price {
    background: rgba(44, 47, 61, 0.4) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    border: 1px solid rgba(61, 177, 107, 0.2) !important;
    margin-bottom: 20px !important;
}

    body.light .layout #form-price .form-control {
        margin-bottom: 10px !important;
    }

    body.light .layout #form-price .col-6,
    body.light .layout #form-price .col-md-2,
    body.light .layout #form-price .col-lg {
        padding: 5px !important;
    }

/* HR Separator */
body.light .layout hr {
    border-color: rgba(61, 177, 107, 0.2) !important;
    margin: 25px 0 !important;
}

/* Row Spacing */
body.light .layout .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

    body.light .layout .row > [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

/* Loading Spinner */
body.light .page-loading {
    background: rgba(26, 29, 41, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

/* Phone Customer Header */
.phone-customer-header {
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.15) 0%, rgba(101, 217, 147, 0.1) 100%) !important;
    border-radius: 16px !important;
    padding: 25px 30px !important;
    margin-bottom: 25px !important;
    border: 1px solid rgba(61, 177, 107, 0.2) !important;
    box-shadow: 0 8px 25px rgba(61, 177, 107, 0.1) !important;
}

.phone-customer-title {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.5px !important;
}

.phone-customer-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 15px !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Responsive */
@media (max-width: 768px) {
    body.light .layout .nav-tabs {
        flex-direction: column !important;
    }

        body.light .layout .nav-tabs .nav-link {
            border-radius: 12px !important;
            margin-bottom: 10px !important;
        }

    body.light .layout .tabbable {
        padding: 15px !important;
    }

    .phone-customer-header {
        padding: 20px !important;
    }

    .phone-customer-title {
        font-size: 22px !important;
    }

    .phone-customer-subtitle {
        font-size: 14px !important;
    }
}

#OfflineChat_RealTime .sidebar-body#OFM {
    box-shadow: none !important;
    background: transparent !important;
    padding: 15px !important;
    padding-top: 10px !important;
}

#OfflineChat_RealTime .list-group {
    background: transparent !important;
    border: none !important;
}

#OfflineChat_RealTime .list-group-item {
    background: rgba(44, 47, 61, 0.6) !important;
    border: 1px solid rgba(61, 177, 107, 0.2) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
}

    #OfflineChat_RealTime .list-group-item:hover {
        background: rgba(58, 63, 81, 0.8) !important;
        border-color: rgba(61, 177, 107, 0.4) !important;
        transform: translateX(5px);
        box-shadow: 0 4px 15px rgba(61, 177, 107, 0.2) !important;
    }

/* ============================================
   ÇEVRİMDIŞI MESAJ MODAL - Modern & Tech
   ============================================ */

/* Offline Message Modal */
#newOfflineMessageModal .modal-dialog,
#_newOfflineMessageModal .modal-dialog {
    max-width: 600px !important;
}

#newOfflineMessageModal .modal-content,
#_newOfflineMessageModal .modal-content {
    background: rgba(26, 29, 41, 0.95) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(61, 177, 107, 0.3) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), 0 12px 35px rgba(61, 177, 107, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden !important;
}

    #newOfflineMessageModal .modal-content::before,
    #_newOfflineMessageModal .modal-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, rgba(61, 177, 107, 0.6), transparent);
        opacity: 0.6;
    }

/* Modal Header */
#newOfflineMessageModal .modal-header,
#_newOfflineMessageModal .modal-header {
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.1) 0%, rgba(101, 217, 147, 0.05) 100%) !important;
    border-bottom: 1px solid rgba(61, 177, 107, 0.2) !important;
    padding: 20px 25px !important;
    border-radius: 20px 20px 0 0 !important;
}

#newOfflineMessageModal .modal-title,
#_newOfflineMessageModal .modal-title {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#newOfflineMessageModal .modal-header .close,
#_newOfflineMessageModal .modal-header .close {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    text-shadow: none !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

    #newOfflineMessageModal .modal-header .close:hover,
    #_newOfflineMessageModal .modal-header .close:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.2) !important;
        transform: rotate(90deg);
    }

/* Modal Body */
#newOfflineMessageModal .modal-body,
#_newOfflineMessageModal .modal-body {
    padding: 25px !important;
    background: transparent !important;
}

    #newOfflineMessageModal .modal-body .form-group,
    #_newOfflineMessageModal .modal-body .form-group {
        margin-bottom: 20px !important;
    }

    #newOfflineMessageModal .modal-body label,
    #_newOfflineMessageModal .modal-body label {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 10px !important;
        display: block !important;
        letter-spacing: 0.3px !important;
    }

    #newOfflineMessageModal .modal-body .form-control,
    #_newOfflineMessageModal .modal-body .form-control {
        background: rgba(44, 47, 61, 0.6) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1.5px solid rgba(61, 177, 107, 0.2) !important;
        border-radius: 12px !important;
        padding: 14px 18px !important;
        color: #ffffff !important;
        font-size: 15px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

        #newOfflineMessageModal .modal-body .form-control:focus,
        #_newOfflineMessageModal .modal-body .form-control:focus {
            background: rgba(58, 63, 81, 0.8) !important;
            border-color: #3db16b !important;
            color: #ffffff !important;
            box-shadow: 0 0 0 3px rgba(61, 177, 107, 0.15), 0 4px 12px rgba(61, 177, 107, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
            outline: none !important;
            transform: translateY(-1px);
        }

    #newOfflineMessageModal .modal-body select.form-control,
    #_newOfflineMessageModal .modal-body select.form-control {
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 15px center !important;
        background-size: 18px !important;
        padding-right: 45px !important;
        cursor: pointer !important;
        line-height: 1.5 !important;
        height: auto !important;
        min-height: calc(1.5em + 0.875rem + 3px) !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

        #newOfflineMessageModal .modal-body select.form-control option,
        #_newOfflineMessageModal .modal-body select.form-control option {
            background: #3a3f51 !important;
            color: #e9ecef !important;
            padding: 12px 15px !important;
        }

    #newOfflineMessageModal .modal-body textarea.form-control,
    #_newOfflineMessageModal .modal-body textarea.form-control {
        resize: vertical !important;
        min-height: 120px !important;
        font-family: inherit !important;
        line-height: 1.6 !important;
    }

    #newOfflineMessageModal .modal-body .form-control::placeholder,
    #_newOfflineMessageModal .modal-body .form-control::placeholder {
        color: rgba(255, 255, 255, 0.4) !important;
    }

/* Modal Footer */
#newOfflineMessageModal .modal-footer,
#_newOfflineMessageModal .modal-footer {
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.05) 0%, rgba(101, 217, 147, 0.03) 100%) !important;
    border-top: 1px solid rgba(61, 177, 107, 0.2) !important;
    padding: 20px 25px !important;
    border-radius: 0 0 20px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

    #newOfflineMessageModal .modal-footer .btn,
    #_newOfflineMessageModal .modal-footer .btn {
        padding: 12px 24px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border: none !important;
        min-width: 120px !important;
    }

    #newOfflineMessageModal .modal-footer .btn-info,
    #_newOfflineMessageModal .modal-footer .btn-info {
        background: rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(10px) !important;
    }

        #newOfflineMessageModal .modal-footer .btn-info:hover,
        #_newOfflineMessageModal .modal-footer .btn-info:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            color: #ffffff !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15) !important;
        }

    #newOfflineMessageModal .modal-footer .btn-primary,
    #_newOfflineMessageModal .modal-footer .btn-primary,
    #newOfflineMessageModal .modal-footer #btnOfflineMessage,
    #_newOfflineMessageModal .modal-footer #btnOfflineMessage {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%) !important;
        color: white !important;
        box-shadow: 0 6px 20px rgba(61, 177, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

        #newOfflineMessageModal .modal-footer .btn-primary:hover,
        #_newOfflineMessageModal .modal-footer .btn-primary:hover,
        #newOfflineMessageModal .modal-footer #btnOfflineMessage:hover,
        #_newOfflineMessageModal .modal-footer #btnOfflineMessage:hover {
            background: linear-gradient(135deg, #65d993 0%, #3db16b 100%) !important;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(61, 177, 107, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
        }

        #newOfflineMessageModal .modal-footer .btn-primary:active,
        #_newOfflineMessageModal .modal-footer .btn-primary:active,
        #newOfflineMessageModal .modal-footer #btnOfflineMessage:active,
        #_newOfflineMessageModal .modal-footer #btnOfflineMessage:active {
            transform: translateY(0);
            box-shadow: 0 4px 15px rgba(61, 177, 107, 0.3) !important;
        }

/* Modal Animasyon */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#newOfflineMessageModal.show .modal-dialog,
#_newOfflineMessageModal.show .modal-dialog {
    animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive */
@media (max-width: 768px) {
    #OfflineChatTab {
        width: 35px !important;
        font-size: 12px !important;
        padding: 8px 4px !important;
    }

    #newOfflineMessageModal .modal-dialog,
    #_newOfflineMessageModal .modal-dialog {
        margin: 20px !important;
        max-width: calc(100% - 40px) !important;
    }

    #newOfflineMessageModal .modal-body,
    #_newOfflineMessageModal .modal-body {
        padding: 20px !important;
    }

    #newOfflineMessageModal .modal-footer,
    #_newOfflineMessageModal .modal-footer {
        flex-direction: column !important;
    }

        #newOfflineMessageModal .modal-footer .btn,
        #_newOfflineMessageModal .modal-footer .btn {
            width: 100% !important;
        }
}

/* Mesaj Animasyonları */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.layout .content .chat .chat-body .messages .message-item:not(.systemMessage) {
    animation: messageSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Avatar Stilleri - Temsilci Mesajları İçin */
.layout .content .chat .chat-body .messages .message-item.outgoing-message figure.avatar {
    margin-top: 4px !important;
}

.layout .content .chat .chat-body .messages .message-item.outgoing-message .avatar-title-black {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(61, 177, 107, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Dark Theme Override - Müşteri Mesajları */
body.dark .layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) .message-content {
    background: linear-gradient(135deg, #3a3f51 0%, #454b5f 100%) !important;
    color: #e9ecef !important;
    border-color: rgba(61, 177, 107, 0.3) !important;
}

/* Dark Theme Override - Temsilci Mesajları */
body.dark .layout .content .chat .chat-body .messages .message-item.outgoing-message .message-content {
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.3) 0%, rgba(61, 177, 107, 0.3) 100%) !important;
    color: white !important;
    border-color: rgba(61, 177, 107, 0.4) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .layout .content .chat .chat-body .messages .message-item:not(.outgoing-message):not(.systemMessage) .message-content,
    .layout .content .chat .chat-body .messages .message-item.outgoing-message .message-content {
        max-width: 85% !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
        border-radius: 16px 16px 16px 4px !important;
    }

    .layout .content .chat .chat-body .messages .message-item.outgoing-message .message-content {
        border-radius: 16px 16px 4px 16px !important;
    }
}

/* ============================================
   Chat Footer - No Takeover Section (Konuşmayı Devral/Boşalt)
   Modern ve Teknolojik Tasarım
   ============================================ */

/* No Takeover Footer Container */
.chat-footer#notakeover {
    background: linear-gradient(135deg, #2c2f3d 0%, #1f222d 100%);
    border-top: 2px solid rgba(61, 177, 107, 0.3);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    padding: 30px 20px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    overflow: hidden;
}

    .chat-footer#notakeover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, #3db16b 50%, transparent 100%);
        animation: shimmer 3s ease-in-out infinite;
    }

@keyframes shimmer {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* Takeover Button Container */
#btnTakeOver {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    position: relative;
}

/* Takeover Message Text */
#pTakeOver {
    color: #e9ecef;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    margin: 0;
    padding: 15px 25px;
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.1) 0%, rgba(101, 217, 147, 0.05) 100%);
    border: 1px solid rgba(61, 177, 107, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

    #pTakeOver::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(61, 177, 107, 0.1) 0%, transparent 70%);
        animation: pulse 3s ease-in-out infinite;
    }

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Takeover Button Wrapper */
#pTakeOverBtn {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Takeover Buttons - Modern Design */
#pTakeOverBtnTxt,
.chat-footer#notakeover #pTakeOverBtn button {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%) !important;
    border: none !important;
    color: white !important;
    padding: 16px 40px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(61, 177, 107, 0.4), 0 2px 8px rgba(101, 217, 147, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-width: 220px !important;
}

    #pTakeOverBtnTxt::before,
    .chat-footer#notakeover #pTakeOverBtn button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.5s ease;
    }

    #pTakeOverBtnTxt:hover::before,
    .chat-footer#notakeover #pTakeOverBtn button:hover::before {
        left: 100%;
    }

    #pTakeOverBtnTxt:hover,
    .chat-footer#notakeover #pTakeOverBtn button:hover {
        transform: translateY(-4px) scale(1.02) !important;
        box-shadow: 0 8px 30px rgba(61, 177, 107, 0.5), 0 4px 12px rgba(101, 217, 147, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        background: linear-gradient(135deg, #65d993 0%, #3db16b 100%) !important;
    }

    #pTakeOverBtnTxt:active,
    .chat-footer#notakeover #pTakeOverBtn button:active {
        transform: translateY(-2px) scale(0.98) !important;
        box-shadow: 0 4px 15px rgba(61, 177, 107, 0.4) !important;
    }

    /* Danger Button (Boşalt) */
    #pTakeOverBtnTxt.btn-danger,
    .chat-footer#notakeover #pTakeOverBtn button.btn-danger {
        background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
        box-shadow: 0 6px 20px rgba(229, 62, 62, 0.4), 0 2px 8px rgba(197, 48, 48, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }

        #pTakeOverBtnTxt.btn-danger:hover,
        .chat-footer#notakeover #pTakeOverBtn button.btn-danger:hover {
            background: linear-gradient(135deg, #c53030 0%, #e53e3e 100%) !important;
            box-shadow: 0 8px 30px rgba(229, 62, 62, 0.5), 0 4px 12px rgba(197, 48, 48, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        }

    /* Primary Button (Devral) */
    #pTakeOverBtnTxt.btn-primary,
    .chat-footer#notakeover #pTakeOverBtn button.btn-primary {
        background: linear-gradient(135deg, #3db16b 0%, #65d993 100%) !important;
    }

/* Devri Bırak Tab Link - Modern Design */
.chat-footer#takeovered .nav-tabs .nav-item#_NOTAKEOVER .nav-link {
    background: linear-gradient(135deg, rgba(229, 62, 62, 0.15) 0%, rgba(197, 48, 48, 0.1) 100%) !important;
    border: 1px solid rgba(229, 62, 62, 0.3) !important;
    color: #fca5a5 !important;
    position: relative;
    overflow: hidden;
}

    .chat-footer#takeovered .nav-tabs .nav-item#_NOTAKEOVER .nav-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .chat-footer#takeovered .nav-tabs .nav-item#_NOTAKEOVER .nav-link:hover {
        background: linear-gradient(135deg, rgba(229, 62, 62, 0.25) 0%, rgba(197, 48, 48, 0.2) 100%) !important;
    }

/* ============================================
   LOADING OVERLAY - ac-wrapper ve acwrapperx
   Merkeze hizalı, üstte görünen loading
   ============================================ */

#ac-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
}

    #ac-wrapper[style*="display: block"],
    #ac-wrapper[style*="display:flex"] {
        display: flex !important;
    }

    #ac-wrapper #popup {
        width: min-content !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    #ac-wrapper .spinner-border {
        width: 3rem !important;
        height: 3rem !important;
        border-width: 0.3em !important;
    }

#acwrapperx {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 900 !important;
    align-items: center !important;
    justify-content: center !important;
}

    #acwrapperx[style*="display: block"],
    #acwrapperx[style*="display:flex"] {
        display: flex !important;
    }

    #acwrapperx #popup {
        width: min-content !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    #acwrapperx .spinner-border {
        width: 3rem !important;
        height: 3rem !important;
        border-width: 0.3em !important;
        border-color: rgba(229, 62, 62, 0.5) !important;
        color: #ffffff !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
    }

.chat-footer#takeovered .nav-tabs .nav-item#_NOTAKEOVER .nav-link:hover::before {
    left: 100%;
}

.chat-footer#takeovered .nav-tabs .nav-item#_NOTAKEOVER .nav-link.active {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
    color: white !important;
    border-color: #e53e3e !important;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.4);
}

.chat-footer#takeovered .nav-tabs .nav-item#_NOTAKEOVER .nav-link i {
    animation: shake 2s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    #pTakeOverBtnTxt,
    .chat-footer#notakeover #pTakeOverBtn button {
        min-width: 180px !important;
        padding: 14px 30px !important;
        font-size: 14px !important;
    }

    #pTakeOver {
        font-size: 13px;
        padding: 12px 20px;
    }
}

/* ============================================
   DASHBOARD MODERN - Livescreen Tarzı Tasarım
   ============================================ */

.dashboard-modern {
    background: linear-gradient(135deg, #3a3f51 0%, #585d6f 100%);
    height: 100vh;
    position: absolute;
    top: 0;
    left: 70px;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 30px;
    color: #e9ecef;
    box-sizing: border-box;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}

/* Dashboard için content ve layout scroll fix */
.content .dashboard-modern,
.layout .content .dashboard-modern {
    position: fixed !important;
    top: 0 !important;
    left: 70px !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 30px !important;
    z-index: 1 !important;
}

/* Content container'ının scroll'u engellememesi için */
.content:has(.dashboard-modern),
.layout .content:has(.dashboard-modern),
.layout:has(.dashboard-modern) .content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* :has() desteklenmeyen tarayıcılar için fallback */
@supports not selector(:has(*)) {
    .content .dashboard-modern {
        position: fixed !important;
    }
}

.dashboard-header-section {
    margin-bottom: 30px;
}

.dashboard-title-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 25px;
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(61, 177, 107, 0.3);
}

.dashboard-icon-circle {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

    .dashboard-icon-circle i {
        font-size: 36px;
        color: white;
    }

.dashboard-title-content {
    flex: 1;
}

.dashboard-main-title {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.dashboard-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin: 0;
    font-weight: 400;
}

.dashboard-user-card {
    background: linear-gradient(135deg, #3a3f51 0%, #1f222d 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(61, 177, 107, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.user-card-avatar {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: white;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
}

.user-card-info {
    flex: 1;
}

.user-card-name {
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.user-card-server {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin: 0;
}

    .user-card-server i {
        color: #3db16b;
        margin-right: 8px;
    }

.user-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-action-btn,
.user-action-select {
    background: rgba(58, 63, 81, 0.8);
    border: 2px solid rgba(61, 177, 107, 0.4);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

    .user-action-btn:hover {
        background: rgba(61, 177, 107, 0.3);
        border-color: rgba(61, 177, 107, 0.6);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        color: white;
        text-decoration: none;
    }

.dashboard-stats-section {
    margin-bottom: 30px;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.stat-card {
    background: linear-gradient(135deg, #3a3f51 0%, #1f222d 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(61, 177, 107, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }

.stat-card-primary {
    border-left: 4px solid #3db16b;
}

.stat-card-success {
    border-left: 4px solid #0abb87;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.stat-card-primary .stat-icon {
    background: linear-gradient(135deg, #3db16b 0%, #65d993 100%);
}

.stat-card-success .stat-icon {
    background: linear-gradient(135deg, #0abb87 0%, #32e3af 100%);
}

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: 18px;
    font-weight: 600;
    color: #e9ecef;
    margin-bottom: 4px;
}

.stat-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.dashboard-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.dashboard-main-panel,
.dashboard-side-panel {
    background: linear-gradient(135deg, #3a3f51 0%, #1f222d 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(61, 177, 107, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.panel-header {
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.2) 0%, rgba(101, 217, 147, 0.15) 100%);
    padding: 20px 25px;
    border-bottom: 1px solid rgba(61, 177, 107, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .panel-header h3 {
        color: white;
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .panel-header h3 i {
            color: #3db16b;
            font-size: 24px;
        }

.panel-body {
    padding: 25px;
    background: transparent;
}

.dashboard-menu-section {
    margin-top: 30px;
}

.section-header {
    margin-bottom: 25px;
    text-align: center;
}

    .section-header h2 {
        color: white;
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 8px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

        .section-header h2 i {
            color: #3db16b;
        }

    .section-header p {
        color: rgba(255, 255, 255, 0.7);
        font-size: 16px;
        margin: 0;
    }

.dashboard-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.menu-card {
    background: linear-gradient(135deg, #3a3f51 0%, #1f222d 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    border: 1px solid rgba(61, 177, 107, 0.25);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .menu-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(61, 177, 107, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .menu-card:hover::before {
        left: 100%;
    }

    .menu-card:hover {
        border-color: rgba(61, 177, 107, 0.5);
        box-shadow: 0 10px 32px rgba(61, 177, 107, 0.35);
        transform: translateY(-4px) scale(1.02);
        background: linear-gradient(135deg, rgba(70, 75, 95, 0.98) 0%, rgba(88, 93, 111, 0.98) 100%);
    }

.menu-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.2) 0%, rgba(101, 217, 147, 0.15) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: rgba(61, 177, 107, 0.8);
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.menu-card:hover .menu-icon {
    background: linear-gradient(135deg, rgba(61, 177, 107, 0.4) 0%, rgba(101, 217, 147, 0.3) 100%);
    color: #3db16b;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 4px 12px rgba(61, 177, 107, 0.5);
}

.menu-icon.colored {
    color: #3db16b;
}

.menu-card:hover .menu-icon.colored {
    color: #65d993;
}

.menu-card h6 {
    color: #e9ecef;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    position: relative;
    z-index: 1;
}

.menu-card:hover h6 {
    color: #ffffff;
}

.menu-info {
    color: rgba(61, 177, 107, 0.9);
    font-size: 13px;
    margin: 0 0 18px 0;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.menu-card:hover .menu-info {
    color: #3db16b;
}

.menu-btn {
    background: rgba(61, 177, 107, 0.2);
    border: 2px solid rgba(61, 177, 107, 0.4);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

    .menu-btn:hover {
        background: rgba(61, 177, 107, 0.4);
        border-color: rgba(61, 177, 107, 0.6);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(61, 177, 107, 0.4);
        color: white;
        text-decoration: none;
    }

@media (max-width: 1200px) {
    .dashboard-content-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   DASHBOARD RESPONSIVE - Çözünürlüğe Göre Ayarlar
   ============================================ */

/* 1920px ve altı - Orta boyut ayarları */
@media (max-width: 1920px) {
    .dashboard-modern {
        padding: 20px !important;
    }

    .dashboard-title-wrapper {
        padding: 20px !important;
        gap: 15px !important;
    }

    .dashboard-icon-circle {
        width: 60px !important;
        height: 60px !important;
    }

        .dashboard-icon-circle i {
            font-size: 28px !important;
        }

    .dashboard-main-title {
        font-size: 24px !important;
    }

    .dashboard-subtitle {
        font-size: 14px !important;
    }

    .dashboard-user-card {
        padding: 18px !important;
    }

    .user-card-avatar {
        width: 55px !important;
        height: 55px !important;
        font-size: 22px !important;
    }

    .stat-card {
        padding: 15px !important;
    }

    .stat-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 20px !important;
    }

    .stat-label {
        font-size: 14px !important;
    }

    .stat-description {
        font-size: 12px !important;
    }

    .dashboard-content-grid {
        gap: 20px !important;
    }

    .dashboard-main-panel,
    .dashboard-side-panel {
        padding: 18px !important;
    }

    .panel-header h3 {
        font-size: 18px !important;
    }

    .menu-card {
        padding: 20px 15px !important;
        min-height: 160px !important;
    }

    .menu-icon {
        width: 55px !important;
        height: 55px !important;
        font-size: 26px !important;
        margin-bottom: 15px !important;
    }

    .menu-card h6 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    .menu-info {
        font-size: 12px !important;
        margin-bottom: 15px !important;
    }

    .menu-btn {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
}

/* 1600px ve altı - Küçük boyut ayarları */
@media (max-width: 1600px) {
    .dashboard-modern {
        padding: 15px !important;
    }

    .dashboard-title-wrapper {
        padding: 18px !important;
        gap: 12px !important;
    }

    .dashboard-icon-circle {
        width: 55px !important;
        height: 55px !important;
    }

        .dashboard-icon-circle i {
            font-size: 24px !important;
        }

    .dashboard-main-title {
        font-size: 22px !important;
    }

    .dashboard-subtitle {
        font-size: 13px !important;
    }

    .dashboard-header-section {
        margin-bottom: 20px !important;
    }

    .dashboard-user-card {
        padding: 15px !important;
        gap: 12px !important;
    }

    .user-card-avatar {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }

    .user-card-name {
        font-size: 16px !important;
    }

    .user-card-server {
        font-size: 12px !important;
    }

    .dashboard-stats-grid {
        gap: 12px !important;
    }

    .stat-card {
        padding: 12px !important;
        gap: 12px !important;
    }

    .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    .stat-label {
        font-size: 13px !important;
    }

    .stat-description {
        font-size: 11px !important;
    }

    .dashboard-content-grid {
        gap: 15px !important;
        grid-template-columns: 1.5fr 1fr !important;
    }

    .dashboard-main-panel,
    .dashboard-side-panel {
        padding: 15px !important;
    }

    .panel-header {
        margin-bottom: 15px !important;
    }

        .panel-header h3 {
            font-size: 16px !important;
        }

    .dashboard-menu-grid {
        gap: 12px !important;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }

    .menu-card {
        padding: 18px 12px !important;
        min-height: 150px !important;
    }

    .menu-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .menu-card h6 {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }

    .menu-info {
        font-size: 11px !important;
        margin-bottom: 12px !important;
    }

    .menu-btn {
        padding: 9px 16px !important;
        font-size: 12px !important;
    }
}

/* 1366px ve altı - Çok küçük boyut ayarları */
@media (max-width: 1366px) {
    .dashboard-modern {
        padding: 12px !important;
    }

    .dashboard-title-wrapper {
        padding: 15px !important;
        gap: 10px !important;
    }

    .dashboard-icon-circle {
        width: 50px !important;
        height: 50px !important;
    }

        .dashboard-icon-circle i {
            font-size: 22px !important;
        }

    .dashboard-main-title {
        font-size: 20px !important;
    }

    .dashboard-subtitle {
        font-size: 12px !important;
    }

    .dashboard-header-section {
        margin-bottom: 15px !important;
    }

    .dashboard-user-card {
        padding: 12px !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .user-card-avatar {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }

    .user-card-name {
        font-size: 15px !important;
    }

    .user-card-server {
        font-size: 11px !important;
    }

    .user-action-select,
    .user-action-btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    .dashboard-stats-grid {
        gap: 10px !important;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }

    .stat-card {
        padding: 10px !important;
        gap: 10px !important;
    }

    .stat-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }

    .stat-label {
        font-size: 12px !important;
    }

    .stat-description {
        font-size: 10px !important;
    }

    .dashboard-content-grid {
        gap: 12px !important;
        grid-template-columns: 1fr !important;
    }

    .dashboard-main-panel,
    .dashboard-side-panel {
        padding: 12px !important;
    }

    .panel-header {
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }

        .panel-header h3 {
            font-size: 15px !important;
        }

    .dashboard-menu-grid {
        gap: 10px !important;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    }

    .menu-card {
        padding: 15px 10px !important;
        min-height: 140px !important;
    }

    .menu-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }

    .menu-card h6 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .menu-info {
        font-size: 10px !important;
        margin-bottom: 10px !important;
    }

    .menu-btn {
        padding: 8px 14px !important;
        font-size: 11px !important;
    }
}

/* ============================================
   NEW CUSTOMER ANIMATION - Yeni Müşteri Animasyonu
   Sadece yeni eklenen customerlar için sarı pulse
   ============================================ */
@keyframes newCustomerPulse {
    0% {
        background-color: rgba(255, 193, 7, 0.4);
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.6);
    }
    50% {
        background-color: rgba(255, 193, 7, 0.6);
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.8);
    }
    100% {
        background-color: rgba(255, 193, 7, 0.2);
        box-shadow: 0 0 5px rgba(255, 193, 7, 0.3);
    }
}

/* Yeni müşteri item için animasyon - sadece new-customer-item class'ı olanlar için */
.sidebar-body .list-group-item.new-customer-item,
.modern-chat-list .list-group-item.new-customer-item {
    animation: newCustomerPulse 2s ease-out;
}

/* ============================================
   RESPONSIVE DESIGN - CHAT VE SIDEBAR OPTİMİZASYONU
   ============================================ */

/* 1920px ve altı - Tüm yazılımı %75 ölçekle */
@media (max-width: 1920px) {
    html {
        transform: scale(0.75);
        transform-origin: top left;
        width: 133.333vw;
        height: 133.333vh;
    }

    body {
        width: 133.333vw;
        height: 133.333vh;
        overflow: hidden;
    }

    .layout {
        width: 100%;
        height: 100%;
    }

    /* Dashboard için özel düzenleme - scale'den etkilenmemesi için */
    .dashboard-modern {
        height: 133.333vh !important;
        min-height: 133.333vh !important;
    }

    .content .dashboard-modern,
    .layout .content .dashboard-modern {
        height: 133.333vh !important;
        min-height: 133.333vh !important;
        bottom: 0 !important;
    }

    /* MediaList sayfası için özel düzenleme - scroll sorununu çözmek için */
    body:has(.content.col-md-12 .container-fluid.container-fixed-lg) {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    body:has(.content.col-md-12 .container-fluid.container-fixed-lg):not(.form-membership) {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .content.col-md-12:has(.container-fluid.container-fixed-lg) {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .content.col-md-12:has(.container-fluid.container-fixed-lg) .tab-content {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    .content.col-md-12:has(.container-fluid.container-fixed-lg) .tab-content .tab-pane {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    .content.col-md-12:has(.container-fluid.container-fixed-lg) .tab-content .tab-pane .tab-content {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    .layout .content:has(.container-fluid.container-fixed-lg) {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Posts sayfası için özel düzenleme - scroll sorununu çözmek için */
    body:has(.col-md-12 .container-fluid.container-fixed-lg) {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    body:has(.col-md-12 .container-fluid.container-fixed-lg):not(.form-membership) {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .col-md-12:has(.container-fluid.container-fixed-lg) {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .col-md-12:has(.container-fluid.container-fixed-lg) .tab-content {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    .col-md-12:has(.container-fluid.container-fixed-lg) .tab-content .tab-pane {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    .col-md-12:has(.container-fluid.container-fixed-lg) .tab-content .tab-pane .tab-content {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
}

/* 1600px ve altı - Tüm yazılımı %70 ölçekle */
@media (max-width: 1600px) {
    html {
        transform: scale(0.70);
        transform-origin: top left;
        width: 142.857vw;
        height: 142.857vh;
    }

    body {
        width: 142.857vw;
        height: 142.857vh;
        overflow: hidden;
    }

    .layout {
        width: 100%;
        height: 100%;
    }
}

/* 1280px ve altı - Tüm yazılımı %65 ölçekle */
@media (max-width: 1280px) {
    html {
        transform: scale(0.65);
        transform-origin: top left;
        width: 153.846vw;
        height: 153.846vh;
    }

    body {
        width: 153.846vw;
        height: 153.846vh;
        overflow: hidden;
    }

    .layout {
        width: 100%;
        height: 100%;
    }
}

/* 1024px ve altı - Tüm yazılımı %60 ölçekle */
@media (max-width: 1024px) {
    html {
        transform: scale(0.60);
        transform-origin: top left;
        width: 166.667vw;
        height: 166.667vh;
    }

    body {
        width: 166.667vw;
        height: 166.667vh;
        overflow: hidden;
    }

    .layout {
        width: 100%;
        height: 100%;
    }
}

/* 768px ve altı - Mobil */
@media (max-width: 768px) {
    .dashboard-modern {
        padding: 10px !important;
        left: 0 !important;
    }

    .content .dashboard-modern,
    .layout .content .dashboard-modern {
        left: 0 !important;
    }

    .dashboard-title-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 12px !important;
    }

    .dashboard-user-card {
        flex-direction: column;
        text-align: center;
        padding: 10px !important;
    }

    .dashboard-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-content-grid {
        grid-template-columns: 1fr !important;
    }

    .dashboard-menu-grid {
        grid-template-columns: 1fr !important;
    }

    .menu-card {
        min-height: auto !important;
    }
}

/* Chat Input Text Color Override - Dark Themes (White Text) */
/* Direkt ID ve class ile hedefle - en yüksek öncelik */
#txtMessage,
#txtMessage.modern-textarea,
.chat-footer #txtMessage,
.chat-footer .tab-content #txtMessage,
.chat-footer .tab-content .modern-textarea,
.chat-footer .tab-content textarea.modern-textarea,
.layout .content .chat .chat-footer #txtMessage,
.layout .content .chat .chat-footer .tab-content #txtMessage,
.layout .content .chat .chat-footer .tab-content .modern-textarea,
.layout .content .chat .chat-footer .tab-content textarea.modern-textarea,
body.dark #txtMessage,
body.dark #txtMessage.modern-textarea,
body.dark .chat-footer #txtMessage,
body.dark .chat-footer .tab-content #txtMessage,
body.dark .chat-footer .tab-content .modern-textarea,
body.dark .chat-footer .tab-content textarea.modern-textarea,
body.dark .layout .content .chat .chat-footer #txtMessage,
body.dark .layout .content .chat .chat-footer .tab-content #txtMessage,
body.dark .layout .content .chat .chat-footer .tab-content .modern-textarea,
body.dark .layout .content .chat .chat-footer .tab-content textarea.modern-textarea {
    color: #ffffff !important;
}

#txtMessage::-webkit-input-placeholder,
#txtMessage.modern-textarea::-webkit-input-placeholder,
.chat-footer #txtMessage::-webkit-input-placeholder,
.chat-footer .tab-content #txtMessage::-webkit-input-placeholder,
.chat-footer .tab-content .modern-textarea::-webkit-input-placeholder,
.chat-footer .tab-content textarea.modern-textarea::-webkit-input-placeholder,
.layout .content .chat .chat-footer #txtMessage::-webkit-input-placeholder,
.layout .content .chat .chat-footer .tab-content #txtMessage::-webkit-input-placeholder,
.layout .content .chat .chat-footer .tab-content .modern-textarea::-webkit-input-placeholder,
.layout .content .chat .chat-footer .tab-content textarea.modern-textarea::-webkit-input-placeholder,
body.dark #txtMessage::-webkit-input-placeholder,
body.dark #txtMessage.modern-textarea::-webkit-input-placeholder,
body.dark .chat-footer #txtMessage::-webkit-input-placeholder,
body.dark .chat-footer .tab-content #txtMessage::-webkit-input-placeholder,
body.dark .chat-footer .tab-content .modern-textarea::-webkit-input-placeholder,
body.dark .chat-footer .tab-content textarea.modern-textarea::-webkit-input-placeholder,
body.dark .layout .content .chat .chat-footer #txtMessage::-webkit-input-placeholder,
body.dark .layout .content .chat .chat-footer .tab-content #txtMessage::-webkit-input-placeholder,
body.dark .layout .content .chat .chat-footer .tab-content .modern-textarea::-webkit-input-placeholder,
body.dark .layout .content .chat .chat-footer .tab-content textarea.modern-textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

#txtMessage::-moz-placeholder,
#txtMessage.modern-textarea::-moz-placeholder,
.chat-footer #txtMessage::-moz-placeholder,
.chat-footer .tab-content #txtMessage::-moz-placeholder,
.chat-footer .tab-content .modern-textarea::-moz-placeholder,
.chat-footer .tab-content textarea.modern-textarea::-moz-placeholder,
.layout .content .chat .chat-footer #txtMessage::-moz-placeholder,
.layout .content .chat .chat-footer .tab-content #txtMessage::-moz-placeholder,
.layout .content .chat .chat-footer .tab-content .modern-textarea::-moz-placeholder,
.layout .content .chat .chat-footer .tab-content textarea.modern-textarea::-moz-placeholder,
body.dark #txtMessage::-moz-placeholder,
body.dark #txtMessage.modern-textarea::-moz-placeholder,
body.dark .chat-footer #txtMessage::-moz-placeholder,
body.dark .chat-footer .tab-content #txtMessage::-moz-placeholder,
body.dark .chat-footer .tab-content .modern-textarea::-moz-placeholder,
body.dark .chat-footer .tab-content textarea.modern-textarea::-moz-placeholder,
body.dark .layout .content .chat .chat-footer #txtMessage::-moz-placeholder,
body.dark .layout .content .chat .chat-footer .tab-content #txtMessage::-moz-placeholder,
body.dark .layout .content .chat .chat-footer .tab-content .modern-textarea::-moz-placeholder,
body.dark .layout .content .chat .chat-footer .tab-content textarea.modern-textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

#txtMessage::-ms-input-placeholder,
#txtMessage.modern-textarea::-ms-input-placeholder,
.chat-footer #txtMessage::-ms-input-placeholder,
.chat-footer .tab-content #txtMessage::-ms-input-placeholder,
.chat-footer .tab-content .modern-textarea::-ms-input-placeholder,
.chat-footer .tab-content textarea.modern-textarea::-ms-input-placeholder,
.layout .content .chat .chat-footer #txtMessage::-ms-input-placeholder,
.layout .content .chat .chat-footer .tab-content #txtMessage::-ms-input-placeholder,
.layout .content .chat .chat-footer .tab-content .modern-textarea::-ms-input-placeholder,
.layout .content .chat .chat-footer .tab-content textarea.modern-textarea::-ms-input-placeholder,
body.dark #txtMessage::-ms-input-placeholder,
body.dark #txtMessage.modern-textarea::-ms-input-placeholder,
body.dark .chat-footer #txtMessage::-ms-input-placeholder,
body.dark .chat-footer .tab-content #txtMessage::-ms-input-placeholder,
body.dark .chat-footer .tab-content .modern-textarea::-ms-input-placeholder,
body.dark .chat-footer .tab-content textarea.modern-textarea::-ms-input-placeholder,
body.dark .layout .content .chat .chat-footer #txtMessage::-ms-input-placeholder,
body.dark .layout .content .chat .chat-footer .tab-content #txtMessage::-ms-input-placeholder,
body.dark .layout .content .chat .chat-footer .tab-content .modern-textarea::-ms-input-placeholder,
body.dark .layout .content .chat .chat-footer .tab-content textarea.modern-textarea::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

#txtMessage::placeholder,
#txtMessage.modern-textarea::placeholder,
.chat-footer #txtMessage::placeholder,
.chat-footer .tab-content #txtMessage::placeholder,
.chat-footer .tab-content .modern-textarea::placeholder,
.chat-footer .tab-content textarea.modern-textarea::placeholder,
.layout .content .chat .chat-footer #txtMessage::placeholder,
.layout .content .chat .chat-footer .tab-content #txtMessage::placeholder,
.layout .content .chat .chat-footer .tab-content .modern-textarea::placeholder,
.layout .content .chat .chat-footer .tab-content textarea.modern-textarea::placeholder,
body.dark #txtMessage::placeholder,
body.dark #txtMessage.modern-textarea::placeholder,
body.dark .chat-footer #txtMessage::placeholder,
body.dark .chat-footer .tab-content #txtMessage::placeholder,
body.dark .chat-footer .tab-content .modern-textarea::placeholder,
body.dark .chat-footer .tab-content textarea.modern-textarea::placeholder,
body.dark .layout .content .chat .chat-footer #txtMessage::placeholder,
body.dark .layout .content .chat .chat-footer .tab-content #txtMessage::placeholder,
body.dark .layout .content .chat .chat-footer .tab-content .modern-textarea::placeholder,
body.dark .layout .content .chat .chat-footer .tab-content textarea.modern-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}